/* Freedom theme: WordPress compatibility layer on top of the prototype CSS.
   core/button wrappers are display:contents so the anchor is the flex child of .cta-row. */
.wp-block-button.btn { display: contents; }
.wp-block-buttons.cta-row { display: flex; }
/* core/details used for FAQ items (prototype: details > summary + .answer) */
.faq .wp-block-details > summary::after { content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--navy); background:
  linear-gradient(var(--navy), var(--navy)) center / .9rem 2px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 2px .9rem no-repeat; transition: background var(--dur) var(--ease); }
.faq .wp-block-details[open] > summary::after { background: var(--orange) linear-gradient(var(--navy), var(--navy)) center / .9rem 2px no-repeat; border-color: var(--orange); }
.faq .wp-block-details > :not(summary) { max-width: var(--measure); }
.faq .wp-block-details > :last-child { padding-bottom: var(--s-5); }
/* Accessibility fix carried from QA: on navy/teal surfaces the prototype's ".bg-navy a {color:white}" overrode the
   primary button's navy text (white on orange = 2.9:1). Keep navy text on orange everywhere (4.1:1, design-log value). */
.bg-navy .btn--primary, .bg-teal .btn--primary, .panel--navy .btn--primary, .panel--teal .btn--primary,
.bg-navy .wp-block-button.btn--primary > .wp-block-button__link, .bg-teal .wp-block-button.btn--primary > .wp-block-button__link,
.panel--navy .wp-block-button.btn--primary > .wp-block-button__link, .panel--teal .wp-block-button.btn--primary > .wp-block-button__link { color: var(--navy); }
/* Header "Request Care" button: 17px bold navy-on-orange measures 4.06:1; at 19px bold it counts as large text (3:1 threshold). */
.btn--sm, .wp-block-button.btn--sm > .wp-block-button__link { font-size: 1.1875rem; }
/* a11y: brand orange on sand/white fails 3:1 for large text; use the darker brand-adjacent orange there only */
.bg-sand .tagline .about, .bg-white .tagline .about, .panel--sand .tagline .about { color: #C85A0F; }
/* unresolved tracked destinations render inactive until configured */
a.fss-dest-unresolved { opacity: .55; cursor: not-allowed; pointer-events: none; }
body.fss-staging.logged-in a.fss-dest-unresolved { outline: 2px dashed #EE7724; outline-offset: 2px; pointer-events: auto; }
/* placeholders off */
.fss-no-ph .ph { display: none !important; }
.fss-no-ph .hero--split .hero__inner, .fss-no-ph .grid--split, .fss-no-ph .grid--aside { grid-template-columns: 1fr; }
/* live directory cards (real data) use a solid border */
.dir-card--live { border-style: solid; }
.dir-card--live b a { text-decoration: none; }
.dir-map--live { padding: 0; min-height: 0; }
.dir-map--live::before { display: none; }
.zip-result { margin-top: var(--s-5); }
.zip-none { max-width: 46rem; }
/* legacy Elementor pages inside the new shell */
.fss-legacy { padding-block: 0; }
.fss-text-only { cursor: default; text-decoration: none; }
body .fss-header .ico, body .fss-footer .ico { display: inline-block; width: 1.15em; height: 1.15em; flex: none; }
/* ---- v1.4.0 hero variety: each page keeps the same brand parts but composes them differently ---- */
/* About: navy, organization-focused. The house becomes a large, quiet watermark that bleeds off the lower right instead of sitting beside the copy. */
.hero--about .hero__inner { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem); }
.hero--about h1 { color: var(--navy); max-width: 16ch; }
.hero--about .lead { color: var(--slate); }
.hero--about .house-art { width: min(38vw, 29rem); right: -3%; bottom: -9%; }
@media (max-width: 47.9em) { .hero--about .house-art { width: 15rem; right: -12%; bottom: -6%; } .hero--about .hero__copy { padding-bottom: 5rem; } }
/* Request Care: calm and action-first. No graphic, centred column, one large call button. */
.hero--request .hero__inner { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); }
.hero--request .hero__copy { margin-inline: auto; text-align: center; max-width: 44rem; }
.hero--request h1 { max-width: 24ch; margin-inline: auto; }
.hero--request .lead { margin-inline: auto; }
.hero--request .cta-row { justify-content: center; margin-top: var(--s-6); }
.hero--request .house-art { display: none; }
.btn--lg { font-size: 1.375rem; min-height: 3.75rem; padding: .9rem 2.25rem; }
.btn--lg .ico { width: 1.3em; height: 1.3em; }
@media (max-width: 29.9em) { .hero--request .cta-row .btn { width: 100%; } }
/* Careers: deep teal band that hands off to the benefits strip, which rises into the hero as a card. */
.hero--careers { background: var(--teal-dark); color: var(--on-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.hero--careers .eyebrow { color: var(--on-dark); }
.hero--careers h1 { color: var(--white); max-width: 18ch; }
.hero--careers .lead { color: var(--on-dark); max-width: 38rem; }
.hero--careers .hero__inner { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(5.5rem, 4rem + 5vw, 8rem); }
.hero--careers .hero__copy { max-width: 46rem; }
.hero--careers + section { background: transparent; padding-top: 0; position: relative; z-index: 2; margin-top: calc(-1 * clamp(3rem, 2rem + 3vw, 4.5rem)); }
.hero--careers + section .facts { background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius-card); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); box-shadow: 0 12px 32px rgba(2,60,90,.14); }
.hero--careers .btn--primary { color: var(--navy); }
/* Elementor kit CSS (.elementor-kit-N a) loads after the theme on legacy Elementor pages and recolours every link.
   Re-assert the theme chrome colours with higher specificity so header/footer/buttons are unaffected. */
