/* =============================================================
   BBI - Header
   assets/css/header.css

   Global site header bar (MENU left, logo centre, social row
   right) and the full-screen menu overlay markup. Ticker styles
   are in this file because the ticker visually belongs to the
   header band on every template.

   Figma reference (BBI_Homepage_Desktop 5:118):
     - MENU / logo / social: vertically centred in the masthead bar
     - Equal chrome above and below the logo (--header-chrome-bottom)
     - Horizontal inset from left/right: var(--site-chrome-inline)
   ============================================================= */

/* -------------------------------------------------------------
   1. Site header bar
   ------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: var(--z-sticky);
  background-color: var(--color-background);
  height: var(--header-height);
}

body.bbi-menu-open .site-header {
  z-index: calc(var(--z-overlay) + 1);
}

/* Full-bleed rule between masthead and page content (no side gutters). */
.bbi-site-chrome-divider {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: 0;
  padding: 0;
  height: 0;
  border: 0;
  border-top: 0.5px solid #6b6b6b;
  box-sizing: border-box;
}

/*
 * Home scroll hero: fade the rule in once the morphing logo bottom crosses the masthead
 * bottom (thresholds from home-hero.js FLIP measure). Driven by --bbi-home-hero-p; no
 * CSS transition.
 */
body.home.has-home-scroll-hero .bbi-site-chrome-divider {
  --bbi-site-chrome-divider-reveal: clamp(
    0,
    (var(--bbi-home-hero-p, 0) - var(--bbi-divider-reveal-p-start, 0.94))
      / var(--bbi-divider-reveal-p-span, 0.06),
    1
  );
  border-top-color: rgb(107 107 107 / var(--bbi-site-chrome-divider-reveal));
}

.site-header__inner {
  padding-block: 0;
  padding-inline: var(--site-chrome-inline);
  height: 100%;
  align-items: center;
  box-sizing: border-box;
}

.site-header__col {
  display: flex;
  align-items: center;
}

.site-header__col--left   { justify-content: flex-start; }
.site-header__col--center { justify-content: center; }
.site-header__col--right  { justify-content: flex-end; }

/* Theme Options > Social — horizontal row (10px gap), uniform icon size. */
.site-header__col--right .bbi-article-social-rail--header-bar {
  flex-shrink: 0;
}

.site-header__col--right .bbi-article-social-rail--header-bar .bbi-article-social-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  column-gap: 10px;
}

.site-header__col--right .bbi-article-social-rail--header-bar .bbi-article-social-rail__list > li {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.site-header__col--right .bbi-article-social-rail--header-bar .bbi-article-social-rail__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--bbi-social-icon-size);
  height: var(--bbi-social-icon-size);
  min-width: 0;
  min-height: 0;
  max-width: var(--bbi-social-icon-size);
  max-height: var(--bbi-social-icon-size);
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: transparent;
  color: var(--color-text);
  border: 0;
  border-radius: 0;
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.site-header__col--right .bbi-article-social-rail--header-bar .bbi-article-social-rail__link:hover,
.site-header__col--right .bbi-article-social-rail--header-bar .bbi-article-social-rail__link:focus-visible {
  background: transparent;
  transform: translateY(-1px);
}

.site-header__col--right .bbi-article-social-rail--header-bar .bbi-article-social-rail__link .bbi-icon-svg {
  display: block;
  flex-shrink: 0;
  width: var(--bbi-social-icon-size) !important;
  height: var(--bbi-social-icon-size) !important;
  max-width: var(--bbi-social-icon-size);
  max-height: var(--bbi-social-icon-size);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-text);
}

.site-header__wordmark {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-tighter);
  text-transform: lowercase;
  line-height: 1;
}

/* Wordmark asset: 1200×273 (~4.396:1). Matte size comes from tokens.css per breakpoint. */
.site-header__logo-matte {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
  width: min(
    var(--header-logo-width),
    calc(100vw - (2 * var(--site-chrome-inline)) - var(--header-logo-max-inline))
  );
  height: var(--header-logo-height);
  overflow: hidden;
}

.site-header__logo-matte--tablet,
.site-header__logo-matte--mobile {
  display: none;
}

.site-header__logo-matte--desktop {
  display: flex;
}

/* Do not use height:100% here — inside align-items:center flex, % height on the
   img often resolves to 0, so the logo vanishes. Size from intrinsic ratio, cap
   to the matte, then scale for padded PNGs. */
img.site-header__logo {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: high-quality;
  transform: translateZ(0);
  flex-shrink: 0;
}

/* Tablet — swap to tablet logo upload when present. */
@media (max-width: 1199px) {
  .bbi-chrome-btn {
    font-size: 14px !important;
  }

  .site-header__logo-matte--desktop { display: none; }
  .site-header__logo-matte--tablet { display: flex; }
}

