/* ============================================================
   Theme-only additions — things WordPress needs that the static
   export did not. Everything else comes from assets/css/ds/*.css,
   which are verbatim copies of the export's own stylesheets.
   Keep this file SMALL: if something looks wrong, first check
   whether the export already styles it before adding a rule here.
   ============================================================ */

/* The export's header is position:fixed, so it reserves no flow space.
   Pages whose first section doesn't already pad for it (the way the home
   and about heroes do) get the clearance here instead. */
#main {
  padding-top: var(--header-height, 80px);
}

.fa-page--flush #main {
  padding-top: 0;
}

/* The site header and its non-blending copies sit below the signed-in
   WordPress toolbar. Keep that toolbar fixed on small screens too, so the
   offset stays correct when scrolling without requiring a JS scroll hook. */
body.admin-bar { --fa-admin-bar-offset: 32px; }
body.admin-bar .fa-header,
body.admin-bar .fa-header__logo-cover,
body.admin-bar .fa-header__cta-cover {
  top: var(--fa-admin-bar-offset);
}
body.admin-bar .fa-svcdrop {
  top: calc(80px + var(--fa-admin-bar-offset));
}
@media screen and (max-width: 782px) {
  body.admin-bar { --fa-admin-bar-offset: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar #wpadminbar { position: fixed; }
}

/* Mobile nav — the export handles this inside its React chrome; this is
   the theme's plain-markup equivalent. */
.fa-mobile-nav[hidden] {
  display: none;
}

.fa-mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - var(--fa-mobile-nav-top, var(--header-height, 80px)));
  height: calc(100dvh - var(--fa-mobile-nav-top, var(--header-height, 80px)));
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 16px 24px max(32px, env(safe-area-inset-bottom));
  background: var(--surface-page, #fff);
  color: var(--fa-ink, #050e1e);
  border-top: 1px solid rgba(5, 14, 30, .12);
}

.fa-mobile-nav nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
}

.fa-mobile-nav nav a,
.fa-mobile-nav summary {
  display: flex;
  align-items: center;
  min-height: 56px;
  box-sizing: border-box;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
  font: var(--fw-halbfett) 20px/1.3 var(--font-display);
  overflow-wrap: anywhere;
}

.fa-mobile-nav nav > a,
.fa-mobile-nav nav > details {
  border-bottom: 1px solid rgba(5, 14, 30, .12);
}