body .fss-header a:not(.btn), body .fss-header a:not(.btn):hover, body .fss-header a:not(.btn):focus, body .fss-header .fss-nav button, body .fss-header .fss-mobile button { color: var(--white); }
/* dropdown cards are white: their links stay navy */
body .fss-header .fss-nav .menu a:not(.btn), body .fss-header .fss-nav .menu a:not(.btn):hover, body .fss-header .fss-nav .menu a:not(.btn):focus { color: var(--navy); }
body .fss-footer a, body .fss-footer a:hover, body .fss-footer a:focus { color: var(--white); }
body a.btn--primary, body a.btn--primary:hover { color: var(--navy); }
body a.btn--navy, body a.btn--navy:hover { color: var(--white); }
body a.btn--secondary { color: var(--navy); }
body a.btn--secondary:hover { color: var(--white); }
body a.skip-link { color: var(--white); }
.fss-legacy .elementor-section-boxed > .elementor-container { max-width: var(--container); }
/* WordPress admin bar + sticky header */
body.admin-bar .fss-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .fss-header { top: 46px; } }
/* shortcode blocks render their output directly */
.wp-block-shortcode { display: contents; }

/* ---- generated: prototype .btn rules applied to core/button links ---- */
.wp-block-button.btn > .wp-block-button__link {display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0.7rem 1.5rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1.1875rem; line-height: 1.2;
  border-radius: var(--radius-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.wp-block-button.btn > .wp-block-button__link:active {transform: translateY(1px); }
.wp-block-button.btn--primary > .wp-block-button__link {background: var(--orange); color: var(--navy); border-color: var(--orange); }
.wp-block-button.btn--primary > .wp-block-button__link:hover {background: var(--orange-hover); border-color: var(--orange-hover); }
.wp-block-button.btn--secondary > .wp-block-button__link {background: transparent; color: var(--navy); border-color: var(--navy); }
.wp-block-button.btn--secondary > .wp-block-button__link:hover {background: var(--navy); color: var(--white); }
.on-dark .wp-block-button.btn--secondary > .wp-block-button__link {color: var(--white); border-color: var(--white); }
.on-dark .wp-block-button.btn--secondary > .wp-block-button__link:hover {background: var(--white); color: var(--navy); }
.wp-block-button.btn--navy > .wp-block-button__link {background: var(--navy); color: var(--white); border-color: var(--navy); }
.wp-block-button.btn--navy > .wp-block-button__link:hover {background: var(--navy-deep); }
.wp-block-button.btn--sm > .wp-block-button__link {font-size: 1.0625rem; padding: 0.5rem 1.1rem; min-height: var(--tap); white-space: nowrap; }
.wp-block-button.btn > .wp-block-button__link[aria-disabled="true"] {opacity: .55; cursor: not-allowed; }
.wp-block-button.btn > .wp-block-button__link .ico {width: 1.1em; height: 1.1em; flex: none; }
.cta-row .wp-block-button.btn > .wp-block-button__link {flex: 1 1 auto; }
@media (min-width: 30em) { .cta-row .wp-block-button.btn > .wp-block-button__link {flex: 0 0 auto; } }

/* ---- v1.4.3 photography ---- */
.fss-no-ph .ph.ph--photo { display: block !important; }
.ph__shape.has-photo { display: block; background: var(--sand-deep, var(--sand)); border: 0; }
.ph__shape.has-photo::before { display: none; }
.ph__shape.has-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48em) {
  .fss-no-ph .hero--split .hero__inner:has(.ph--photo) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .fss-no-ph .grid--split:has(.ph--photo) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .fss-no-ph .grid--aside:has(.ph--photo) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .hero--home .hero__inner:has(.ph--photo) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}
.hero--home .hero__inner:has(.ph--photo) { display: grid; gap: var(--s-6); }
.hero--home .hero__inner:has(.ph--photo) .hero__copy { padding-bottom: 0; }
/* headings wrap evenly; Request Care headline no longer strands its last word */
h1, h2 { text-wrap: balance; }
.hero--request h1 { max-width: 40ch; }
.hero--request .hero__copy { max-width: 48rem; }

/* ---- v1.5.0 colour refinement: hero compositions ---- */
/* Home: white canvas, navy headline, a navy panel bleeding off the right edge behind the arch photo; door mark watermarked in the panel. */
.hero--home .hero__inner { z-index: 1; }
.hero--home::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; width: 42%; background: var(--navy); }
.hero--home::after { content: ""; position: absolute; z-index: 0; right: 2%; bottom: 0; width: min(20vw, 15rem); aspect-ratio: 638 / 722; background: url("../brand/mark-white-orangedoor.png") no-repeat center / contain; opacity: .13; }
.hero--home .ph--dot::after { background: var(--orange); }
@media (max-width: 47.9em) {
  /* Phone: the panel becomes a full-bleed navy band that sits behind the photo only, so it never crosses the copy. */
  .hero--home::before, .hero--home::after { display: none; }
  .hero--home .hero__inner:has(.ph--photo) { padding-bottom: 0; }
  .hero--home .hero__inner:has(.ph--photo) .hero__copy { padding-bottom: var(--s-2); }
  .hero--home .ph--photo { padding: var(--s-6) 0 var(--s-6); background: var(--navy); box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax); max-width: none; margin-inline: 0; }
  .hero--home .ph--photo .ph__shape { max-width: 20rem; margin-inline: auto; }
  .hero--home .ph--photo::after { right: calc(50% - 10rem - .6rem); }
}
/* About: white hero; the door becomes a navy tile (a self-contained card, unlike Home's edge-bleed panel). */
.hero--about.bg-navy { background: var(--white); color: var(--slate); }
.hero--about.bg-navy h1 { color: var(--navy); }
.hero--about.bg-navy .eyebrow { color: var(--teal-dark); }
.hero--about .house-art { top: 50%; bottom: auto; right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); transform: translateY(-50%); width: min(34vw, 24rem); aspect-ratio: 1; padding: 7% 9%; background: var(--navy); color: #2D6A8B; border-radius: var(--radius-card); display: grid; place-items: center; }
.hero--about .house-art svg { width: 100%; height: 100%; }
@media (max-width: 47.9em) { .hero--about .house-art { position: relative; top: auto; right: auto; transform: none; width: 11rem; margin: 0 auto var(--s-6) 0; } .hero--about .hero__copy { padding-bottom: 1rem; } .hero--about .hero__inner { display: flex; flex-direction: column; } }
/* Request Care: a pale teal field keeps it calm and distinct from the white interior pages. */
.hero--request.bg-soft { background: var(--tint-teal); }
/* Split heroes: a soft offset shape behind the photo gives each its own quiet identity without changing the layout. */
.hero--split:not(.hero--careers) .ph--photo::before { content: ""; position: absolute; z-index: -1; inset: 6% -6% -5% 8%; border-radius: 999px 999px var(--radius-card) var(--radius-card); background: var(--tint-teal); }
.hero--split:not(.hero--careers) .ph--photo { z-index: 0; isolation: isolate; }
/* Mobile menu sits on navy: the secondary CTA must be white-on-navy, not navy-on-navy. */
body .fss-mobile a.btn--secondary { color: var(--white); border-color: var(--white); background: transparent; }
body .fss-mobile a.btn--secondary:hover, body .fss-mobile a.btn--secondary:focus { background: var(--white); color: var(--navy); }

