/* FLOWDOWNLOADS */
.seperator {
  border-bottom: 1px dotted #999999;
  margin-bottom: 10px;
  margin-top: 5px;
}

.category_filter {
  margin-bottom: 30px;
}

.category_filter .seperator {
  border: none;
}

.sub_title {
  padding-bottom: 20px;
}

.flowdownloads-container .item_content ul {
  margin: 0 0 15px 0;
}

.flowdownloads-readmore {
  float: right;
}

.clr {
  clear: both;
}

.reference .flowdownloads-readmore {
  float: left;
  margin-right: 10px;
}

.btn_download {
  margin: 10px 0;
}

.btn_download > a,
a.modflowdownloadsDownloadButton {
  color: #fff;
  padding: 6px 10px;
  background: #336699;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  text-decoration: none;
}

.btn_download > a:hover,
.btn_download > a:focus,
.btn_download > a:active,
a.modflowdownloadsDownloadButton:hover,
a.modflowdownloadsDownloadButton:focus,
a.modflowdownloadsDownloadButton:active {
  color: #fff;
  text-decoration: none;
}

.btn_download .flowdownloads-readmore {
  float: none;
}

.flowdownloads-pages-counter {
  display: inline-block;
  float: left;
}

.flowdownloads-pagination {
  display: inline-block;
  float: right;
}

.flowdownloads-pagination > ul {
  list-style: none;
  margin: 10px 0;
}

.flowdownloads-pagination > ul li {
  display: inline;
  margin: 0 5px;
  float: left;
}

.flowdownloads-pagination > ul li.disabled {
  display: none;
}

.flowdownloads-pagination > ul > li:before {
  content: none !important; /* Overrides enthusiastic templates */
}

/* module */
.mod_flowdownloads ul {
  margin: 0;
  list-style: none;
}

.mod_flowdownloads ul li {
  padding: 5px 0;
  margin: 0;
  border-bottom: 1px dotted #999999;
}

/*===============================
=            COLUMNS            =
===============================*/

.flowdownloads-container .columns-2 div.column,
.flowdownloads-container .columns-3 div.column,
.flowdownloads-container .columns-4 div.column,
.flowdownloads-container .columns-5 div.column,
.flowdownloads-container .columns-6 div.column,
.flowdownloads-container .columns-7 div.column,
.flowdownloads-container .columns-8 div.column {
  display: block;
  float: left;
  padding-right: 10px;
  box-sizing: border-box;
}

.flowdownloads-container .columns-2 div.column {
  width: 50%;
}

.flowdownloads-container .columns-3 div.column {
  width: 33.3333%;
}

.flowdownloads-container .columns-4 div.column {
  width: 25%;
}

.flowdownloads-container .columns-5 div.column {
  width: 20%;
}

.flowdownloads-container .columns-6 div.column {
  width: 16.6666666667%;
}

.flowdownloads-container .columns-7 div.column {
  width: 14.2857142857%;
}

.flowdownloads-container .columns-8 div.column {
  width: 12.5%;
}


/*=====  End of COLUMNS  ======*/


.osd-alert {
  background: #fff1f0;
  border: 1px solid rgba(216, 80, 48, 0.2);
  color: #d85030;
  padding: 15px;
}

/************ Reveal Modals *************/
.reveal-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  z-index: 999998;
  display: none;
  top: 0;
  left: 0;
}

/*
 * @fork Phase 6 - the modal is centred with a transform instead of a hand-computed
 *       negative margin, and it is allowed to be narrower than its nominal width.
 *
 *       WHAT WAS WRONG. Every size was `width: Npx; margin-left: -Mpx`, where M was
 *       half the width PLUS the 40px horizontal padding - correct arithmetic under
 *       `box-sizing: content-box`, which is what this stylesheet was written for.
 *       Every modern site template sets `border-box` globally, and under that the
 *       padding is already inside `width`, so M is 40px too large and EVERY ONE of
 *       the five sizes sat 40px left of centre. Nothing in the file set box-sizing
 *       either way, so the layout depended on whatever the host template happened
 *       to do. `translateX(-50%)` is half of the element's OWN rendered width, so it
 *       centres under either box model and needs no number kept in sync with the
 *       padding.
 *
 *       `position: absolute` and the `top` value STAY. The reveal script reads
 *       `top` as a number and animates it against `$(document).scrollTop()`, so a
 *       switch to `position: fixed` would put the modal off-screen on a scrolled
 *       page. jQuery never touches `transform`, so the horizontal fix and the
 *       script's vertical animation do not interact.
 *
 *       The gloss background is gone: a 2.9KB PNG of a white gradient, positioned
 *       at -200px -80px so most of it was outside the box anyway.
 */
