/*
 * Masuria Esport - site header (header.css)
 * Design (1440px): fixed 97px bar, transparent with a 6px backdrop blur, overlaying the hero. Left: logo mark + "MSR" + tagline,
 * centre: 7 links (40px gaps), right: the small gold CTA button. Requires tokens.css, base.css and components.css (.msr-btn).
 * Behaviour (mobile menu, scrolled state) lives in assets/js/nav.js.
 *
 * Everything the design does not show is marked "ADDED: not in design": hover / focus states, the mobile menu (<= 1024px),
 * the readable background on inner pages and after scrolling, the offset of inner-page content and the no-JS fallback.
 * The <html> element gets `msr-js` (inline snippet in header.php + nav.js) when scripts run, so `html:not(.msr-js)` is the no-JS state.
 */

/* ==========================================================================
   Bar
   ========================================================================== */

.msr-header {
  --msr-header-pad: clamp(20px, 3.34vw, 48px); /* side padding: 48px from 1437px up (design: 48px at 1440px), shrinks below (ADDED below 1440) */
  position: fixed;
  top: var(--msr-adminbar-h); /* ADDED: not in design - sits under the WP admin bar when it is shown */
  right: 0;
  left: 0;
  z-index: var(--msr-z-header);
  height: var(--msr-header-h); /* 24 + 48 + 24 + 1px border */
  border-bottom: 1px solid var(--msr-border-subtle);
  background-color: transparent;
  -webkit-backdrop-filter: blur(var(--msr-blur-nav));
  backdrop-filter: blur(var(--msr-blur-nav));
  transition: background-color var(--msr-duration) var(--msr-ease); /* ADDED: not in design */
}

/*
 * ADDED: not in design - readable bar where the transparent one would sit on top of text:
 * inner pages (--solid, always) and the front page once it has scrolled past the top (.is-scrolled, set by nav.js).
 * At the very top of the front page the bar stays transparent, exactly as in the design.
 */
.msr-header--solid,
.msr-header.is-scrolled {
  background-color: var(--msr-bg-90);
}

.msr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px; /* the design frame; ADDED: not in design - keeps the bar proportions on wider screens */
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--msr-header-pad);
}

/* Desktop: the panel is transparent to layout, so brand | menu | CTA are direct flex items with `space-between` (as in the design). */
.msr-header__panel {
  display: contents;
}

/* ADDED: not in design - the toggle only exists on the mobile layout (and only with JS) */
.msr-header__toggle {
  display: none;
}

/* ==========================================================================
   Brand: 48x48 mark box + wordmark + tagline, 8px apart
   ========================================================================== */

.msr-header__brand {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  gap: var(--msr-space-8);
}

.msr-header__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

/* The default mark is 37.5 x 30 (its own SVG size); a custom logo is scaled down to fit the 48px box. */
.msr-header__logo {
  display: block;
  width: auto;
  max-width: 48px;
  height: auto;
  max-height: 48px;
  object-fit: contain;
}

.msr-header__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 3px;
}

.msr-header__tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.msr-header__tagline-primary {
  color: var(--msr-white);
  font-family: var(--msr-font-brand);
  font-size: var(--msr-fs-16);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-none);
  letter-spacing: var(--msr-ls-wider);
  white-space: nowrap;
}

.msr-header__tagline-secondary {
  color: var(--msr-white);
  font-family: var(--msr-font-brand);
  font-size: var(--msr-fs-10);
  font-weight: var(--msr-fw-regular);
  line-height: var(--msr-lh-none);
  letter-spacing: var(--msr-ls-widest);
  white-space: nowrap;
}

/* ==========================================================================
   Menu: Inter 700 12/16, 0.2em, uppercase. Inactive white 70%; current white with a 2px gold underline 4px below the text.
   ========================================================================== */

.msr-header__nav {
  flex: none;
}

.msr-header__menu {
  display: flex;
  align-items: center;
  gap: var(--msr-space-40);
}

.msr-header__menu a {
  position: relative;
  display: block;
  color: var(--msr-white-70);
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-12);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-widest);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--msr-duration-fast) var(--msr-ease); /* ADDED: not in design */
}

.msr-header__menu :is(.current-menu-item, .current_page_item) > a,
.msr-header__menu a[aria-current='page'] {
  color: var(--msr-white);
}

/* The underline is drawn below the link box, so the row height does not change (design: 22px link inside a 16px item). */
.msr-header__menu :is(.current-menu-item, .current_page_item) > a::after,
.msr-header__menu a[aria-current='page']::after {
  content: '';
  position: absolute;
  top: calc(100% + var(--msr-space-4));
  right: 0;
  left: 0;
  height: 2px;
  background-color: var(--msr-gold);
}