/* ======================================================================
   v1.5.1
   ====================================================================== */

/* 1. Elementor-kit-proof header controls.
   The kit stylesheet (.elementor-kit-N button) gives every <button> a white background, white text, a 35px radius and its own
   padding. That made the desktop dropdown buttons and the mobile Menu button invisible (white on white) on legacy Elementor
   pages. Every property the kit sets is re-asserted here at higher specificity, including :hover/:focus/:active. */
body .fss-header .fss-nav button,
body .fss-header .fss-nav button:hover,
body .fss-header .fss-nav button:focus,
body .fss-header .fss-nav button:active,
body .fss-header .nav-toggle,
body .fss-header .nav-toggle:hover,
body .fss-header .nav-toggle:focus,
body .fss-header .nav-toggle:active,
body .fss-header .fss-mobile button,
body .fss-header .fss-mobile button:hover,
body .fss-header .fss-mobile button:focus,
body .fss-header .fss-mobile button:active {
  color: var(--white); background-color: transparent; background-image: none; box-shadow: none; text-shadow: none;
  text-transform: none; letter-spacing: normal; line-height: inherit; font-family: inherit; font-weight: 700;
}
body .fss-header .fss-nav button { border: 0; border-radius: var(--radius-pill); padding: .5rem .8rem; font-size: 1.0625rem; }
body .fss-header .fss-nav button:hover, body .fss-header .fss-nav button[aria-expanded="true"] { background-color: rgba(255,255,255,.14); }
body .fss-header .nav-toggle { border: 2px solid var(--white); border-radius: var(--radius-pill); padding: .4rem .8rem; font-size: 1.0625rem; }
body .fss-header .nav-toggle:hover, body .fss-header .nav-toggle:focus { background-color: rgba(255,255,255,.12); }
body .fss-header .fss-mobile button { border: 0; border-radius: 0; padding: .6rem var(--gutter); font-size: 1.125rem; }
body .fss-header .fss-mobile button:hover { background-color: rgba(255,255,255,.06); }
body .fss-header .fss-nav button:focus-visible, body .fss-header .nav-toggle:focus-visible, body .fss-header .fss-mobile button:focus-visible { outline: 3px solid var(--focus-on-dark); outline-offset: 2px; }

