/* ==========================================================================
   Sihatuna site chrome — the header and footer every page shares.

   Ported from the supplied find-doctors template, which ships the same header
   and footer the home template did. Three things differ from a straight copy,
   all of them deliberate:

     * class names are prefixed `care-`. The template calls its header
       `.site-header` and its footer `.site-footer`, and site.css already has
       rules under both names from the previous design. Renaming keeps the two
       sets apart instead of relying on load order.
     * the template's palette lived on bare `:root` names (--surface, --border,
       --muted). On a sheet that loads on every page those are landmines, so
       they are namespaced --chrome-*.
     * html[data-theme] became [data-bs-theme], the attribute
       js/sihatuna/theme-init.js actually sets.

   The language button, the theme control and the menu button are NOT the
   template's: those stay the ones the site already uses — the flag toggle in
   _LanguageSwitcher, the existing theme switch, and Bootstrap's collapse
   toggler. Only their skin is brought into line here.
   ========================================================================== */

:root {
    --chrome-green-950: #033a2d;
    --chrome-green-900: #075b45;
    --chrome-green-800: #08755a;
    --chrome-green-700: #0a8a68;
    --chrome-green-50: #f1faf6;
    --chrome-gold: #c59b3b;

    --chrome-page: #f4f9f7;
    --chrome-surface: rgba(255, 255, 255, .94);
    --chrome-surface-solid: #fff;
    --chrome-heading: #0b3d31;
    --chrome-ink: #173d32;
    --chrome-muted: #687d76;
    --chrome-border: rgba(7, 91, 69, .14);
    --chrome-border-strong: rgba(7, 91, 69, .28);
    --chrome-shadow-sm: 0 8px 22px rgba(4, 65, 50, .08);
    --chrome-shadow-md: 0 14px 34px rgba(4, 65, 50, .10);
    --chrome-pattern: url("/images/patterns/sihatuna-pure-damascene-pattern.png");
}

[data-bs-theme="dark"] {
    --chrome-page: #071a15;
    --chrome-surface: rgba(12, 43, 34, .94);
    --chrome-surface-solid: #0e2e25;
    --chrome-heading: #f2fbf7;
    --chrome-ink: #e5f4ed;
    --chrome-muted: #a8bbb4;
    --chrome-border: rgba(150, 216, 188, .14);
    --chrome-border-strong: rgba(150, 216, 188, .29);
    --chrome-green-50: #10352b;
    --chrome-shadow-sm: 0 9px 24px rgba(0, 0, 0, .21);
    --chrome-shadow-md: 0 16px 36px rgba(0, 0, 0, .28);
}

/* ----- Header ----- */

.care-header {
    position: sticky;
    top: 0;
    z-index: 80;
    border-bottom: 1px solid var(--chrome-border);
    background: color-mix(in srgb, var(--chrome-page) 82%, transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* flex-wrap is what gives the collapsed menu a line of its own. Without it the
   menu is laid out on the header's own row and lands on top of the brand and
   the controls. */
.care-header-row {
    min-height: 76px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}

.care-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    color: var(--chrome-heading);
    font-weight: 900;
    text-decoration: none;
}

.care-brand:hover {
    color: var(--chrome-heading);
}

/* The mark is a transparent heart, not a filled tile: no radius, no shadow
   ring — a soft rectangle floating behind a transparent image reads as a
   rendering mistake, not a card. */
.care-brand-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(4, 79, 59, .22));
}

.care-brand-copy {
    display: grid;
    line-height: 1.02;
}

/* The wordmark as the supplied artwork draws it: a serif Sihatuna over a
   gold tagline flanked by dashes. Georgia rather than a webfont — the brand
   also has to render on the offline page, which cannot fetch one. */
.care-brand-copy strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.16rem;
    letter-spacing: .3px;
}

.care-brand-copy small {
    margin-top: 4px;
    color: var(--chrome-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .3px;
}

/* The flanking dashes ship in the style, not the resource files, so both
   languages carry them without repeating them in every translation. */
.care-brand-copy small::before { content: "— "; }
.care-brand-copy small::after { content: " —"; }

/* ----- Primary navigation ----- */

.care-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-inline: auto;
    padding: 0;
    list-style: none;
}

