/* ═══════════════════════════════════════════════════════════════════
   Sprasa Media CMS — Site Header mechanics (shared by every theme)

   Layout, height and ad sizing for the masthead. Every theme renders the
   same header markup (themes/_shared/partials/header.php), so the plumbing
   lives here once and each theme's own theme.css keeps only its looks —
   colours, borders, logo typography.

   Loaded BEFORE the theme stylesheet, so a theme can override anything
   here. To change the masthead's size in a theme, set --hd-logo / --hd-pad
   on .site-header rather than restyling the parts individually.

   Classes come from Admin > Themes > Customize > Header:
     .hd-logo-left-ad-right    logo left, ad filling the space beside it
     .hd-logo-left-ad-below    logo left, ad on its own full-width row
     .hd-logo-center-ad-below  logo centred, ad on its own full-width row
     .hd-logo-only             no header ad — the shortest masthead
     .hd-compact / .hd-normal  vertical density
     .hd-ad-small/medium/full  how much width the header ad may take

   With the sticky option on, .main-nav carries .nav-sticky and header.js
   adds .is-stuck to it once the masthead has scrolled away. The masthead
   itself never sticks — the banner is meant to scroll off.
   ═══════════════════════════════════════════════════════════════════ */

.site-header {
  --hd-pad: 8px;      /* vertical breathing room around the masthead */
  --hd-logo: 38px;    /* logo height; logo-text scales from this too */
  --hd-gap: 24px;     /* space between the logo and the banner beside it */
  z-index: 900;
}
.site-header.hd-normal { --hd-pad: 16px; --hd-logo: 48px; }

/* Logo height, chosen in Themes > Customize > Header. Declared after the
   density rules and with matching specificity so it wins — density sets a
   starting point, this is the explicit choice.

   "banner" is 90px, the height of a standard leaderboard, so the logo and
   the advert beside it line up as one band. */
.site-header.hd-logo-small  { --hd-logo: 38px; }
.site-header.hd-logo-medium { --hd-logo: 56px; }
.site-header.hd-logo-large  { --hd-logo: 72px; }
.site-header.hd-logo-banner { --hd-logo: 90px; }

.hd-row {
  display: flex;
  align-items: center;
  gap: var(--hd-gap);
  padding: var(--hd-pad) 0;
  min-height: 0;
}
.hd-logo-center-ad-below .hd-row { justify-content: center; }

.site-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-img  { height: var(--hd-logo); width: auto; object-fit: contain; display: block; }
.logo-text { font-size: calc(var(--hd-logo) * 0.55); line-height: 1.1; }

/* Header ad — beside the logo, or on its own row beneath it.
   Beside the logo the two sit at opposite ends: logo hard left, banner
   hard right, with whatever space is left between them. --hd-gap is the
   minimum they may close to before the row wraps. */
.header-ad-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}
.header-ad-wrap .ad-zone { margin: 0; max-width: 100%; width: 100%; }
/* Right-aligned inside its own box too, so the banner ends at the page
   edge rather than floating in the middle of the space it was given. */
.header-ad-wrap .ad-zone img { max-width: 100%; height: auto; display: block; margin: 0 0 0 auto; }
.header-ad-wrap .ad-row { margin: 0; justify-content: flex-end; }

/* On its own full-width row it stays centred — there's no logo beside it
   to sit flush against. No double padding against .hd-row either. */
.hd-ad-below { justify-content: center; padding-bottom: var(--hd-pad); }
.hd-ad-below .ad-zone { margin-inline: auto; }
.hd-ad-below .ad-zone img { margin: 0 auto; }
.hd-ad-below .ad-row { justify-content: center; }

/* How much room the ad may take. "full" fills whatever is left. */
.hd-ad-small  .ad-zone { max-width: 468px; }
.hd-ad-medium .ad-zone { max-width: 728px; }
.hd-ad-full   .ad-zone { max-width: 100%; }

/* With no ad at all the masthead is just the logo — keep it tight. */
.hd-logo-only .hd-row { padding: calc(var(--hd-pad) * 0.75) 0; }

/* ── Menu style ────────────────────────────────────────────────────
   Four looks for the category bar, chosen in Themes > Customize >
   Header. Each keeps the theme's own accent and nav colour, so a theme
   still looks like itself — only the shape of the menu changes.

   Written to out-specify the theme stylesheets' own .nav-list rules,
   which load after this file. */

.main-nav { --nav-item-size: 13.5px; --nav-item-pad: 16px; }

/* Size. --nav-height comes from the theme; these override it together
   with the type size so the bar stays in proportion. */
.main-nav.nav-sm { --nav-height: 40px; --nav-item-size: 12.5px; --nav-item-pad: 12px; }
.main-nav.nav-md { --nav-height: 48px; --nav-item-size: 13.5px; --nav-item-pad: 16px; }
.main-nav.nav-lg { --nav-height: 58px; --nav-item-size: 15px;   --nav-item-pad: 20px; }

.main-nav .nav-list li a { font-size: var(--nav-item-size); padding: 0 var(--nav-item-pad); }
.main-nav .nav-search-toggle { height: var(--nav-height); }

