/*
 * Brand Refresh pilot (2026-09-04) -- see docs/migration/README.md.
 * Scoped entirely under body.refresh so it only affects pages that
 * explicitly opt in (front matter `refresh: true`, wired in
 * generate.py's REFRESH_PILOT_PATHS). Loaded after main.css in
 * base.njk, so these rules override it for the pages that use it.
 *
 * Palette confirmed final by Christa: forest green #1F3D2B, brass
 * #B08D57, cream #FAF8F2 -- replacing #499d49 on these pages only,
 * pending the pilot's approval to roll out further. Fonts unchanged:
 * Asap (headings/buttons), Open Sans (body) -- both already loaded
 * site-wide by base.njk, nothing new to load here.
 *
 * This restyles the EXISTING generated markup (.row, .col, .banner-card,
 * etc.) rather than introducing new page structure -- the brief is
 * explicit that copy/headings/H1s must stay intact, so this is a visual
 * pass only, no new sections or rewritten content.
 *
 * This file holds only rules used on EVERY refreshed page (nav, buttons,
 * headings, footer, banner/tool cards, scroll-reveal base). Rules for
 * features that only appear on a handful of pages -- the process-flow
 * diagram, the calculator callout, the News page's card grid -- live in
 * their own stylesheets (refresh-process-flow.css,
 * refresh-calculator-callout.css, refresh-blog-list.css), loaded only on
 * the pages that need them (see base.njk). Split 2026-09-07 after
 * Lighthouse flagged a large "reduce unused CSS" percentage on pages
 * that were shipping all of it regardless.
 */

body.refresh {
  --color-accent: #B08D57;       /* brass -- buttons, links, highlights */
  --color-accent-dark: #96754A;  /* brass, darkened for hover */
  /* B08D57 brass only reaches 2.9:1 on cream (needs 4.5:1 for normal
     text) -- Lighthouse a11y baseline (2026-09-04) flagged this on the
     "eyebrow" h5 labels. This darker shade passes at 4.65:1 while
     staying the same brass hue, for text sitting on light backgrounds. */
  --color-accent-text: #8A6B3F;
  --color-primary: #1F3D2B;      /* forest green -- headings, dark sections */
  --color-bg: #FAF8F2;           /* cream */
  --color-dark-bg: #1F3D2B;      /* replaces the old near-black overlay colour */
  --color-footer-bg: #1F3D2B;
  background: var(--color-bg);
}

body.refresh h1,
body.refresh h2,
body.refresh h3,
body.refresh h4,
body.refresh h5,
body.refresh h6 {
  color: var(--color-primary);
}

body.refresh .site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  /* Without its own background, the area around the rounded pill nav
     (site-header__inner) is transparent -- once sticky, scrolled
     content underneath (e.g. the dark About Us section) shows through
     that transparent margin instead of solid cream. Found by actually
     scrolling a screenshot, not just reading the CSS. */
  background: var(--color-bg);
}

body.refresh .site-header__inner {
  background: var(--color-bg);
  border-bottom: 1px solid rgba(31, 61, 43, 0.12);
}

/* Pill-shaped nav bar with a dark CTA button on the right, echoing the
   Transact Capital reference's header layout (brief item 1 / Christa
   2026-09-04) -- header.njk only renders the CTA when refresh is set.
   Widened from 1200px and given a brass border (Christa 2026-09-05 --
   the nav felt "squashed" with 10 top-level items in it at 1200px). */
