/* ============================================================================
   ibclc.css — IBCLC Credentialing & Billing page components.

   Everything binds the shared design tokens (tokens.css); zero raw brand hex
   here, translucent accent only via --blue-a08/a12/a20. theme.css provides
   the shell (nav, footer, buttons, primitives); this file adds the site's
   own sections: theme toggle, hero, card grids, checklists, compliance
   blocks, pilot band, and the contact form.
   ============================================================================ */

/* ---- Nav: logo sizing, visual order, active link, theme toggle ---- */
#navbar .ib-nav-mark{height:38px;width:auto}
.footer-brand img.ib-footer-mark{height:44px;width:auto}
/* keep the drawer machinery (.nav-toggle ~ .nav-menu) intact: DOM order is
   logo, theme-toggle, nav-toggle, nav-menu — flex order fixes the visuals. */
#navbar .nav-logo{order:1;margin-right:auto}
#navbar .nav-menu{order:2}
#navbar .theme-toggle{order:3}
#navbar .nav-toggle{order:4}

.nav-link[aria-current="page"]{opacity:1;color:var(--blue)}

.theme-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:10px;flex:0 0 auto;
    background:transparent;border:1px solid var(--gray-line);border-radius:10px;
    color:var(--white);cursor:pointer;
    transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.theme-toggle:hover{border-color:var(--blue);background:var(--blue-a08);color:var(--blue)}
.theme-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.theme-toggle svg{width:20px;height:20px}
/* light theme (default) shows the moon = "switch to dark"; dark shows the sun */
.theme-toggle .tt-sun{display:none}
.theme-toggle .tt-moon{display:block}
[data-theme="dark"] .theme-toggle .tt-sun{display:block}
[data-theme="dark"] .theme-toggle .tt-moon{display:none}

/* ---- Hero (home) ---- */
.ib-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--gray-line)}
.ib-hero-inner{
    position:relative;z-index:1;max-width:1080px;margin:0 auto;
    padding:clamp(84px,14vw,168px) clamp(20px,5vw,56px) clamp(56px,9vw,110px);
}
.ib-hero .th-mega{max-width:11ch}
.ib-hero .lede{
    margin-top:1.6rem;max-width:50ch;color:var(--gray);
    font-size:clamp(1rem,1.5vw,1.2rem);font-weight:300;
}
.ib-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem}

/* ---- Generic page masthead tweak: keep h1 comfortable for long titles ---- */
.masthead h1{max-width:18ch}

/* ---- Card grids (values, focus areas, pilot benefits) ---- */
.ib-grid{display:grid;gap:18px;margin-top:.4rem}
.ib-grid-2{grid-template-columns:repeat(2,1fr)}
.ib-grid-3{grid-template-columns:repeat(3,1fr)}
.ib-card{
    min-width:0;padding:26px;border-radius:16px;
    background:var(--bg-2);border:1px solid var(--gray-line);
    transition:transform .45s var(--ease-spring),border-color .3s var(--ease);
}
.ib-card:hover{transform:translateY(-4px);border-color:var(--blue-a20)}
.ib-card .n{
    display:block;font-family:var(--font-data);font-size:.68rem;
    letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:.8rem;
}
.ib-card h3{font-family:var(--font-display);font-weight:700;font-size:1.06rem;letter-spacing:-.3px;margin-bottom:.45rem}
.ib-card p{font-size:.9rem;color:var(--gray);line-height:1.65}

/* ---- Editorial prose (About story, compliance intros) ---- */
.ib-prose{max-width:64ch}
.ib-prose p{margin:0 0 1.15rem;color:var(--gray);font-size:clamp(.96rem,1.2vw,1.05rem);line-height:1.8}
.ib-prose p:last-child{margin-bottom:0}
.ib-prose strong{color:var(--white);font-weight:600}
.ib-prose a{color:var(--blue);text-decoration:none;font-weight:600}
.ib-prose a:hover{color:var(--blue-light)}
.ib-prose a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

