/* ------------------------------------------------------------------------------
   CBFGSHeader - ported from the SWAT prototype, spec CSS 169-179.

   DELIBERATE DEVIATION: spec z-index is 48. Raised to 99998 so this sits above the
   rest of the page but still below the drawer (100010) and its scrim (100000). The
   spec's 48 assumed nothing else on the page was fixed; the real skin header is at
   99999, so if both are present one has to win. See open question Q9.
   ------------------------------------------------------------------------------ */

.cbf-gs-header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 99998;
    transition: background .25s ease, box-shadow .25s ease;
}

/* ---- edit mode ----
   Being fixed makes this module uneditable in DNN, two ways over: its own container collapses
   to nothing, so there is no hover target for the settings cog, and it sits across the top of
   the hero below, covering that module's cog too. Both were reported as "cannot click, no cog".

   In flow while editing, fixed for everyone else. Only the arrangement changes - the header
   looks the same, it just occupies its own space. */
.cbf-gs-header.gs-edit { position: static; }
.cbf-gs-header.gs-edit .hwrap { background: var(--violet-deep, #2e1a47); }
.cbf-gs-header .hwrap {
    max-width: 1120px; margin: 0 auto; padding: 16px 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.cbf-gs-header.scrolled { background: #fff; box-shadow: 0 2px 16px -8px rgba(46, 26, 71, .32); }
.cbf-gs-header.scrolled .hwrap { padding-top: 12px; padding-bottom: 12px; }

.cbf-gs-header .brand { display: flex; align-items: center; text-decoration: none; line-height: 0; }
.cbf-gs-header .brand img { height: 38px; width: auto; display: block; }

/* Logo swap driven purely off the .scrolled class, spec 175-177 */
.cbf-gs-header .logo-colour { display: none; }
.cbf-gs-header.scrolled .logo-white { display: none; }
.cbf-gs-header.scrolled .logo-colour { display: block; }

/* ---- logo + home button ----
   The designer's call, and the right one for accessibility: a logo is only a home link if you
   already know that convention, and this microsite has no other navigation to fall back on.

   It is an <a> styled as the same gold pill as the CTA opposite - a link, because it goes
   somewhere, which is what a screen reader should announce. */
.cbf-gs-header .hleft { display: flex; align-items: center; gap: 14px; }

.cbf-gs-header .nav-home {
    display: inline-block; text-decoration: none; line-height: 1.25; white-space: nowrap;
}
/* The skin underlines links globally; this one is a button and should not be. */
.cbf-gs-header .nav-home:hover,
.cbf-gs-header .nav-home:focus { text-decoration: none; color: var(--ink); }

/* Narrow screens: the header carries a logo and two pills, so tighten rather than wrap. */
@media (max-width: 560px) {
    .cbf-gs-header .hleft { gap: 9px; }
    .cbf-gs-header .nav-home,
    .cbf-gs-header .nav-cta { padding: 8px 13px; font-size: 13px; }
    .cbf-gs-header .brand img { height: 30px; }
}