/* DECAL QR Payments — static rebuild
   Colors/fonts/spacing pulled directly from the live site's own generated
   Elementor CSS (see _source/css/ and _source/content/00-site-map.md). */

/* ⚠ THERE IS DELIBERATELY NO @font-face FOR GILL SANS — do not add one.

   Live declares "Gill Sans", Sans-serif but serves no webfont for it, so on
   any machine without Gill Sans installed (i.e. every Windows visitor) live
   renders the sans-serif fallback. Declaring the same stack and self-hosting
   nothing reproduces live exactly for everyone: Mac visitors get real Gill
   Sans on both sites, Windows visitors get the fallback on both. Self-hosting
   it would make us differ FROM live, and Gill Sans is a commercial Monotype
   face we have no licence to serve anyway.

   An earlier build did carry a @font-face here pointing at
   "../fonts/Gill-Sans-1.ttf" — a file that was not a font at all but 52KB of
   the WordPress site's own HTML, saved with a .ttf extension during the
   original scrape. It failed to parse silently, so every Gill Sans rule fell
   back to Arial regardless. File deleted 2026-08-18.

   Roboto (non-slab) also had a @font-face here. Nothing on live uses plain
   Roboto, and after --font-small was retired nothing here does either, so it
   went with it. Roboto Slab below is real and is used for display headings. */
@font-face {
  font-family: "Roboto Slab";
  src: url("../fonts/robotoslab-bngmuxzytxpivibgjjsb6ufn5qu.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #38682A;   /* dark green: headings, hover states, primary buttons */
  --color-secondary: #8EB446; /* medium green: header/footer bars, buttons */
  --color-text: #4A4A4A;      /* body text gray */
  --color-accent: #EC5D00;    /* orange: link hover/active */
  --color-brown: #705E46;     /* footer background, "select your program" text */
  --color-orange2: #F58922;   /* QRWB page heading/eyebrow color, link hover */
  --color-red2: #E64C38;      /* C2Q page heading/eyebrow color */
  --color-cream: #FFF2D5;     /* light section backgrounds, popup */
  --color-white: #FFFFFF;

  /* ⚠ ELEMENTOR'S GLOBAL TYPOGRAPHY SLOT NAMES ARE MISLEADING — this cost a
     sitewide defect. Live's kit defines:

       primary   "Gill Sans"    18px normal   <- what live sets PROSE in
       accent    "Gill Sans"    18px normal
       secondary "Roboto Slab"  43px bold     <- the big page title
       text      "Roboto Slab"  26px bold     <- a HEADING style, despite the name

     The slot called "text" is NOT body text. An earlier version of this file
     mapped --font-body from it, so every paragraph on all five pages rendered
     in a slab serif at 16px where live renders Gill Sans at 18px — the single
     most visible difference on the site, spotted by David 2026-08-18.
     Verified against the build-time scrape in _source/css: live has always
     held these values, so this was our error, not a change on their side.

     Rule of thumb: read the slot's VALUES, never its name. */
  --font-primary: "Gill Sans", sans-serif;   /* prose, nav, buttons, labels — live's "primary" */
  --font-heading: "Roboto Slab", serif;      /* display headings only — live's "secondary" */
  --font-body: "Gill Sans", sans-serif;      /* same stack as --font-primary, kept as its own
                                                name because so many rules read it */

  --max-width: 1140px;
  --gutter: 20px;
  /* Horizontal inset that lands content on the centred --max-width column
     while letting a section's background stay full-bleed. Collapses to
     --gutter once the viewport is narrower than the column. */
  --side: max(var(--gutter), calc((100% - var(--max-width)) / 2));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.2;
  background: var(--color-white);
  font-size: 18px;
}
img { max-width: 100%; display: block; }
a { color: var(--color-secondary); text-decoration: none; }
a:hover { color: var(--color-orange2); }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* ---------- Header ----------
   Two bands, confirmed against the live site's actual rendered markup:
   1. site-header__top — white row: main logo (left) + partner logos in a cream box (right)
   2. site-header__bar — green band: support-hours line and nav menu side by side
      in ONE row (space-between), not stacked. */
.site-header__spacer {
  background: var(--color-secondary);
  height: 40px; /* empty full-bleed strip above the logo row, confirmed present
                   in the live site's own markup even though it holds no text */
}
.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  /* This element also carries .container in the markup. Override its
     max-width and padding so the logo lands on the shared column edge
     instead of being inset twice. */
  max-width: none;
  padding: 0 0 0 var(--side);
}
.site-header__top .logo img { width: 220px; max-width: 60vw; }
.partner-logos {
  background: var(--color-cream);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  /* The real header CSS gives this box an explicit width:40% — without it,
     the box just shrinks to fit its content instead of being wider than
     the logos, which is what leaves room for them to sit left-aligned
     with plain cream color filling the rest to the right. */
  width: 40%;
}
/* No breakout margin is needed any more. .site-header__top is max-width:none
   and justify-content:space-between, so this cream box already sits flush
   against the viewport's right edge. The previous calc(-50vw + …) pushed it
   past that edge and caused horizontal overflow. */