.care-nav-link {
    display: block;
    padding: 11px 13px;
    border-radius: 12px;
    color: var(--chrome-muted);
    font-size: .91rem;
    font-weight: 760;
    text-decoration: none;
    transition:
        color .15s ease,
        background-color .15s ease;
}

.care-nav-link:hover,
.care-nav-link.is-active {
    color: var(--chrome-green-800);
    background: color-mix(in srgb, var(--chrome-green-50) 78%, transparent);
}

[data-bs-theme="dark"] .care-nav-link:hover,
[data-bs-theme="dark"] .care-nav-link.is-active {
    color: #a5dfc8;
}

/* ----- Header controls ----- */

.care-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* The pill shared by the language toggle, the notification bell, the avatar
   button and the menu toggler, so four controls the site already owns end up
   looking like one set. */
.care-header .care-control,
.care-header .care-flag-btn,
.care-header .theme-toggle-inline,
.care-header .header-icon-btn,
.care-header .user-menu-btn,
.care-header .navbar-toggler {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--chrome-border);
    border-radius: 14px;
    color: var(--chrome-ink);
    background: var(--chrome-surface);
    box-shadow: var(--chrome-shadow-sm);
    cursor: pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background-color .16s ease,
        box-shadow .16s ease;
}

.care-header .care-control:hover,
.care-header .care-flag-btn:hover,
.care-header .theme-toggle-inline:hover,
.care-header .header-icon-btn:hover,
.care-header .user-menu-btn:hover,
.care-header .navbar-toggler:hover {
    transform: translateY(-2px);
    border-color: var(--chrome-border-strong);
}

/* Icon-only controls stay square. */
.care-header .header-icon-btn,
.care-header .user-menu-btn,
.care-header .navbar-toggler {
    width: 43px;
    padding: 0;
}

.care-header .care-flag-btn img {
    width: 22px;
    height: 15px;
    border-radius: 3px;
}

.care-header .care-language-toggle {
    margin: 0;
}

/* The theme control sits beside the language button as an icon: it is the same
   _ThemeSwitcherInline the menu used to carry, so the persisted theme and the
   site.js binding are unchanged — only its label is dropped, because a moon and
   a sun say it in the width of a pill. */
.care-header .theme-toggle-inline {
    width: 43px;
    padding: 0;
}

.care-header .theme-toggle-inline > span > span:last-child {
    display: none;
}

.care-header .theme-toggle-inline [class^="feather-"] {
    font-size: 1.15rem;
    line-height: 1;
}

/* The bell keeps its unread badge anchored to the pill. */
.care-header .noti-nav,
.care-header .user-menu-nav {
    display: inline-flex;
}

.care-header .header-icon-btn .noti-badge {
    inset-inline-end: -3px;
}

.care-header .user-menu-btn .care-user-avatar {
    width: 31px;
    height: 31px;
    font-size: .74rem;
}

/* ----- Header buttons ----- */

.care-btn {
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background-color .16s ease,
        box-shadow .16s ease;
}

.care-btn:hover {
    transform: translateY(-2px);
}

.care-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--chrome-green-900), var(--chrome-green-700));
    box-shadow: 0 13px 28px rgba(7, 91, 69, .23);
}

.care-btn-primary:hover {
    color: #fff;
}

