/* ─── Norrma Header ──────────────────────────────────────────────────────────
   Scroll-driven animation via --fold-progress (0→1) set by JS.
   No threshold snap — letters slide in real time with scroll position.
──────────────────────────────────────────────────────────────────────────── */

/* ── Reserve scrollbar gutter so overlay open/close causes no layout shift ── */
html {
  scrollbar-gutter: stable;
  --norrma-hero-bg: #11111A;
}

/* ── Reset block-theme margin injected by TwentyTwentyFive ── */
#norrma-header.wp-block-group {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ── Base header ── */
#norrma-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  height: calc(235px - 150px * var(--fold-progress, 0));
  box-sizing: border-box;
  background: var(--norrma-hero-bg);
  box-shadow: none;
  overflow: hidden;
  transform: translateY(calc(-1 * var(--footer-hide-progress, 0) * 100%));
  will-change: transform;
}

#norrma-header.is-overlay-open {
  transform: none !important;
}

#norrma-header.is-overlay-open .brand-row {
  visibility: hidden;
}

#norrma-header.is-overlay-open .nav-burger,
#norrma-header:has(.nav-overlay.is-open) .nav-burger {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

#norrma-header:not(.is-layout-ready) .header-inner,
#norrma-header:not(.is-layout-ready) .nav-primary {
  visibility: hidden;
}

/* ── brand-row: wraps brand-link + brand-slogan ── */
.brand-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

/* ── header-inner: brand + burger row ── */
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: content-box;
  max-width: 1180px;
  margin: 0 auto;
  /* Padding rebalances as the header folds so the brand stays optically centered. */
  padding: calc(32px - 22px * var(--fold-progress, 0)) 32px calc(32px - 22px * var(--fold-progress, 0));
  transform: translateY(calc(50px * (1 - var(--fold-progress, 0))));
}

/* ─────────────────────────────────────────────────────────────────────────────
   WORDMARK
───────────────────────────────────────────────────────────────────────────── */

/* brand-link width is set by JS to the full lockup width so the logo can
   collapse down to the compact symbol without changing the surrounding flow. */
.brand-link {
  display: block;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 0;
  will-change: transform;
  transform: translateY(-4px);
}

.brand-media {
  position: relative;
  display: block;
  overflow: hidden;
  vertical-align: baseline;
  height: clamp(30px, 4vw, 60px);
  will-change: width;
}

.brand-mark {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
}

.brand-mark-compact {
  z-index: 1;
}

.brand-mark-full {
  z-index: 2;
  will-change: clip-path, transform;
}

/* Tagline: flex: 1 1 auto pushes it to the far right of brand-row. */
.brand-tagline {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: block;
  padding-left: 0.2em;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9898B0;
  text-align: right;
  white-space: nowrap;
  font-size: clamp(19px, 1.68vw, 22px);
  line-height: 1.15;
  will-change: opacity;
}


.tagline-br { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   NAV ROW
───────────────────────────────────────────────────────────────────────────── */

.nav-primary-shell {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: content-box;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: calc(112px * (1 - var(--fold-progress, 0)));
  padding-top: 0;
  padding-right:  32px;
  padding-bottom: calc(32px * (1 - var(--fold-progress, 0)));
  padding-left:   32px;
  transform: translateY(calc(18px * (1 - var(--fold-progress, 0))));
}

.nav-primary {
  box-sizing: content-box;
  width: auto;
  max-width: none;
  margin: 0;
  overflow: hidden;
  pointer-events: auto;
}

/* When fully folded, disable nav interaction */
#norrma-header[style*="--fold-progress: 1"] .nav-primary,
.nav-primary.is-folded {
  pointer-events: none;
}

/* Strip WP block nav defaults */
.nav-primary .wp-block-navigation__container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.nav-primary .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F7F6F2 !important;
  text-decoration: none;
  padding: 0 0 0 12px;
  transition: color 240ms ease;
}

/* Bullet indicator — always occupies space, only color changes */
.nav-primary .wp-block-navigation-item__content::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
  transition: background 240ms ease;
}

/* Hover: cyan bullet */
.nav-primary .wp-block-navigation-item__content:hover {
  color: #43C7F4 !important;
}