.partner-logos img { height: 44px; width: auto; }

.site-header__bar {
  background: var(--color-secondary);
  padding: 10px var(--side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.support-bar {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-body);
  /* 18px to match the nav links, at the department manager's request
     (David, 2026-08-17). Was 14px. The nav sits on the LEFT of this bar and
     this statement on the RIGHT — that swap is done in the page markup, not
     here, so the visual order and the reading order stay in agreement. */
  font-size: 18px;
  line-height: 1;
}

.main-nav { position: relative; }
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  display: block;
  padding: 12px 16px;
  font-family: var(--font-primary);
  /* White label, dark green on hover — read straight out of live's header
     template CSS (_source/css/post-78.css, widget 700af662):
       .elementor-nav-menu--main .elementor-item        { color: #FFFFFF }
       .elementor-item:hover, :focus { color: --e-global-color-primary }  = #38682A
     Ours had these inverted (green label, orange hover). The dropdown was
     already correct and is styled separately below. */
  color: var(--color-white);
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.open > a { color: var(--color-primary); }
.main-nav > ul > li:has(.dropdown) > a::after {
  content: "\25BE"; /* small down-arrow, matches the live site's dropdown indicator */
  margin-left: 6px;
  font-size: 13px;
}
.main-nav .dropdown {
  list-style: none;
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--color-secondary);
  margin: 0;
  padding: 6px 0;
  z-index: 50;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.main-nav li.open > .dropdown { display: flex; }
@media (min-width: 768px) {
  .main-nav > ul > li:hover > .dropdown { display: flex; }
  /* The last nav item sits at the right edge of the viewport — a
     left-aligned dropdown would overflow/crop off-screen, so open it
     right-aligned to its trigger instead. */
  .main-nav > ul > li:last-child > .dropdown { left: auto; right: 0; }
}
.main-nav .dropdown a {
  display: block;
  color: var(--color-white);
  padding: 10px 18px;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.4;
}
.main-nav .dropdown a:hover { background: var(--color-primary); }

.menu-toggle {
  display: none;
  background: var(--color-primary);
  color: var(--color-white);
  border: 0;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 16px;
  cursor: pointer;
}

/* ---------- Popup notice ---------- */
.site-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.site-popup-overlay[hidden] { display: none; }

/* Search-feedback dialog — department manager 2026-08-20, replacing a line of
   small grey text that was too easy to miss.

   ⚠ DELIBERATELY NOT ON THE SITE PALETTE. David, 2026-08-20: "Please don't
   apply the site's color scheme to this. It's just a pop up window. Plain
   black text is fine." An earlier version used the cream panel, red bold
   message and green button and looked awful. Keep this plain: white panel,
   black text, neutral button. Do NOT reintroduce --color-* here.

   Compound selector on purpose: `.site-popup--alert` alone ties with
   `.site-popup` on specificity, and the base rule sits LATER in this file, so a
   single-class override silently loses. */
.site-popup.site-popup--alert {
  max-width: 420px;
  padding: 30px 32px 26px;
  background: #FFFFFF;
  text-align: center;
}
.site-popup--alert .site-popup__message {
  margin: 4px 0 22px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
  color: #000000;
}
/* A plain dialog button — not .btn, which is the site's green. */
.site-popup__ok {
  min-width: 96px;
  padding: 9px 22px;
  font-family: inherit;
  font-size: 15px;
  line-height: 18px;
  color: #000000;
  background: #F2F2F2;
  border: 1px solid #BBBBBB;
  border-radius: 3px;
  cursor: pointer;
}
.site-popup__ok:hover { background: #E6E6E6; }
.site-popup {
  background: var(--color-cream);
  max-width: 640px;
  width: 100%;
  padding: 40px;
  position: relative;
  box-shadow: 2px 8px 23px 3px rgba(0,0,0,0.2);
  font-family: var(--font-primary);
  color: var(--color-text);
}
.site-popup__close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: 0;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-text);
  line-height: 1;
}