.flowdownloads-modal {
  visibility: hidden;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: 520px;
  max-width: calc(100vw - 2rem);
  background: #eee;
  position: absolute;
  z-index: 999999;
  padding: 30px 40px 34px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  overflow-y: auto;
  word-wrap: break-word;
  line-height: 1.5;
  max-height: calc(100vh - 4rem);
}

/*
 * Content must not be able to force the box wider than the viewport, or to
 * introduce a scrollbar simply by being a normal-sized image. An unconstrained
 * <img> was exactly how a site logo ended up overflowing a 520px modal.
 */
.flowdownloads-modal img,
.flowdownloads-modal video,
.flowdownloads-modal table {
  max-width: 100%;
  height: auto;
}

.flowdownloads-modal.small {
  width: 200px;
}

.flowdownloads-modal.medium {
  width: 400px;
}

.flowdownloads-modal.large {
  width: 600px;
}

.flowdownloads-modal.xlarge {
  width: 800px;
}

/* On a phone the padding is a third of the width. Give the content room. */
@media (max-width: 600px) {
  .flowdownloads-modal {
    padding: 24px 16px 20px;
    top: 40px;
  }
}

.flowdownloads-modal .close-reveal-modal {
  text-align: left;
  font-size: 22px;
  line-height: .5;
  position: absolute;
  top: 8px;
  right: 11px;
  color: #aaa;
  text-shadow: 0 -1px 1px rbga(0, 0, 0, .6);
  font-weight: bold;
  cursor: pointer;
}

/*
 * @fork Phase 6 - the iframe had a width but no height, so the download response
 *       rendered into a box of whatever height the browser guessed. It carries the
 *       item view, not a file stream (Controller\Site::routedownload sets
 *       view=item), so it needs real room.
 */
.flowdownloads-modal iframe {
  border: 0;
  width: 100%;
  max-width: 100%;
  min-height: 220px;
}

.flowdownloads-modal .error {
  font-style: italic;
  color: #d85030;
}

.flowdownloads-modal label.error {
}

.flowdownloads-modal label {
  width: 100%;
}

.flowdownloads-modal input {
  width: 100%;
}

.flowdownloads-modal h2 {
  margin-bottom: 30px;
}

.flowdownloads-modal input[type="checkbox"] {
  margin-right: 5px;
  margin-top: -2px;
  width: auto;
  height: auto;
}

.flowdownloads-modal .flowdownloads-header {
  padding-bottom: 18px;
}

.flowdownloads-group-agree {
  margin-top: 30px;
}

@media screen and (max-width: 320px) {
  .flowdownloads-modal {
    width: 280px !important;
    margin-left: -120px !important;
  }
}

@media screen and (max-width: 768px) {
  .flowdownloads-modal {
    width: 480px !important;
    margin-left: -280px !important;
  }
}

@media screen and (max-width: 580px) {
  .flowdownloads-modal {
    width: 380px !important;
    margin-left: -230px !important;
  }
}

@media screen and (max-width: 480px) {
  .flowdownloads-modal {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 5% !important;
  }
}

.flowdownloads-title-download a {
  float: none;
}

@media (max-width: 767px) {
  .flowdownloads-container .columns-2 div.column,
  .flowdownloads-container .columns-3 div.column,
  .flowdownloads-container .columns-4 div.column,
  .flowdownloads-container .columns-5 div.column,
  .flowdownloads-container .columns-6 div.column,
  .flowdownloads-container .columns-7 div.column,
  .flowdownloads-container .columns-8 div.column {
    width: 100%;
    float: none;
    padding-right: 0;
  }
}

/*
 * @fork Phase 6 - a held download. It must READ as unavailable rather than as a
 * button that failed to work: no pointer cursor, no hover affordance, muted.
 * The element is a span, not a disabled anchor, so there is nothing to click
 * and nothing for a keyboard to focus into.
 */
.flowdownloads-held {
  display: inline-block;
  cursor: default;
  opacity: .65;
  font-style: italic;
}

.flowdownloads-held:hover {
  opacity: .65;
}