/* Mobile — swap to mobile logo upload when present. */
@media (max-width: 767px) {
  .bbi-chrome-btn {
    font-size: 12px !important;
    letter-spacing: 0.05em;
  }

  .site-header__logo-matte--tablet { display: none; }
  .site-header__logo-matte--mobile { display: flex; }
}

@media (max-width: 359px) {
  .bbi-chrome-btn {
    font-size: 11px !important;
    letter-spacing: 0.04em;
  }
}

/* -------------------------------------------------------------
   2. Menu overlay
   ------------------------------------------------------------- */

.bbi-menu-overlay[hidden] {
  display: none;
}

.bbi-menu-overlay {
  position: fixed;
  inset: 0;
  top: 0;
  z-index: var(--z-overlay);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.bbi-menu-overlay ::selection {
  background-color: var(--color-accent-green);
  color: var(--color-text);
}

.bbi-menu-overlay ::-moz-selection {
  background-color: var(--color-accent-green);
  color: var(--color-text);
}

/* WordPress Admin Bar offsets */
.admin-bar .bbi-menu-overlay {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .bbi-menu-overlay {
    top: 46px;
  }
}

.bbi-menu-overlay__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
}

.bbi-menu-overlay__panel {
  background-color: var(--color-background);
  margin-top: 0;
  padding-top: calc(var(--header-height) + 40px);
  padding-bottom: var(--space-16);
  padding-left: var(--chrome-inline-padding);
  padding-right: var(--chrome-inline-padding);
  box-shadow: 0px 4px 28.5px rgba(0, 0, 0, 0.15);
  position: relative;
  width: 100%;
}

.bbi-menu-overlay.is-open {
  display: flex;
}

.bbi-menu-overlay__body {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  gap: var(--space-16);
  align-items: stretch;
}

.bbi-menu-overlay__category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.bbi-menu-overlay__category-link {
  display: flex;
  align-items: center;
  padding-block: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.bbi-menu-overlay__category-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 60px;
  line-height: 100%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.bbi-menu-overlay__featured--mobile {
  display: none;
}

.bbi-menu-overlay__featured-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: var(--space-5);
  height: 100%;
}

.bbi-menu-overlay__featured-item {
  flex: 1;
}

.bbi-menu-overlay__featured-link {
  display: block;
  text-decoration: none;
  height: 100%;
}

.bbi-menu-overlay__featured-media {
  display: block;
  width: 100%;
  height: 397px;
  background-color: var(--color-gray-100);
  overflow: hidden;
}

.bbi-menu-overlay__featured-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.bbi-menu-overlay__featured-link:hover .bbi-menu-overlay__featured-thumb,
.bbi-menu-overlay__featured-link:focus-visible .bbi-menu-overlay__featured-thumb {
  transform: scale(1.04);
}

.bbi-menu-overlay__empty {
  color: var(--color-text-muted);
  font-style: italic;
}

@media (max-width: 1199px) {
  .bbi-menu-overlay__category-name { font-size: 50px; }
  .bbi-menu-overlay__featured-media { height: 320px; }
}

@media (max-width: 1023px) {
  .bbi-menu-overlay__category-name { font-size: 40px; }
  .bbi-menu-overlay__featured-media { height: 260px; }
}

@media (max-width: 767px) {
  .bbi-menu-overlay__panel {
    margin-top: 0;
    padding-top: calc(var(--header-height) + 32px);
    padding-bottom: var(--space-10);
    padding-left: var(--chrome-inline-padding);
    padding-right: var(--chrome-inline-padding);
  }
  .bbi-menu-overlay__body { gap: var(--space-8); display: flex; flex-direction: column; }
  .bbi-menu-overlay__category-name {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.05;
  }
  .bbi-menu-overlay__category-link { padding-block: var(--space-1); }
  .bbi-menu-overlay__featured--desktop { display: none; }
  .bbi-menu-overlay__featured--mobile { display: block; }
  .bbi-menu-overlay__featured-list { flex-direction: column; gap: var(--space-4); }
  .bbi-menu-overlay__featured-media { height: auto; aspect-ratio: 4/3; }
}

@media (max-width: 359px) {
  .bbi-menu-overlay__panel {
    padding-top: calc(var(--header-height) + 24px);
  }

  .bbi-menu-overlay__category-name {
    font-size: clamp(1.375rem, 7vw, 1.75rem);
  }
}

body.bbi-menu-open {
  overflow: hidden;
}

/* -------------------------------------------------------------
   3. Ticker — multilingual “Billboard”; Anek ExtraBold @ 800 per lang.
   No sans-serif fallback (avoids Windows Nirmala UI on Indic scripts).
   ------------------------------------------------------------- */

.bbi-ticker {
  position: relative;
  background-color: var(--color-ticker-bg);
  color: var(--color-ticker-fg);
  overflow: hidden;
  height: var(--ticker-height);
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

/* One shared row height; every cell stretches to the full band. */
.bbi-ticker__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  height: 100%;
  column-gap: var(--ticker-item-divider-gap);
  white-space: nowrap;
  will-change: transform;
}

