/* ==========================================================================
   HEADER — Cor Deo: dark bar · stacked text title · nav · tour + enrollment
   ==========================================================================
   Ported from the Squarespace Hayden header (measured 2026-10-28): a 112px
   #201A16 bar, full width with 20px insets, the title in three tracked
   uppercase lines on the left, the nav and an outlined Enrollment button on
   the right. Additions: the "Schedule a Tour" button, and the bar stays put
   (sticky) and compacts to 72px once the page scrolls (.is-scrolled on <html>,
   set by the header module's script) — so the tour button is always one tap away.

   Markup (html module "Header - Wrapper"):
     #header .inside > .site-title > a > span ×3
                     > .navigation   ({{insert_module}} → mod_navigation)
                     > .contact      (a.btn.light.tour-btn, a.btn.light.outline)
                     > a.menu        (mobile toggle → #menu, the mmenu module)
   ========================================================================== */

#header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--second);
    color: var(--white);
}

/* Full width, unlike the content: the Squarespace bar ran edge to edge */
#header .inside {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: none;
    min-height: 112px;
    padding-inline: 20px;
    transition: min-height 0.25s ease;
}
.is-scrolled #header .inside { min-height: 72px; }

/* Title ------------------------------------------------------------------- */
#header .site-title {
    margin: 0;
    flex: none;
    font-family: var(--type-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 3px;
    text-transform: uppercase;
}
#header .site-title a {
    display: block;
    color: var(--white);
    padding-block: 18px;
}
/* One word group per line on desktop ("COR DEO / CHRISTIAN / ACADEMY") */
#header .site-title span { display: block; }
.is-scrolled #header .site-title { font-size: 18px; line-height: 19px; }
.is-scrolled #header .site-title a { padding-block: 8px; }

/* Navigation -------------------------------------------------------------- */
#header .navigation { margin-left: auto; }
#header .mod_navigation ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
#header .mod_navigation li { margin: 0; }
#header .mod_navigation a,
#header .mod_navigation strong {
    display: block;
    padding: 9.75px 10px;
    font-family: var(--type-display);
    font-size: 13px;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--white);
}
/* Squarespace greys the current page and the hovered link */
#header .mod_navigation strong.active,
#header .mod_navigation a.trail,
#header .mod_navigation a:hover { color: var(--nav-on-dark); }

/* Buttons ----------------------------------------------------------------- */
#header .contact {
    display: flex;
    flex: none;
    gap: 12px;
}
#header .contact a.btn {
    margin: 0;
    padding: 13px 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: 2px;
    white-space: nowrap;
}
#header .tour-btn .short { display: none; }

/* Mobile toggle: three thin bars, as on the old site */
#header .menu {
    display: none;
    width: 22px;
    height: 16px;
    flex: none;
    background:
        linear-gradient(var(--white), var(--white)) 0 0 / 100% 2px no-repeat,
        linear-gradient(var(--white), var(--white)) 0 50% / 100% 2px no-repeat,
        linear-gradient(var(--white), var(--white)) 0 100% / 100% 2px no-repeat;
}

/* Responsive --------------------------------------------------------------
   The nav needs ~1180px with the title and both buttons; below that it hands
   over to the menu rather than wrap (the BCS header rule). Enrollment moves
   into the menu; the tour button stays in the bar at every width. */
@media (max-width: 1180px) {
    #header .navigation { display: none; }
    #header .contact { margin-left: auto; }
    #header .contact .enroll-btn { display: none; }
    #header .menu { display: block; }
}

@media (max-width: 640px) {
    #header .inside { min-height: 72px; gap: 16px; }
    #header .site-title { font-size: 16px; line-height: 16px; }
    #header .site-title a { padding-block: 12px; }
    /* Squarespace's phone title: "COR DEO CHRISTIAN / ACADEMY" */
    #header .site-title span { display: inline; }
    #header .site-title a { max-width: 12em; }
    #header .contact a.btn { padding: 10px 10px; font-size: 11px; letter-spacing: 1.5px; }
    #header .tour-btn .long { display: none; }
    #header .tour-btn .short { display: inline; }
}

/* MOBILE MENU (mmenu, module "Mobile Menu")
   Styled after Squarespace's: the dark panel slides in from the right and
   pushes the page; uppercase tracked links; Enrollment as an outlined button
   (the template's .menu-cta). */
/* Until mmenu.js has turned the menu into its panel (it adds .mm-menu), the
   menu is a plain list at the end of the page: hide it so it can't flash on load */
#menu:not(.mm-menu) { display: none; }

.mm-menu {
    --mm-color-background: var(--second);
    --mm-color-text: var(--white);
    --mm-color-text-dimmed: var(--nav-on-dark);
    --mm-color-border: transparent;
    --mm-color-button: var(--white);
    --mm-color-background-highlight: rgb(255 255 255 / 0.06);
    --mm-color-background-emphasis: transparent;
    --mm-listitem-size: 32px;
    font-family: var(--type-display);
}
.mm-menu .mm-navbar { display: none; }
.mm-menu .mm-panel { padding-top: 14px; }
.mm-menu .mm-listitem::after { display: none; }
.mm-menu .mm-listitem__text {
    padding: 8px 20px 8px 36px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.mm-menu .mm-listitem strong.mm-listitem__text,
.mm-menu .mm-listitem .active { color: var(--nav-on-dark); }
.mm-menu .menu-cta { padding: 14px 20px 0 36px; }
.mm-menu .menu-cta a.btn {
    margin: 0;
    padding: 13px 18px;
    font-size: 13px;
    letter-spacing: 2px;
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}
/* Close button, top of the panel */
.mm-menu .menu-close { display: flex; justify-content: flex-end; padding: 0 20px 6px; }
.mm-menu .menu-close::after { display: none; }
.mm-menu .menu-close button {
    padding: 8px 0;
    background: none;
    border: 0;
    color: var(--white);
    font-family: var(--type-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
}
.mm-menu .menu-close span { font-size: 22px; line-height: 1; vertical-align: -3px; margin-left: 6px; }

/* mmenu sets overflow-x: hidden on the wrapper, which would kill the sticky header */
body.mm-wrapper { overflow-x: clip; }