/* =========================================================================
   StayCareInfo — public design system
   Loaded AFTER bootstrap.min.css and after the inline <style> in
   layouts/public.blade.php, so it intentionally overrides the legacy sci-*
   utilities. Self-hosted only (no CDN). Fonts degrade gracefully to the
   system stack until the woff2 files are installed under /vendor/fonts/.
   ========================================================================= */

/* ----- Fonts (self-hosted; see DEPLOY note in 05-26 summary) ------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/vendor/fonts/inter/Inter-roman.var.woff2') format('woff2');
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('/vendor/fonts/fraunces/Fraunces-roman.var.woff2') format('woff2');
}

/* ----- Design tokens ----------------------------------------------------- */
:root {
    /* Teal primary scale */
    --sci-primary-50:  #f0f6f8;
    --sci-primary-100: #d9e8ec;
    --sci-primary-200: #b3d1d9;
    --sci-primary-300: #80b3bf;
    --sci-primary-400: #4d8f9f;
    --sci-primary:     #2d6a7a;
    --sci-primary-600: #265a68;
    --sci-primary-dark:#1e4d5a;
    --sci-primary-800: #173b46;
    --sci-primary-900: #102a31;

    /* Gold accent scale */
    --sci-accent-300:  #f2d49a;
    --sci-accent-400:  #edc068;
    --sci-accent:      #e8a838;
    --sci-accent-600:  #d49a2e;
    --sci-accent-700:  #b07f24;

    /* Warm neutrals */
    --sci-warm:        #fdf6ec;
    --sci-warm-100:    #fffaf2;
    --sci-light:       #f8f9fa;
    --sci-gray-50:     #faf9f7;
    --sci-gray-100:    #f3f1ec;
    --sci-gray-200:    #e6e2da;
    --sci-gray-300:    #d3cdc1;
    --sci-gray-400:    #a8a092;
    --sci-gray-500:    #7c7468;
    --sci-gray-600:    #5c554b;
    --sci-gray-700:    #423d35;
    --sci-gray-800:    #2b2722;
    --sci-gray-900:    #1a1714;

    /* Gradients */
    --sci-grad-hero:    linear-gradient(135deg, #fffaf2 0%, #fdf6ec 45%, #eef5f7 100%);
    --sci-grad-primary: linear-gradient(135deg, #2d6a7a 0%, #1e4d5a 100%);
    --sci-grad-accent:  linear-gradient(135deg, #edc068 0%, #e8a838 100%);

    /* Elevation */
    --sci-shadow-sm: 0 1px 2px rgba(16,42,49,.06), 0 1px 3px rgba(16,42,49,.08);
    --sci-shadow-md: 0 4px 6px -1px rgba(16,42,49,.08), 0 2px 4px -2px rgba(16,42,49,.06);
    --sci-shadow-lg: 0 10px 22px -4px rgba(16,42,49,.12), 0 4px 8px -4px rgba(16,42,49,.08);
    --sci-shadow-xl: 0 24px 40px -8px rgba(16,42,49,.18), 0 10px 18px -10px rgba(16,42,49,.12);

    /* Radius */
    --sci-r-sm: .5rem;
    --sci-r:    .75rem;
    --sci-r-lg: 1.25rem;
    --sci-r-pill: 50rem;

    /* Typography */
    --sci-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --sci-font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ----- Base -------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--sci-font-body);
    color: var(--sci-gray-800);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .sci-display {
    font-family: var(--sci-font-head);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sci-primary-dark);
}

/* On dark/colored sections (Bootstrap .text-white), headings must stay light.
   Without this the global heading color above makes them blend into the
   background (e.g. CTA bands, the hero lead-form header). */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3,
.text-white .h4, .text-white .h5, .text-white .h6 {
    color: inherit;
}

/* Badges on the teal gradient need explicit light text (Bootstrap .badge sets
   no color without .text-bg-*, so links/text would otherwise read dark). */
.badge.bg-sci-primary,
a.badge.bg-sci-primary { color: #fff; }
a.badge.bg-sci-primary:hover { color: #fff; opacity: .9; }

.lead { color: var(--sci-gray-700); }

/* Muted text bumped from Bootstrap's #6c757d to a warm dark gray so it clears
   WCAG AA (4.5:1) on both white and the cream (.bg-sci-warm) sections. */
.text-muted { color: var(--sci-gray-600) !important; }

/* Sticky map/aside columns: must sit BELOW the sticky navbar (z-index 1020) and
   stick beneath it. Bootstrap's own .sticky-top forces z-index 1020, which tied
   with the navbar and let the map paint over the header. */
.sci-sticky-aside {
    position: sticky;
    top: 84px;
    z-index: 1;
}

/* Keep the legacy helper but warm it slightly */
.text-sci { color: var(--sci-primary) !important; }
.text-sci-dark { color: var(--sci-primary-dark) !important; }
.text-accent { color: var(--sci-accent-700) !important; }
.bg-sci-warm { background-color: var(--sci-warm) !important; }
.bg-sci-primary { background: var(--sci-grad-primary) !important; }
.bg-sci-soft { background-color: var(--sci-primary-50) !important; }

/* Accessible focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid var(--sci-accent-400);
    outline-offset: 2px;
    box-shadow: none;
}

/* ----- Buttons ----------------------------------------------------------- */
.btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }

.btn-sci {
    background: var(--sci-grad-primary);
    border: none;
    color: #fff;
    box-shadow: var(--sci-shadow-sm);
}
.btn-sci:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--sci-shadow-md);
    filter: brightness(1.06);
}
.btn-sci-accent {
    background: var(--sci-grad-accent);
    border: none;
    color: #3a2c0a;
    font-weight: 600;
    box-shadow: var(--sci-shadow-sm);
}
.btn-sci-accent:hover {
    color: #3a2c0a;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(232,168,56,.55);
    filter: brightness(1.04);
}
.btn-outline-secondary {
    border-color: var(--sci-gray-300);
    color: var(--sci-gray-700);
}
.btn-outline-secondary:hover {
    background: var(--sci-gray-100);
    border-color: var(--sci-gray-400);
    color: var(--sci-gray-900);
    transform: translateY(-2px);
}

/* ----- Cards ------------------------------------------------------------- */
.card { border-radius: var(--sci-r); }

.sci-card {
    border: 1px solid var(--sci-gray-200);
    border-radius: var(--sci-r);
    background: #fff;
    box-shadow: var(--sci-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sci-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sci-shadow-lg);
    border-color: var(--sci-primary-200);
}

/* ----- Navbar ------------------------------------------------------------ */
.navbar-sci {
    background: var(--sci-grad-primary) !important;
    box-shadow: 0 2px 14px rgba(16,42,49,.20);
}
.navbar-sci .navbar-brand {
    font-family: var(--sci-font-head);
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: 1.4rem;
}
.navbar-sci .nav-link { font-weight: 500; }
.navbar-sci .nav-link:hover { color: #fff; }
.navbar-sci .dropdown-menu {
    border: none;
    box-shadow: var(--sci-shadow-lg);
    border-radius: var(--sci-r-sm);
    padding: .4rem;
}
.navbar-sci .dropdown-item { border-radius: .375rem; }
.navbar-sci .dropdown-item:active { background: var(--sci-primary); }

/* ----- Hero -------------------------------------------------------------- */
.sci-hero {
    position: relative;
    background: var(--sci-grad-hero);
    overflow: hidden;
}
/* Soft decorative blobs for depth (pure CSS, no images) */
.sci-hero::before,
.sci-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    opacity: .5;
    z-index: 0;
    pointer-events: none;
}
.sci-hero::before {
    width: 420px; height: 420px;
    background: radial-gradient(circle at 30% 30%, rgba(45,106,122,.16), transparent 70%);
    top: -120px; right: -80px;
}
.sci-hero::after {
    width: 360px; height: 360px;
    background: radial-gradient(circle at 50% 50%, rgba(232,168,56,.16), transparent 70%);
    bottom: -140px; left: -60px;
}
.sci-hero > .container { position: relative; z-index: 1; }

.sci-highlight {
    background: linear-gradient(180deg, transparent 62%, rgba(232,168,56,.45) 62%);
    padding: 0 .1em;
}

.sci-hero-stat { color: var(--sci-primary); font-weight: 700; }

.sci-lead-card {
    border: none;
    border-radius: var(--sci-r-lg);
    box-shadow: var(--sci-shadow-xl);
    overflow: hidden;
    border-top: 4px solid var(--sci-accent);
}
.sci-lead-card .card-header { background: var(--sci-grad-primary) !important; }

.sci-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--sci-primary-50);
    color: var(--sci-primary-dark);
    border: 1px solid var(--sci-primary-100);
    border-radius: var(--sci-r-pill);
    padding: .25rem .75rem;
    font-size: .8rem;
    font-weight: 600;
}

