/* ==========================================================================
   Header & Navigation
   Site header layout and wp:navigation block colour overrides.
   ========================================================================== */

@layer header {
  /* ----- Sticky header wrapper ----- */

  header.wp-block-group {
    position: sticky;
    top: 0;
    z-index: var(--wp--custom--z-index--sticky, 200);
    background-color: var(--wp--preset--color--base);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  }

  /* ----- 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;
  }

  /* ----- Navigation links ----- */

  .site-header .wp-block-navigation a {
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--small);
    letter-spacing: var(--wp--custom--letter-spacing--wide);
  }

  .site-header .wp-block-navigation a:hover {
    color: var(--wp--preset--color--accent);
  }

  /* ----- Navigation block: mobile overlay colours ----- */

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