/* ---------- Hero (home) ---------- */
.hero {
  background-color: var(--color-primary);
  background-image: url("../images/Hero-image-3-1.jpg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 56% auto;
  min-height: 330px;
  display: flex;
  align-items: center;
  padding: 20px var(--side);
}
.hero__title {
  font-family: var(--font-heading);
  font-size: 36px;
  line-height: 46px;
  font-weight: 400;
  color: var(--color-white);
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
  max-width: 400px;
  margin: 0;
}
.select-program {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-brown);
  padding: 30px 20px 10px;
  line-height: 26px;
  font-weight: 700;
}

/* ---------- Program tiles (home) ----------
   These are real pre-made badge images on the live site (they're
   lazy-loaded, which is why the first asset pull missed them). */
.program-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  max-width: 1117px;
  margin: 0 auto;
  padding: 20px 20px 50px;
}
.program-tile { width: 260px; max-width: 100%; text-align: center; }
.program-tile a { display: block; }
.program-tile img {
  border-radius: 50%;
  transition: filter .25s ease;
}
.program-tile a:hover img { filter: brightness(85%); }
.program-tile__caption {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: bold;
  color: var(--color-primary);
}

/* ---------- Generic page hero (inner pages) ----------
   Flex row: title block (H1 above, eyebrow below, both the page's accent
   color) on the left, the CTA button on the right — matches the live
   site's actual layout, confirmed from its own generated CSS. */
.page-hero {
  background: var(--color-cream);
  padding: 40px var(--side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.page-hero__title { flex: 1 1 320px; }
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: 43px;
  font-weight: bold;
  margin: 0;
  color: var(--color-orange2); /* default: QRWB's accent color */
  line-height: 1;
}
.page-hero .eyebrow {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: bold;
  margin: 4px 0 0;
  color: var(--color-orange2);
  line-height: 1;
}
/* C2Q pages use a different accent color, confirmed from the live site's own CSS */
.page-c2q .page-hero h1,
.page-c2q .page-hero .eyebrow { color: var(--color-red2); }
/* The two Resources pages title at 26px on live, not the 43px the programme
   pages use — measured on both. They keep their programme's accent colour
   (QRWB orange, C2Q red), which is why this is a size-only override. */
.page-resources .page-hero h1 { font-size: 26px; }

/* ---------- Green callout with thumbnail (QRWB "How to Submit") ---------- */
.callout {
  background: var(--color-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Inset lives here, not on .callout__text, so the copy starts on the same
     column edge as every other section while the green stays full-bleed. */
  padding-left: var(--side);
  padding-right: var(--side);
}
.callout__text {
  flex: 1 1 400px;
  padding: 40px 0;
  color: var(--color-white);
}
.callout__text h2 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: normal;
  margin: 0 0 12px;
  line-height: 24px;
}
.callout__text p { margin: 0 0 16px; }
.callout__image {
  flex: 0 1 33%;
  min-width: 220px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 60% auto;
  align-self: stretch;
  min-height: 220px;
}

/* ---------- Content + image (intro sections on C2Q / QRWB pages) ---------- */
.content-with-image {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  padding: 40px var(--side) 0;
}
.content-with-image__text { flex: 1 1 320px; }
/* The C2Q page's lead line. Live gives it a DIFFERENT treatment from the
   section headings on the QRWB page (which are 24px/28.8 weight 500) — it comes
   from Elementor's "text" slot instead: Roboto Slab 26px/39px bold, brown.
   Measured on live 2026-08-18: 26px/39px w700 rgb(112,94,70), in a widget with
   20px vertical padding, which the bottom margin here stands in for. */
.content-with-image__text .section-lead {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 39px;
  font-weight: 700;
  color: var(--color-brown);
  margin: 0 0 20px;
}
.content-with-image__image { flex: 0 1 280px; text-align: center; }
.content-with-image__image img { max-width: 260px; margin: 0 auto; }

/* ---------- Content sections ---------- */
.content-section { padding: 40px var(--side); }
/* Section headings. Live gives ALL of these ONE treatment — Roboto Slab
   24px/28.8px, weight 500, brown #705E46 — shared by "Recognizing your hard
   work!", "When can I apply?", "Am I eligible?" and "Applied?".

   Ours had two different treatments and neither matched: .content-section h2
   was Gill Sans 26px bold green, while the heading inside .content-with-image
   had no rule at all and fell through to the browser default — which tracks
   the body font-size, so it would have drifted again the moment that was
   corrected. Consolidated here.

   ⚠ This also changes their colour to live's brown. Raised with David. */
.content-with-image__text h2,
.content-section h2 {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 28.8px;
  font-weight: 500;
  color: var(--color-brown);
}
.content-section p { margin: 0 0 16px; }
.content-section ul { margin: 0 0 16px; padding-left: 22px; }

/* Buttons. Measured against live 2026-08-14 — live has THREE variants and they
   all share padding 12px 24px and border-radius 3px:

     .btn              #8EB446 medium green   "Check your application status"
     .btn--download    #38682A dark green     all 16 Download / Watch buttons
     .btn-accent       #EC5D00 orange         the search widget's Search / Clear

   The download variant matters: those buttons sit ON a #8EB446 band, so
   painting them #8EB446 made them invisible — only the white label showed.
   That was the bug David reported on the QRWB "Download Guide" button. */
.btn {
  display: inline-block;
  background: var(--color-secondary);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 18px;
  /* line-height 18px, not inherited. Live's buttons are 42px tall = 12 + 18 + 12;
     without this the body's 27px line-height made them 51px. */
  line-height: 18px;
  font-weight: 400;
  padding: 12px 24px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--color-primary); color: var(--color-white); }