/* ----- Trust band -------------------------------------------------------- */
.sci-trust-band { background: #fff; border-top: 1px solid var(--sci-gray-200); border-bottom: 1px solid var(--sci-gray-200); }
.sci-trust-item { display: flex; align-items: center; justify-content: center; gap: .65rem; }
.sci-trust-icon {
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--sci-primary-50);
    color: var(--sci-primary);
    display: inline-flex; align-items: center; justify-content: center;
}
.sci-trust-num { color: var(--sci-primary-dark); font-weight: 700; }

/* ----- How it works ------------------------------------------------------ */
.sci-steps { position: relative; }
.sci-step-circle {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--sci-grad-primary);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--sci-shadow-md);
    position: relative; z-index: 1;
}
.sci-step-num {
    position: absolute; top: -6px; right: -6px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--sci-grad-accent);
    color: #3a2c0a;
    font-family: var(--sci-font-head);
    font-weight: 700; font-size: .95rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--sci-shadow-sm);
}
/* Connecting line behind the three steps (desktop only) */
@media (min-width: 768px) {
    .sci-steps::before {
        content: "";
        position: absolute;
        top: 42px; left: 16%; right: 16%;
        height: 3px;
        background: repeating-linear-gradient(90deg, var(--sci-primary-200) 0 10px, transparent 10px 20px);
        z-index: 0;
    }
}

