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

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

  .site-header {
    max-inline-size: var(--wp--style--global--wide-size, 1200px);
    margin-inline: auto;
    padding-block: var(--wp--preset--spacing--30, 0.75rem);
    padding-inline: var(--wp--preset--spacing--40, 1rem);
  }

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

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

  /* ----- Link colour state value (consumed unlayered below) -----
     Default = base (white) for the transparent-over-hero state.
     Stuck   = contrast (dark) for the solid base-coloured bar.
     This level only decides which colour wins; the actual rule that beats
     core lives unlayered (next block). */

  .site-header .wp-block-navigation {
    --nav-link-color: var(--wp--preset--color--base);
  }

  .site-header.is-stuck .wp-block-navigation {
    --nav-link-color: var(--wp--preset--color--contrast);
  }

  /* ----- Mobile overlay close button -----
     Overlay background is set via the block's `overlayBackgroundColor`
     attribute (contrast); the close-button icon needs to read against
     that dark fill. */

  .site-header .wp-block-navigation__responsive-container-close svg {
    fill: var(--wp--preset--color--base);
  }

  /* ----- Desktop nav link padding — give links comfortable tap/click targets ----- */
  .site-header .wp-block-navigation-item__content {
    padding-block: 0.375em;
    padding-inline: 0.625em;
    letter-spacing: var(--wp--custom--letter-spacing--wide);
    font-size: var(--wp--preset--font-size--small);
  }
}

/* ==========================================================================
   UNLAYERED — must beat core's unlayered Navigation CSS without !important.

   Core ships the Navigation block's CSS UNLAYERED, so it beats every @layer
   rule a theme writes, regardless of specificity. We avoid the block's
   `textColor` / `overlayTextColor` attributes (which would stamp
   `.has-<slug>-color !important` onto the desktop link wrapper, locking out
   any state-driven override). Instead, `--nav-link-color` is set layered
   above (nothing competes on the var) and consumed here, at the one place
   core's `color: inherit` lets us in: `.wp-block-navigation-item__content`.

   These rules sit OUTSIDE @layer on purpose. Do not move them in.
   See: feedback_wp_native_nav_branding.md for the full gotcha set.
   ========================================================================== */

.site-header .wp-block-navigation-item__content {
  color: var(--nav-link-color);
}

.site-header .wp-block-navigation-item__content:where(:hover, :focus) {
  color: var(--wp--preset--color--accent);
}

/* ----- Mobile overlay background — override core's !important -----
   Core's style.min.css ships:
     `.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) { background-color: inherit !important }`
   The !important beats any non-!important rule regardless of specificity. The palette
   class `.has-contrast-background-color` is inside @layer wpglobal (no !important) — it loses.
   Our unlayered rules at (0,4,0) also lose because !important trumps specificity.

   Exception from ops-context: "Borrowing core's !important is fine; writing our own isn't."
   This is that exception — we must match !important to beat !important. One property, one
   element, fully justified. The open-state selector uses specificity (0,4,0) unlayered — enough
   to beat the non-!important open-state rule. */
.site-header .wp-block-navigation__responsive-container.has-background.has-contrast-background-color {
  background-color: var(--wp--preset--color--contrast) !important; /* beats core's inherit !important */
  color: var(--wp--preset--color--base);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open.has-background {
  background-color: var(--wp--preset--color--contrast); /* open-state: specificity (0,4,0) beats core's (0,2,0) */
  color: var(--wp--preset--color--base);
}

/* Overlay nav links: base (cream) on the dark ink panel, larger touch target */
.site-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
  color: var(--wp--preset--color--base);
  padding-block: 0.5em;
  padding-inline: 0;
  font-size: var(--wp--preset--font-size--large);
  letter-spacing: var(--wp--custom--letter-spacing--wide);
}

.site-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content:where(:hover, :focus) {
  color: var(--wp--preset--color--accent);
}