/* Download / Watch buttons — dark green with a leading icon, weight 400 (NOT
   bold, unlike .btn). 16 of these on live, all identical. */
.btn--download {
  background: var(--color-primary);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 5px;          /* measured: closes our button to live's 204.1px width */
}
/* NO hover colour change — live keeps these buttons the same green throughout.
   The base .btn:hover switches to --color-primary, which for this variant is
   already its resting colour, so nothing visibly changes. Do not add a hover
   background here; an earlier version did and it was wrong. */

/* The icon is Font Awesome 5's fa-download / fa-play-circle, inlined as SVG so
   no icon font is loaded — same approach as the other rebuilt sites.
   18x18 with fill:currentColor so it follows the label colour on hover. */
.btn--download svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
  display: block;
}
.btn-accent {
  background: var(--color-accent); /* matches the live API widget's own orange buttons */
  color: var(--color-white);
}
.btn-accent:hover { background: var(--color-orange2); color: var(--color-white); }

/* ---------- Eligibility search widget ---------- */
.search-widget {
  background: var(--color-cream);
  padding: 30px var(--side);
  margin: 0 0 20px;
}
/* ⚠ DELIBERATE DIVERGENCE FROM LIVE — department manager's request 2026-08-20:
   "add some padding top and bottom to the text here. The lines look too
   smashed together. Nothing large. Just a few pixels to separate them."

   Live sets each of these three lines with line-height EQUAL to its font-size
   and margin 0, so their boxes sit flush and the text reads as one block. The
   4px top/bottom padding below opens 8px between adjacent lines. Do not
   "correct" these back to live's values — the tightness is what she objected
   to. Padding rather than margin so nothing collapses. */
.search-widget h3 {
  font-family: var(--font-primary);
  color: var(--color-accent);
  font-size: 32px;
  font-weight: 400;
  margin: 0;
  padding: 4px 0;
  line-height: 32px;
}
.search-widget__subtitle {
  font-size: 24px;
  font-weight: 400;
  color: #808080;
  margin: 0;
  padding: 4px 0;
  line-height: 24px;
}
.search-widget__instruction {
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  margin: 0;
  padding: 4px 0;
  line-height: 18px;
}
.search-widget form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
  margin-top: 20px;
}
.search-widget form[hidden] { display: none; } /* [hidden] needs to beat the
  explicit display:flex above, or the form stays visible despite the attribute */