body.refresh .site-header__inner {
  max-width: 1320px;
  margin: 0.75rem auto;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  box-shadow: 0 2px 10px rgba(31, 61, 43, 0.06);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

body.refresh .site-nav ul {
  gap: 1rem;
}

body.refresh .site-header__cta {
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease;
}

body.refresh .site-header__cta:hover {
  background: var(--color-accent);
  /* Christa (2026-09-14): all Contact Us-style buttons should hover to
     brass/gold, not darken further -- but white text on brass is
     3.09:1, failing WCAG AA's 4.5:1 (same issue flagged below for
     .btn). #16301F (already used elsewhere in this file) on brass is
     4.6:1, passing, so hover swaps to that instead of staying white. */
  color: #16301F;
}

body.refresh .site-nav > ul > li > a {
  color: var(--color-primary);
  font-weight: 600;
}

body.refresh .site-nav > ul > li > a:hover {
  color: var(--color-accent);
}

/* Christa (2026-09-14, How Can We Help page): plain inline links in
   body copy were rendering as default browser blue/underline -- there
   was no sitewide link-colour rule at all, anywhere, so this applies
   to every such link, not just that one page. Scoped to <main> so nav/
   footer (which already have their own explicit link colours) and the
   whole-card .banner-card link (which has no visible text of its own,
   only styled children) and .blog-list__read-more (its own explicit
   colour already) aren't affected. Buttons keep their white text via
   .btn's own higher-specificity rule below. */
body.refresh main a:not(.btn):not(.banner-card):not(.blog-list__read-more) {
  color: var(--color-primary);
}
body.refresh main a:not(.btn):not(.banner-card):not(.blog-list__read-more):hover {
  color: var(--color-accent-text);
}

/* Lighthouse a11y baseline (2026-09-04) found white .btn text on the
   brass background failing contrast (3.09:1, needs 4.5:1 -- axe/Lighthouse
   didn't flag it directly only because these buttons sit inside
   scroll-reveal sections that are opacity:0 at scan time, not because
   they pass). Default stays solid forest green, passing at 11.9:1.
   Hover (2026-09-14, Christa: default green / hover brass-gold,
   applied consistently everywhere a CTA button appears) goes to brass
   -- text switches to #16301F on hover rather than staying white, since
   white-on-brass is the same 3.09:1 failure called out above; #16301F
   on brass is 4.6:1, passing WCAG AA. */
body.refresh .btn,
body.refresh .contact-form button {
  background: var(--color-primary);
  color: #fff;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

body.refresh .btn:hover,
body.refresh .contact-form button:hover {
  background: var(--color-accent);
  color: #16301F;
  transform: translateY(-1px);
}

/* Hero heading -- more confident scale/spacing than the base site,
   still the exact same real copy underneath. */
body.refresh h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

body.refresh h5 {
  color: var(--color-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Service/nav cards -- same real content, refreshed treatment: cream
   card body instead of solid black, brass top accent, subtle lift on
   hover, and an "Explore ->" affordance (CSS-only, not new copy) per
   the brief's named service-card pattern. */
body.refresh .banner-card {
  background: #fff;
  border: 1px solid rgba(31, 61, 43, 0.1);
  border-top: 3px solid var(--color-accent);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(31, 61, 43, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.refresh .banner-card img {
  border-radius: 13px 13px 0 0;
}

body.refresh .banner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(31, 61, 43, 0.14);
}

body.refresh .banner-card img {
  opacity: 1;
}

body.refresh .banner-card h3,
body.refresh .banner-card p {
  color: var(--color-primary);
}

body.refresh .banner-card p {
  color: #555;
}

body.refresh .banner-card::after {
  content: "Explore \2192";
  display: block;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  padding-bottom: 1rem;
}

/* Tools hub cards (/tools/, 2026-09-05) -- deliberately separate from
   .banner-card: these have a real "Try the calculator" button per card,
   not a whole-card link, so they don't want .banner-card's own
   "Explore ->" affordance stacking on top of an explicit button. */
body.refresh .tool-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(31, 61, 43, 0.1);
  border-top: 3px solid var(--color-accent);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(31, 61, 43, 0.08);
  padding: 1.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.refresh .tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(31, 61, 43, 0.14);
}
body.refresh .tool-card h3 { margin: 0 0 0.5rem; }
body.refresh .tool-card p { color: #555; margin: 0 0 1.25rem; flex: 1 1 auto; }
body.refresh .tool-card .btn { align-self: flex-start; }

body.refresh .row--bg {
  background-color: var(--color-primary);
  position: relative;
}

/* Real legibility bug found 2026-09-04: white text was sitting directly
   on a busy photo with no scrim, so it was genuinely unreadable over
   the photo's lighter areas. The background-image itself is set inline
   (style="background-image:url(...)" from the WPBakery-converted
   content), which beats any external-stylesheet background-image
   override -- so this uses a ::before overlay instead, with the actual
   content given a higher stacking order to sit above it. */
body.refresh .row--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 41, 29, 0.72), rgba(20, 41, 29, 0.72));
  z-index: 0;
}

body.refresh .row--bg .col {
  position: relative;
  z-index: 1;
  color: #fff;
}

/* "Clarity today. Confidence for life." -- matches the lighter accent-
   green emphasis on "Confidence for life." in Christa's real
   client-meeting-presentation slide. */
body.refresh .row--bg em {
  color: #D8C39F;
  font-style: italic;
}

/* The general "all headings are forest green" rule above would
   otherwise win here too (hardcoded colour, not inherited), making
   headings inside a forest-green section render invisible against
   their own background -- override explicitly. */
body.refresh .row--bg h1,
body.refresh .row--bg h2,
body.refresh .row--bg h3,
body.refresh .row--bg h4,
body.refresh .row--bg h5,
body.refresh .row--bg h6 {
  color: #fff;
}

body.refresh .row--bg h5 {
  color: var(--color-accent);
}

body.refresh .reviews-widget__card {
  border-color: rgba(31, 61, 43, 0.12);
}

/* Deliberately NOT overriding --reviews-star-color to brass here --
   Christa asked (2026-09-05) to keep the reviews widget in the green
   it already uses (matches the live site's own Reviews Feed Pro
   styling), not switch it to the brass accent. */

/* Slightly more generous section rhythm for a "current" feel. */
body.refresh .row {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Christa (2026-09-14): reported as a large gap under the intro text on
   Wealth Protection, suspected as a shared-template issue -- confirmed
   via a sitewide structural sweep (every plain .row directly followed
   by another plain .row, checking whether the second one's first real
   content is a heading) that it's not template- or page-specific at
   all: 18 pages, 42 row transitions. Root cause: adjacent .row boxes
   always sit flush against each other (0px between them, verified) --
   the entire visual gap is each row's OWN top+bottom padding from the
   rule above stacking to 48px at every boundary. That reads fine at a
   genuine section break (a new heading, a background band -- confirmed
   only 5 such transitions sitewide, all already a clean 0px extra),
   but where a list or paragraph just continues into a fresh row --
   almost always an artifact of the original WPBakery content being
   split across multiple [vc_row] blocks with no real break intended,
   the same category of authoring noise as the empty-<p> bug fixed
   earlier -- the same 48px reads as an oversized, unintentional gap
   mid-thought. Halving just the leading row's top padding closes most
   of that gap while still leaving a little breathing room, and only
   ever applies where there's no heading (or the empty-<p>-before-
   heading variant) starting the second row, so genuine section breaks
   keep their full spacing untouched. */
body.refresh main .row:not(.row--bg) + .row:not(.row--bg):not(:has(> .col > .text-block:first-child > :is(h1, h2, h3, h4, h5, h6):first-child)):not(:has(> .col > .text-block:first-child > p:empty:first-child + :is(h1, h2, h3, h4, h5, h6))) {
  padding-top: 0.75rem;
}

body.refresh .site-footer {
  background: var(--color-primary);
}

/* main.css's #9a9a9a secondary footer text (licence, disclaimer, calendar
   nav, bottom line) was tuned for the original pure-black footer -- on
   the new forest-green background it drops to 4.24:1, just under the
   4.5:1 AA minimum (Lighthouse a11y baseline, 2026-09-04). This lighter
   grey passes at 6:1 while staying visibly muted/secondary next to the
   brighter --color-footer-text used for links. */
body.refresh .site-footer__licence,
body.refresh .site-footer__disclaimer,
body.refresh .footer-calendar__nav,
body.refresh .footer-calendar__table th,
body.refresh .site-footer__bottom {
  color: #b8b8b8;
}

/* Process-flow diagram CSS (homepage + advice-process page only) and
   the News page's card grid have both moved to their own conditionally
   -loaded stylesheets -- see refresh-process-flow.css and
   refresh-blog-list.css -- so pages that don't use them don't ship
   their CSS (2026-09-07, Lighthouse "reduce unused CSS" finding). */

/* Scroll-reveal (Christa 2026-09-04, from the Transact Capital
   reference's flow-in-on-scroll feel) -- see the script in base.njk
   that toggles .is-visible via IntersectionObserver. Starts hidden only
   once JS confirms it can reveal them (see .js-scroll-ready below), so
   content never stays invisible if JS fails to run. */
body.refresh.js-scroll-ready .row.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

body.refresh.js-scroll-ready .row.scroll-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.refresh.js-scroll-ready .row.scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Calculator callout CSS (the 14 pages in CALCULATOR_CALLOUTS) has
   moved to its own conditionally-loaded stylesheet -- see
   refresh-calculator-callout.css (2026-09-07, Lighthouse "reduce
   unused CSS" finding). */

/* Image/text column height mismatch (2026-09-14, Christa -- found on
   About Us first, then again independently on What To Bring To The
   Meeting, confirming this is a general structural issue, not a
   one-page thing; the earlier .about-us-page-only version of this fix
   was too narrowly scoped and missed the second case). Whenever a
   column's ENTIRE content is a single image sitting beside a sibling
   column of text, the two columns already stretch to equal height by
   flexbox default -- the image itself just wasn't filling that height,
   leaving empty space on whichever side is shorter (below the image
   on About Us; below the image on What To Bring too, but there the
   text side is the taller one). :has() lets this target only columns
   that are purely a lone image (not ones mixing an image with other
   text, like the Financial Services overview cards, which are left
   alone). Makes the image a flex item all the way down (col ->
   text-block -> img) so it can stretch, and object-fit: cover keeps
   it from distorting. */
body.refresh main .row > .col:has(> .text-block:only-child > img:only-child):not(:has(> .text-block > img.native-res)),
body.refresh main .row > .col:has(> .text-block:only-child > img:only-child):not(:has(> .text-block > img.native-res)) > .text-block {
  display: flex;
}
body.refresh main .row > .col > .text-block:only-child > img:only-child:not(.native-res) {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  object-fit: cover;
  border-radius: 8px;
}

/* Christa (2026-09-14): 9 specific images (generate.py: NATIVE_RES_IMAGES)
   were being upscaled past their native resolution by the stretch above
   -- confirmed via a naturalWidth/Height-vs-rendered-size sweep, as much
   as 2.53x on About Us. Christa opted to undo the stretch for exactly
   these spots rather than wait for higher-res source photos: sharp
   images matter more than the gap for launch. `.native-res` (added by
   generate.py to just these 9 <img> tags) excludes them, via the two
   :not() clauses above, from the flex/object-fit treatment entirely --
   which drops them back to the sitewide default (main.css: `img {
   max-width: 100%; height: auto }`), i.e. exactly how they rendered
   before that fix existed. No extra rule needed here for that. The gap
   below/beside a short image on these 9 pages is an accepted, temporary
   trade-off until real taller-native-resolution photos are sourced
   post-launch. */

/* Narrow-column heroes (2026-09-14, Christa: "Superannuation Advice"
   etc. -- headings oversized; 2026-09-14 follow-up: same bug also found
   on Life Stages and every other page sharing this layout, not just the
   services section). Any page with a "photo beside an h1 (+ intro
   text)" header row -- individual service pages, About Us, Careers,
   FAQ, How Can We Help and its sub-pages, What To Bring, The Value of
   Advice --
   puts that h1 in a half-width column (.col--1-2), so the sitewide hero
   h1 size (clamp(2rem, 4vw, 2.75rem), tuned for a full-width .col--1-1
   hero like the homepage) wraps awkwardly and reads too large for the
   narrower space. Targets the structural .col--1-2 pattern directly
   rather than an opt-in body class per page (the previous
   .service-detail-page approach) -- covers every current instance in
   one rule and any future page built the same way, instead of finding
   this gap one page at a time. Confirmed via a sitewide sweep
   (getComputedStyle + column-width check on every h1/h4 across all 154
   pages) that .col--1-2 reliably means "narrow column", never a
   full-width hero, and that no other .col--1-2 h1 usage exists that
   should be exempt.

   Needed `body.refresh` prefixed to win on specificity over the plain
   `body.refresh h1` rule above (both explained in older history for
   this rule, since replaced -- see git log if needed). Font-size itself
   is Christa's own DevTools measurement of the live WordPress site's
   real computed value (38px) -- not an estimate. The two longest
   service-page headings (Superannuation Advice, Self Managed
   Superannuation) still wrap to 2 lines at this size, matching the old
   site, so left as-is rather than shrunk further to force one line. */
body.refresh main .row > .col--1-2 h1 {
  font-size: clamp(1.5rem, 3vw, 2.375rem);
}

/* FAQ page (2026-09-14, Christa: category headings and individual
   question text look identical -- flat, hard to scan). .accordion is
   the outer category level ("Retirement Planning Questions"),
   .faq-accordion/.faq-item the individual questions nested inside
   each category -- both previously shared the exact same summary
   style. Category summaries now read as real section headings (larger,
   forest green, uppercase, brass underline for a clear division
   between categories); question summaries keep a lighter touch with a
   brass +/- indicator so it's clear they're individually expandable,
   not headings. */
body.refresh .accordion-item > summary {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-accent);
}
body.refresh .faq-item summary {
  font-weight: 600;
  color: #333;
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}
body.refresh .faq-item summary::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--color-accent-text);
  font-weight: 700;
}
body.refresh .faq-item[open] summary::before {
  content: "\2212";
}

/* What To Bring To The Meeting (2026-09-14, Christa: body text/lists
   needed better typography for scanability). .swdul had zero custom
   styling anywhere -- pure browser-default list rendering. Real bullet
   colour + breathing room, and a bit more line-height on the intro
   text beside the image, without changing any wording. */
body.refresh .swdul {
  line-height: 1.7;
  padding-left: 1.25rem;
}
body.refresh .swdul li {
  margin-bottom: 0.35rem;
}
body.refresh .swdul li::marker {
  color: var(--color-accent-text);
}