/* ----- Care type cards --------------------------------------------------- */
.sci-care-card { position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.sci-care-card::after {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--sci-grad-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .25s ease;
}
.sci-care-card:hover::after { transform: scaleY(1); }
.sci-care-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--sci-primary-50);
    color: var(--sci-primary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.sci-care-card:hover .sci-care-icon {
    background: var(--sci-grad-primary);
    color: #fff;
    transform: scale(1.06) rotate(-3deg);
}
.sci-care-card .stretched-link::after { border-radius: var(--sci-r); }

/* ----- Testimonials ------------------------------------------------------ */
.sci-testimonial { position: relative; height: 100%; }
.sci-quote-mark {
    font-family: var(--sci-font-head);
    font-size: 3.5rem; line-height: 1;
    color: var(--sci-accent-300);
    margin-bottom: -1rem;
}
.sci-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--sci-grad-primary);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
}

/* ----- Closing CTA band -------------------------------------------------- */
.sci-cta-band {
    background: var(--sci-grad-primary);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.sci-cta-band h2, .sci-cta-band .lead { color: #fff; }
.sci-cta-band .lead { color: rgba(255,255,255,.85); }
.sci-cta-band::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% -20%, rgba(232,168,56,.22), transparent 55%);
    pointer-events: none;
}
.sci-cta-band > .container { position: relative; z-index: 1; }