.search-widget input[type="text"] {
  width: 100%;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid #69727D;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 15px;
  color: #1F2124;
}
.search-widget__buttons {
  display: flex;
  gap: 12px;
  align-self: flex-start;
}
.search-widget .btn,
.search-widget .btn-secondary {
  padding: 12px 24px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 400;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
}
.search-widget .btn:hover,
.search-widget .btn-secondary:hover { background: var(--color-orange2); color: var(--color-white); }
.search-note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  margin-top: 8px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn:disabled:hover { background: var(--color-secondary); }

/* ---------- QRWB search results (real API data) ---------- */
.qrwb-results {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.qrwb-results select {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 15px;
  margin: 10px 12px 10px 0;
}
.qrwb-result { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.qrwb-result__icon {
  height: 44px;
  width: auto; /* the status icon likely has its label (e.g. "Not Yet Open") drawn
                  into the image itself — forcing a fixed width squashed it unreadable */
}
.qrwb-result__info { margin: 0; font-weight: bold; }
/* The API returns the facility block and the status message as two separate
   paragraphs; with both at margin 0 they read as one block. Manager request
   2026-08-18: separate them by a blank line. 1.5em is one line of body copy at
   this site's line-height, so the gap matches the rhythm of the address lines
   above it rather than being an arbitrary pixel value.
   NB the class name says "date" because this paragraph carries the application
   window's date range when the window IS open; the API reuses the same slot for
   the "your window has passed" / "not yet open" message when it is not. */
.qrwb-result__date { margin: 1.5em 0 0; font-size: 18px; color: var(--color-primary); font-weight: bold; }
/* Department manager's request 2026-08-20: the message reads RED when the
   facility's window is not open, and stays green when it is. The status class
   is added by main.js from the API's own status ("Not Yet Open" ->
   .qrwb-result--not-yet-open), so this needs no separate source of truth.
   Using the site's own red (--color-red2, the C2Q accent) rather than a new
   hex, so the palette stays closed. */
.qrwb-result--not-yet-open .qrwb-result__date { color: var(--color-red2); }

/* ---------- Flip box (FAQ cards) ----------
   Mechanism copied from the live site's own Elementor Pro Flip Box CSS
   (_source/css/widget-flip-box.min.css) — pure CSS3, no JS needed on desktop. */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px 0 40px;
  max-width: 1300px;
  margin: 0 auto;
}
.flip-box {
  width: 100%;
}
.flip-box__inner {
  height: 300px; /* sized to fit the longest FAQ answer (QRWB's "QR Restoration Grant"
    card) at the 2-column card width without needing internal scroll; applied
    uniformly so every card is the same size */
  perspective: 1000px;
  position: relative;
}
.flip-box__front,
.flip-box__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transition: transform .6s ease-in-out;
  border-radius: 0;
  background: var(--color-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 35px;
}
.flip-box__front { transform: rotateY(0deg); }
.flip-box__back {
  transform: rotateY(180deg);
}
.flip-box.is-flipped .flip-box__front { transform: rotateY(-180deg); }
.flip-box.is-flipped .flip-box__back { transform: rotateY(0deg); }
@media (hover: hover) {
  /* Only devices with a real mouse get the hover-flip — on touch, a tap
     leaves :hover "stuck" on until you tap elsewhere (no mouse to unhover
     with), which fights the JS-toggled .is-flipped class and makes cards
     look like they never flip back. Touch relies on .is-flipped alone. */
  .flip-box__inner:hover .flip-box__front { transform: rotateY(-180deg); }
  .flip-box__inner:hover .flip-box__back { transform: rotateY(0deg); }
}
.flip-box__title {
  font-family: var(--font-primary);
  font-size: 18px;
  color: var(--color-text);
  margin: 0;
  line-height: 18px;
}
.flip-box__back .flip-box__title {
  font-family: var(--font-primary);
  font-size: 16px;
  color: #4A4A4A;
  margin: 0;
  line-height: 16px;
}
/* Live sets the link inside a flip card's answer at 18px/18px even though the
   answer text around it is 16px. Verified on three cards. */
.flip-box__back a { font-size: 18px; line-height: 18px; }.flip-box__back { overflow-y: auto; } /* long FAQ answers scroll instead of overflowing the card */
@media (prefers-reduced-motion: reduce) {
  .flip-box__front, .flip-box__back { transition-duration: 0s; }
}
@media (max-width: 600px) {
  .flip-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ ----------
   On the live site the FAQ is a grid of flip cards (front = question,
   back = answer) — that's the "rotate on mouseover" effect. The whole
   section (heading + grid) sits on a green background with a white
   heading, confirmed on both the C2Q and QRWB pages. Uses the .flip-box
   component above. */
.faq {
  background: var(--color-secondary);
  padding: 20px var(--side) 40px;
}
.faq h2 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: bold;
  color: var(--color-white);
  margin: 0 0 20px;
  line-height: 30px;
}

/* ---------- Cream callout (e.g. QRWB "Applied?" section) ---------- */
.cream-section {
  background: var(--color-cream);
  padding: 30px var(--side);
}

/* ---------- Resource cards (Resources pages) ----------
   Each card = a green image panel (thumbnail of the actual document,
   top-center, 53% width) sitting above a white text panel — matches the
   live site's card layout exactly (confirmed from its own generated CSS). */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  padding: 20px 0 40px;
}
.resource-card {
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
}
.resource-card__image {
  background-color: var(--color-secondary);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 53% auto;
  height: 220px;
}
.resource-card__body { padding: 24px; }
.resource-card h3 {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-primary);
  margin: 0 0 8px;
  line-height: 39px;
  font-weight: 700;
}
.resource-card p { margin: 0 0 14px; }
.resource-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.resource-card__actions .btn {
  background: var(--color-primary);
  font-size: 18px;
  padding: 10px 20px;
}
.resource-card__actions .btn:hover { background: var(--color-secondary); }
@media (max-width: 700px) {
  .resource-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-brown);
  color: var(--color-white);
  padding: 40px var(--side);
}
/* The inset is applied once per section, by whichever element carries the
   background. These sections already do it with --side, so their nested
   .container must not add its own or the content is inset twice. */
