/* ==========================================================================
   Site chrome — the header and footer shared by every page.

   Requires css/design-tokens.css.

   These used to be copy-pasted per page and had drifted into six different
   navigations, three of which offered no way to sign in or reach an account.
   They are one file now, included through nginx SSI.

   Written without Bootstrap's navbar so the header does not inherit the
   template's 102px height, flat fill, and missing active state.
   ========================================================================== */

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

.site-header {
    /* Self-sufficient: the chrome is included by pages that do not all carry a
       design-system body class, so it sets its own font rather than inheriting
       whatever the page happens to have. */
    font-family: var(--font-ui);
    position: sticky;
    top: 0;
    z-index: 1040;
    background: rgba(245, 247, 243, 0.92);
    /* Frosted only where it is supported; the solid colour above is the
       fallback, so the header is never transparent. */
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* The rule only appears once the page has moved, so the header sits flush
   with the hero at rest and separates from content when it overlaps it. */
.site-header.is-scrolled {
    border-bottom-color: var(--divider);
    box-shadow: 0 1px 12px rgba(11, 68, 51, 0.05);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 74px;
}

.site-header__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

/* The template shipped this at 75px, which is what made the old header 102px
   tall — a third of a phone screen before any content. */
.site-header__brand img {
    height: 42px;
    width: auto;
    display: block;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    gap: 24px;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__link {
    position: relative;
    display: block;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    color: var(--dark-grey);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav__link:hover {
    background: rgba(11, 68, 51, 0.06);
    color: var(--cardamom);
    text-decoration: none;
}

/* Which page you are on was not indicated anywhere before. */
.site-nav__link.is-active {
    color: var(--cardamom);
    font-weight: 600;
}

.site-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--turmeric);
}

.site-nav__link:focus-visible,
.btn-chrome:focus-visible,
.site-header__toggle:focus-visible {
    outline: 3px solid var(--turmeric);
    outline-offset: 2px;
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Header buttons — deliberately smaller than the page-level .btn-app, so the
   chrome never competes with the action a page is actually asking for.
   -------------------------------------------------------------------------- */

.btn-chrome {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-chrome--ghost {
    color: var(--cardamom);
    box-shadow: inset 0 0 0 1.4px rgba(11, 68, 51, 0.28);
}

.btn-chrome--ghost:hover {
    background: rgba(11, 68, 51, 0.07);
    color: var(--cardamom-strong);
    text-decoration: none;
}

.btn-chrome--solid {
    background: var(--cardamom);
    color: var(--paper);
}

.btn-chrome--solid:hover {
    background: var(--cardamom-strong);
    color: var(--paper);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Account menu
   -------------------------------------------------------------------------- */

.account-menu {
    position: relative;
}

.account-menu__chevron {
    transition: transform 0.18s ease;
}

.account-menu__toggle[aria-expanded="true"] .account-menu__chevron {
    transform: rotate(180deg);
}

.account-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 210px;
    padding: 8px;
    border: 1px solid var(--divider);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--shadow-raised);
}

.account-menu__panel[hidden] {
    display: none;
}

.account-menu__panel a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    color: var(--dark-grey);
    font-size: 0.92rem;
    text-decoration: none;
}

.account-menu__panel a:hover {
    background: var(--tile-green);
    color: var(--cardamom);
    text-decoration: none;
}

.account-menu__panel hr {
    margin: 6px 4px;
    border: 0;
    border-top: 1px solid var(--divider);
}

.account-menu__danger {
    color: var(--chili) !important;
}

.account-menu__danger:hover {
    background: #FCF3F1 !important;
    color: var(--chili) !important;
}

/* --------------------------------------------------------------------------
   Mobile toggle
   -------------------------------------------------------------------------- */

.site-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--divider);
    border-radius: var(--r-sm);
    background: transparent;
    cursor: pointer;
}

/* Drawn rather than an icon font, so it cannot vanish the way the Font
   Awesome glyphs on this site did. */
.site-header__bars,
.site-header__bars::before,
.site-header__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--cardamom);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__bars::before,
.site-header__bars::after {
    content: "";
    position: relative;
}

.site-header__bars::before { top: -6px; }
.site-header__bars::after  { top: 4px; }

.site-header__toggle[aria-expanded="true"] .site-header__bars {
    background: transparent;
}

.site-header__toggle[aria-expanded="true"] .site-header__bars::before {
    transform: translateY(6px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__bars::after {
    transform: translateY(-4px) rotate(-45deg);
}

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

.site-foot {
    font-family: var(--font-ui);
    background: var(--cardamom-strong);
    color: rgba(245, 247, 243, 0.72);
}

.site-foot__inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 44px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 24px 48px;
}

.site-foot__logo {
    height: 40px;
    width: auto;
    margin-bottom: 18px;
    /* The mark is a dark green SVG; on a dark ground it needs inverting rather
       than a second asset to keep in sync. */
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.site-foot__blurb {
    max-width: 42ch;
    margin: 0 0 20px;
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(245, 247, 243, 0.66);
}

.site-foot__social {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-foot__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(245, 247, 243, 0.1);
    color: var(--paper);
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.site-foot__social a:hover {
    background: var(--turmeric);
    color: #3A2606;
}

.site-foot__head {
    margin: 0 0 16px;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--turmeric);
}

.site-foot__links,
.site-foot__contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-foot__links li,
.site-foot__contact li {
    margin-bottom: 11px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(245, 247, 243, 0.66);
}

.site-foot__links a,
.site-foot__contact a {
    color: rgba(245, 247, 243, 0.78);
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-foot__links a:hover,
.site-foot__contact a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-foot__bar {
    border-top: 1px solid rgba(245, 247, 243, 0.12);
}

.site-foot__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
}

.site-foot__bar p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(245, 247, 243, 0.55);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .site-foot__inner {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .site-foot__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .site-header__toggle {
        display: inline-flex;
    }

    .site-header__inner {
        flex-wrap: wrap;
        height: auto;
        min-height: 68px;
        padding: 12px 20px;
    }

    /* Collapsed by default on small screens; opened by the toggle. */
    .site-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 8px 0 16px;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding-top: 8px;
        border-top: 1px solid var(--divider);
    }

    .site-nav__link {
        padding: 12px 10px;
        font-size: 1rem;
    }

    .site-nav__link.is-active::after {
        left: 10px;
        right: auto;
        width: 18px;
    }

    .site-nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-top: 14px;
    }

    .btn-chrome {
        justify-content: center;
        height: 46px;
    }

    .account-menu__panel {
        position: static;
        width: 100%;
        margin-top: 8px;
        box-shadow: none;
    }
}

@media (max-width: 640px) {
    .site-foot__inner {
        grid-template-columns: 1fr;
        padding: 48px 20px 36px;
    }

    .site-foot__bar-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px;
    }
}

.is-hidden {
    display: none !important;
}