.fa-mobile-nav summary {
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.fa-mobile-nav summary::-webkit-details-marker { display: none; }
.fa-mobile-nav summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 4px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.fa-mobile-nav details[open] > summary::after { transform: rotate(225deg); }
.fa-mobile-nav details > div { padding-bottom: 12px; }
.fa-mobile-nav details a { min-height: 48px; font-size: 16px; }
.fa-mobile-nav > .fa-btn { width: 100%; min-height: 52px; flex-shrink: 0; }
.fa-mobile-nav a:focus-visible,
.fa-mobile-nav summary:focus-visible,
.fa-hamburger:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

html.fa-mobile-nav-open,
html.fa-mobile-nav-open body { overflow: hidden; }

@media (max-width: 999px) {
  .fa-header.is-mobmenu-open {
    background: var(--surface-page, #fff) !important;
    mix-blend-mode: normal !important;
  }
  .fa-hamburger[aria-expanded="true"] { position: relative; }
  .fa-hamburger[aria-expanded="true"] svg { visibility: hidden; }
  .fa-hamburger[aria-expanded="true"]::before,
  .fa-hamburger[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .fa-hamburger[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(-45deg); }
}

@media (min-width: 1000px) {
  .fa-mobile-nav { display: none; }
  /* Long authored submenus must remain reachable on short laptop viewports.
     The panel is fixed, so scrolling the page cannot reveal its lower links. */
  .fa-svcdrop {
    max-height: calc(100vh - var(--fa-dropdown-header-height, 80px) - var(--fa-admin-bar-offset, 0px));
    max-height: calc(100dvh - var(--fa-dropdown-header-height, 80px) - var(--fa-admin-bar-offset, 0px));
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
}

/* The original mega cards put Learn more 16px below their title. These
   whole-card links also need the same arrow affordance on keyboard focus. */
.fa-svcdrop__card .fa-svc-learn { margin-top: 16px; }
.fa-svcdrop__card:focus-visible,
.fa-insdrop__feat:focus-visible { outline: 2px solid var(--fa-ink); outline-offset: -4px; }
.fa-svcdrop__card:focus-visible .fa-svc-learn__btn { background: var(--fa-ink); color: var(--fa-white); }
.fa-svcdrop__card:focus-visible .fa-svc-learn--ondark .fa-svc-learn__btn { background: var(--fa-white); color: var(--fa-ink); }
.fa-inddrop__feat:focus-visible { outline-color: var(--fa-white); }
@media (prefers-reduced-motion: reduce) {
  .fa-svcdrop__card, .fa-insdrop__media img, .fa-insdrop__readnow svg { transition: none; }
  .fa-svcdrop__card:hover, .fa-insdrop__feat:hover .fa-insdrop__media img { transform: none; }
}

/* Retain full navigation on smaller laptops; other tablet layouts keep
   their existing breakpoints. This overrides only the exported header. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .fa-header__inner {
    padding-left: 24px;
    gap: 16px;
    justify-content: space-between;
  }
  .fa-header .fa-logo { margin-right: 0; flex-shrink: 0; }
  .fa-header .fa-nav { display: flex; gap: 10px; }
  .fa-header .fa-nav a { padding: 8px 6px !important; font-size: 16px !important; }
  .fa-header .fa-hamburger { display: none; }
  .fa-svcdrop { display: block !important; }
  .fa-svcdrop, body.admin-bar .fa-svcdrop {
    --fa-dropdown-header-height: 72px;
    top: calc(72px + var(--fa-admin-bar-offset, 0px));
  }
}

/* WordPress prose fallback (blog posts, and any CPT single without its
   own layout yet). */
.fa-prose {
  padding-block: 80px;
  max-width: 760px;
}

.fa-prose img {
  max-width: 100%;
  height: auto;
}

/* Editor-entered copy arrives wrapped in <p> (ACF runs the_content filters
   on wysiwyg fields, and the inherited testimonial rows are one). The static
   export had no such wrapper, so the default paragraph margins would add
   22px inside the quote and push every section below it down the page.
   Applies to the blocks that take raw editor HTML, not to prose. */
.fa-proof__quote > p:first-child,
.ab-who__body > p:first-child {
  margin-top: 0;
}

.fa-proof__quote > p:last-child,
.ab-who__body > p:last-child {
  margin-bottom: 0;
}

/* Header nav: same weight before and after scrolling.

   The export difference-blends the whole fixed header on desktop
   (.fa-header.header--blend in ds/homepage.css). Inverting the glyphs also
   inverts their antialiased edges, so the nav paints visibly heavier than
   normal text -- and pure black rather than the ink colour.

   That only ever showed for the first 40px of a page, because this theme
   puts the frosted header on EVERY page (see assets/js/chrome.js), and
   .fa-page.is-glass already resets the blend. So the blend's whole remaining
   effect was a heavier nav at rest that thinned out the moment you scrolled.

   These rules are the un-blending half of the .is-glass block in
   ds/hero-alt.css, lifted out of it so it applies at rest too. The frosted
   background itself still only appears on scroll, which is the intended
   behaviour -- only the text stops changing. Colour stays driven by the
   scroll listener's data-theme, so the nav is still light on dark sections. */
@media (min-width: 1200px) {
  .fa-header.header--blend {
    mix-blend-mode: normal;
  }

  .fa-header[data-theme="light"].header--blend {
    --text-primary: var(--fa-ink);
  }

  .fa-header[data-theme="light"].header--blend .fa-logo__cut--light {
    opacity: 1;
  }

  .fa-header[data-theme="light"].header--blend .fa-logo__cut--dark {
    opacity: 0;
  }
}

/* The design's episode list is eight hard-coded rows and never hides one.
   The real list is 295, so a row outside the current topic or batch carries
   [hidden] -- and .pod-ep sets display:flex, which beats the browser's own
   [hidden] rule. Same for the "See more" button once nothing is left. */
.pod-ep[hidden],
.pod-eps__more[hidden],
/* Same trap in the member panel: .mp-articles sets display:flex, so a
   member with no credited articles would still show the heading over an
   empty grid. The export never hits this -- its article list is hard-coded
   and every panel gets the same two. */
.mp-articles[hidden] {
  display: none;
}

/* The player's two states are mutually exclusive; the design styles both but
   never says that only one shows at a time, because its own markup only ever
   rendered the expanded half. */
.pod-fab.is-collapsed .pod-fab__player,
.pod-fab.is-expanded .pod-fab__toggle {
  display: none;
}

/* Both icons ship in the play button and one carries [hidden] at a time, but
   .pod-fab__play svg{display:block} beats the browser's own [hidden] rule, so
   the button showed a play triangle AND pause bars at once. */
.pod-fab__play svg[hidden] {
  display: none;
}

/* Rich-text editor values may contain multiple paragraphs or lists. */
.fa-rich-copy > :first-child { margin-top: 0; }
.fa-rich-copy > :last-child { margin-bottom: 0; }
a.ot-tag { text-decoration: none; }
/* Keep category states legible despite page-level link/button hover rules.
   Inset focus rings remain visible inside the mobile scrolling strips. */
.ot-filter .ot-tag,
.pod-filters .pod-filter {
  transition: none;
}
.ot-filter .ot-tag:not(.is-active):hover,
.ot-filter .ot-tag:not(.is-active):focus-visible,
.pod-filters .pod-filter:not(.is-active):hover,
.pod-filters .pod-filter:not(.is-active):focus-visible {
  background: var(--fa-mint);
  color: var(--fa-ink);
}
.ot-filter .ot-tag.is-active,
.pod-filters .pod-filter.is-active {
  background: var(--fa-yellow-alt);
  color: var(--fa-ink);
}
.ot-filter .ot-tag:focus-visible,
.pod-filters .pod-filter:focus-visible {
  outline: 3px solid var(--fa-ink);
  outline-offset: -6px;
}
.fa-system-page { padding-top: 160px; padding-bottom: 96px; min-height: 65vh; }
.fa-system-page article { margin-top: 40px; }
/* Keyboard users can bypass the repeated site navigation. */
.fa-skip-link{position:fixed;left:16px;top:16px;transform:translateY(-200%);z-index:100001;padding:12px 18px;background:#fff;color:#111;border:2px solid #111;border-radius:4px;font:600 16px/1.4 sans-serif}
.fa-skip-link:focus{transform:none;outline:3px solid #00b8a9;outline-offset:3px}

/* Native Gutenberg blocks placed between designed sections retain responsive
   content gutters. Direct children only: existing section interiors are untouched. */
.fa-page--flush #main > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote, table, pre, details, [class*="wp-block-"]:not([class*="wp-block-acf-"])) {
  max-width: min(var(--container-width, 1400px), calc(100% - 2 * var(--sp-gutter, 24px)));
  margin-inline: auto;
  margin-block: clamp(24px, 3vw, 48px);
}
.fa-page--flush #main > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote, table, pre, details, [class*="wp-block-"]:not([class*="wp-block-acf-"])):first-child {
  margin-top: calc(var(--header-height, 80px) + 32px);
}
.fa-page--flush #main > .alignfull {
  max-width: none;
  margin-inline: 0;
}


/* Home film hero: chrome.js measures the viewport, toolbar/hero start and
   actual proof-strip height. Use a minimum so longer editor copy still grows
   instead of clipping. The CSS-only fallback leaves room for the proof. */
.fa-page[data-hero="film"] #hero.alt-hero.film {
  min-height: var(--fa-home-hero-min-height, calc(100vh - var(--fa-admin-bar-offset, 0px) - 112px));
  min-height: var(--fa-home-hero-min-height, calc(100svh - var(--fa-admin-bar-offset, 0px) - 112px));
}
.fa-page[data-hero="film"] #hero.film .alt-hero__inner {
  padding-top: calc(var(--fa-home-header-height, 80px) + 32px);
}

/* Mobile photography gets its own clear space before the compact hero copy. */
@media (max-width: 767px) {
  .fa-page[data-hero="film"] #hero.alt-hero.film:not(.film--video) {
    min-height: 0;
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__stack {
    inset: var(--fa-home-header-height, 60px) 0 auto;
    height: 280px;
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__frame img {
    object-position: 50% 35%;
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__frame:nth-child(2) img,
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__frame:nth-child(5) img {
    object-position: 50% 25%;
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__shade {
    background: linear-gradient(180deg, transparent 0, transparent calc(var(--fa-home-header-height, 60px) + 180px), #0f0e14 calc(var(--fa-home-header-height, 60px) + 280px));
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .alt-hero__inner {
    padding-top: calc(var(--fa-home-header-height, 60px) + 250px);
    padding-bottom: 24px;
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__text { gap: 16px; }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .fa-h1 {
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: 0;
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .fa-body {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .alt-cta { gap: 8px; }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .fa-btn {
    --pad-btn-x: 12px;
    --pad-btn-y: 12px;
    --type-button: 600 14px/1.2 var(--font-body, sans-serif);
    min-height: 44px;
    letter-spacing: 0 !important;
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__meta {
    flex-basis: 100%;
    padding: 12px 0 0;
    display: flex;
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* Keep all four proof cells together through small desktop/tablet landscape.
   Wrap text inside each cell; preserve the existing <=899px layouts. */
@media (min-width: 900px) {
  .fa-page[data-hero="film"] #trust-bar .fa-trust__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 16px;
  }
  .fa-page[data-hero="film"] #trust-bar .fa-trust__cell {
    gap: 10px;
    padding: 20px 0;
    border-top: 0;
  }
  .fa-page[data-hero="film"] #trust-bar .fa-trust__cell + .fa-trust__cell {
    padding-left: 16px;
    border-left: 1px solid rgba(255,255,255,0.18);
  }
  .fa-page[data-hero="film"] #trust-bar .fa-trust__lead,
  .fa-page[data-hero="film"] #trust-bar .fa-trust__sub {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .fa-page[data-hero="film"] #trust-bar .fa-trust__grid { column-gap: 12px; }
  .fa-page[data-hero="film"] #trust-bar .fa-trust__cell { gap: 8px; }
  .fa-page[data-hero="film"] #trust-bar .fa-trust__cell + .fa-trust__cell { padding-left: 12px; }
  .fa-page[data-hero="film"] #trust-bar .fa-trust__icon { width: 28px; height: 28px; }
}

/* Keep the exported layouts intact; repair their smaller-screen spacing here. */
@media (max-width: 1199px) {
  .sd-incl.sd-navy .sd-two { gap: 32px; }
}
@media (min-width: 600px) and (max-width: 767px) {
  .ab-hww .ab-principle { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Designed pages reserve the fixed navigation plus breathing room. */
.fa-page--flush #main > .bc-hero { padding-top: calc(var(--header-height, 80px) + 64px); }
.fa-page--flush #main > .fa-legacy-page { padding-top: calc(var(--header-height, 80px) + 64px); }
@media (max-width: 700px) {
  .fa-page--flush #main > .bc-hero,
  .fa-page--flush #main > .fa-legacy-page { padding-top: calc(var(--header-height, 80px) + 40px); }
}

/* This dedicated newsletter form subscribes through its Subscribe action.
   Retain the existing checked provider input for the form submission contract. */
.fa-footer .ven-form[aria-label="Subscribe"] .ven-field-mailchimp { display: none !important; }
.fa-footer .ven-form[aria-label="Subscribe"] .ven-navigation {
  align-self: stretch !important;
  display: flex !important;
  align-items: stretch !important;
  box-sizing: border-box;
  padding: 4px !important;
  margin: 0 !important;
}
.fa-footer .ven-form[aria-label="Subscribe"] .ven-navigation [type="submit"] {
  height: 100% !important;
  min-height: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  line-height: 1.2;
}
@media (max-width: 700px) {
  .fa-page #main .id-hero,
  .fa-page #main .ind-hero,
  .fa-page #main .sd-hero,
  .fa-page #main .bl-hero { padding-top: calc(var(--header-height, 60px) + 40px); }
}
/* Home hero photos, per slide (desktop and tablet). Keyed by file name so a
   reorder in hero_frames cannot move a crop onto the wrong photo, and so the
   old positional nth-child(2)/(5) offsets no longer apply on these frames.
   Goal: keep faces and heads above the hero copy without cropping the tops of
   heads. translateY uses the stack's 12% overscan, so -9.4% is the safe limit.
   Mobile has a separate photo window and keeps its existing crop. */
@media (min-width: 768px) {
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__stack .film__frame img[src*="fa-jarni-2026-0547"] {
    object-position: 50% 50%;
    transform: translateY(-9.4%);
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__stack .film__frame img[src*="/hero-3."] {
    object-position: 50% 35%;
    transform: translateY(-6%);
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__stack .film__frame img[src*="/hero-4."],
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__stack .film__frame img[src*="/hero-1."],
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__stack .film__frame img[src*="fa-jarni-2026-0420"] {
    object-position: 50% 50%;
    transform: none;
  }
  .fa-page[data-hero="film"] #hero.film:not(.film--video) .film__stack .film__frame img[src*="fa-jarni-2026-0603"] {
    object-position: 50% 25%;
    transform: none;
  }
}
/* Second header button, "Book your tax return" (Andy, 23 Oct 2026: same place as
   the live site, which shows it beside its main header button at every size).
   - 1440px and up: full yellow button, right of Book a call, the two together
     and flush right; the non-blending cover copy lines up with them.
   - 1000-1439px (full nav still showing): compact two-line button, like live's
     "Book Your / Tax Return", with slightly tighter nav spacing so it all fits.
   - 600-999px (menu button): before Book a call, so it is not yellow-on-yellow
     against the menu button.
   - Phones (under 600px): no room in the bar (logo + Book a call + menu fill
     390px), so it is a second button in the open menu instead. */
.fa-header__cta2 { background: #FCEB4E; color: #050E1E; box-shadow: inset 0 0 0 1px #050E1E; } /* outline keeps it a button on yellow pages (book-an-appointment hero) */
.fa-header__cta2:hover { opacity: 0.9; }
.fa-header__cta-cover .fa-btn.fa-header__cta2 { background: #FCEB4E !important; color: #050E1E !important; }
@media (max-width: 1199px) {
  .fa-header__inner .fa-header__cta2 { height: 72px !important; padding: 0 20px !important; font: var(--fw-halbfett) 18px/1 var(--font-display) !important; }
}
@media (max-width: 999px) {
  .fa-header__inner .fa-header__cta2 { order: 1; }
  .fa-header__inner .fa-btn-lift { order: 2; }
  .fa-header__inner .fa-hamburger { order: 3; }
}
@media (max-width: 599px) {
  .fa-header__inner .fa-header__cta2 { display: none !important; }
}
@media (min-width: 1000px) {
  .fa-mobile-nav > .fa-header__cta2 { display: none; }
  .fa-header__inner:has(.fa-header__cta2) { justify-content: flex-start; }
  .fa-header__inner:has(.fa-header__cta2) .fa-nav { margin-left: auto; margin-right: auto; }
}
@media (min-width: 1200px) {
  .fa-header__inner .fa-header__cta2 { margin-left: -24px; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .fa-header__inner .fa-header__cta2 { margin-left: -12px; }
  .fa-header__inner:has(.fa-header__cta2) { padding-left: 20px; gap: 12px; }
  .fa-header__inner:has(.fa-header__cta2) .fa-logo,
  .fa-header__inner:has(.fa-header__cta2) .fa-logo__cut,
  .fa-header__inner:has(.fa-header__cta2) .fa-logo__cut img { height: 32px !important; }
}
@media (min-width: 1000px) and (max-width: 1439px) {
  .fa-header__inner .fa-header__cta2 { white-space: normal !important; width: 112px; padding: 0 14px !important; font-size: 15px !important; line-height: 1.1 !important; text-align: center; }
  .fa-header__inner:has(.fa-header__cta2) .fa-btn-lift { padding: 0 16px !important; }
  .fa-header:has(.fa-header__cta2) .fa-nav { gap: 6px; }
  .fa-header:has(.fa-header__cta2) .fa-nav a { padding: 8px 4px !important; font-size: 16px !important; }
  .fa-header__cta-cover .fa-btn.fa-header__cta2 { white-space: normal !important; width: 112px; padding: 0 14px !important; font-size: 15px !important; line-height: 1.1 !important; text-align: center; }
  .fa-header__cta-cover .fa-btn--primary { padding: 0 16px !important; }
}