/* ----- Section dividers -------------------------------------------------- */
.sci-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }

/* ----- Inner page header band -------------------------------------------- */
.sci-page-header {
    background: var(--sci-grad-hero);
    border-bottom: 1px solid var(--sci-gray-200);
    padding: 2.25rem 0 2rem;
}
.sci-page-header h1 { margin-bottom: 0; }
.sci-page-header .breadcrumb { margin-bottom: .65rem; }

.breadcrumb { font-size: .875rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sci-gray-400); }
.breadcrumb-item a { color: var(--sci-primary-dark); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--sci-gray-600); }

/* ----- Inner page cards (normalize + lift list cards) -------------------- */
.card.shadow-sm, .card.shadow {
    border: 1px solid var(--sci-gray-200);
    border-radius: var(--sci-r);
    box-shadow: var(--sci-shadow-sm) !important;
}
.card.shadow-sm.h-100, .card.shadow.h-100 {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card.shadow-sm.h-100:hover, .card.shadow.h-100:hover {
    transform: translateY(-4px);
    box-shadow: var(--sci-shadow-lg) !important;
    border-color: var(--sci-primary-200);
}

/* ----- State / location tiles -------------------------------------------- */
.sci-tile {
    display: block;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--sci-gray-200);
    border-radius: var(--sci-r);
    background: #fff;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sci-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--sci-shadow-md);
    border-color: var(--sci-primary-200);
}

/* ----- Article sidebar --------------------------------------------------- */
@media (min-width: 992px) {
    .sci-article-sidebar {
        position: sticky;
        top: 88px; /* clears the sticky navbar */
    }
}

/* ----- Scroll reveal (progressive enhancement) --------------------------- */
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-delay-1 { transition-delay: .08s; }
.js .reveal-delay-2 { transition-delay: .16s; }
.js .reveal-delay-3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .btn:hover, .sci-card:hover, .sci-care-card:hover .sci-care-icon { transform: none !important; }
}

/* ====== Accessibility: skip link, widget, and user a11y preferences ====== */

/* Skip-to-content link -- visible only on keyboard focus */
.sci-skip-link {
    position: absolute;
    left: 1rem;
    top: -3.5rem;
    z-index: 2000;
    background: var(--sci-primary-dark);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0 0 var(--sci-r-sm) var(--sci-r-sm);
    text-decoration: none;
    transition: top .15s ease;
}
.sci-skip-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid var(--sci-accent-400);
    outline-offset: 2px;
}

/* Floating widget button (mid-right edge -- clears bottom bars) */
.sci-a11y-fab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1035;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: var(--sci-r-sm) 0 0 var(--sci-r-sm);
    background: var(--sci-primary-dark);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sci-shadow-md);
    cursor: pointer;
}
.sci-a11y-fab:hover { background: var(--sci-primary); }

.sci-a11y-panel {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1036;
    width: 290px;
    max-width: calc(100vw - 2rem);
    background: #fff;
    border: 1px solid var(--sci-gray-200);
    border-radius: var(--sci-r);
    box-shadow: var(--sci-shadow-xl);
    padding: 1rem 1.25rem 1.25rem;
}
.sci-a11y-panel[hidden] { display: none; }
.sci-a11y-panel h2 { font-size: 1.05rem; }
.sci-a11y-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem 0;
    border-top: 1px solid var(--sci-gray-100);
}
.sci-a11y-group { display: flex; gap: .35rem; }
.sci-a11y-btn {
    border: 1px solid var(--sci-gray-300);
    background: #fff;
    border-radius: .4rem;
    padding: .3rem .7rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--sci-gray-800);
    min-width: 3rem;
}
.sci-a11y-btn:hover { border-color: var(--sci-primary-300); }
.sci-a11y-btn[aria-pressed="true"] {
    background: var(--sci-primary);
    color: #fff;
    border-color: var(--sci-primary);
}
.sci-a11y-reset { width: 100%; margin-top: .85rem; }

