/*
 * New-UI header re-skin. Scoped entirely under `.header--new-ui`, a class added
 * to the standard header root (`.fix-nav`) ONLY for flagged projects whose
 * landing payload is brandable (see useNewLanding → brandingActive). The brand
 * design tokens arrive as inline `--ls-*` CSS vars on that same element
 * (tokensToCssVars(withDefaults(tokens), customFonts)); this file maps them onto
 * the existing header chrome. Non-flagged headers never get the class, so the
 * default look is byte-for-byte unchanged.
 *
 * This is a RE-SKIN, not a layout rebuild — only color/font/radius change.
 *
 * Token → element map (all readable against the white landing canvas the header
 * sits above):
 *   --ls-body-font    → header body/nav text font
 *   --ls-heading-font → brand/counter heading font
 *   --ls-heading      → nav links, profile name, hamburger, mobile toggles
 *                       (FALLBACK ONLY — see --nu-header-text below)
 *   --ls-accent       → CTA/login + hover/active nav state + countdown blocks
 *                       (also the "Users Online" notice strip status dot)
 *   --ls-notice-bar   → the "Users Online" notice strip background
 *   --ls-notice-bar-text → the "Users Online" notice strip text
 *   --ls-radius       → countdown / logo corner rounding
 *
 * The Puck ROOT HEADER options (authored in the landing editor,
 * landingDoc.root.props → threaded by <Header> as inline vars) layer on top of
 * the design tokens and win where set:
 *   --nu-header-bg    → the header bar (.nav-bar) background colour
 *   --nu-header-text  → nav links, profile toggle, counter heading, icons,
 *                       hamburger — the header TEXT/icon colour (overrides the
 *                       generic --ls-heading mapping; --ls-heading is the
 *                       fallback when this is unset)
 *   .header--logo-center (class, not a var) → centres the swapped-in brand logo
 * Fonts always come from the design tokens (--ls-*-font); the root options only
 * drive colour + logo position.
 *
 * Note: the mobile Offcanvas panel is portaled to <body>, outside this scope, so
 * it keeps the default styling; only its trigger button (inside the header) is
 * re-skinned. Functional nav/login/mobile behavior is untouched.
 */

.header--new-ui {
  font-family: var(--ls-body-font, inherit);
}

/*
 * Icon glyphs use the 'primax-icons' icon font (globals.css maps
 * [class^="icon-"]:before → that font). The re-skin sets the brand body font on
 * the header, which cascades to the <i> icon elements and would bleed onto their
 * ::before glyphs (rendering letters/boxes instead of icons). Defensively pin
 * the icon font on the glyph pseudo-elements so no header font override can
 * reach them.
 */
.header--new-ui [class^="icon-"]:before,
.header--new-ui [class*=" icon-"]:before {
  font-family: 'primax-icons' !important;
}

