/*
 * JUGL chrome overrides — cassiopeia_jugl (config pipeline: see deploy/README.md).
 *
 * Cassiopeia paints .container-header and .footer with a navy gradient driven by
 * --cassiopeia-color-primary; the template-style colour params (headerbg/footerbg) are not
 * wired to those tokens in this child. This file gives the header live's two-tone treatment
 * (navy topbar strip + white logo band) so the JUGL logo and its dark strapline read.
 *
 * COLOURS here consume the token base in global/colors.css (loaded first), so each value lives
 * once — in the params / brand tokens — not hardcoded per rule. STRUCTURE (which element is the
 * strip vs the band) stays in CSS; it has no param.
 *
 * Two cleanup queues, both grep-able:
 *   @to-param        — a value still hardcoded here, awaiting migration to a param (currently none).
 *   @param-candidate — consumes a brand token for now but flagged for review: promote to its own
 *                      admin-settable param if a per-site retint is ever wanted (FLIGHT, cut #1).
 */

/* White logo band — kill Cassiopeia's navy gradient on the header shell */
.container-header {
    background: var(--headerbg) !important;   /* colors.css bridge <- jugl-config.json: headerbg (#fff) */
    background-image: none !important;
}

/* ...but keep the topbar strip inside it navy, with light text (matches live) */
.container-topbar {
    background: var(--jugl-navy);             /* brand token — @param-candidate: topbarbg */
}
.container-topbar,
.container-topbar a,
.container-topbar .nav-link {
    color: var(--jugl-white) !important;      /* brand token — @param-candidate: topbarcolor */
}

/* Nav on the white band must read dark. Cassiopeia colours these links with
 * `color: currentcolor` (`.container-header .mod-menu > li > a`, specificity 0,2,2) — i.e.
 * they INHERIT, and the inherited header colour is white (left from the old navy header).
 * So colour the menu ITEM and let the link inherit it, rather than out-specifying the anchor.
 * (Items are `.nav-item` in Joomla core mod_menu — there is no `.mod-item`.) */
.container-nav .mod-menu.mod-list .nav-item {
    color: var(--jugl-navy);                  /* brand token — @param-candidate: menucolor */
    white-space: nowrap;                      /* stop "Looking for Help" wrapping to two lines */
    font-weight: 600;                         /* bold, to match live */
}

/* Hide the header-menu "Register to Attend" (item-1335) — live's header menu omits it and the topbar pill
   covers registration. Scoped to .container-nav so the TOPBAR pill (same item-1335) survives.
   TODO: a Writeups link takes this slot (FLIGHT, 2026-08-14). */
.container-nav .mod-menu .nav-item.item-1335 {
    display: none;
}

/* ── snag list: header layout ─────────────────────────────────────────────── */

/* (1 + rework) Topbar: content flexed WITHIN the central band — padding-inline centres the content to a
   1320 column while the navy background stays full-width; topbar1 | topbar2 | topbar3 spread out so the
   left item lines up under the logo. */
.container-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-inline: max(1rem, calc((100% - 1320px) / 2));
}

/* Register to Attend -> orange pill (topbar menu link a.btn) */
.container-topbar a.btn {
    display: inline-block;
    padding: 0.4rem 1.25rem;
    background: var(--jugl-orange);
    color: var(--jugl-white) !important;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}

/* tighten the topbar custom-module paragraphs (FLIGHT; modules are .mod-custom.custom, not .mod-custom-custom) */
.container-topbar .mod-custom p {
    margin-bottom: 0.1rem;
}

/* cap the topbar menu (topbar3 — holds the Register pill) so it stays compact on the right (FLIGHT) */
.container-topbar .mod-menu.mod-list {
    max-width: 12rem;
}

/* Header menu: horizontal + right, level with the logo (was stacking vertically) */
.container-nav .mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* (2) Logo + menu on ONE row. The header's logo cell and nav cell are each 1320px wide (the content column),
   so they can't share a row — index.php wraps them in .container-brandnav; make that a centred flex row, kill the
   1320px on the cells, and push the nav right so the menu sits level with the logo. */
.container-brandnav {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* logo left, menu right; the nav's 2rem margin insets it from the edge */
    max-width: 1320px;
    margin-inline: auto;
}
.container-brandnav > .grid-child {
    width: auto;
    margin: 0;            /* kill Cassiopeia's auto-centring so the logo sits at the section's left edge */
}
.container-brandnav > .grid-child:not(.container-nav) {
    max-width: 340px;    /* logo cell (Gary: 340; was Cassiopeia's inherited 1320) */
}
.container-brandnav > .grid-child.container-nav {
    margin: 0 2rem;      /* FLIGHT — nav carries 2rem side margins (superseded the old margin-left:auto right-pin) */
}