/* 2. Door-graphic heroes at tablet widths. Between 768 and 1100px the pale/navy door art is a real column beside the copy
   instead of an overlay, so it can never sit on the text. Desktop (>=1100px) and phone compositions are unchanged. */
@media (min-width: 48em) and (max-width: 68.74em) {
  .hero:not(.hero--home):not(.hero--split) .hero__inner:has(> .house-art) { display: grid; grid-template-columns: minmax(0, 1fr) clamp(9.5rem, 24vw, 14rem); gap: var(--s-6); align-items: center; }
  .hero:not(.hero--home):not(.hero--split) .hero__inner:has(> .house-art) .hero__copy { padding-bottom: 0; min-width: 0; }
  .hero:not(.hero--home):not(.hero--split) .hero__inner > .house-art { position: static; transform: none; width: 100%; right: auto; top: auto; bottom: auto; margin: 0; }
  .hero--about .hero__inner > .house-art { aspect-ratio: 1; }
}

/* 3. Homepage navy balance: "Why families and referral partners choose Freedom" is now a light band.
   Navy stays on the header, the closing CTA and the footer. */
body.home .section.bg-navy:not(.closer) { background: var(--bg-soft); color: var(--slate); }
body.home .section.bg-navy:not(.closer) h2, body.home .section.bg-navy:not(.closer) h3 { color: var(--navy); }
body.home .section.bg-navy:not(.closer) .eyebrow { color: var(--teal-dark); }
body.home .section.bg-navy:not(.closer) .reasons li { border-top-color: var(--teal); }
body.home .section.bg-navy:not(.closer) .reasons p, body.home .section.bg-navy:not(.closer) p { color: var(--slate); }
body.home .section.bg-navy:not(.closer) a:not(.btn) { color: var(--navy); }
/* the band that follows (pale teal) sits directly under a gray band; a hairline keeps the two distinct */
body.home .section.bg-navy:not(.closer) + .section { border-top: 1px solid var(--line); }