/* ── Solid (default) — filled bar, active item lifted ── */
.main-nav.nav-solid .nav-list li a:hover,
.main-nav.nav-solid .nav-list li a.active { background: rgba(255,255,255,.14); color: #fff; }

/* ── Underline — light bar, a rule under the active item ── */
.main-nav.nav-underline { background: #fff; border-bottom: 1px solid var(--border, #e2e8f0); }
.main-nav.nav-underline .nav-list li a {
  color: var(--text, #1e293b);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  background: transparent;
}
.main-nav.nav-underline .nav-list li a:hover { color: var(--primary, #2563eb); background: transparent; }
.main-nav.nav-underline .nav-list li a.active {
  color: var(--primary, #2563eb);
  border-bottom-color: var(--primary, #2563eb);
  background: transparent;
}
.main-nav.nav-underline .nav-search-toggle { color: var(--text-muted, #64748b); }
.main-nav.nav-underline .nav-search-toggle:hover { color: var(--primary, #2563eb); }
.main-nav.nav-underline .nav-logo .logo-text { color: var(--text, #1e293b); }

/* ── Pills — each item a rounded chip, the active one filled ── */
.main-nav.nav-pills { background: #fff; border-bottom: 1px solid var(--border, #e2e8f0); }
.main-nav.nav-pills .nav-inner { gap: 4px; padding: 6px 0; height: auto; min-height: var(--nav-height); }
.main-nav.nav-pills .nav-list { gap: 4px; height: auto; }
.main-nav.nav-pills .nav-list li a {
  color: var(--text, #1e293b);
  font-weight: 600;
  border-radius: 100px;
  height: auto;
  padding: 7px var(--nav-item-pad);
  background: transparent;
}
.main-nav.nav-pills .nav-list li a:hover { background: var(--border-light, #f1f5f9); color: var(--primary, #2563eb); }
.main-nav.nav-pills .nav-list li a.active { background: var(--primary, #2563eb); color: #fff; }
.main-nav.nav-pills .nav-search-toggle { color: var(--text-muted, #64748b); height: auto; padding: 7px 14px; }
.main-nav.nav-pills .nav-logo .logo-text { color: var(--text, #1e293b); }

/* ── Bordered — ruled top and bottom, items divided ── */
.main-nav.nav-bordered {
  background: #fff;
  border-top: 2px solid var(--text, #1e293b);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.main-nav.nav-bordered .nav-list li { border-right: 1px solid var(--border-light, #f1f5f9); }
.main-nav.nav-bordered .nav-list li:last-child { border-right: none; }
.main-nav.nav-bordered .nav-list li a {
  color: var(--text, #1e293b);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: calc(var(--nav-item-size) - 1px);
  background: transparent;
}
.main-nav.nav-bordered .nav-list li a:hover { color: var(--primary, #2563eb); background: var(--border-light, #f1f5f9); }
.main-nav.nav-bordered .nav-list li a.active { color: var(--primary, #2563eb); background: transparent; }
.main-nav.nav-bordered .nav-search-toggle { color: var(--text-muted, #64748b); }
.main-nav.nav-bordered .nav-logo .logo-text { color: var(--text, #1e293b); }

/* The light styles need a dark home icon and dropdown text too. */
.main-nav.nav-underline .nav-has-home a,
.main-nav.nav-pills .nav-has-home a,
.main-nav.nav-bordered .nav-has-home a { color: var(--text, #1e293b); }

/* ── Sticky category bar ───────────────────────────────────────────
   The masthead scrolls away and the category bar pins itself to the
   top, growing a small logo on the left and pushing the menu to the
   right. The banner is intentionally left behind with the masthead. */

.nav-sentinel { height: 1px; margin-bottom: -1px; }

.main-nav.nav-sticky { position: sticky; top: 0; z-index: 1000; }

/* Collapsed until stuck. Animating width rather than display keeps the
   menu from jumping the moment the logo appears. */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  text-decoration: none;
  transition: max-width .25s ease, opacity .2s ease, margin-right .25s ease;
}
/* A square mark, not the wordmark, so it stays legible at bar height. */
.nav-logo .logo-img  { height: 30px; width: auto; max-width: 150px; object-fit: contain; }
.main-nav.nav-lg .nav-logo .logo-img { height: 36px; }
.main-nav.nav-sm .nav-logo .logo-img { height: 24px; }
.nav-logo .logo-text {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  letter-spacing: -.3px;
}

/* Deliberately smaller than --hd-gap: the first menu item carries 16px of
   its own padding, so this lands at about the same visual distance as the
   masthead's logo-to-banner gap. */
.main-nav.is-stuck .nav-logo { max-width: 220px; opacity: 1; margin-right: 8px; }

/* Stuck: the menu follows the logo rather than being pushed to the far
   right. The search icon keeps its own margin-left:auto, so it stays at
   the right-hand end of the bar. */
.main-nav.is-stuck .nav-list { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .nav-logo { transition: none; }
}

@media (max-width: 991.98px) {
  /* Let the banner drop below the logo when there genuinely isn't room for
     both. Everything stays left-aligned so the banner keeps its gap from
     the logo while they share a row, and lines up under it once it wraps —
     centring here used to nudge the banner further off the logo whenever
     the row still fitted. row-gap only applies once it has actually
     wrapped, so the stacked spacing stays tighter than the side-by-side. */
  .hd-logo-left-ad-right .hd-row { flex-wrap: wrap; row-gap: 8px; }
}

@media (max-width: 575.98px) {
  /* 24px is a lot of a 375px screen — the banner needs that room more.
     Both density classes are listed so this out-specifies the
     .site-header.hd-normal rule above; a plain .site-header selector loses
     to it, which left "normal" density with a full-size logo and padding
     on a phone. The partial always emits one of the two. */
  .site-header.hd-compact,
  .site-header.hd-normal { --hd-logo: 32px; --hd-pad: 6px; --hd-gap: 14px; }
  .header-ad-wrap .ad-zone { max-width: 100%; }

  /* The category bar already scrolls sideways on a phone and shares its
     row with the search icon — a logo as well leaves too little for the
     categories themselves, so the bar stays sticky but without it. */
  .main-nav.is-stuck .nav-logo { max-width: 0; opacity: 0; margin-right: 0; }
  .main-nav.is-stuck .nav-list { margin-left: 0; }
}