/* ==========================================================================
 * D-P9 - the store pages: the browse grid, the card, and the product page.
 *
 * THE SKIN IS FLOWMEDIAMARKETING'S, READ FROM ITS COMPILED GANTRY CSS RATHER
 * THAN INVENTED - Roboto, #666 body on white, #4d4d4d headings, #bf383a accent
 * (#c94749 hover), 3px radii, #dddddd rules, #f2f2f2 surfaces. Small text sits
 * at #757575 and never lighter: #888888 on white is 3.5:1, which fails AA at
 * the 12-13px sizes it was being used at. The state colours are the site's own
 * alert tokens.
 *
 * ⚠ EVERYTHING HERE IS TOKENISED AT :root SO A SECOND SITE RESTYLES BY
 * OVERRIDING THE CUSTOM PROPERTIES, not by forking the rules. That is the
 * install-anywhere half of the same argument that gives the page named
 * sub-layouts: FMM-first, but never FMM-only.
 *
 * No Bootstrap, no framework, no web font loaded by us - the font stack falls
 * back to whatever the host template already serves.
 * ========================================================================== */

.flowdownloads-container {
  --fd-ink: #666666;
  --fd-ink-strong: #4d4d4d;
  --fd-ink-quiet: #757575;
  --fd-accent: #bf383a;
  --fd-accent-hover: #c94749;
  --fd-rule: #dddddd;
  --fd-surface: #f2f2f2;
  --fd-radius: 3px;
  --fd-gap: 24px;
  --fd-columns: 3;

  --fd-soon-bg: #fbe8cd;
  --fd-soon-ink: #7d5a29;
  --fd-held-bg: #f4cfce;
  --fd-held-ink: #712b29;
  --fd-ok: #468847;
}

/* ---------------------------------------------------------------- the grid */

.fd-grid {
  display: grid;
  grid-template-columns: repeat(var(--fd-columns), minmax(0, 1fr));
  gap: var(--fd-gap);
  margin: 0 0 var(--fd-gap);
}

/* Two breakpoints, and nothing hides at either - the card only reflows. */
@media (max-width: 1023px) {
  .fd-grid {
    grid-template-columns: repeat(min(2, var(--fd-columns)), minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .fd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fd-grid-related,
.fd-grid-module {
  --fd-gap: 16px;
}

.fd-browse-intro {
  margin-bottom: var(--fd-gap);
  color: var(--fd-ink);
}

.fd-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--fd-gap);
}

.fd-chip {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--fd-rule);
  border-radius: var(--fd-radius);
  font-size: 13px;
  color: var(--fd-ink-quiet);
  text-decoration: none;
}

.fd-chip:hover {
  border-color: var(--fd-accent);
  color: var(--fd-accent);
}

/* ---------------------------------------------------------------- the card */

.fd-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fd-rule);
  border-radius: var(--fd-radius);
  background: #ffffff;
  overflow: hidden;
}

.fd-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--fd-surface);
  overflow: hidden;
}

.fd-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * The drawn placeholder - see card.php for why no image file ships. It is the
 * product's initial on the site's own surface colour, which reads as "no image
 * yet" rather than as a broken one.
 */
.fd-card-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: #cccccc;
  user-select: none;
}

/*
 * ⚠ The ribbon occludes the image's top-left corner - the design checklist
 * flagged it and the admin field description tells operators to compose with
 * that corner clear. If a future image set cannot, this moves to the facts
 * strip; it does not get made transparent.
 */
.fd-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background: var(--fd-soon-bg);
  color: var(--fd-soon-ink);
  border-bottom-right-radius: var(--fd-radius);
}

.fd-state-held .fd-ribbon {
  background: var(--fd-held-bg);
  color: var(--fd-held-ink);
}

.fd-card-body {
  flex: 1 1 auto;
  padding: 16px;
}

.fd-card-title {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--fd-ink-strong);
}

.fd-card-title a {
  color: inherit;
  text-decoration: none;
}

.fd-card-title a:hover {
  color: var(--fd-accent);
}

.fd-card-blurb {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fd-ink);
}

/* ------------------------------------------------------- the facts strip */

/*
 * The signature element. Quiet, factual badges in the same shape on the card,
 * in the header meta line and in the facts card - because the one thing this
 * store should be remembered for is that its numbers are real.
 */
.fd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fd-facts li {
  padding: 2px 8px;
  border: 1px solid var(--fd-rule);
  border-radius: var(--fd-radius);
  font-size: 12px;
  color: var(--fd-ink-quiet);
  background: #ffffff;
}

/* --------------------------------------------------------- card actions */

.fd-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 16px;
}

.fd-btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--fd-radius);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.fd-btn-primary {
  background: var(--fd-accent);
  border-color: var(--fd-accent);
  color: #ffffff;
}

.fd-btn-primary:hover {
  background: var(--fd-accent-hover);
  border-color: var(--fd-accent-hover);
  color: #ffffff;
}

.fd-btn-outline {
  border-color: var(--fd-rule);
  color: var(--fd-ink);
  background: #ffffff;
}

.fd-btn-outline:hover {
  border-color: var(--fd-accent);
  color: var(--fd-accent);
}

