/* ==========================================================================
   HEADER — Cornerstone bar   (global, per-site active file)
   ==========================================================================
   Fixed, transparent over the hero; turns white (.shrink) on scroll.
   Markup: #header .inside > .logo · .navigation · .contact(social + CTA) · a.menu
   ========================================================================== */

/* Fixed transparent header overlays the page, so remove the container offset. */
#container { padding-top: 0; }
.container_inside { padding-bottom: 0; }

/* The bar ------------------------------------------------------------------ */
#header {
    position: fixed;
    inset-block-start: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.shrink #header {
    background-color: #fff;     /* from 230px of scroll (j_shrink.html5); no rule under it (Bob, 10 Oct 2026) */
}
#header {
    .inside {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: clamp(10px, 1.2vw, 28px);
        padding-block: clamp(10px, 1.4vw, 18px);
        transition: padding 0.2s ease;
    }

    /* Logo --------------------------------------------------------------------- */
    .logo a { display: block; border-bottom: 0; }
    /* as large as the bar allows with the nav on one line (Bob, 13 Oct): 41px at
       1280, the board's 46 from 1366; each step below sets its own */
    .logo img { display: block; height: clamp(41px, calc(5.8vw - 33.2px), 46px); width: auto; object-fit: contain; object-position: left center; }   /* squeezed on a small phone, it scales rather than stretches */

    /* Navigation --------------------------------------------------------------- */
    .navigation { margin-left: auto; }
    /* Horizontal padding is HALF the gap; 22px → ~45px between links, clamped down. */
    .navigation a, .navigation strong {
        color: #04203F;                          /* Penpot blue 950 */
        font-family: var(--type-body);
        font-weight: 500;                        /* the board's 15px / 500, in caps (Bob, 10 Oct 2026) */
        text-transform: uppercase;
        font-size: clamp(0.78rem, 0.95vw, 0.95rem);
        /* 22px at the board's width, 6px on a laptop, so the caps stay on one line */
        padding-inline: clamp(6px, calc(1.6vw - 13px), 22px);
        padding-block: 0.4rem;
    }
    /* Down arrow on items that have a submenu (Unicode ▾).
       The selector has to cover `strong` and `span`, not just `a`: Contao renders
       the CURRENT page's nav item as `<strong class="active submenu">` rather than
       a link (and `<span class="active submenu">` in the mobile copy), so an
       `a`-only selector silently dropped the arrow from whichever item you were
       on — which is exactly the "on active, the down arrow goes away" report. */
    .navigation .submenu > a::after, .navigation .submenu > strong::after, .navigation .submenu > span:not(.nav-for)::after {
        content: "\25BE";
        font-size: 0.72em;
        margin-inline-start: 0.35em;
        position: relative;
        top: -0.1em;
        display: inline-block;
    }
    /* Hover + open submenu: white background, red text. */
    .navigation li:hover > a, .navigation li:focus-within > a, .navigation a:hover {
        background-color: #fff;
        color: var(--second);
    }
    .navigation .level_2 { background: #fff; box-shadow: 0 8px 24px rgba(4, 32, 63, 0.14); }
    .navigation .level_2 a { color: #04203F; }
    .navigation .level_2 :is(a, strong) { text-transform: none; letter-spacing: 0; }   /* caps on the bar only */
    .navigation .level_2 li:hover > a, .navigation .level_2 a:hover { background: #fff; color: var(--second); }

    /* Actions: social icons + CTA ---------------------------------------------- */
    /* 15px between the social icons (Bob, 10 Oct 2026; the board draws 10) */
    .contact {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .contact .social {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;                         /* the WCAG 2.2 target size */
        min-height: 24px;
        border-bottom: 0;                        /* no underline on the icon links */
        border-radius: 6px;
        background: transparent;                      /* Penpot blue 700 */
        color: #0A417CFF;
        font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    }
    .contact .social svg { height:20px;   }
    .contact .social:hover { color: var(--second); }
    .contact a.btn {
        margin: 0 0 0 clamp(0px, calc(1.6vw - 10px), 13px);
        white-space: nowrap;
        padding: clamp(8px, 0.8vw, 12px) clamp(12px, 1.2vw, 24px);
        font-size: clamp(0.78rem, 0.95vw, 0.95rem);
    }

    /* Mobile toggle ------------------------------------------------------------ */
    .menu {
        display: none;
        align-items: center;
        border-bottom: 0;
        color: var(--prime);
        font-size: 24px;
    }
}

/* 40px above the bar while it sits over the hero (Bob, 10 Oct 2026); back to
   the slim bar once it turns white */
@media only screen and (min-width: 1120px) {
    #header .inside { padding-top: 40px; }
    .shrink #header .inside { padding-top: clamp(10px, 1.4vw, 18px); }
}

/* Responsive --------------------------------------------------------------- */
/* The nav never wraps to two lines and stays a nav as long as it can (Bob,
   13 Oct). The links need ~702px with their "For", ~600 without:
     1280 up     the full labels
     1150-1279   "For" drops (nav_default.html5 wraps it in .nav-for; the
                 page names keep it)
     1120-1149   and the bar tightens
     1119 down   the menu
   Each step was checked one line wide with the letters 3% wider than here,
   for fonts that render fatter. */
@media only screen and (max-width: 1279px) {
    #header .nav-for { display: none; }
    #header .logo img { height: clamp(34px, calc(9.3vw - 73px), 46px); }
}
@media only screen and (max-width: 1149px) {
    #header {
        .inside { gap: 10px; }
        .logo img { height: 35px; }
        .navigation :is(a, strong) { padding-inline: 5px; }
        .contact { gap: 10px; }
        .contact a.btn { margin-left: 0; padding: 8px 12px; font-size: 0.78rem; }
    }
}
/* The menu: the bar reads logo · menu · LinkedIn · "Start a Conversation", so
   contacting them is one tap away (as on TPA Stack). */
@media only screen and (max-width: 1119px) {
    #header .navigation { display: none; }
    #header .menu { display: inline-flex; margin-left: auto; }
    #header .logo img { height: clamp(30px, 5vw, 40px); }   /* the menu bar has room for it */
    #header .contact { gap: 12px; }
    #header .contact a.btn { margin: 0; padding: 8px 14px; font-size: 0.8rem; }
}
@media only screen and (max-width: 420px) {
    #header .inside { gap: 10px; }
    #header .logo img { height: 28px; }
    #header .contact { gap: 10px; }
    #header .contact a.btn { padding: 7px 10px; font-size: 0.72rem; }   /* room for the logo beside the LinkedIn icon */
}

/* The mobile menu also ends with the button (templates/base-theme/mod_mmenu.html5). */
.mm-menu .menu-cta {
    padding: 24px 20px;
    &::after { content: none; }
    a.btn {
        flex: 0 0 auto;
        margin: 0;
        padding: 14px 28px;
        color: var(--white);   /* mmenu's own link colour outranks .btn here */
    }
}