/* Each script sits in a full-height grid cell (place-items: center). */
.bbi-ticker__item,
.bbi-ticker__divider {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  align-self: stretch;
  height: 100%;
  min-height: var(--ticker-height);
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  transform: translateY(var(--bbi-ticker-y, 0px));
}

.bbi-ticker__item {
  font-size: var(--ticker-font-size);
  font-style: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: var(--ticker-letter-spacing);
  color: var(--color-ticker-fg);
  text-transform: none;
}

/*
 * Self-hosted Anek ExtraBold TTF/WOFF2 are static fonts — never use variable axes
 * (font-variation-settings breaks Kannada/Malayalam and causes system-font fallback).
 */
.bbi-ticker__item--lang-hi,
.bbi-ticker__item--lang-mr,
.bbi-ticker__item--lang-hi .bbi-ticker__link,
.bbi-ticker__item--lang-mr .bbi-ticker__link,
.bbi-ticker__item--lang-hi .bbi-ticker__label,
.bbi-ticker__item--lang-mr .bbi-ticker__label,
[data-bbi-ticker-font="Anek Devanagari"],
[data-bbi-ticker-font="Anek Devanagari"] .bbi-ticker__link,
[data-bbi-ticker-font="Anek Devanagari"] .bbi-ticker__label {
  font-family: var(--font-anek-devanagari) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
}

.bbi-ticker__item--lang-bn,
.bbi-ticker__item--lang-bn .bbi-ticker__link,
.bbi-ticker__item--lang-bn .bbi-ticker__label,
[data-bbi-ticker-font="Anek Bangla"],
[data-bbi-ticker-font="Anek Bangla"] .bbi-ticker__link,
[data-bbi-ticker-font="Anek Bangla"] .bbi-ticker__label {
  font-family: var(--font-anek-bangla) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
}

.bbi-ticker__item--lang-gu,
.bbi-ticker__item--lang-gu .bbi-ticker__link,
.bbi-ticker__item--lang-gu .bbi-ticker__label,
[data-bbi-ticker-font="Anek Gujarati"],
[data-bbi-ticker-font="Anek Gujarati"] .bbi-ticker__link,
[data-bbi-ticker-font="Anek Gujarati"] .bbi-ticker__label {
  font-family: var(--font-anek-gujarati) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
}

.bbi-ticker__item--lang-ta,
.bbi-ticker__item--lang-ta .bbi-ticker__link,
.bbi-ticker__item--lang-ta .bbi-ticker__label,
[data-bbi-ticker-font="Anek Tamil"],
[data-bbi-ticker-font="Anek Tamil"] .bbi-ticker__link,
[data-bbi-ticker-font="Anek Tamil"] .bbi-ticker__label {
  font-family: var(--font-anek-tamil) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
}

.bbi-ticker__item--lang-or,
.bbi-ticker__item--lang-or .bbi-ticker__link,
.bbi-ticker__item--lang-or .bbi-ticker__label,
[data-bbi-ticker-font="Anek Odia"],
[data-bbi-ticker-font="Anek Odia"] .bbi-ticker__link,
[data-bbi-ticker-font="Anek Odia"] .bbi-ticker__label {
  font-family: var(--font-anek-odia) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
}

.bbi-ticker__item--lang-ml,
.bbi-ticker__item--lang-ml .bbi-ticker__link,
.bbi-ticker__item--lang-ml .bbi-ticker__label,
[data-bbi-ticker-font="Anek Malayalam"],
[data-bbi-ticker-font="Anek Malayalam"] .bbi-ticker__link,
[data-bbi-ticker-font="Anek Malayalam"] .bbi-ticker__label {
  font-family: var(--font-anek-malayalam) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
}

.bbi-ticker__item--lang-kn,
.bbi-ticker__item--lang-kn .bbi-ticker__link,
.bbi-ticker__item--lang-kn .bbi-ticker__label,
[data-bbi-ticker-font="Anek Kannada"],
[data-bbi-ticker-font="Anek Kannada"] .bbi-ticker__link,
[data-bbi-ticker-font="Anek Kannada"] .bbi-ticker__label {
  font-family: var(--font-anek-kannada) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
}

.bbi-ticker__label {
  display: block;
  line-height: 1;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.bbi-ticker__link {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: inherit;
  font-style: inherit;
  font-optical-sizing: inherit;
  line-height: 1;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color var(--transition-fast);
}

.bbi-ticker__link:focus-visible {
  outline: 2px solid var(--color-ticker-divider);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Diamond divider — inner span so JS can measure the glyph box. */
.bbi-ticker__diamond {
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--color-ticker-divider);
  transform: rotate(45deg);
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .bbi-ticker__diamond {
    width: 7px;
    height: 7px;
  }
}

@media (max-width: 767px) {
  .bbi-ticker__diamond {
    width: 5px;
    height: 5px;
  }
}