.nav-primary .wp-block-navigation-item__content:hover::before {
  background: #43C7F4;
}

/* Active page: mauve bullet */
.nav-primary .current-menu-item .wp-block-navigation-item__content::before {
  background: #5B4BC4;
}

/* Active + hover: cyan wins */
.nav-primary .current-menu-item .wp-block-navigation-item__content:hover::before {
  background: #43C7F4;
}

/* Nav items: transform + opacity driven by JS per-item. NO CSS transition. */
.nav-primary .wp-block-navigation-item {
  display: flex !important;
  align-items: center !important;
  margin: 0;
  list-style: none;
  will-change: transform, opacity;
}

.nav-primary .wp-block-navigation-item__content {
  flex-direction: row !important;
}

.nav-primary .wp-block-navigation-item__label {
  display: inline !important;
  line-height: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BURGER — two bold lines echoing the colon dots
───────────────────────────────────────────────────────────────────────────── */

.nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0 16px;
  flex-shrink: 0;
  /* Hidden on desktop; CSS shows it once nav has folded away */
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  /* Absolute within header-inner (position: relative) */
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
}

/* Show burger once header is fully folded (nav has slid away) */
#norrma-header.is-scrolled .nav-burger {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop compact: raise burger to align with the N: colon mark */
@media (min-width: 1024px) {
  #norrma-header.is-scrolled .nav-burger {
    top: calc(50% - 8px);
  }
}

