/* All Care Health - shared UX layer. 31 July 2026.
 *
 * THIS IS THE ONE SHARED STYLESHEET ON THE SITE. Everything else is eight inline copies pasted
 * into eight PHP pages, which is why any fix there lands six or eight times. New shared styling
 * belongs here, loaded once from ac_seo_head() so it reaches all eleven urls from a single edit.
 *
 * Audience note that drives the whole file: seniors and their adult children, often on a phone.
 * Motion reassures, it never performs. Everything that moves is opt-out via prefers-reduced-motion,
 * and nothing moves while someone is trying to read.
 */

/* ---------------------------------------------------------------- shared base
 * The rules below are shared by every page and load once from here instead of being inlined
 * into each one.
 *
 * THEY MUST STAY AT THE TOP OF THIS FILE. Everything below outranks an inline copy of these
 * rules and several selectors are `body`-prefixed for exactly that reason. Move this block
 * down and those overrides start losing to the thing they were written to beat.
 *
 * Order inside the block matters: .brand, nav.links and .header-actions each appear twice with
 * different declarations, so the second of each pair has to stay second.
 *
 * `:root` is deliberately not here. /careers/ and /contact/ carry an extra token in theirs
 * (--control-line, the 3:1 control edge for WCAG 1.4.11) and both pages use it, so the nine
 * that match are not the same rule as the two that do not.
 */
