@use 'sprucecss/scss/spruce' as *;

.site-header-centered {
  background-color: color('background');
  border-block-end: config('border-width-base', $display) solid color('border');
  position: relative;

  // Three columns: the side columns are equal, so the logo stays in the exact center.
  &__top {
    align-items: center;
    display: grid;
    gap: spacer('s');
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    min-block-size: 4.5rem;
  }

  &__logo {
    align-items: center;
    color: color('heading');
    display: inline-flex;
    font-family: config('font-family-heading', $typography);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: config('font-weight-heading', $typography);
    gap: spacer('xs');
    letter-spacing: -0.02em;
    text-decoration: none;

    img {
      block-size: 2rem;
      inline-size: 2rem;
    }

    span {
      white-space: nowrap;
    }
  }

  &__search {
    justify-self: start;
  }

  &__actions {
    align-items: center;
    display: flex;
    gap: spacer('xs');
    justify-content: flex-end;
  }

  &__subscribe {
    display: none;

    @include breakpoint('sm') {
      display: inline-flex;
    }
  }

  // On small screens, the menu button sits under the logo; from md, the links are centered in a row.
  &__navigation {
    display: flex;
    justify-content: center;
    padding-block: spacer('xs') spacer('s');

    @include breakpoint('md') {
      border-block-start: config('border-width-base', $display) solid color('border');
      padding-block: spacer('s');
    }

    > ul {
      justify-content: center;
    }

    a,
    .site-navigation__toggle {
      font-size: config('font-size-sm', $typography);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    // The dropdown links are regular text.
    .site-navigation__submenu a {
      letter-spacing: normal;
      text-transform: none;
    }
  }
}

<a class="skip-link sr-only-focusable" href="#content">Skip to content</a>
<header class="site-header-centered">
    <div class="container">
        <div class="site-header-centered__top">
            <a class="btn btn--ghost-primary btn--icon site-header-centered__search" href="#">
                <svg class="btn__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
                <span class="sr-only">Search</span>
            </a>
            <a class="site-header-centered__logo" href="#">
                <img src="/img/cone-logo.svg" alt="" width="40" height="40">
                <span>The Cone Journal</span>
            </a>
            <div class="site-header-centered__actions">
                <a class="site-header-centered__subscribe btn btn--primary btn--sm" href="#">Subscribe</a>
            </div>
        </div>
        <nav class="site-navigation site-header-centered__navigation" aria-label="Main" data-site-navigation>
            <button class="btn btn--secondary btn--icon site-navigation__btn" type="button" aria-controls="centered-menu" aria-expanded="false">
                <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path class="site-navigation__line site-navigation__line--top" d="M4 6h16"/><path class="site-navigation__line site-navigation__line--middle" d="M4 12h16"/><path class="site-navigation__line site-navigation__line--bottom" d="M4 18h16"/></svg>
                <span class="sr-only">Menu</span>
            </button>
            <ul class="navigation-menu" id="centered-menu">
                <li><a href="#" aria-current="page">Latest</a></li>
                <li class="site-navigation__item">
                    <button class="site-navigation__toggle" type="button" aria-expanded="false" aria-controls="centered-submenu-design">
                        Design
                        <svg class="site-navigation__chevron" aria-hidden="true" fill="none" focusable="false" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"/></svg>
                    </button>
                    <ul class="site-navigation__submenu" id="centered-submenu-design">
                        <li><a href="#">Typography</a></li>
                        <li><a href="#">Color</a></li>
                        <li><a href="#">Accessibility</a></li>
                        <li><a href="#">Design systems</a></li>
                    </ul>
                </li>
                <li class="site-navigation__item">
                    <button class="site-navigation__toggle" type="button" aria-expanded="false" aria-controls="centered-submenu-engineering">
                        Engineering
                        <svg class="site-navigation__chevron" aria-hidden="true" fill="none" focusable="false" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"/></svg>
                    </button>
                    <ul class="site-navigation__submenu" id="centered-submenu-engineering">
                        <li><a href="#">Frontend</a></li>
                        <li><a href="#">Backend</a></li>
                        <li><a href="#">Infrastructure</a></li>
                        <li><a href="#">Security</a></li>
                    </ul>
                </li>
                <li><a href="#">Product</a></li>
                <li><a href="#">Culture</a></li>
                <li><a href="#">Podcast</a></li>
            </ul>
        </nav>
    </div>
</header>