/* ==========================================================================
   HEADER — bar branding   (global)
   ==========================================================================
   Header type: "1 row — logo · simple nav · contact".

   Markup (html frontend module):
     #header .inside > .logo (a > img)
                     > .navigation  ({{insert_module::…}} → mod_navigation)
                     > .contact     (a.btn)
                     > a.menu        (mobile toggle)

   This file BRANDS THE BAR only — position, background, the one-row flex
   layout, the logo, the contact CTA and the mobile toggle. It deliberately
   does NOT style the navigation menu itself: the horizontal nav and its
   dropdown are owned by header_dropdown_nav_simple.css (or _megaplus.css).

   Already handled elsewhere, so not repeated here:
     • width, centring and the page gutter — website_structure.css sizes
       #header .inside to the same container as the rest of the page
     • the contact button look — .btn in website.css
     • colours and type — the tokens in website.css (var(--prime),
       var(--background), var(--stroke), var(--type-display) …)
   ========================================================================== */

/* The bar ------------------------------------------------------------------ */
#header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--background);
}
#header .inside {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 32px);
    min-height: 88px;
}

/* Logo --------------------------------------------------------------------- */
#header .logo a { display: block; border-bottom: 0; }
#header .logo img { display: block; height: auto; }

/* Navigation --------------------------------------------------------------- */
/* Placement only — pushes the nav (and the contact button after it) to the
   right of the bar. The menu's appearance lives in the nav stylesheet. */
#header .navigation { margin-left: auto; }

/* Contact CTA -------------------------------------------------------------- */
/* Reuses the brand .btn from website.css; here it is only made compact and
   its default block margins are cleared so it sits centred in the bar. */
#header .contact a.btn {
    margin: 0;
    padding: 10px 20px;
    font-size: 0.9rem;
}

/* Mobile toggle ------------------------------------------------------------ */
/* Hidden on desktop; revealed at the mobile breakpoint below. */
#header .menu {
    display: none;
    align-items: center;
    border-bottom: 0;
    color: var(--prime);
    font-size: 24px;
}

/* Responsive --------------------------------------------------------------- */
@media only screen and (max-width: 1050px) {
    #header .inside { min-height: 64px; }
}
@media only screen and (max-width: 750px) {
    #header .navigation,
    #header .contact { display: none; }
    #header .menu { display: inline-flex; }
    #header .inside { justify-content: space-between; }
}