/* ---- Split layout: narrative + aside card ---- */
.ib-split{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.ib-aside{
    position:sticky;top:96px;padding:28px;border-radius:18px;
    background:
        radial-gradient(30rem 20rem at 90% 0%, var(--blue-a08), transparent 60%),
        var(--bg-2);
    border:1px solid var(--gray-line);
}
.ib-aside .a-kicker{font-family:var(--font-data);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:.9rem}
.ib-aside h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.3px;margin-bottom:.2rem}
.ib-aside .a-role{font-family:var(--font-data);font-size:.74rem;color:var(--gray);display:block;margin-bottom:1rem}
.ib-aside p{font-size:.9rem;color:var(--gray);line-height:1.7}

/* ---- Checklists (requirements, what-we-handle, pilot asks) ---- */
.ib-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ib-check li{
    position:relative;padding:12px 14px 12px 44px;border-radius:12px;
    background:var(--bg-2);border:1px solid var(--gray-line);
    font-size:.92rem;color:var(--white);line-height:1.55;
}
.ib-check li::before{
    content:"";position:absolute;left:14px;top:15px;width:18px;height:18px;
    border-radius:50%;background:var(--blue-a12);
    /* token-driven check glyph — currentColor via mask would need an extra
       element; a simple border tick keeps it CSS-only */
}
.ib-check li::after{
    content:"";position:absolute;left:19px;top:19px;width:8px;height:5px;
    border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
    transform:rotate(-45deg);
}
.ib-check li strong{color:var(--white);font-weight:600}
.ib-check li .sub{display:block;margin-top:2px;font-size:.84rem;color:var(--gray)}

/* mono data chips (NPI / EIN / CAQH row) */
.ib-req-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:1rem}
.ib-req{
    font-family:var(--font-data);font-size:.78rem;letter-spacing:1px;
    padding:9px 14px;border-radius:9px;color:var(--blue);
    background:var(--blue-a08);border:1px solid var(--blue-a20);
}

/* ---- Out-of-scope boundary section ---- */
.ib-scope{
    padding:clamp(24px,4vw,44px);border-radius:18px;
    background:var(--bg-2);border:1px solid var(--gray-line);
    border-left:3px solid var(--blue);
}
.ib-scope h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;letter-spacing:-.3px;margin-bottom:.6rem}
.ib-scope > p{color:var(--gray);font-size:.94rem;line-height:1.75;max-width:72ch;margin-bottom:1.4rem}
.ib-scope-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px}
.ib-scope-list li{
    position:relative;padding:8px 0 8px 26px;font-size:.88rem;color:var(--gray);
    line-height:1.55;border-bottom:1px solid var(--gray-line);
}
.ib-scope-list li::before{
    content:"";position:absolute;left:2px;top:16px;width:12px;height:2px;
    background:var(--gray-dark);border-radius:2px;
}

/* ---- Compliance detail blocks ---- */
.ib-detail{display:grid;grid-template-columns:220px 1fr;gap:14px clamp(20px,4vw,48px);padding:22px 0;border-top:1px solid var(--gray-line)}
.ib-detail:last-of-type{border-bottom:1px solid var(--gray-line)}
.ib-detail .d-label{font-family:var(--font-data);font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--blue);padding-top:4px}
.ib-detail h3{font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.2px;margin-bottom:.35rem}
.ib-detail p{font-size:.92rem;color:var(--gray);line-height:1.7;max-width:64ch}

/* ---- Pilot: spots counter band ---- */
.ib-pilot-band{
    display:flex;align-items:center;gap:clamp(18px,3vw,36px);flex-wrap:wrap;
    padding:clamp(22px,4vw,40px);border-radius:18px;
    background:
        radial-gradient(36rem 22rem at 8% 0%, var(--blue-a12), transparent 62%),
        radial-gradient(30rem 20rem at 95% 100%, color-mix(in srgb, var(--ambient-indigo) 10%, transparent), transparent 66%),
        var(--bg-2);
    border:1px solid var(--blue-a20);
}
.ib-pilot-count{font-family:var(--font-headline);font-size:clamp(3rem,7vw,5rem);line-height:.9;color:var(--blue)}
.ib-pilot-band .pb-copy{flex:1;min-width:240px}
.ib-pilot-band .pb-copy h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;letter-spacing:-.3px;margin-bottom:.35rem}
.ib-pilot-band .pb-copy p{font-size:.92rem;color:var(--gray);line-height:1.65;max-width:58ch}