/*
 * A state pill is NOT a disabled button. It has no pointer, no hover and
 * nothing to focus, because there is genuinely no action behind it - the
 * markup carries no route at all in any state but Available.
 */
.fd-pill {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--fd-radius);
  font-size: 14px;
  line-height: 1.2;
  cursor: default;
  background: var(--fd-surface);
  color: var(--fd-ink-quiet);
}

.fd-pill-coming_soon {
  background: var(--fd-soon-bg);
  color: var(--fd-soon-ink);
}

.fd-pill-held {
  background: var(--fd-held-bg);
  color: var(--fd-held-ink);
}

/* ------------------------------------------------------ the product page */

.fd-item-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  margin-bottom: 32px;
}

@media (max-width: 899px) {
  .fd-item-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

.fd-item-name {
  margin: 0 0 8px;
  color: var(--fd-ink-strong);
}

.fd-item-tagline {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--fd-ink);
}

.fd-item-meta {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--fd-ink-quiet);
}

.fd-item-note {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--fd-radius);
  font-size: 14px;
  background: var(--fd-soon-bg);
  color: var(--fd-soon-ink);
}

.fd-note-held {
  background: var(--fd-held-bg);
  color: var(--fd-held-ink);
}

.fd-cta-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fd-cta-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fd-item-hero {
  margin-bottom: 24px;
}

.fd-item-hero img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--fd-rule);
  border-radius: var(--fd-radius);
}

/* ----------------------------------------------------- the At a glance card */

.fd-facts-card {
  border: 1px solid var(--fd-rule);
  border-radius: var(--fd-radius);
  padding: 16px;
  background: #ffffff;
}

.fd-facts-card-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fd-ink-strong);
}

.fd-facts-list {
  margin: 0;
}

.fd-facts-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--fd-rule);
  font-size: 14px;
}

.fd-facts-row:last-child {
  border-bottom: 0;
}

.fd-facts-row dt {
  color: var(--fd-ink-quiet);
  font-weight: 400;
}

.fd-facts-row dd {
  margin: 0;
  color: var(--fd-ink-strong);
  text-align: right;
}

.fd-facts-checksum {
  margin-top: 12px;
  font-size: 13px;
  color: var(--fd-ink-quiet);
}

.fd-facts-checksum summary {
  cursor: pointer;
}

.fd-facts-checksum code {
  display: block;
  margin-top: 6px;
  padding: 8px;
  background: var(--fd-surface);
  border-radius: var(--fd-radius);
  font-size: 11px;
  word-break: break-all;
}

/* ------------------------------------------------------------- the panels */

.fd-item-panels {
  margin-bottom: 32px;
}

.fd-panel {
  padding: 16px 0;
  color: var(--fd-ink);
}

.fd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fd-gallery figure {
  margin: 0;
}

.fd-gallery img {
  width: 100%;
  height: auto;
  border: 1px solid var(--fd-rule);
  border-radius: var(--fd-radius);
}

.fd-gallery figcaption {
  margin-top: 6px;
  font-size: 13px;
  color: var(--fd-ink-quiet);
}

.fd-release {
  padding: 16px 0;
  border-bottom: 1px solid var(--fd-rule);
}

.fd-release:last-child {
  border-bottom: 0;
}

.fd-release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--fd-ink-strong);
}

.fd-release-date,
.fd-release-channel,
.fd-release-compat {
  font-size: 13px;
  font-weight: 400;
  color: var(--fd-ink-quiet);
}

.fd-release-notes h4 {
  margin: 12px 0 4px;
  font-size: 14px;
  color: var(--fd-ink-strong);
}

.fd-release-links {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--fd-ink-quiet);
}

.fd-release-checksum code {
  font-size: 11px;
  word-break: break-all;
}

/* ------------------------------------------------------------ the related */

.fd-related-title {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--fd-ink-strong);
}

/* -------------------------------------------------------- mobile sticky CTA */

/*
 * Once the header has scrolled away on a phone, the primary action follows the
 * reader down. It is the SAME element - no second button is emitted, so there
 * is still exactly one download route in the markup.
 */
@media (max-width: 639px) {
  .fd-item .fd-cta-primary {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 8px 0;
    background: #ffffff;
    box-shadow: 0 -1px 0 var(--fd-rule);
  }

  .fd-item .fd-cta-primary .flowdownloads-download-button,
  .fd-item .fd-cta-primary .fd-pill {
    display: block;
    text-align: center;
  }

  .fd-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .fd-card-actions .fd-btn,
  .fd-card-actions .fd-pill {
    text-align: center;
  }
}