/* Header bar background → the Puck root option (falls back to white). */
.header--new-ui .nav-bar {
  background-color: var(--nu-header-bg, #fff);
}

/* "Users Online" strip → its own brand notice-bar tokens (background + text),
   decoupled from --ls-surface so it can be themed independently. */
.header--new-ui .notice-bar {
  background-color: var(--ls-notice-bar, #2A2A2B);
}

.header--new-ui .notice-bar,
.header--new-ui .notice-bar p {
  color: var(--ls-notice-bar-text, #fff);
}

/* Status dot keeps the accent colour (unchanged). */
.header--new-ui .notice-bar p::before {
  background-color: var(--ls-accent, #81df78);
}

/* Desktop nav links → root header text colour (falls back to brand heading) +
   body font; hover/active → accent. */
.header--new-ui .nav-bar .navbar-expand-lg .navbar-nav .nav-link {
  color: var(--nu-header-text, var(--ls-heading, #050705));
  font-family: var(--ls-body-font, inherit);
}

.header--new-ui .nav-bar .navbar-expand-lg .navbar-nav .nav-link:hover,
.header--new-ui .nav-bar .navbar-expand-lg .navbar-nav .nav-link:focus,
.header--new-ui .nav-bar .navbar-expand-lg .navbar-nav .nav-active {
  color: var(--ls-accent, #050705);
}

/* Profile dropdown: name uses the root header text colour (falls back to brand
   heading); item hover uses the accent. */
.header--new-ui .drop-header .dropdown-toggle {
  color: var(--nu-header-text, var(--ls-heading, #050705));
  font-family: var(--ls-body-font, inherit);
}

.header--new-ui .dropdown-menu .dropdown-item:hover {
  background-color: var(--ls-accent, #050705);
  color: #fff;
}

/* Countdown counter → accent blocks (white numerals) + brand rounding + fonts. */
.header--new-ui .nav-bar .counter .heading {
  color: var(--nu-header-text, var(--ls-heading, #050705));
  font-family: var(--ls-heading-font, var(--ls-body-font, inherit));
}

.header--new-ui .nav-bar .counter .count-group .count-item .num {
  background-color: var(--ls-accent, #4d5461);
  border-radius: var(--ls-radius, 8px);
}

/* Mobile hamburger trigger (the panel itself is portaled out of scope). */
.header--new-ui .mobile-menu button {
  color: var(--nu-header-text, var(--ls-heading, inherit));
}
/* The glyph needs !important: globals.css:3210 sets
 * `.mobile-menu button i { color: #050705 !important }`, and an !important
 * declaration beats this rule no matter how specific it is. Without this the
 * author's Header text colour applied to every part of the header EXCEPT the
 * hamburger, which stayed near-black — invisible on a dark header. Scoped to
 * `.header--new-ui`, so only projects that opted into the new UI are affected. */
.header--new-ui .mobile-menu button i {
  color: var(--nu-header-text, var(--ls-heading, inherit)) !important;
}

/* ── Header bar height ────────────────────────────────────────────────────────
 * SYNC-CONTRACT: `--nu-header-bar-height` and the `header--fit-content` /
 * `header--logo-mobile` gate classes below are written by Header.tsx from the Puck
 * root props, which are declared in the DEVELOPER repo
 * (src/components/ProjectAdmin/sections/LandingPage/render/renderConfig.tsx →
 * RootProps). Renaming any of them here silently stops honouring an option the
 * author can still set in the editor, in a different repo, with no build error.
 *
 * globals.css pins the bar TWICE — `.nav-bar { height: 90px }` (:1083) and the
 * inner react-bootstrap `.navbar { height: 90px }` (:1063) — so both must move
 * together, or a taller bar just gets a 90px content strip inside it. These
 * selectors are (0,2,0) / (0,3,0) against globals' (0,1,0), and this sheet is
 * appended at runtime so it also loses no ties.
 *
 * UNSET IS A NO-OP: with no --nu-header-bar-height the fallback is 90px, so this
 * sets `min-height: 90px` on a box whose height is already globals' 90px — the
 * same 90px. Nothing moves until an author sets a value. */
.header--new-ui .nav-bar,
.header--new-ui .nav-bar .navbar {
  min-height: var(--nu-header-bar-height, 90px);
}

/* "Header grows to fit the logo" — releases globals' FIXED height so a logo
 * taller than the bar grows the bar instead of spilling out of it.
 *
 * Deliberately opt-in rather than the default: any project that already set a
 * logo taller than ~74px (the 90px bar minus bootstrap's 16px of navbar padding)
 * is overflowing slightly today, and releasing the height for everyone would grow
 * those headers — a visual change nobody asked for. --nu-header-height re-measures
 * either way, so page content follows automatically once it is on. */
.header--new-ui.header--fit-content .nav-bar,
.header--new-ui.header--fit-content .nav-bar .navbar {
  height: auto;
}

/* Swapped-in new-UI brand logo (single, responsive). */
/* Logo box. NOTE the author-set sizes (Header logo height / max width) are NOT
 * applied here — they're inline styles on the <img> itself, set by Header.tsx.
 * Reason: globals.css pins `.nav-bar .navbar-expand-lg .navbar-brand img
 * { width: 138px }` at (0,3,1) — three classes plus a type selector — which
 * out-ranks this (0,3,0) rule on the tie-breaking type count. Winning the
 * width from here would need a higher-specificity `width: auto`, and that would
 * apply to EVERY new-UI project — un-stretching logos that render 138x44 today
 * (a 25% horizontal stretch, since the artwork is 2.5:1). That's a visual change
 * for every project, so it stays opt-in: an inline style wins over globals
 * without a specificity war, and is emitted only when the author sets a size. */
.header--new-ui .navbar-brand .new-ui-logo {
  height: 44px;
  width: auto;
  max-width: 200px;
  cursor: pointer;
  display: inline-block;
}

/*
 * logoAlign: 'center' → centre the swapped-in brand logo WITHIN its own brand
 * cell. The desktop header is a fixed 3-column flex row — brand (32%, left),
 * Counter (33.3%, centre) and the right-aligned nav — so the brand cell keeps
 * its allotted width and we only change the logo's alignment inside it from
 * left to centre. We deliberately do NOT grow the brand cell (the previous
 * `flex: 1 1 auto` made it absorb all free space and shoved the Counter + nav
 * to the right, breaking the row); leaving the width untouched keeps the
 * Counter and right-nav in their existing positions. A true header-centre is
 * not achievable without overlapping the centre Counter, so this centres the
 * logo as far as it can without disturbing the rest of the row. On narrow
 * breakpoints the brand cell collapses to `width:auto` (globals.css), so this
 * gracefully degrades to the logo sitting at its natural size/position.
 * Default ('left') never gets this class, so it is unchanged.
 */
.header--logo-center .nav-bar .navbar-brand {
  display: flex;
  justify-content: center;
}

/* ── Mobile logo height ───────────────────────────────────────────────────────
 * The author's separate below-992px logo height. Everything here is `!important`
 * and therefore CANNOT carry a safe fallback — which is exactly why it is gated
 * on `header--logo-mobile`, a class <Header> adds ONLY when the option is set. An
 * untouched project never matches this rule at all. (Same gating pattern as the
 * signup modal's `ls-signup-has-*` classes.)
 *
 * Three separate things have to be beaten here:
 *   • the DESKTOP size, which is an inline style on the <img> (see
 *     headerOptions.headerLogoStyle for why it cannot live in a stylesheet) —
 *     only `!important` outranks an inline style;
 *   • globals.css:6675, which hides the logo outright below 371px
 *     (`display: none !important`);
 *   • globals.css:9785, which forces `width: 134px !important` between 420 and
 *     430px and would otherwise squash the logo in that 10px-wide window.
 * An author who has set a mobile logo height has said they want their logo at
 * that size on small screens, so overriding all three is the intent. Projects
 * that leave it blank keep today's behaviour, oddities included. */
@media (max-width: 991.98px) {
  .header--new-ui.header--logo-mobile .navbar-brand .new-ui-logo {
    height: var(--nu-logo-height-mobile, 44px) !important;
    width: auto !important;
    display: inline-block !important;
    object-fit: contain;
  }
}

.header--logo-center .nav-bar .navbar-brand .new-ui-logo {
  margin: 0 auto;
}