/**
 * @file
 * Section 7: Header, navbar & Gin admin overrides.
 *
 * Split from css/staged-edits-from-gui.css (see docs/Theme updates.md for
 * the full split file list).
 *
 * Holds: #header (outer wrapper), #navbar-top (logo bar), #navbar-main (menu bar),
 * .navbar-brand (logo wrapper + image sizing), Gin admin sticky overrides,
 * and scroll-shrink behaviour. The TB Mega Menu styling lives in
 * 08-tb-mega-menu.css.
 */


/* ----------------- 7.1. Header region colour reset --------------------- */

/* @TODO Nina compare with recent heading color settings she did */
.region-header,
.region-header a,
.region-header li a.is-active,
.region-header .site-branding__text,
.region-header .site-branding,
.region-header .site-branding__text a,
.region-header .site-branding a,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
  color: var(--bs-body-color);
}


/* --- 7.2. Header bar (#header / #navbar-top / #navbar-main) ------------ */

/* CLAUDE SAYS NINA REVIEW: All "TEMP hiding while testing scroll behaviour" comment blocks (multiple commented-out chains setting height: 74px / 114px / 54px) were removed during cleanup. They were leftover early-attempt code, all commented out, so deleting them does not change behaviour. The active scroll-shrink solution lives in Section 7.4. Nina note: if shrink-on-scroll diagnosis points back at one of those, ask Claude to recover from chat history. */

/* ---------- #header — outer wrapper ---------- */
#header {
  display: flex;
  justify-content: space-between;
}

/* ---------- #navbar-top — logo bar ---------- */
/* + see scroll-shrink + mobile/desktop overrides in Section 7.4 */
#navbar-top {
  width: max-content;
  z-index: 499;
  padding: 0 32px 0 40px;
  overflow: hidden;
  height: var(--header-height);
  /* matches the menu bar height */
  display: flex;
  align-items: center;
  /* vertically centers .navbar-brand within it */
  background-color: var(--bs-white);
  transition: height 0.25s ease;
}

/* ---------- #navbar-main — menu bar ---------- */
/* + see scroll-shrink + mobile/desktop overrides in Section 7.4 */
#navbar-main {
  left: auto;
  width: 100%;
  /* was 100vw; changed to fix width overflow @TODO Nina delete comment */
  max-width: 100%;
  /* was calc(100vw - var(--drupal-displace-offset-left, 0px)); changed to fix width overflow @TODO Nina delete comment */
  z-index: 489 !important;
  display: flex;
  align-items: center;
  /* centers hamburger vertically on mobile, centers menu bar content on desktop */
  background-color: var(--bs-white);
  justify-content: right !important;
}

/* Default transition (applies all viewports — actual heights set per breakpoint in 7.4) */
header#header,
#navbar-main {
  height: var(--header-height);
  transition: height 0.25s ease;
}

/* --------- 7.3. .navbar-brand (logo wrapper + image) ------------------- */

/* + see scroll-shrink overrides for image height in Section 7.4 */

/* @TODO AL FYI I removed the `color: var(--bs-secondary)` I had here - it was for an image, not text, so it does nothing. Empty placeholder kept for if we ever add textual brand fallback. */
.navbar-brand {
  /* not yet set */
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 65px;
}

/* Logo image — shrinks proportionally with header height via CSS variable */
.navbar-brand img {
  height: calc(var(--header-height) * 0.8);
  max-height: calc(var(--header-height) * 0.8);
  /* prevents flash of full-size image */
  width: auto;
  transition: height 0.25s ease;
}


/* ---- 7.4. Mobile / Desktop scroll-shrink behaviour -------------------- */

/* Body-class scroll trigger (added by JS when user scrolls) — applies to #navbar-top across viewports */
body.scrolled #navbar-top {
  height: var(--header-height-scrolled);
}

/* ---------- Mobile (max-width: 991px) ---------- */
@media (max-width: 991px) {

  :root {
    --header-height: 64px;
    /* mobile header height — match whatever the navbar actually is */
    --header-height-scrolled: 64px;
    /* no shrink on mobile */
  }

  #navbar-top {
    padding: 0 12px 0 20px;
    /* was padding: 0 12px 0 20px; */
    height: var(--header-height);
    /* explicit height so logo image sizes correctly inside it */
  }

  #navbar-main {
    height: var(--header-height);
    /* pinned so child .tbm-button (height: 100%) has something to fill */
  }

}

/* ---------- Desktop (min-width: 992px) ---------- */
@media (min-width: 992px) {

  /* Logged-out desktop: keep #navbar-main fixed so scroll-trigger JS can add body.scrolled.
     Gin/admin views override this later with .gin--core-navigation sticky rules. */
  #navbar-main {
    position: fixed;
    top: 0;
    right: 0;
  }

  header#header,
  #navbar-main {
    height: var(--header-height);
    transition: height 0.25s ease;
  }

  body.scrolled header#header,
  body.scrolled #navbar-main {
    height: var(--header-height-scrolled) !important;
    /* Unfortunate !important here - was needed to ensure navbar shrinks on scroll after other fixes layered up */
  }

  body.scrolled .navbar-brand img {
    height: calc(var(--header-height-scrolled) * 0.8);
  }

  body.scrolled #navbar-main .tbm-link.level-1,
  body.scrolled #navbar-main .tbm-item.level-1 {
    min-height: var(--header-height-scrolled);
    height: var(--header-height-scrolled);
  }

  /* @TODO AL please delete if happy to once you've read this - I think this partially solved the big white gap on admin views thing (also other things which is why I tested removing different parts of it)
  .gin--core-navigation #page,
  .gin--core-navigation .featured-top {
    padding-top: 50px;
  } end of section for Al to review/delete */

  /*.gin--core-navigation #navbar-main {
    @TODO AL please delete if happy to once you've read this - same here as the one above
    padding-top: 50px; 
    Sit above Gin admin toolbar (~999–1000) 
  }*/ 
}


/* --------- 7.5. Gin admin sticky overrides ----------------------------- */

/* Sticky positioning so admin tools work while scrolling */

.gin--core-navigation #navbar-top {
  position: sticky !important;
  top: 0;
  z-index: 499;
}

.gin--core-navigation #navbar-main {
  position: sticky !important;
  top: 0;
  /* NOTE: shrink-on-scroll does not apply on admin views (sticky overrides affix JS) */
}

.gin--core-navigation .gin-toolbar {
  position: sticky;
  top: 0;
  z-index: 1100;
}