/* ADDED: not in design - hover: the link brightens to full white */
@media (hover: hover) {
  .msr-header__menu a:hover {
    color: var(--msr-white);
  }
}

/* ==========================================================================
   Actions: language switcher + CTA (ADDED: not in design - Polylang PL / EN switcher)
   Grouped so they stay a single flex item next to brand | menu (desktop `space-between`).
   ========================================================================== */

.msr-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--msr-space-16);
}

.msr-header__lang {
  display: flex;
  align-items: center;
  gap: var(--msr-space-8);
}

.msr-header__lang-link {
  position: relative;
  color: var(--msr-white-70);
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-12);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-widest);
  text-transform: uppercase;
  transition: color var(--msr-duration-fast) var(--msr-ease);
}

.msr-header__lang-link.is-current {
  color: var(--msr-white);
}

.msr-header__lang-link.is-current::after {
  content: '';
  position: absolute;
  top: calc(100% + var(--msr-space-4));
  right: 0;
  left: 0;
  height: 2px;
  background-color: var(--msr-gold);
}

@media (hover: hover) {
  .msr-header__lang-link:hover {
    color: var(--msr-white);
  }
}

/* ==========================================================================
   Inner pages (ADDED: not in design)
   The bar is fixed on every page. On the front page the hero runs underneath it; everywhere else <main> starts below it.
   header.php puts .msr-header--overlay / .msr-header--solid and .msr-main--offset from is_front_page() / is_home() / is_singular('post') (the posts page and a single post have their own hero, see home.php, single.php).
   ========================================================================== */

.msr-main--offset {
  padding-top: var(--msr-header-h);
}

/* Default templates (index, page, single, 404) print a bare .msr-content: give it the site's content column. */
.msr-main--offset .msr-content {
  width: 100%;
  max-width: calc(var(--msr-container) + 2 * var(--msr-gutter));
  margin-inline: auto;
  padding: var(--msr-space-64) var(--msr-gutter) var(--msr-space-96);
}

.msr-content__title,
.msr-content .entry-title {
  margin-bottom: var(--msr-space-32);
  font-size: var(--msr-fs-36);
  line-height: var(--msr-lh-40);
  letter-spacing: var(--msr-ls-wide);
  text-transform: uppercase;
}

.msr-content__title span {
  color: var(--msr-gold);
}

/* ==========================================================================
   Below 1440px, above the mobile menu (ADDED: not in design)
   The design's 40px gaps + 0.2em tracking need ~1250px. Below that the gaps and the tracking shrink smoothly (linear in the viewport width)
   to 18px / 1.2px at 1025px, so brand, menu and CTA never touch. At 1440px both formulas give the design values.
   ========================================================================== */

@media (max-width: 1440px) {
  .msr-header__menu {
    gap: clamp(18px, calc(6.4vw - 47.6px), var(--msr-space-40));
  }

  .msr-header__menu a {
    letter-spacing: clamp(1.2px, calc(0.533vw - 4.27px), var(--msr-ls-widest));
  }
}

/* ==========================================================================
   Mobile / tablet (<= 1024px) - ADDED: not in design
   With JS (html.msr-js): the bar keeps its 97px (brand + toggle stay pinned above it), the menu + CTA fill a
   fullscreen overlay opened by the toggle. Without JS: the header is a static block at the top of the page
   and the menu is simply a visible list.
   ========================================================================== */

