/* =====================================================================
   Telehealth Africa — light page chrome (OPT-IN)
   ---------------------------------------------------------------------
   Every rule here is gated behind `body.light-chrome`, so a page only
   gets this look if its template adds that class via the body_class
   block. Pages that do not opt in are completely unaffected.

   Currently opted in:
     - patient_dashboard.html          (body.patient-workspace light-chrome)
     - patients/ai_specialty_finder.html (body.ai-finder-page  light-chrome)

   This file changes appearance only — no layout.html, no markup, no JS.
   ===================================================================== */

body.light-chrome{
    --lc-ink:#0d1b2f;
    --lc-ink-soft:#3d4c66;
    --lc-muted:#6b7a95;
    --lc-line:#e3e8f1;
    --lc-accent:#155eef;
    --lc-accent-dark:#0f47c4;
}

/* ---------------------------------------------------------------------
   1. FIXED-NAVBAR OVERLAP
   layout.html reserves a 56px spacer for the fixed navbar, but the
   navbar is ~92px tall because the animated brand logo is 80px wide
   (aspect-ratio 790/868 => ~88px tall) plus .25rem padding. That left
   36px of every page tucked underneath the header — which is what was
   clipping the logo/title row at the top of the AI finder.
   These pages reserve the real height instead.
   --------------------------------------------------------------------- */
body.light-chrome > div[style*="padding-top: 56px"]{
    padding-top:92px !important;
}

/* main.css sets a site-wide `body{margin-top:5rem}` (80px) that predates the
   fixed-navbar spacer above. With both in place the page starts 172px down
   instead of 92px, leaving an empty band under the navbar. The spacer already
   reserves the navbar's real height, so the legacy margin is dead space here. */
body.light-chrome{
    margin-top:0 !important;
}

/* ---------------------------------------------------------------------
   2. NAVBAR — white instead of charcoal
   --------------------------------------------------------------------- */
body.light-chrome .site-header .navbar{
    background:#ffffff !important;
    /* inset hairline instead of border-bottom: a real border would add 1px to
       the header height and re-introduce a 1px overlap with the spacer above. */
    box-shadow:inset 0 -1px 0 var(--lc-line), 0 1px 3px rgba(16,35,68,.07) !important;
}

/* Links: navbar-dark makes these near-white, so they need re-colouring. */
body.light-chrome .site-header .nav-link,
body.light-chrome .site-header .navbar-nav .nav-link,
body.light-chrome .site-header .navbar-brand{
    color:var(--lc-ink-soft) !important;
}
body.light-chrome .site-header .nav-link:hover,
body.light-chrome .site-header .nav-link:focus,
body.light-chrome .site-header .nav-link.active{
    color:var(--lc-accent) !important;
}

/* Hamburger toggler */
body.light-chrome .site-header .navbar-toggler{
    border-color:#d7dee9;
}
body.light-chrome .site-header .navbar-toggler:focus{
    box-shadow:0 0 0 .2rem rgba(21,94,239,.18);
}
body.light-chrome .site-header .navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233d4c66' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    filter:none !important;
}

/* "Find a Doctor" is .btn-outline-light — invisible on white. */
body.light-chrome .site-header .btn-outline-light{
    color:var(--lc-accent) !important;
    border-color:var(--lc-accent) !important;
    background:transparent !important;
}
body.light-chrome .site-header .btn-outline-light:hover,
body.light-chrome .site-header .btn-outline-light:focus{
    color:#fff !important;
    background:var(--lc-accent) !important;
    border-color:var(--lc-accent) !important;
}

/* Language globe button (white text/border by default) */
body.light-chrome .site-header .lang-globe-btn{
    color:var(--lc-ink-soft);
    border-color:#d7dee9;
}
body.light-chrome .site-header .lang-globe-btn:hover{
    background:#eef3ff;
    border-color:var(--lc-accent);
}

/* Notification bell + profile chevron */
body.light-chrome .site-header .notification-bell,
body.light-chrome .site-header .notification-bell i,
body.light-chrome .site-header #userDropdown,
body.light-chrome .site-header #userDropdown i{
    color:var(--lc-ink-soft) !important;
}
body.light-chrome .site-header .notification-bell:hover i{
    color:var(--lc-accent) !important;
}

/* The brand logo carries a white halo for dark backgrounds — swap it for
   a soft drop shadow so it reads correctly on white. */
body.light-chrome .site-header .brand-logo{
    filter:drop-shadow(0 4px 9px rgba(19,45,95,.22)) !important;
}

/* Mobile: the expanded collapse panel sits inside the (now white) header. */
@media (max-width:767.98px){
    body.light-chrome .site-header .navbar-collapse{
        border-top:1px solid var(--lc-line);
        margin-top:8px;
        padding-top:6px;
    }
}

/* ---------------------------------------------------------------------
   3. FOOTER — white instead of near-black
   --------------------------------------------------------------------- */
body.light-chrome footer.bg-dark{
    background:#ffffff !important;
    border-top:1px solid var(--lc-line) !important;
}
body.light-chrome footer.bg-dark,
body.light-chrome footer.bg-dark.text-light{
    color:var(--lc-ink-soft) !important;
}
body.light-chrome footer h6{
    color:var(--lc-ink) !important;
}
body.light-chrome footer .text-secondary{
    color:var(--lc-muted) !important;
}
body.light-chrome footer a{
    color:var(--lc-ink-soft) !important;
    /* the contact email is one long unbreakable token and pushes the page
       ~1px wider than the viewport on small phones */
    overflow-wrap:anywhere;
}
body.light-chrome footer a:hover{
    color:var(--lc-accent) !important;
}
body.light-chrome footer .text-info{
    color:var(--lc-accent) !important;
}
body.light-chrome footer .border-top{
    border-top-color:var(--lc-line) !important;
}
body.light-chrome .footer-brand-logo.brand-logo{
    filter:drop-shadow(0 10px 22px rgba(19,45,95,.18)) !important;
}