/* 4. Homepage audience router: a fixed three-column grid so every row's heading, description and link line up. */
@media (min-width: 48em) {
  .router li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(11rem, 13.5rem); align-items: start; gap: var(--s-3) var(--s-6); }
  .router .links { flex-direction: column; flex-wrap: nowrap; gap: 0; align-items: flex-start; }
  .router h3 { padding-top: .1em; }
}

/* 5. Paying for Care headline: wider measure and balanced wrapping so it breaks as two natural lines. */
body.fss-page-paying-for-care .hero h1 { max-width: 22ch; text-wrap: balance; }

/* 6. Contact: the duplicate phone card is removed (inc/content-patches.php); the one that remains is a single prominent block. */
.fss-contact-one .grid--aside { grid-template-columns: 1fr; }
.fss-contact-one .form-hidden { max-width: none; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-left: 6px solid var(--orange); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-6); }
.fss-contact-one .form-hidden .lead { margin: 0; flex: 1 1 22rem; max-width: 40rem; }
.fss-contact-one .form-hidden .cta-row { margin: 0; }
.fss-contact-one .form-hidden .lead { font-size: var(--fs-h3); line-height: 1.35; color: var(--navy); }
.fss-contact-one .form-hidden .btn { font-size: 1.25rem; min-height: 3.5rem; padding-inline: 1.75rem; }

/* Careers call-to-action sits on the teal hero and on the navy closer. */
.fss-careers-call { gap: .55em; }
.cta-row .fss-careers-call { margin-right: var(--s-3); }

/* 7. Polish */
/* Home hero photo lines up with its navy panel (it overhung the panel edge by a few pixels). */
@media (min-width: 75em) { .hero--home::before { width: 46%; } }
/* Mobile menu: centred, outlined Call button; consistent with Request Care above it. */
body .fss-mobile .fss-mobile__cta a.btn { justify-content: center; width: 100%; text-align: center; min-height: 3.25rem; font-size: 1.125rem; gap: .5em; }
body .fss-mobile .fss-mobile__cta a.btn--secondary { border: 2px solid var(--white); border-radius: var(--radius-pill); }
/* Footer link lists: tighter line-height and balanced wrapping so two-line labels no longer straddle columns. */
.fss-footer nav a { line-height: 1.3; padding-block: .6rem; text-wrap: balance; }
@media (min-width: 48em) { .fss-footer nav:not(.fss-footer__explore) ul { gap: var(--s-1) var(--s-4); } }
@media (min-width: 64em) { .fss-footer__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1fr); } .fss-footer .fss-footer__explore a { text-wrap: nowrap; } }
@media (min-width: 48em) and (max-width: 63.99em) { .fss-footer__top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .fss-footer__top > :first-child { grid-column: 1 / -1; } }

/* v1.6.10: footer headings keep the design-system colour even where Elementor's kit styling is still present (legacy Elementor
   pages keep the kit; its "h2 { color: secondary }" is the old brand gold). Scoped to the footer heading class only. */
body .fss-footer .fss-footer__heading { color: var(--mint); }