/* Burger lines animate to X when menu is open */
.nav-burger .burger-line {
  transform-origin: center;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-burger[aria-expanded="true"] .burger-line:first-child {
  transform: translateY(6px) rotate(45deg);
}

.nav-burger[aria-expanded="true"] .burger-line:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

/* Hide burger when overlay is open — overlay-close takes its exact position */
#norrma-header.is-overlay-open .nav-burger,
#norrma-header:has(.nav-overlay.is-open) .nav-burger {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.burger-line {
  display: block;
  width: 28px;
  height: 5px;
  background: #F7F6F2;
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   OVERLAY
───────────────────────────────────────────────────────────────────────────── */

.nav-overlay {
  position: fixed;
  inset: 0;
  background: #11111A;
  z-index: 10020;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.overlay-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 120px 64px 80px 32px;
}

.overlay-brand {
  position: fixed;
  top: 32px; /* overridden by JS on open */
  left: 32px; /* overridden by JS on open */
  text-decoration: none;
  display: block;
  line-height: 0;
  width: 0;
  will-change: width;
}

.overlay-brand-media {
  position: relative;
  display: block;
  overflow: hidden;
  vertical-align: baseline;
  height: clamp(30px, 4vw, 60px);
  will-change: width;
}

.overlay-brand-mark {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
}

.overlay-brand-mark-compact {
  z-index: 1;
}

.overlay-brand-mark-full {
  z-index: 2;
  will-change: clip-path, transform;
}

.nav-overlay-list {
  position: fixed;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: max-content;
  gap: 8px;
}

.nav-overlay-list li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.nav-overlay.is-open .nav-overlay-list li {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay-list li:nth-child(1) { transition-delay:  60ms; }
.nav-overlay-list li:nth-child(2) { transition-delay:  95ms; }
.nav-overlay-list li:nth-child(3) { transition-delay: 130ms; }
.nav-overlay-list li:nth-child(4) { transition-delay: 165ms; }
.nav-overlay-list li:nth-child(5) { transition-delay: 200ms; }
.nav-overlay-list li:nth-child(6) { transition-delay: 235ms; }

.nav-overlay:not(.is-open) .nav-overlay-list li {
  transition-delay: 0ms;
}

.nav-overlay-list a {
  display: inline-flex;
  align-items: center;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #F7F6F2;
  text-decoration: none;
  line-height: 1.15;
  transition: color 240ms ease;
}

/* Bullet indicator — always occupies space, only color changes */
.nav-overlay-list a::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  margin-right: 14px;
  transition: background 240ms ease;
}

/* Hover: cyan bullet */
.nav-overlay-list a:hover { color: #43C7F4; }

.nav-overlay-list a:hover::before {
  background: #43C7F4;
}

/* Active page: mauve bullet */
.nav-overlay-list .current-menu-item a::before {
  background: #5B4BC4;
}

/* Active + hover: cyan wins */
.nav-overlay-list .current-menu-item a:hover::before {
  background: #43C7F4;
}

.overlay-close {
  position: fixed;
  top: 32px;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0 16px;
  opacity: 0;
  pointer-events: none;
  z-index: 10030;
  transition: opacity 220ms ease;
}

.nav-overlay.is-open .overlay-close {
  opacity: 1;
  pointer-events: auto;
}

.overlay-close .burger-line:first-child {
  transform: translateY(6px) rotate(45deg);
}

.overlay-close .burger-line:last-child {
  transform: translateY(-6px) rotate(-45deg);
}


/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .nav-primary { display: none !important; }
  .nav-primary-shell { display: none !important; }

  /* Full-width dark band on mobile, flush to all edges */
  #norrma-header {
    height: calc(200px - 112px * var(--fold-progress, 0));
    /* fold=0: 200px; fold=1: 88px (compact) */
    background: var(--norrma-hero-bg);
  }

  /* header-inner: single row — brand-row centred in the header height;
     burger is absolute so it doesn't affect brand-row centering. */
  .header-inner {
    flex-wrap: nowrap;
    align-items: center;
    height: 100%;
    padding: 0 24px;
    gap: 0;
    transform: none;
  }

  /* brand-row: brand image on row 1, tagline on row 2.
     padding-right reserves space for the absolutely-positioned burger. */
  .brand-row {
    flex: 1 1 auto;
    display: grid;
    grid-template-areas:
      "brand"
      "tagline";
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    background: none;
    padding-top: calc(32px * (1 - var(--fold-progress, 0)));
    padding-right: 56px;
    border-radius: 0;
  }

  .brand-tagline {
    display: block;
    width: auto;
    align-self: start;
  }

  .brand-link,
  .overlay-brand {
    grid-area: brand;
    width: auto;
    transform: none; /* remove desktop -4px shift; centre is now truly centred */
  }

  .brand-media,
  .overlay-brand-media {
    height: 60px;
  }

  .brand-tagline {
    grid-area: tagline;
    justify-self: start;
    margin-left: 0;
    padding-left: 0;
    /* WP injects style="margin-top:0" — use padding-top instead, which WP never overrides.
       box-sizing:border-box so max-height covers both padding and text. */
    box-sizing: border-box;
    padding-top: calc(18px * (1 - var(--fold-progress, 0)));
    padding-bottom: 0.2em;
    margin-top: 0 !important;
    max-height: calc(64px * (1 - var(--fold-progress, 0)));
    overflow: hidden;
    font-size: clamp(16px, 4vw, 19px);
    letter-spacing: 0.05em;
    text-align: left;
    white-space: normal;
    line-height: 1.2;
  }

  .tagline-br { display: inline; }

  /* Burger always visible on tablet/mobile — pure CSS, no JS opacity needed.
     Absolute within header-inner (position:relative), anchored from the
     bottom so it tracks the logo top area as the header folds.
     fold=1 (88px): bottom=30px → centre ≈50px (colon level)
     fold=0 (160px): bottom=70px → centre ≈82px (colon level) */
  .nav-burger {
    position: absolute;
    right: 24px;
    top: auto;
    bottom: calc(30px + 73px * (1 - var(--fold-progress, 0)));
    /* fold=0 (200px): bottom=103px → centre ≈88px (colon level)
       fold=1 (88px):  bottom=30px  → centre ≈50px (colon level) */
    transform: none;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
}

@media (max-width: 1023px) {
  /* overlay-brand top/left set by JS to match header logo position */

  /* Menu items start near the top, below the brand */
  .overlay-inner {
    justify-content: flex-start;
    padding: 120px 24px 40px;
  }

  .nav-overlay-list {
    left: 24px;
    top: 120px;
  }

  .overlay-close {
    top: 24px;
    right: 24px;
  }
}

@media (max-width: 767px) {
  .overlay-inner { padding: 120px 20px 40px; }

  .nav-overlay-list {
    left: 20px;
  }

  .overlay-close {
    top: 20px;
    right: 20px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION — snap to end state, no intermediate animation
───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  .nav-overlay-list li {
    transition: none !important;
  }
}