/* FairWell final UX polish (Oct 2026)
   Loaded after fw-buttons.css. Does not restyle buttons (fw-buttons.css owns them).
   Everything here is layout, contrast, state and accessibility fixes. */

/* ── 1. Anchors land below the sticky header ───────────────────────── */
html{scroll-padding-top:92px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
:target{scroll-margin-top:92px}

/* ── 2. Header: aligned links, room to breathe at 1001 to 1140px ────── */
.nav-links>a{display:inline-flex;align-items:center}
@media(min-width:1001px){.nav-right>.nav-login{display:inline-flex;align-items:center}}
@media(max-width:1140px) and (min-width:1001px){
  .nav-right .fw-region-chip{display:none!important}
  .nav-inner{gap:18px}
}
html[data-theme="dark"] .nav{background:color-mix(in srgb,var(--paper) 86%,transparent)!important}
html[data-theme="dark"] .nav-links{background:transparent}
.nav-dd.dd-closed .nav-dd-menu{opacity:0!important;visibility:hidden!important}

/* ── 3. One progress bar only (fw-prog is sitewide) ──────────────────── */
.fw-read-bar{display:none!important}
#fw-prog{height:3px;border-radius:0 2px 2px 0}

/* ── 4. Contrast: small brand-blue and muted text pass WCAG AA in light ─ */
html:not([data-theme="dark"]){--ink-mute:#5F6984}
html:not([data-theme="dark"]) .fw-ct{color:#2F62D6!important}  /* added by fw-polish.js to small brand-blue text on light backgrounds */
html:not([data-theme="dark"]) .ew-chip.ok{color:#1B7A50}
html:not([data-theme="dark"]) .pr-mail-meta{color:var(--ink-mute)}
footer .fw-motion-toggle{color:rgba(255,255,255,.78)!important;border-color:rgba(255,255,255,.28)!important}

/* ── 5. Section heads wrap on phones instead of clipping the button ─── */
@media(max-width:600px){
  .gx-section-head{flex-wrap:wrap;align-items:flex-start}
  .gx-section-head>div{flex:1 1 100%}
  .gx-section-head .btn-secondary{white-space:normal}
}

/* ── 6. H1 with a descriptive second line (replaces "Title | Subtitle") ─ */
.h1-sub{display:block;font-size:.5em;line-height:1.25;letter-spacing:-.01em;color:var(--ink-soft);font-weight:500;margin-top:.35em}

/* ── 7. Guide table of contents: a clean list on phones ─────────────── */
@media(max-width:900px){
  .ar-toc{display:block!important;padding-bottom:12px}
  .ar-toc a{display:block!important;padding:9px 0 9px 12px!important;border-left:2px solid var(--line)!important;min-height:0;line-height:1.35}
  .ar-toc a+a{margin-top:2px}
}

/* ── 8. Pricing trust row: tidy left-aligned list on phones ─────────── */
@media(max-width:600px){
  .pr-trust{display:grid!important;grid-template-columns:1fr;gap:12px!important;justify-content:stretch!important;max-width:340px;margin-left:auto;margin-right:auto}
  .pr-trust>div{justify-content:flex-start;text-align:left}
  .pr-trust>div>span:first-child{flex:none;display:inline-flex;gap:4px;min-width:22px}
}

/* ── 9. Bottom stack on phones: Quick exit and Save stay above the cookie bar ─ */
@media(max-width:900px){
  body.fw-cookie-open .fw-exit{bottom:calc(var(--fw-cookie-top,150px) + 10px)!important}
  html.fw-settled .fw-exit{transition:bottom .3s ease,transform .25s var(--ease),opacity .3s}
  body.fw-cookie-open .fw-save{bottom:calc(var(--fw-cookie-top,150px) + 10px)!important}
  body.fw-scta-on:not(.fw-cookie-open) .fw-exit{bottom:calc(84px + 64px + env(safe-area-inset-bottom,0px))!important}
  body.fw-scta-on:not(.fw-cookie-open) .fw-save{bottom:calc(74px + 64px)!important}
}

@media(min-width:901px){body.fw-cookie-open .fw-save{bottom:calc(var(--fw-cookie-top,72px) + 12px)!important;transition:bottom .3s ease}}

/* ── 9b. Compact cookie bar on phones: one line, buttons on the same row ─ */
@media(max-width:600px){
  .fw-cookie-bar:not(#fwb){flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important;padding:10px 12px!important;min-height:0}
  .fw-cookie-bar:not(#fwb) p{flex:1 1 auto;min-width:0;font-size:12.5px!important;line-height:1.3!important;color:rgba(255,255,255,.88)!important}
  .fw-cookie-bar .fw-ck-more{display:none}
  .fw-cookie-bar:not(#fwb) .fw-cookie-btns{display:flex;flex:none;gap:6px;justify-content:flex-end;width:auto!important}
  body .fw-cookie-bar:not(#fwb) .fw-cookie-btns :is(.fw-cookie-accept,.fw-cookie-decline):not(#fwb){min-height:44px!important;height:44px!important;padding:0 12px!important;font-size:13px!important;border-radius:8px!important;width:auto!important;flex:none}
}
@media(max-width:350px){.fw-cookie-bar:not(#fwb) p{font-size:11.5px!important}body .fw-cookie-bar:not(#fwb) .fw-cookie-btns :is(.fw-cookie-accept,.fw-cookie-decline):not(#fwb){padding:0 9px!important}}

/* ── 10. Sticky product CTA (phones, selected product pages) ────────── */
.fw-scta{position:fixed;left:0;right:0;bottom:0;z-index:9989;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--paper,#fff) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .32s cubic-bezier(.2,.8,.2,1);display:none}
body.has-mbar .fw-scta{bottom:calc(60px + env(safe-area-inset-bottom,0px));padding-bottom:8px}
.fw-scta.on{transform:none}
.fw-scta a{width:100%;display:flex!important;justify-content:center}
@media(max-width:768px){.fw-scta{display:block}}
@media(prefers-reduced-motion:reduce){.fw-scta{transition:none}}

/* ── 11. Mobile menu opens with a short fade, not a jump ─────────────── */
@keyframes fwNavIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#fw-mobile-nav[style*="flex"]{animation:fwNavIn .22s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){#fw-mobile-nav{animation:none!important}}
html.fw-reduce #fw-mobile-nav{animation:none!important}

/* ── 12. Reveals never hide content for reduced-motion visitors ─────── */
@media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}}

/* ── 13. Cards: one calm hover and a visible keyboard focus ─────────── */
@media(hover:hover){
  :is(a.hp-g,a.gx-card,a.jh-card,.dir-card,.p-card,.bl-card,a.gl-card){transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
  :is(.dir-card,.p-card):hover{border-color:color-mix(in srgb,var(--forest) 35%,var(--line))}
}
:is(a.hp-g,a.gx-card,a.jh-card,a.gl-card,a.bl-card):focus-visible{outline:2px solid var(--forest);outline-offset:3px}

/* ── 14. Directory: sticky filters sit under the header; loading skeleton ─ */
.dir-filters{top:75px!important;transition:top .45s cubic-bezier(.2,.8,.2,1)}
body:has(.nav.nav-hide) .dir-filters{top:0!important}
.fw-skel{border:1.5px solid var(--line);border-radius:var(--r-xl,16px);padding:22px;background:var(--card,var(--white,#fff));min-height:190px}
.fw-skel i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--line) 0%,color-mix(in srgb,var(--line) 40%,transparent) 50%,var(--line) 100%);background-size:200% 100%;animation:fwSkel 1.4s ease-in-out infinite;margin-bottom:12px}
.fw-skel i:first-child{width:44px;height:44px;border-radius:50%;margin-bottom:18px}
.fw-skel i:nth-child(2){width:70%;height:16px}
.fw-skel i:nth-child(3){width:45%}
.fw-skel i:nth-child(4){width:90%}
.fw-skel i:nth-child(5){width:60%}
@keyframes fwSkel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.fw-skel i{animation:none}}
.fw-load-err{grid-column:1/-1;border:1.5px solid var(--line-mid,var(--line));border-radius:var(--r-xl,16px);padding:28px;text-align:center;background:var(--card,#fff)}
.fw-load-err h3{margin:0 0 6px;font-size:18px}
.fw-load-err p{margin:0 0 16px;color:var(--ink-soft);font-size:14.5px}

/* ── 15. Forms: inline errors and an error summary ──────────────────── */
[aria-invalid="true"]:not([type=checkbox]):not([type=radio]){border-color:#C2410C!important;box-shadow:0 0 0 3px rgba(194,65,12,.12)!important}
.fw-field-err{display:block;margin:6px 0 0;font-size:13px;line-height:1.4;color:#B3410E;font-weight:500}
html[data-theme="dark"] .fw-field-err{color:#FDBA8C}
html[data-theme="dark"] [aria-invalid="true"]:not([type=checkbox]):not([type=radio]){border-color:#FDBA8C!important}
.fw-err-sum{border:1.5px solid #C2410C;border-left-width:4px;border-radius:10px;padding:14px 16px;margin:0 0 18px;background:color-mix(in srgb,#C2410C 6%,var(--card,#fff));color:var(--ink);font-size:14.5px}
.fw-err-sum:focus{outline:none}
.fw-err-sum b{display:block;margin-bottom:6px}
.fw-err-sum ul{margin:0;padding-left:18px}
.fw-err-sum a{color:inherit;text-decoration:underline}

/* ── 16. Toasts (announced politely to screen readers) ──────────────── */
.fw-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10001;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
body.has-mbar .fw-toasts{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.fw-toast{background:var(--ink,#0F1A2E);color:var(--paper,#fff);font-size:14px;font-weight:500;padding:10px 16px;border-radius:10px;box-shadow:0 10px 30px -12px rgba(15,26,46,.45);opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.fw-toast.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fw-toast{transition:none}}

/* ── 17. Visually hidden helper ─────────────────────────────────────── */
.fw-vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ── 18. Print: guides, blog posts, glossary and checklists print as clean documents ─ */
@media print{
  @page{margin:16mm 14mm}
  html{opacity:1!important}
  html,body{background:#fff!important;color:#000!important}
  body{padding:0!important;font-size:11.5pt;line-height:1.5}
  .nav,footer,.fw-exit,.fw-mbar,.fw-cookie-bar,#fw-prog,#fw-cur,.fw-read-bar,#fw-mobile-nav,.fw-k,.fw-toasts,.fw-scta,.fw-save,
  .ar-toc,.ar-aside,.ar-share,.ar-next,.fw-share-float,.fw-float-cta,.fw-mobile-cta,.hp-actions,.fw-skip,.ar-crumbs,
  form,.fw-capture-modal,.fw-share-modal,iframe,video{display:none!important}
  .rv{opacity:1!important;transform:none!important}
  body *{box-shadow:none!important;text-shadow:none!important;animation:none!important;transition:none!important}
  .ar-grid,.ar-layout,.ar-wrap{display:block!important}
  .ar-body,.cl-body,main{max-width:none!important;width:auto!important}
  h1,h2,h3{color:#000!important;break-after:avoid;page-break-after:avoid}
  h1{font-size:22pt!important}
  h2{font-size:15pt!important}
  p,li,blockquote,table,.cl-sec{break-inside:avoid;page-break-inside:avoid}
  .ar-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
  a,.fw-ct{color:#000!important;text-decoration:underline}
  main *{opacity:1!important;filter:none!important}
  .ar-body p,.ar-body li,.cl-body p,.cl-body li{color:#111!important}
  img{max-width:60%!important;filter:none!important}
}

/* ═══ Oct 9 pass: UI/UX, accessibility and performance ═══════════════ */

/* ── 19. Reduced motion, everywhere (system setting or the footer toggle).
   Infinite loops (the marquee) stop instead of flickering at 0.01ms. ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .hp-marq .track{animation:none!important}
}
html.fw-reduce *,html.fw-reduce *::before,html.fw-reduce *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
html.fw-reduce .hp-marq .track{animation:none!important}
html.fw-reduce{scroll-behavior:auto!important}

/* ── 20. Hero text paints straight away (CSS entrance, no wait for scripts).
   Improves LCP on the home page and the 64 province and state pages. ── */
@keyframes fwRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
:is(.hp-hero,.ar-hero,.jh-hero,.page-hero) .rv,:is(.hp-hero,.ar-hero,.jh-hero,.page-hero) .rv.in{opacity:1;transform:none;transition:none;animation:fwRise .7s cubic-bezier(.2,.8,.2,1) both}
:is(.hp-hero,.ar-hero,.jh-hero,.page-hero) .rv.d1{animation-delay:.06s}
:is(.hp-hero,.ar-hero,.jh-hero,.page-hero) .rv.d2{animation-delay:.12s}
:is(.hp-hero,.ar-hero,.jh-hero,.page-hero) .rv.d3{animation-delay:.18s}
:is(.hp-hero,.ar-hero,.jh-hero,.page-hero) .rv.d4{animation-delay:.24s}
@media(prefers-reduced-motion:reduce){:is(.hp-hero,.ar-hero,.jh-hero,.page-hero) .rv{animation:none!important}}
html.fw-reduce :is(.hp-hero,.ar-hero,.jh-hero,.page-hero) .rv{animation:none!important}

/* ── 21. Read-along: paragraphs ahead of the reader stay readable (AA).
   Dimmed with a softer ink colour instead of opacity, so the text and its
   links keep at least 4.5:1. fw-motion.js only marks body-ink paragraphs. ── */
.readalong .ra{opacity:1!important}
.readalong .ra:not(.on){color:var(--ink-soft)}

/* ── 22. Quick exit: full 44px target, visible on dark sections, and out of
   the way of the open mobile menu (it moves up beside the close button). ── */
.fw-exit{min-height:44px}
html:not([data-theme="dark"]) .fw-exit{box-shadow:0 0 0 1px rgba(255,255,255,.26),var(--shadow-lg)}
.fw-exit:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
@media(max-width:768px){
  body.fw-menu-open .fw-exit{top:22px!important;bottom:auto!important;right:78px!important;z-index:10000}
}

/* ── 23. Footer column headings are h3 (no skipped levels); same look as before ── */
.footer-col h3{font-family:var(--sans)!important;font-size:13px!important;font-weight:600;line-height:1.6!important;letter-spacing:0!important;text-transform:none!important;font-style:normal!important;color:rgba(243,248,245,.6);margin:0 0 18px;text-wrap:wrap}

/* ── 24. Touch targets: 44px on phones for header tools, toggles, chips, links ── */
@media(max-width:1000px){
  .nav-right :is(.fw-dark-toggle,.fw-k-btn){min-width:44px;min-height:44px}
}
.fw-motion-toggle{min-width:44px}
@media(max-width:900px){.ar-toc a{padding-top:11px!important;padding-bottom:11px!important;min-height:44px!important;display:flex!important;align-items:center}}
.cp-chip{min-height:44px}
.dir-claim-link{min-height:44px;display:inline-flex;align-items:center}
.lf-faq summary,.lf-video summary{min-height:44px;display:flex;align-items:center;gap:8px}
.lf-faq summary::-webkit-details-marker{margin-right:2px}
sup>a[href^="#"],a[href^="#src-"]{display:inline-block;min-width:24px;min-height:24px;padding:3px 4px;margin:-3px -2px;text-align:center;line-height:18px;box-sizing:border-box}
.dir-filter-clear{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
.dir-filter-clear:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:6px}

/* ── 25. Contrast fixes (light theme) and dark-theme muted text ──────── */
html:not([data-theme="dark"]) .tp-card .free-badge{color:#2F62D6}
.dir-source-note a{text-decoration:underline;text-underline-offset:3px}
html[data-theme="dark"]{--ink-mute:#8792A9}

/* ── 26. Inputs: a clearer focus ring (border plus a visible halo) ───── */
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--forest) 30%,transparent)!important}

/* ── 27. Headings inside cards and panels are sized for the card on phones ── */
@media(max-width:900px){
  :is(.calc-card,.form-section,.builder-form,.complete-screen,.pdf-modal,.fw-capture-modal,.fw-share-modal,.card,.panel) h2:not(.h2):not(.section-h2){font-size:clamp(22px,6vw,26px)!important;line-height:1.2!important}
}

/* ── 28. Calculator "send my summary" boxes follow the theme ─────────── */
.calc-lead-box{background:var(--linen,#F7F9FC)!important;border-color:var(--line-mid)!important}
.calc-lead-box>p{color:var(--ink)!important}

/* ── 29. Clickable cards: a gentle press state for touch ─────────────── */
:is(a.hp-g,a.gx-card,a.jh-card,a.gl-card,a.bl-card,a.tp-card-link):active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){:is(a.hp-g,a.gx-card,a.jh-card,a.gl-card,a.bl-card,a.tp-card-link):active{transform:none}}

/* ── 30. Back to top never sits under the cookie bar or the sticky CTA on phones ── */
@media(max-width:900px){
  body:is(.fw-cookie-open,.fw-scta-on,.fw-menu-open) .fw-back-top{opacity:0!important;pointer-events:none!important;visibility:hidden}
}

/* ── 31. No layout shift on load: floating buttons only animate after the page settles ── */
html:not(.fw-settled) :is(.fw-exit,.fw-save){transition:none!important}

/* ── 32. Buttons hidden by page scripts (style="display:none") stay hidden.
   fw-design.css forces display on .btn-primary with !important, which made the
   prenup and cohabitation builders show Previous, Next and Submit at once. ── */
:is(button,a,input)[style*="display: none"]:not(#fwb),:is(button,a,input)[style*="display:none"]:not(#fwb){display:none!important}

/* ── 33. Footer "Reduce motion" is a text button: size it to its words ── */
.fw-motion-toggle[data-text]{width:auto!important;padding:0 14px!important;white-space:nowrap;font-size:12.5px}