* { box-sizing: border-box; }
body { margin:0; background:var(--page-bg); font-family:'Inter',Arial,sans-serif; color:var(--ink); line-height:1.6; }
.skip-link { position:absolute; left:-9999px; top:0; background:#fff; color:var(--navy); padding:0.75rem 1.2rem; border-radius:0 0 8px 0; font-weight:700; z-index:1000; }
.skip-link:focus { left:0; }
h1,h2,h3 { font-family:'Lora',Georgia,serif; color:var(--navy); margin:0 0 0.5rem; }
a { text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
.wrap { max-width:1160px; margin:0 auto; padding:0 1.5rem; }
.eyebrow { color:var(--blue); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-size:0.8rem; margin-bottom:0.5rem; }
header.site { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:2rem; padding:1rem 1.5rem; max-width:1160px; margin:0 auto; }
.brand { justify-self:start; }
nav.links { justify-self:center; }
.header-actions { justify-self:end; }
.brand { display:flex; align-items:center; gap:0.6rem; }
.brand img { height:44px; width:auto; }
nav.links { display:flex; gap:1.8rem; }
nav.links a { color:var(--ink); font-weight:600; font-size:0.95rem; }
nav.links a:hover { color:var(--blue); }
nav.links a.active { color:var(--blue); }
.header-actions { display:flex; align-items:center; gap:1rem; }
.phone-pill { display:flex; align-items:center; gap:0.4rem; color:var(--navy); font-weight:700; }
@media (max-width:820px) { nav.links, .phone-pill { display:none; } }
/* Tighter gap so logo and the labelled toggle still fit a 320px phone. */
@media (max-width:820px) { header.site { grid-template-columns:1fr auto; column-gap:1rem; padding:1rem; } }
/* A bare glyph with no border and no word is easy to miss on a phone. */
.menu-toggle { display:none; align-items:center; gap:0.45rem; background:none; border:1.5px solid var(--navy); border-radius:8px; font-family:inherit; font-size:1rem; font-weight:700; line-height:1; color:var(--navy); cursor:pointer; padding:0.55rem 0.8rem; }
.menu-toggle .menu-icon { font-size:1.2rem; line-height:1; }
.menu-toggle[aria-expanded="true"] { background:var(--navy); color:#fff; }
@media (max-width:820px) { .menu-toggle { display:inline-flex; } }
.mobile-nav { display:none; flex-direction:column; background:#fff; border-top:1px solid var(--line); padding:1rem 1.5rem 1.4rem; gap:0.9rem; }
.mobile-nav.open { display:flex; }
.mobile-nav a { color:var(--ink); font-weight:600; font-size:1.05rem; }
.mobile-nav a.active { color:var(--blue); }
@media (min-width:821px) { .mobile-nav { display:none !important; } }
.btn-ghost { border:1.5px solid var(--navy); color:var(--navy); padding:0.8rem 1.4rem; border-radius:8px; font-weight:700; display:inline-flex; align-items:center; gap:0.5rem; }
footer.site { background:var(--navy); color:rgba(255,255,255,0.85); padding:2.6rem 0 1.4rem; }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2rem; padding-bottom:1.6rem; border-bottom:1px solid rgba(255,255,255,0.15); }
.footer-brand { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.6rem; }
.footer-brand img { height:48px; width:auto; background:#fff; border-radius:8px; padding:8px 14px; }
footer.site h2 { color:#fff; font-size:0.95rem; margin:0 0 0.5rem; }
footer.site a { color:rgba(255,255,255,0.85); }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; padding-top:1.2rem; font-size:0.82rem; color:rgba(255,255,255,0.6); }
@media (max-width:820px) { .footer-grid { grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- end shared base */

/* SPECIFICITY, and it is not decoration: this sheet loads from ac_seo_head(), which every page
 * emits BEFORE its own inline <style> block. On a tie the inline copy therefore wins and a rule
 * here loses silently. Anything that names a selector those blocks already use is prefixed with
 * `body` to outrank them. Two exceptions: `.ac-btn` uses !important because the FAQ widget injects
 * its CSS at RUNTIME, after everything; and `body footer.site` has to beat that same injected
 * 96px reserve, because the call bar needs more room than the launcher alone did. (Megan caught
 * the ordering before this shipped.)
 */

/* ---------------------------------------------------------------- scroll reveal
 * Elements start invisible ONLY when JS is running (the .js-reveal class is added by ux.js).
 * Without that guard, a JS failure or a blocked script would leave the page permanently blank,
 * a reveal animation must never be the thing standing between a reader and the content.
 */
.js-reveal .ac-reveal {
    opacity: 0;
    transform: translateY(22px);
    /* 800ms and 22px. It started at 250ms and 8px, which measured as a real transition but read as
     * nothing: ease-out puts most of the change in the first third, so a short, small move is over
     * before the eye follows it. Jamie could not see it, and he was right - the fix is amplitude
     * and duration, not a different curve. */
    transition: opacity 800ms cubic-bezier(.22, .61, .36, 1),
                transform 800ms cubic-bezier(.22, .61, .36, 1);
}

/* NAMED ac-shown, NOT ac-in: the FAQ widget's own CSS already uses .ac-in for its input row and
 * sets display:flex on it. Reusing that name turned every revealed <section> into a flex
 * container, which silently overrode .about-grid's display:grid - the grid property went on
 * reporting a healthy 1fr while doing nothing at all, so the page read as stacked and was not.
 * Found by Gale on a render, caused by me the same evening. Do not rename this back. */
.js-reveal .ac-reveal.ac-shown {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------- button feedback
 * Focus is styled alongside hover, not after it: a keyboard or switch user gets the same
 * confirmation a mouse user does. The existing focus outlines are left alone.
 */
body .btn, body .btn-ghost, body .cta-band a, body button[type="submit"] {
    transition: background-color 160ms ease, color 160ms ease,
                border-color 160ms ease, transform 120ms ease;
}

body .btn:active, body .btn-ghost:active, body .cta-band a:active, body button[type="submit"]:active {
    transform: translateY(1px);
}

/* ---------------------------------------------------------------- the heart badge
 * One slow pulse on arrival, then never again. A looping heartbeat next to a photo of someone's
 * mother reads as decoration; one beat reads as warmth.
 */
.js-reveal .heart-badge.ac-shown {
    animation: ac-heart 1400ms ease-out 200ms 1;
}

@keyframes ac-heart {
      0% { transform: scale(1); }
     30% { transform: scale(1.09); }
     55% { transform: scale(1); }
     72% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ---------------------------------------------------------------- sticky call bar
 * Phones only. For a home care agency the call IS the conversion, and the header phone pill is
 * display:none under 820px while the in-body numbers scroll away. This keeps one always-reachable
 * tap target without covering the FAQ launcher, which owns the bottom-right corner.
 */
.ac-callbar {
    display: none;
}

@media (max-width: 820px) {
    .ac-callbar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2147482000;          /* below the FAQ launcher, deliberately */
        background: #14245c;
        box-shadow: 0 -6px 18px -8px rgba(20, 36, 92, .45);
        padding: env(safe-area-inset-bottom) 0 0;
    }

    .ac-callbar a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        /* 56px, comfortably over the 44px minimum, because the hands using it are not always steady */
        min-height: 56px;
        padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
        color: #fff;
        font-weight: 700;
        font-size: 1.05rem;
        text-decoration: none;
        letter-spacing: .01em;
    }

    .ac-callbar a:focus-visible {
        outline: 3px solid #fff;
        outline-offset: -5px;
    }

    /* The launcher sits 20px off the bottom; lift it clear of the bar rather than over it. */
    .ac-btn {
        bottom: 88px !important;
    }

    /* And keep the reserved footer space from earlier tonight ahead of both. */
    body footer.site {
        padding-bottom: 160px;
    }
}

/* ---------------------------------------------------------------- the opt-out
 * Last in the file so it wins. Anyone who has asked their OS for less motion gets a static page:
 * content still appears, it simply does not travel. Vestibular disorders are common in this exact
 * age group, and All Care bills Medicaid, which makes WCAG a federal requirement rather than a
 * preference.
 */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .ac-reveal,
    .js-reveal .ac-reveal.ac-shown {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .js-reveal .heart-badge.ac-shown {
        animation: none;
    }

    body .btn, body .btn-ghost, body .cta-band a, body button[type="submit"] {
        transition: none;
    }

    body .btn:active, body .btn-ghost:active, body .cta-band a:active, body button[type="submit"]:active {
        transform: none;
    }
}