/* ==========================================================================
   Header & Navigation
   Site header layout and wp:navigation block colour overrides.
   Fixed positioning and sticky background live in style.css @layer header.
   ========================================================================== */

@layer header {
  /* ----- Inner content: constrain width + padding ----- */

  .site-header {
    /* Full-width band — content reaches the viewport edges with breathing room. */
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
    padding-block: var(--wp--preset--spacing--30, 0.75rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }

  /* ----- Logo size ----- */

  .site-header .custom-logo {
    max-block-size: 3rem;
    inline-size: auto;
  }

  /* ----- Logo / site-title fallback ----- */

  .site-header .site-title {
    font-family: var(--wp--preset--font-family--display);
    font-size: 1.05rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
  }

  /* ----- Right cluster: nav + CTA ----- */

  .site-header__right {
    /* Pin to the right even when the left side is empty (no logo set). */
    margin-inline-start: auto;
    gap: clamp(1rem, 2.5vw, 2.25rem);
  }

  /* ----- Navigation: link typography (Archivo Narrow eyebrow) ----- */

  .site-header .wp-block-navigation {
    font-family: var(--wp--preset--font-family--condensed);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .site-header .wp-block-navigation .wp-block-navigation-item__content {
    color: var(--wp--preset--color--contrast);
    padding-block: 0.35rem;
    border-block-end: 1px solid transparent;
    transition: border-color var(--wp--custom--timing--fast, 150ms) ease;
  }

  .site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
  .site-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
    border-block-end-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--contrast);
  }

  /* ----- Navigation: mobile overlay (dark, atmospheric — matches the site) ----- */

  /* Overlay close button icon nudge — overlay bg/text already set on the block. */
  .site-header .wp-block-navigation__responsive-container-close svg,
  .site-header .wp-block-navigation__responsive-container-open svg {
    fill: currentColor;
  }

  /* Block attrs set the deep base bg + cream text; this layers the same warm
     copper glow and whispered grain as .wx-atmosphere so the menu reads as part
     of the site rather than a light "flashbang". */
  .site-header .wp-block-navigation__responsive-container.is-menu-open {
    font-family: var(--wp--preset--font-family--heading);
    isolation: isolate;
    /* Dark base + copper glow are in the unlayered block at the end of the file:
       the nav's has-background class disables WP's white overlay rule, after
       which a normal-specificity unlayered rule paints it — no !important. */
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
    z-index: 0;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    position: relative;
    z-index: 1;
    /* WP gives the open overlay no inline padding, so items sat flush against the
       edge. Match the header's own inline rhythm and add breathing room below. */
    padding-inline: clamp(1.5rem, 6vw, 3rem);
    padding-block-end: var(--wp--preset--spacing--60, 2rem);
  }

  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    letter-spacing: 0.04em;
    padding-block: 0.5rem;
    color: var(--wp--preset--color--contrast);
    transition: color var(--wp--custom--timing--fast, 150ms) ease;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:hover,
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--primary);
  }

  /* ----- Submenu (Palvelut dropdown) ----- */

  .site-header .wp-block-navigation .wp-block-navigation__submenu-icon {
    color: var(--wp--preset--color--primary);
  }

  /*
   * Submenu colour overrides need !important because WP's block-render styles
   * are printed unlayered (.wp-block-navigation .has-child .wp-block-navigation__submenu-container
   * with `background-color: inherit; color: inherit`) and unlayered always wins over @layer header.
   */
  .site-header
    .wp-block-navigation
    .has-child
    .wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;
    border: 1px solid
      color-mix(in oklch, var(--wp--preset--color--contrast) 14%, transparent);
    border-radius: 2px;
    box-shadow: var(--wp--preset--shadow--md);
    padding-block: var(--wp--preset--spacing--20, 0.5rem);
    min-inline-size: 14rem;
  }

  .site-header
    .wp-block-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    font-size: 0.78rem;
    padding-block: 0.55rem;
    padding-inline: 1.1rem;
    border-block-end: none;
  }

  .site-header
    .wp-block-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover,
  .site-header
    .wp-block-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:focus-visible {
    background-color: color-mix(
      in oklch,
      var(--wp--preset--color--primary) 12%,
      transparent
    );
    color: var(--wp--preset--color--primary);
  }

  /* In the mobile overlay the submenu blends into the dark overlay — not the
     desktop dropdown box. Strip the box and indent the children under Palvelut
     with a quiet copper hairline instead. */
  .site-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    position: static !important;
    background-color: transparent !important;
    color: var(--wp--preset--color--contrast) !important;
    border: 0;
    box-shadow: none;
    min-inline-size: 0;
    padding-block: 0.25rem;
    margin-inline-start: 1.5rem;
    padding-inline-start: 1.25rem;
    border-inline-start: 1px solid
      color-mix(in oklch, var(--wp--preset--color--primary) 45%, transparent);
  }

  /* Overlay dropdown items: larger overlay typography, cream text, copper on hover. */
  .site-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    font-size: 1.1rem;
    padding-inline: 0;
    color: var(--wp--preset--color--contrast) !important;
  }
  .site-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover,
  .site-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--primary) !important;
    background-color: transparent !important;
  }

  /* ----- Game CTA: condensed forge button in header ----- */

  .site-header__cta.wx-forge-btn {
    font-size: 0.78rem;
    padding-inline: 1.1rem;
    padding-block: 0.55rem;
  }

  /* ----- Responsive breakpoint -----
     WordPress's overlayMenu="mobile" collapses to the hamburger only below
     600px, but the inline nav (four items + a long "Palvelut" + the game CTA)
     cramps below ~930px. Collapse to the overlay at <=1024px instead.
     WP's responsive rules are unlayered, so these need !important to win. */
  @media (max-width: 1024px) {
    .site-header
      .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex !important;
    }
    .site-header
      .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
      display: none !important;
    }
  }
}

/* ===========================================================================
   Unlayered overrides for the open mobile overlay. WP core styles the overlay
   (background, close-button position) with normal, *unlayered* rules; a rule
   inside @layer header always loses to unlayered ones regardless of specificity.
   Declaring these outside the layer lets them win on specificity alone — no
   !important. Same approach as styles/blocks/core/button.css.
   =========================================================================== */

/* Dark base + the site's warm copper glow. The nav's has-background class (set in
   header-content.php) disables WP's `:not(.has-background) … white` overlay rule,
   so this normal-specificity rule is all that's needed to paint it. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--base);
  background-image:
    radial-gradient(
      125% 80% at 85% 0%,
      color-mix(in oklch, var(--wp--preset--color--primary) 16%, transparent),
      transparent 58%
    );
}

/* Lift the close button off the corner. */
.site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  inset-block-start: clamp(1rem, 4vw, 1.75rem);
  inset-inline-end: clamp(1rem, 4vw, 1.75rem);
}