/* ----- User preference: underline links ----- */
html.a11y-underline a { text-decoration: underline !important; }

/* ----- User preference: reduce motion ----- */
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}
html.a11y-no-motion .reveal { opacity: 1 !important; transform: none !important; }

/* ----- User preference: high contrast -----------------------------------
   The design is token-driven, so flip the TOKENS to a pure black-on-white
   theme and every component (headings, bands, buttons, borders) recolors at
   once. Then patch the literal-color cases and the inverted (black) bands. */
html.a11y-contrast {
    --sci-primary: #000;
    --sci-primary-50: #fff;
    --sci-primary-100: #000;
    --sci-primary-200: #000;
    --sci-primary-300: #000;
    --sci-primary-400: #000;
    --sci-primary-600: #000;
    --sci-primary-dark: #000;
    --sci-accent: #000;
    --sci-accent-300: #000;
    --sci-accent-400: #000;
    --sci-accent-600: #000;
    --sci-accent-700: #000;
    --sci-warm: #fff;
    --sci-warm-100: #fff;
    --sci-light: #fff;
    --sci-gray-50: #fff;
    --sci-gray-100: #fff;
    --sci-gray-200: #000;
    --sci-gray-300: #000;
    --sci-gray-400: #000;
    --sci-gray-500: #000;
    --sci-gray-600: #000;
    --sci-gray-700: #000;
    --sci-gray-800: #000;
    --sci-gray-900: #000;
    --sci-grad-hero: #fff;
    --sci-grad-primary: #000;
    --sci-grad-accent: #000;
    --sci-shadow-sm: none;
    --sci-shadow-md: none;
    --sci-shadow-lg: none;
    --sci-shadow-xl: none;
    background: #fff;
}
html.a11y-contrast body { background: #fff; color: #000; }

/* Strip decorative depth that muddies contrast */
html.a11y-contrast * { box-shadow: none !important; text-shadow: none !important; }
html.a11y-contrast .sci-hero::before,
html.a11y-contrast .sci-hero::after,
html.a11y-contrast .sci-cta-band::before { display: none !important; }

/* Solid borders so structure stays visible on all-white */
html.a11y-contrast .card,
html.a11y-contrast .sci-card,
html.a11y-contrast .sci-tile,
html.a11y-contrast .sci-lead-card,
html.a11y-contrast .form-control,
html.a11y-contrast .form-select,
html.a11y-contrast .dropdown-menu,
html.a11y-contrast .sci-a11y-panel { border: 2px solid #000 !important; }

/* Inverted (now-black) bands keep light text */
html.a11y-contrast .navbar-sci,
html.a11y-contrast .navbar-sci .nav-link,
html.a11y-contrast .navbar-sci .navbar-brand,
html.a11y-contrast .navbar-sci .dropdown-toggle,
html.a11y-contrast .bg-sci-primary,
html.a11y-contrast .sci-cta-band,
html.a11y-contrast .sci-cta-band .lead,
html.a11y-contrast .footer-sci,
html.a11y-contrast .footer-sci a { color: #fff !important; }
html.a11y-contrast .footer-sci { background: #000 !important; }

/* Buttons: solid black, white text, visible edge */
html.a11y-contrast .btn-sci,
html.a11y-contrast .btn-sci-accent,
html.a11y-contrast .btn-outline-secondary,
html.a11y-contrast .btn-outline-primary {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
}

/* Patch components with literal (non-token) colors sitting on now-black fills */
html.a11y-contrast .sci-step-num,
html.a11y-contrast .sci-step-circle,
html.a11y-contrast .sci-avatar { color: #fff !important; }

/* Links underlined; badges solid black */
html.a11y-contrast a { text-decoration: underline; }
html.a11y-contrast .badge { background: #000 !important; color: #fff !important; }
html.a11y-contrast .sci-skip-link { background: #000 !important; }