/* ============================================================================
   H&H Law Group, family court landing pages (/family-court/...)

   Loaded after site.css and only on the court pages. Every rule is scoped to
   an fc- class, so nothing here can reach the rest of the site. Colours, fonts
   and radii come from the tokens site.css already defines.

   This file is unlayered, so it wins over site.css's layered utilities. That
   is deliberate for the fc- components and harmless elsewhere, because no
   selector here matches markup outside these pages.

   New file name on purpose: .htaccess caches CSS for a year as immutable.
   Give any changed version a new name and update the <link> tags.
   ========================================================================== */

/* ------------------------------------------------------------ base ------ */
.fc-body{font-size:1.0625rem}
.fc-section{padding-block:3.5rem}
@media (min-width:64rem){.fc-section{padding-block:5rem}}
.fc-section--white{background:#fff;border-block:1px solid var(--color-hairline)}
.fc-section--tint{background:var(--color-cream-200);border-block:1px solid var(--color-hairline)}
.fc-h2{font-size:clamp(1.7rem,4.2vw,2.3rem);line-height:1.12;color:var(--color-navy);margin-top:.75rem}
.fc-h3{font-size:1.3rem;line-height:1.25;color:var(--color-navy)}
.fc-intro{margin-top:1rem;max-width:42rem;font-size:1.06rem;line-height:1.7;color:var(--color-ink-muted)}
.fc-text{font-size:1.0625rem;line-height:1.7;color:var(--color-ink)}
.fc-text>*+*{margin-top:1rem}
.fc-text a,.fc-link{color:var(--color-gold-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.fc-text a:hover,.fc-link:hover{color:var(--color-gold-900);text-decoration-thickness:2px}
.fc-text strong{color:var(--color-navy);font-weight:600}
.fc-list>li{position:relative;padding-left:1.75rem;line-height:1.65}
.fc-list>li+li{margin-top:.6rem}
.fc-list>li:before{content:"";position:absolute;left:.2rem;top:.62em;width:.44rem;height:.44rem;background:var(--color-gold-600);transform:rotate(45deg)}
.fc-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.fc-btns .btn{min-height:3rem}
@media (max-width:39.99rem){.fc-btns .btn{width:100%}}
/* Anchored sections land with their own heading in view, clear of the
   quick-exit button that may be fixed at the top of the screen. */
[data-fc-anchor]{scroll-margin-top:4.75rem}
#enquiry{scroll-margin-top:1rem}

/* ------------------------------------------------------------ hero ------ */
.fc-hero{background:var(--color-cream);border-bottom:1px solid var(--color-hairline)}
.fc-hero__grid{display:grid;gap:2rem;padding-block:2.25rem 2.75rem}
@media (min-width:64rem){.fc-hero__grid{grid-template-columns:1fr 20rem;gap:4rem;align-items:center;padding-block:4rem}}
.fc-h1{margin-top:.9rem;font-size:clamp(2rem,6.4vw,3.05rem);line-height:1.08;color:var(--color-navy)}
.fc-first{margin-top:1rem;max-width:38rem;font-size:1.12rem;line-height:1.6;color:var(--color-navy)}
.fc-sub{margin-top:.75rem;max-width:38rem;font-size:1rem;line-height:1.6;color:var(--color-ink-muted)}
.fc-trust{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-top:1.5rem;font-size:.92rem;color:var(--color-ink-muted)}
.fc-trust li{display:flex;align-items:center;gap:.45rem}
.fc-trust svg{color:var(--color-gold-700);flex-shrink:0}
.fc-lawyer{display:flex;align-items:center;gap:1rem}
.fc-lawyer__img{width:5rem;height:5rem;border-radius:999px;object-fit:cover;object-position:50% 18%;border:1px solid var(--color-hairline);background:var(--color-cream-200);flex-shrink:0}
.fc-lawyer__name{font-family:var(--font-display);font-size:1.2rem;color:var(--color-navy);line-height:1.2}
.fc-lawyer__role{margin-top:.2rem;font-size:.9rem;line-height:1.45;color:var(--color-ink-muted)}
@media (min-width:64rem){
  .fc-lawyer{flex-direction:column;align-items:stretch;gap:0;border:1px solid var(--color-hairline);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
  .fc-lawyer__img{width:100%;height:auto;aspect-ratio:860/1089;border-radius:0;border:0}
  .fc-lawyer__cap{padding:1rem 1.25rem 1.2rem}
}

/* Headline variants. family-court-headline.js sets data-fc-s on <html>
   before first paint, only for a value this page lists, so exactly one
   variant of the H1 and first line is ever displayed and nothing moves. */
.fc-v{display:none}
.fc-v[data-default]{display:inline}
html[data-fc-s] .fc-v[data-default]{display:none}
html[data-fc-s="application"] .fc-v[data-v="application"],
html[data-fc-s="motion"] .fc-v[data-v="motion"],
html[data-fc-s="urgent-children"] .fc-v[data-v="urgent-children"],
html[data-fc-s="urgent-safety"] .fc-v[data-v="urgent-safety"],
html[data-fc-s="motions"] .fc-v[data-v="motions"],
html[data-fc-s="local"] .fc-v[data-v="local"],
html[data-fc-s="enforcement"] .fc-v[data-v="enforcement"],
html[data-fc-s="one-motion"] .fc-v[data-v="one-motion"],
html[data-fc-s="support"] .fc-v[data-v="support"],
html[data-fc-s="parenting"] .fc-v[data-v="parenting"],
html[data-fc-s="respond"] .fc-v[data-v="respond"]{display:inline}

/* ----------------------------------------------------- situation cards -- */
.fc-cards{display:grid;gap:1rem;margin-top:2rem}
@media (min-width:40rem){.fc-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.fc-cards--3{grid-template-columns:repeat(3,1fr)}}
.fc-card{background:#fff;border:1px solid var(--color-hairline);border-radius:var(--radius-sm);padding:1.4rem 1.4rem 1.5rem}
.fc-card__tag{display:inline-block;font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-gold-700)}
.fc-card .fc-h3{margin-top:.4rem}
.fc-card p{margin-top:.6rem;font-size:1rem;line-height:1.6;color:var(--color-ink-muted)}
.fc-card .fc-link{display:inline-block;margin-top:.8rem;font-size:.98rem;padding-block:.35rem}

/* ------------------------------------------------ deadlines / two-col --- */
.fc-split{display:grid;gap:2.5rem;margin-top:2rem}
@media (min-width:64rem){.fc-split{grid-template-columns:1fr 1fr;gap:4rem}}
.fc-note{margin-top:1.5rem;border-left:3px solid var(--color-gold);background:var(--color-gold-100);padding:1rem 1.2rem;font-size:1rem;line-height:1.6;color:var(--color-navy)}

/* ------------------------------------------------------- how it works --- */
.fc-steps{display:grid;gap:1rem;margin-top:2rem;counter-reset:fcstep}
@media (min-width:40rem){.fc-steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.fc-steps{grid-template-columns:repeat(4,1fr)}}
.fc-step{position:relative;background:#fff;border:1px solid var(--color-hairline);border-radius:var(--radius-sm);padding:1.3rem 1.3rem 1.4rem}
.fc-step:before{counter-increment:fcstep;content:counter(fcstep);display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:999px;background:var(--color-navy);color:#fff;font-family:var(--font-display);font-size:1.1rem}
.fc-step .fc-h3{margin-top:.9rem;font-size:1.15rem}
.fc-step p{margin-top:.5rem;font-size:.98rem;line-height:1.6;color:var(--color-ink-muted)}

/* ---------------------------------------------------- anchor sections --- */
.fc-anchor{border-top:1px solid var(--color-hairline)}
.fc-anchor+.fc-anchor{border-top:1px solid var(--color-hairline)}
.fc-anchor__grid{display:grid;gap:2rem}
@media (min-width:64rem){.fc-anchor__grid{grid-template-columns:1.1fr .9fr;gap:4rem}}
.fc-panel{background:#fff;border:1px solid var(--color-hairline);border-radius:var(--radius-sm);padding:1.4rem}
.fc-panel .fc-h3{font-size:1.15rem}
.fc-panel .fc-list{margin-top:.9rem}

/* Urgent section */
.fc-urgent{background:#fff}
.fc-911{display:flex;gap:.8rem;align-items:flex-start;margin-top:1.5rem;border:2px solid var(--color-danger);border-radius:var(--radius-sm);background:#fdf4f3;padding:1rem 1.1rem;color:#7c1d19;font-size:1.05rem;line-height:1.5}
.fc-911 svg{flex-shrink:0;margin-top:.15rem}
.fc-911 strong{font-weight:600}
.fc-911 a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Quick exit. Sticky inside the urgent section by default, so it stays on
   screen while that section is in view and needs no script. A visitor who
   arrived from an urgent ad gets it fixed for the whole visit (.is-fixed,
   added by family-court.js). Plain link, so it works by keyboard and without
   JavaScript. */
.fc-exit-wrap{position:sticky;top:.6rem;z-index:60;display:flex;justify-content:flex-end;padding-inline:.6rem;margin-top:-1.75rem;margin-bottom:.5rem}
.fc-exit{display:inline-flex;align-items:center;gap:.5rem;min-height:2.9rem;padding:.55rem 1rem;border-radius:var(--radius-sm);background:#7c1d19;color:#fff;font-weight:500;font-size:.95rem;letter-spacing:.02em;text-decoration:none;box-shadow:0 6px 18px -8px rgba(18,22,42,.55);border:2px solid #fff}
.fc-exit:hover{background:#5e1512}
.fc-exit:focus-visible{outline:3px solid var(--color-navy);outline-offset:2px}
.fc-exit.is-fixed{position:fixed;top:.6rem;right:.6rem;z-index:70}
.fc-exit-wrap .fc-exit{transform:translateY(0)}
.fc-exit-hint{margin-top:.75rem;font-size:.92rem;line-height:1.55;color:var(--color-ink-muted)}

/* ---------------------------------------------------------------- form -- */
.fc-form-section{background:var(--color-navy-900);background-image:radial-gradient(80% 60% at 20% 0,#c9a9611a,#0000 60%)}
.fc-form-grid{display:grid;gap:2rem}
@media (min-width:64rem){.fc-form-grid{grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}}
.fc-form-aside{color:rgba(255,255,255,.85)}
.fc-form-aside .fc-h2{color:#fff}
.fc-form-aside p{margin-top:1rem;line-height:1.65}
.fc-form-aside .eyebrow{color:var(--color-gold-300)}
.fc-form-aside :focus-visible{outline-color:var(--color-gold-300)}
.fc-form-aside strong{color:#fff;font-weight:500}
.fc-form-aside .btn-outline{color:#fff;border-color:#ffffff6b}
.fc-form-aside .btn-outline:hover{color:var(--color-navy-900);background:#fff;border-color:#fff}
.fc-form{background:#fff;border-radius:var(--radius-sm);padding:1.4rem;color:var(--color-ink)}
@media (min-width:40rem){.fc-form{padding:2rem}}
.fc-form[hidden]{display:none}
.fc-form__step{font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--color-gold-700)}
.fc-form__title{margin-top:.4rem;font-size:1.55rem;line-height:1.2;color:var(--color-navy)}
.fc-form__title:focus{outline:none}
.fc-nodetails{margin-top:1rem;display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--color-gold-300);background:var(--color-gold-100);border-radius:var(--radius-sm);padding:.85rem 1rem;font-size:.98rem;line-height:1.5;color:var(--color-navy)}
.fc-nodetails svg{flex-shrink:0;margin-top:.15rem;color:var(--color-gold-700)}
.fc-fields{display:grid;gap:1.25rem;margin-top:1.5rem}
@media (min-width:40rem){.fc-fields--2{grid-template-columns:1fr 1fr}.fc-span-2{grid-column:1/-1}}
.fc-req{color:var(--color-danger)}
.fc-opt{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--color-ink-muted)}
/* Sentence case for questions: long uppercase labels are hard to read under stress. */
.fc-form .field-label{font-size:1rem;letter-spacing:0;text-transform:none;line-height:1.45}
.fc-form .field-hint{font-size:.92rem}
.fc-form select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-navy) 50%),linear-gradient(135deg,var(--color-navy) 50%,transparent 50%);background-position:calc(100% - 1.25rem) 55%,calc(100% - .9rem) 55%;background-size:.4rem .4rem,.4rem .4rem;background-repeat:no-repeat;padding-right:2.5rem}
.fc-fieldset{border:0;margin:0;padding:0;min-width:0}
.fc-fieldset legend{padding:0;margin-bottom:.6rem;font-size:1rem;font-weight:500;color:var(--color-navy);line-height:1.45}
.fc-fieldset .field-hint{margin-top:0;margin-bottom:.75rem}
.fc-step-intro{margin-top:.5rem;font-size:.98rem;line-height:1.55;color:var(--color-ink-muted)}
.fc-choices{display:flex;flex-wrap:wrap;gap:.5rem}
.fc-choice{display:inline-flex;align-items:center;gap:.6rem;min-height:2.9rem;padding:.4rem .95rem .4rem .75rem;border:1px solid var(--color-navy-300);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:1rem;color:var(--color-ink)}
.fc-choice:hover{border-color:var(--color-navy-500)}
.fc-choice input{width:1.3rem;height:1.3rem;margin:0;accent-color:var(--color-navy);flex-shrink:0}
.fc-choice:has(input:checked){border-color:var(--color-navy);background:var(--color-cream)}
.fc-choice:has(input:focus-visible){outline:3px solid var(--color-gold-700);outline-offset:2px}
.fc-fieldset[aria-invalid=true] .fc-choice{border-color:var(--color-danger)}
.fc-consent{display:flex;gap:.8rem;align-items:flex-start;cursor:pointer;font-size:.98rem;line-height:1.55;color:var(--color-ink)}
.fc-consent input{width:1.45rem;height:1.45rem;margin-top:.1rem;flex-shrink:0;accent-color:var(--color-navy)}
.fc-alert{margin-top:1rem;border:2px solid var(--color-danger);border-radius:var(--radius-sm);background:#fdf4f3;padding:1rem 1.1rem;color:#7c1d19;line-height:1.5}
.fc-alert[hidden]{display:none}
.fc-alert p+p{margin-top:.5rem}
.fc-alert strong{font-weight:600;font-size:1.08rem}
.fc-alert .btn{margin-top:.8rem;background:#7c1d19;color:#fff;width:100%}
@media (min-width:40rem){.fc-alert .btn{width:auto}}
.fc-alert .btn:hover{background:#5e1512}
.fc-errors{margin-top:1.25rem;border:2px solid var(--color-danger);border-radius:var(--radius-sm);background:#fdf4f3;padding:1rem 1.1rem;color:var(--color-danger)}
.fc-errors:focus{outline:3px solid var(--color-gold-700);outline-offset:2px}
.fc-errors p{font-weight:500}
.fc-errors ul{margin-top:.4rem;padding-left:1.2rem;list-style:disc;font-size:.95rem}
.fc-errors a{text-decoration:underline;text-underline-offset:2px}
.fc-status{margin-top:1rem;border:1px solid;border-radius:var(--radius-sm);padding:.9rem 1rem;font-size:.95rem;line-height:1.5}
.fc-status--bad{border-color:#b8342f66;background:#fdf4f3;color:var(--color-danger)}
.fc-status--ok{border-color:#1f6b4a66;background:#f1f8f4;color:var(--color-navy)}
.fc-submit{margin-top:1.5rem;width:100%}
.fc-small{margin-top:1rem;font-size:.88rem;line-height:1.55;color:var(--color-ink-muted)}
.fc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fc-done{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;font-size:.98rem;color:var(--color-success)}
.fc-done svg{flex-shrink:0;margin-top:.2rem}

/* -------------------------------------------------------------- lawyer -- */
.fc-about{display:grid;gap:2rem;align-items:center}
@media (min-width:64rem){.fc-about{grid-template-columns:22rem 1fr;gap:4rem}}
.fc-about__photo{max-width:22rem;border:1px solid var(--color-hairline);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-cream-200)}
.fc-about__photo img{display:block;width:100%;height:auto}
.fc-role{margin-top:.5rem;font-size:.8rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--color-gold-700)}
.fc-facts{display:grid;gap:.5rem;margin-top:1.25rem}
.fc-facts li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.55}
.fc-facts svg{flex-shrink:0;margin-top:.3rem;color:var(--color-gold-700)}

/* ------------------------------------------------------------- reviews -- */
.fc-reviews{text-align:center}
.fc-reviews .fc-h2{max-width:36rem;margin-inline:auto}
.fc-stars{display:flex;justify-content:center;gap:.15rem;color:var(--color-gold-600);margin-top:1rem}
.fc-reviews p{max-width:36rem;margin:1rem auto 0;color:var(--color-ink-muted);line-height:1.65}
.fc-reviews .btn{margin-top:1.5rem}

/* ------------------------------------------------------ courts/offices -- */
.fc-places{display:grid;gap:2rem;margin-top:2rem}
@media (min-width:64rem){.fc-places{grid-template-columns:1fr 1fr;gap:4rem}}
.fc-addr{display:grid;gap:1rem;margin-top:1rem}
.fc-addr li{border-left:2px solid var(--color-gold);padding-left:1rem;line-height:1.55}
.fc-addr strong{display:block;color:var(--color-navy);font-weight:500}
.fc-addr span{color:var(--color-ink-muted);font-size:.98rem}

/* ----------------------------------------------------------------- faq -- */
.fc-faq{display:grid;gap:2rem}
@media (min-width:64rem){.fc-faq{grid-template-columns:.8fr 1.2fr;gap:4rem}}
.fc-faq__list{border-top:1px solid var(--color-hairline)}
.fc-faq__list details{border-bottom:1px solid var(--color-hairline)}
.fc-faq__list summary{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:1.1rem 0;min-height:2.75rem;cursor:pointer;list-style:none;font-size:1.08rem;font-weight:500;color:var(--color-navy);line-height:1.45}
.fc-faq__list summary::-webkit-details-marker{display:none}
.fc-faq__list summary:after{content:"+";flex-shrink:0;display:grid;place-items:center;width:1.75rem;height:1.75rem;border:1px solid var(--color-hairline);border-radius:999px;color:var(--color-gold-700);font-size:1.15rem;line-height:1;transition:transform .25s var(--ease-out-soft)}
.fc-faq__list details[open] summary:after{transform:rotate(45deg)}
.fc-faq__list .fc-text{padding:0 2.5rem 1.3rem 0}

/* -------------------------------------------------------------- footer -- */

/* --------------------------------------------- mobile sticky action bar -- */
.fc-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--color-hairline);box-shadow:0 -8px 24px -18px rgba(18,22,42,.5)}
.fc-bar .btn{min-height:3rem;padding-inline:.6rem;font-size:.78rem;letter-spacing:.06em;line-height:1.2;text-align:center;width:100%;gap:.5rem}
.fc-has-bar{padding-bottom:calc(4.4rem + env(safe-area-inset-bottom))}
@media (min-width:64rem){.fc-bar{display:none}.fc-has-bar{padding-bottom:0}}
/* Keep focused fields clear of the fixed bar when the keyboard moves focus. */
@media (max-width:63.99rem){html:has(.fc-has-bar){scroll-padding-bottom:5.5rem}}

/* -------------------------------------------------------- thank-you ---- */
.fc-thanks{padding-block:3.5rem 4rem}
.fc-thanks__icon{display:grid;place-items:center;width:3.5rem;height:3.5rem;margin-inline:auto;border-radius:999px;background:#1f6b4a1a;color:var(--color-success)}
.fc-thanks h1{margin-top:1.5rem;text-align:center;font-size:clamp(2rem,6vw,2.6rem);color:var(--color-navy)}
.fc-thanks .fc-lead{margin-top:1rem;text-align:center;font-size:1.1rem;line-height:1.65;color:var(--color-ink-muted)}
.fc-next{margin-top:2rem;display:grid;gap:.9rem}
.fc-next li{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1px solid var(--color-hairline);border-radius:var(--radius-sm);padding:1rem 1.1rem;line-height:1.55}
.fc-next b{display:grid;place-items:center;flex-shrink:0;width:1.9rem;height:1.9rem;border-radius:999px;background:var(--color-navy);color:#fff;font-weight:500;font-size:.95rem}
.fc-center{text-align:center}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion:reduce){
  .fc-faq__list summary:after{transition:none}
}