/* ---- Contact form ---- */
.ib-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:.5rem}
.ib-form .full{grid-column:1 / -1}
.ib-field label{
    display:block;margin-bottom:8px;
    font-family:var(--font-data);font-size:.7rem;letter-spacing:1.6px;
    text-transform:uppercase;color:var(--white);opacity:.85;
}
.ib-field label .req{color:var(--blue)}
.ib-field input,.ib-field select,.ib-field textarea{
    width:100%;padding:13px 15px;border-radius:11px;
    font-family:var(--font-body);font-size:.95rem;color:var(--white);
    background:var(--bg-2);border:1px solid var(--gray-line);
    transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.ib-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gray) 50%),linear-gradient(135deg,var(--gray) 50%,transparent 50%);
    background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.ib-field textarea{min-height:150px;resize:vertical}
.ib-field input::placeholder,.ib-field textarea::placeholder{color:var(--gray-dark)}
.ib-field input:focus-visible,.ib-field select:focus-visible,.ib-field textarea:focus-visible{
    outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-a20);
}
.ib-form-actions{grid-column:1 / -1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ib-form-note{font-size:.82rem;color:var(--gray);max-width:44ch}
/* honeypot — positioned off-viewport, never display:none (bots check that) */
.ib-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* form status banners */
.ib-alert{padding:16px 20px;border-radius:12px;margin-bottom:22px;font-size:.94rem;line-height:1.6}
.ib-alert-ok{background:var(--blue-a12);border:1px solid var(--blue-a20);color:var(--white)}
.ib-alert-err{background:color-mix(in srgb, var(--ambient-violet) 10%, transparent);border:1px solid color-mix(in srgb, var(--ambient-violet) 30%, transparent);color:var(--white)}
.ib-alert ul{margin:.5rem 0 0 1.1rem;padding:0}

/* ---- Section subheads shared ---- */
.section-sub{color:var(--gray);max-width:64ch;margin:-1.4rem 0 2.2rem;font-size:.98rem;line-height:1.75}

/* ---- Mobile drawer fixes (light theme exposed a theme-lab quirk) ---- */
@media (max-width:860px){
    /* theme.css paints the page-dimming ::before across the WHOLE viewport —
       including the drawer panel itself (its negative z-index only drops it
       below the links, not below the panel's translucent background). On the
       dark theme that black wash was invisible; on light it grayed the menu.
       Anchor the overlay to end at the panel's left edge: right:100% keeps
       the full-viewport dim on the page only, never on the panel. */
    .nav-toggle[aria-expanded="true"] ~ .nav-menu::before{
        left:auto;right:100%;width:100vw;
    }
    /* Solid panel surface so nothing can bleed through in either theme. */
    #navbar .nav-menu{background:var(--bg)}
}

/* ---- Stacked cards on phones: compact column + scrubbed rise (th-fx turns
   the sticky-stack engine off below 768px; the reveal is wired in footer.php) ---- */
@media (max-width:767px){
    .stack-card{min-height:0;padding:26px 22px}
    .stack-card h3{font-size:clamp(2rem,9vw,2.6rem)}
}

/* ---- Responsive ---- */
@media (max-width:900px){
    .ib-split{grid-template-columns:1fr}
    .ib-aside{position:static}
    .ib-grid-3{grid-template-columns:repeat(2,1fr)}
    .ib-detail{grid-template-columns:1fr;gap:6px}
}
@media (max-width:640px){
    .ib-grid-2,.ib-grid-3{grid-template-columns:1fr}
    .ib-scope-list{grid-template-columns:1fr}
    .ib-form{grid-template-columns:1fr}
    #navbar .ib-nav-mark{height:32px}
    /* 16px floor stops iOS Safari's auto-zoom on focused inputs */
    .ib-field input,.ib-field select,.ib-field textarea{font-size:1rem}
    /* pilot band reads as a stacked card: count on top, CTA full width */
    .ib-pilot-band{flex-direction:column;align-items:flex-start;gap:14px}
    .ib-pilot-count{font-size:4.4rem}
    .ib-pilot-band .btn{width:100%}
    /* aside cards lose their sticky offset once stacked */
    .ib-aside{padding:22px}
}
@media (prefers-reduced-motion:reduce){
    .ib-card:hover{transform:none}
}