@media (max-width: 1024px) {
  /* --- shared (with and without JS): the panel is a vertical stack --- */
  .msr-header__panel {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    gap: var(--msr-space-24);
    padding-block: var(--msr-space-8) var(--msr-space-32);
  }

  .msr-header__nav {
    flex: none;
  }

  .msr-header__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .msr-header__menu li + li {
    border-top: 1px solid var(--msr-border-subtle);
  }

  .msr-header__menu a {
    display: flex;
    align-items: center;
    min-height: 56px; /* tap target */
    padding-inline: var(--msr-space-16);
    font-size: var(--msr-fs-14);
    line-height: var(--msr-lh-20);
    letter-spacing: var(--msr-ls-widest);
  }

  /* current item: a gold bar on the left instead of the underline */
  .msr-header__menu :is(.current-menu-item, .current_page_item) > a::after,
  .msr-header__menu a[aria-current='page']::after {
    top: var(--msr-space-8);
    right: auto;
    bottom: var(--msr-space-8);
    left: 0;
    width: 2px;
    height: auto;
  }

  .msr-header__actions {
    align-self: stretch;
  }

  .msr-header__actions .msr-header__cta {
    flex: 1;
    min-height: 52px;
  }

  /* --- no JS: static header, menu always visible --- */
  html:not(.msr-js) .msr-header {
    position: relative;
    top: auto;
    height: auto;
  }

  html:not(.msr-js) .msr-header__inner {
    flex-wrap: wrap;
    height: auto;
    padding-top: var(--msr-space-24);
  }

  html:not(.msr-js) .msr-main--offset {
    padding-top: 0;
  }

  /* --- with JS: fixed bar, fullscreen overlay panel --- */
  /* `filter`/`backdrop-filter` on an ancestor creates a new containing block for `position: fixed`
     descendants (here, the panel below would size itself to the 97px bar instead of the viewport).
     Dropping it while open is invisible anyway - the bar's background is already opaque (below), so
     there is nothing left to blur - and it lets the fullscreen panel position against the viewport. */
  .msr-js .msr-header.is-open {
    background-color: var(--msr-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Brand + toggle stay above the fullscreen panel (below), so the logo and the close (X) control remain visible and usable while it is open. */
  .msr-js .msr-header__brand {
    position: relative;
    z-index: 2;
  }

  .msr-js .msr-header__toggle {
    position: relative;
    z-index: 2;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--msr-border);
    transition: border-color var(--msr-duration) var(--msr-ease);
  }

  .msr-js .msr-header__toggle[aria-expanded='true'] {
    border-color: var(--msr-border-gold);
  }

  @media (hover: hover) {
    .msr-js .msr-header__toggle:hover {
      border-color: var(--msr-white-40);
    }
  }

  /* hamburger: three 2px bars drawn with one element + its pseudo-elements; morphs into an X while open */
  .msr-header__toggle-bars,
  .msr-header__toggle-bars::before,
  .msr-header__toggle-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--msr-white);
    transition:
      transform var(--msr-duration) var(--msr-ease),
      background-color var(--msr-duration) var(--msr-ease);
  }

  .msr-header__toggle-bars {
    position: relative;
  }

  .msr-header__toggle-bars::before,
  .msr-header__toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .msr-header__toggle-bars::before {
    top: -6px;
  }

  .msr-header__toggle-bars::after {
    top: 6px;
  }

  .msr-header__toggle[aria-expanded='true'] .msr-header__toggle-bars {
    background-color: transparent;
  }

  .msr-header__toggle[aria-expanded='true'] .msr-header__toggle-bars::before {
    transform: translateY(6px) rotate(45deg);
  }

  .msr-header__toggle[aria-expanded='true'] .msr-header__toggle-bars::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Fullscreen takeover: covers the whole viewport (the pinned brand/toggle above sit at z-index 2, this at 1),
     its own content vertically centred as one block (nav, then the divider + language switcher + CTA). */
  .msr-js .msr-header__panel {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-basis: auto;
    justify-content: center;
    gap: var(--msr-space-48);
    padding: var(--msr-space-96) var(--msr-header-pad) var(--msr-space-48);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--msr-bg);
    /* closed: out of sight, out of the tab order (visibility), a soft fade + rise */
    visibility: hidden;
    opacity: 0;
    transform: translateY(var(--msr-space-16));
    pointer-events: none;
    transition:
      opacity var(--msr-duration) var(--msr-ease),
      transform var(--msr-duration) var(--msr-ease),
      visibility 0s linear var(--msr-duration);
  }

  .msr-js .msr-header.is-open .msr-header__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* Minimalist: a centred, larger-type list instead of the no-JS stacked list - no side borders, more air. */
  .msr-js .msr-header__panel .msr-header__menu {
    align-items: center;
    gap: var(--msr-space-8);
  }

  .msr-js .msr-header__panel .msr-header__menu li + li {
    border-top: none;
  }

  .msr-js .msr-header__panel .msr-header__menu a {
    min-height: auto;
    padding-block: var(--msr-space-8);
    padding-inline: 0;
    font-size: var(--msr-fs-24);
    line-height: var(--msr-lh-32);
    letter-spacing: var(--msr-ls-wide);
  }

  /* current item here: centred underline (like desktop) instead of the no-JS fallback's left bar - fits the centred layout. */
  .msr-js .msr-header__panel .msr-header__menu :is(.current-menu-item, .current_page_item) > a::after,
  .msr-js .msr-header__panel .msr-header__menu a[aria-current='page']::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 32px;
    height: 2px;
    transform: translateX(-50%);
  }

  .msr-js .msr-header__panel .msr-header__actions {
    flex-direction: column;
    gap: var(--msr-space-24);
    padding-top: var(--msr-space-32);
    border-top: 1px solid var(--msr-border-subtle);
  }

  .msr-js .msr-header__panel .msr-header__lang {
    align-self: center;
  }

  /* scroll lock while the menu is open (class set by nav.js) */
  html.msr-nav-open,
  html.msr-nav-open body {
    overflow: hidden;
  }
}