.care-btn-secondary {
    color: #fff;
    background: linear-gradient(135deg, #183d5d, #225d86);
    box-shadow: 0 13px 28px rgba(22, 63, 102, .18);
}

.care-btn-soft {
    color: var(--chrome-green-900);
    border-color: var(--chrome-border-strong);
    background: var(--chrome-surface);
}

[data-bs-theme="dark"] .care-btn-soft {
    color: #b3e7d2;
}

/* ----- Mobile navigation -----

   Bootstrap's collapse, not the template's own open/close script: the site
   already ships that behaviour and the toggler markup is unchanged. */

.care-header .care-mobile-nav {
    flex-basis: 100%;
}

@media (min-width: 1101px) {
    .care-header .navbar-toggler {
        display: none;
    }

    .care-header .care-mobile-nav {
        display: none;
    }

    /* Wide enough for the full nav: the light/dark control is the floating pill
       on the body, so the header does not carry a second one. */
    .care-header .theme-toggle-inline {
        display: none;
    }
}

/* ...and below that the pill gives way to the header button, so the two swap
   rather than both being on screen. */
@media (max-width: 1100px) {
    .theme-switch {
        display: none;
    }
}

@media (max-width: 1100px) {
    .care-nav {
        display: none;
    }

    .care-header-actions .care-btn-soft,
    .care-header-actions .care-btn-primary {
        display: none;
    }

    .care-header .care-mobile-nav.show,
    .care-header .care-mobile-nav.collapsing {
        display: grid;
        gap: 6px;
        padding: 10px 0 18px;
        border-top: 1px solid var(--chrome-border);
    }

    .care-mobile-nav .care-nav-list {
        display: grid;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .care-mobile-nav .care-nav-link {
        display: block;
    }

    /* One above the other, not side by side: at this width two buttons sharing
       a row wrap their own labels onto two lines each. */
    .care-mobile-auth {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 6px;
    }
}

@media (max-width: 680px) {
    .care-header-row {
        min-height: 68px;
        gap: 12px;
    }

    .care-brand-copy,
    .care-header .care-flag-btn span {
        display: none;
    }

    .care-brand-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}

/* ----- Footer ----- */

.care-footer {
    position: relative;
    overflow: hidden;
    padding: 58px 0 26px;
    color: rgba(255, 255, 255, .76);
    background: linear-gradient(135deg, #041f19, #073d31);
}

.care-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .065;
    background-image: var(--chrome-pattern);
    background-size: 280px auto;
    pointer-events: none;
}

.care-footer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.35fr repeat(3, .75fr);
    gap: 36px;
}

.care-footer-brand {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    color: inherit;
    text-decoration: none;
}

.care-footer-brand img {
    width: 54px;
    height: 54px;
    display: block;
    border-radius: 17px;
}

.care-footer-brand strong {
    display: block;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.18rem;
    letter-spacing: .3px;
}

.care-footer-brand p {
    max-width: 380px;
    margin: 9px 0 0;
    color: rgba(255, 255, 255, .62);
    line-height: 1.75;
    font-size: .85rem;
}

.care-footer-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.care-footer-social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.care-footer-social-label {
    color: rgba(255, 255, 255, .65);
    font-size: .83rem;
}

.care-footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.care-footer-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .78);
    font-size: 1.05rem;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.care-footer-social-links a:hover,
.care-footer-social-links a:focus-visible {
    color: #041f19;
    background: #d8ba70;
    border-color: #d8ba70;
}

.care-footer-column h2 {
    margin: 0 0 14px;
    color: #fff;
    font-size: .92rem;
}

.care-footer-links {
    display: grid;
    gap: 10px;
}

.care-footer-links a {
    color: rgba(255, 255, 255, .65);
    font-size: .83rem;
    text-decoration: none;
}

.care-footer-links a:hover {
    color: #d8ba70;
}

.care-footer-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .11);
    color: rgba(255, 255, 255, .52);
    font-size: .77rem;
}

.care-footer-security {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.care-footer-security svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    stroke: #d8ba70;
}

@media (max-width: 1100px) {
    .care-footer-grid {
        grid-template-columns: 1.2fr repeat(2, .75fr);
    }

    .care-footer-grid .care-footer-column:last-child {
        grid-column: 2 / -1;
    }
}

@media (max-width: 860px) {
    .care-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .care-footer-intro {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .care-footer-grid {
        grid-template-columns: 1fr;
    }

    .care-footer-intro,
    .care-footer-grid .care-footer-column:last-child {
        grid-column: auto;
    }

    .care-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}