.site-footer > .container,
.faq > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}
.site-footer .footer-logos {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 1 auto;
}
.site-footer .footer-logos img { max-height: 50px; width: auto; }
.site-footer .footer-text {
  font-family: var(--font-primary);
  font-size: 18px;
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
  flex: 1 1 280px;
  min-width: 0;
  line-height: 1.2;
}
.site-footer .footer-contact { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 1140px) {
  /* Keep logos / funding text / contact info in one row, matching the live
     site, once there's enough width for all three side by side. */
  .site-footer .container { flex-wrap: nowrap; }
}
.site-footer .footer-text p { margin: 0 0 10px; }
/* ⚠ This rule re-declares .site-footer .footer-contact, which is also styled
   ~10 lines above. It wins on source order, so the size belongs HERE — setting
   it on the earlier rule looks correct and silently does nothing. */
.site-footer .footer-contact {
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 1.2;
}
.site-footer .footer-contact a { color: var(--color-white); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero { background-size: 50% auto; }
  .hero__title { font-size: 32px; }
  .page-hero h1 { font-size: 36px; }
}
@media (max-width: 767px) {
  .site-header__top { justify-content: center; text-align: center; }
  .site-header__bar { justify-content: center; text-align: center; }
  .partner-logos {
    /* width:40% assumes desktop-width real estate for two logos at full
       size; on narrow screens that's not enough room and the images
       overflow their own box. Let it size to content instead. */
    width: auto;
    max-width: 100%;
  }
  .partner-logos img { height: 28px; }
  .menu-toggle { display: inline-block; }
  .main-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; width: 100%; }
  .main-nav .dropdown { position: static; box-shadow: none; }
  .hero {
    background-image: url("../images/896868-1.png");
    background-position: top center;
    background-size: 100% auto;
    flex-direction: column;
    align-items: flex-start;
    min-height: 345px;
  }
  .hero__title { font-size: 26px; line-height: 1.3em; max-width: 100%; }
  .program-tiles { gap: 24px; }
  .page-hero h1 { font-size: 28px; }
}