.wp-block-yummo-site-header {
  --c-primary:         var(--wp--preset--color--primary);
  --c-primary-hover:   var(--wp--preset--color--primary-hover);
  --c-cream:           var(--wp--preset--color--cream);
  --c-cream-lt:        var(--wp--preset--color--cream-light);
  --c-pink:            var(--wp--preset--color--pink);
  --c-mint:            var(--wp--preset--color--mint);
  --c-mint-el:         var(--wp--preset--color--mint-el);
  --r-card:            var(--wp--custom--radius--card);
  --r-btn:             var(--wp--custom--radius--button);
  --r-img:             var(--wp--custom--radius--image);
  --ease:              var(--wp--custom--transition--ease);
  --dur:               var(--wp--custom--transition--dur);
  --page-px:           var(--wp--preset--spacing--page-x);
  --section-py:        var(--wp--preset--spacing--section);

  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1000;
  background: transparent;
  display: flex;
  flex-direction: column;

  /* When mobile menu is open — header stretches to cover full viewport */
  &.is-open {
    height: 100dvh;
    overflow-y: auto;
    background: var(--mobile-menu-bg, rgb(92, 26, 52));

    .site-header__inner {
      display: none;
    }
  }

  .site-header__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 2rem;
    padding-inline: var(--page-px);
    position: relative;
    max-width: 90rem;
    margin: auto;
    z-index: 10;
  }

  /* Figma 5821:4866 (Hero header @ 2500) — header is full-bleed across
     the 2500px viewport with 32px inner padding on every side. Drop
     the 90rem cap and pin padding-inline to 2rem so the logo lands at
     section-x = 32 and the store buttons at x = 2468, regardless of
     the wider --page-px applied to body content sections at 2500. */
  @media (min-width: 2500px) {
    .site-header__inner {
      max-width: none;
      padding-inline: 2rem;
    }
  }

  /* ── Logo icon ── */
  .site-logo__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9375rem;
    background: var(--c-pink);
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      display: block;
    }
  }

  /* Inverted icon: self-contained SVG (cream bg + pink paths). Hidden by default. */
  .site-logo__icon--inverted {
    display: none;
    background: transparent;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .site-nav {
    display: flex;
    gap: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-nav__link {
    padding: 0.75rem 1rem;
    border-radius: 6.25rem;
    font-size: var(--h4);
    font-weight: 700;
    line-height: 1.5rem;
    color: var(--c-primary);
    transition: color 0.25s, background 0.25s;
    text-decoration: none;
    &:hover {
      background: rgb(92 26 52 / .08);
    }
  }

  .site-header__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  /* ── App store / Google Play badge buttons ───────────── */
  .btn-store {
    position: relative;
    display: block;
    flex: none;
    border-radius: 0.75rem;
    background: var(--btn-bg) center / contain no-repeat;
  }

  .btn-store::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--btn-bg-hover) center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.2s var(--ease);
    pointer-events: none;
  }

  .btn-store:hover::before,
  .btn-store:focus-visible::before {
    opacity: 1;
  }

  .btn-store--sm { width: 9rem;  height: 3rem; }
  .btn-store--xl { width: 12rem; height: 4rem; }
  .btn-store--wide {
    width: 20.375rem;     /* 326px */
    max-width: 100%;
    height: auto;
    aspect-ratio: 326 / 64;
  }

  /* Wide is single-state (cream only, no hover crossfade) */
  .btn-store--wide::before { content: none; }

  /* Default state: primary background */
  .btn-store--sm.btn-gplay {
    --btn-bg:       url('../../images/btn-google-play-sm.svg');
    --btn-bg-hover: url('../../images/btn-google-play-sm-hover.svg');
  }
  .btn-store--xl.btn-gplay {
    --btn-bg:       url('../../images/btn-google-play-xl.svg');
    --btn-bg-hover: url('../../images/btn-google-play-xl-hover.svg');
  }
  .btn-store--sm.btn-appstore {
    --btn-bg:       url('../../images/btn-app-store-sm.svg');
    --btn-bg-hover: url('../../images/btn-app-store-sm-hover.svg');
  }
  .btn-store--xl.btn-appstore {
    --btn-bg:       url('../../images/btn-app-store-xl.svg');
    --btn-bg-hover: url('../../images/btn-app-store-xl-hover.svg');
  }

  /* Reversed state (cream bg): explicit modifier OR light nav theme on dark sections */
  .btn-store--reversed.btn-store--sm.btn-gplay,
  &[data-nav-theme="light"] .btn-store--sm.btn-gplay {
    --btn-bg:       url('../../images/btn-google-play-sm-rev.svg');
    --btn-bg-hover: url('../../images/btn-google-play-sm-rev-hover.svg');
  }
  .btn-store--reversed.btn-store--xl.btn-gplay,
  &[data-nav-theme="light"] .btn-store--xl.btn-gplay {
    --btn-bg:       url('../../images/btn-google-play-xl-rev.svg');
    --btn-bg-hover: url('../../images/btn-google-play-xl-rev-hover.svg');
  }
  .btn-store--reversed.btn-store--sm.btn-appstore,
  &[data-nav-theme="light"] .btn-store--sm.btn-appstore {
    --btn-bg:       url('../../images/btn-app-store-sm-rev.svg');
    --btn-bg-hover: url('../../images/btn-app-store-sm-rev-hover.svg');
  }
  .btn-store--reversed.btn-store--xl.btn-appstore,
  &[data-nav-theme="light"] .btn-store--xl.btn-appstore {
    --btn-bg:       url('../../images/btn-app-store-xl-rev.svg');
    --btn-bg-hover: url('../../images/btn-app-store-xl-rev-hover.svg');
  }

  /* Wide variant: cream-only, used in mobile menu */
  .btn-store--wide.btn-gplay {
    --btn-bg: url('../../images/btn-google-play-wide-rev.svg');
  }
  .btn-store--wide.btn-appstore {
    --btn-bg: url('../../images/btn-app-store-wide-rev.svg');
  }

  .site-header__burger {
    display: none;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-btn);
    background: var(--c-primary);
    color: var(--c-cream); /* drives the inline SVG stroke (currentColor) */
    align-items: center;
    justify-content: center;
    padding: 0.75rem;

    img,
    svg {
      width: 1.5rem;
      height: 1.5rem;
      display: block;
    }
  }

  .mobile-menu {
    flex: 1;                    /* fills remaining height when header is 100dvh */
    background: transparent;    /* colour comes from header.is-open */
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 3rem var(--page-px) 2rem;

    &[hidden] {
      display: none;
    }
  }

  .mobile-menu__close {
    position: absolute;
    top: 1rem;
    right: var(--page-px);
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-cream);
    cursor: pointer;
    transition: background 0.2s;

    &:hover {
      background: rgb(255 255 255 / 0.1);
    }
  }

  .mobile-menu__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-block: 3rem 1rem;
  }

  .mobile-menu__logo {
    img {
      display: block;
      width: 8.75rem;
      height: 3rem;
      object-fit: contain;
    }
  }

  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .mobile-menu__link {
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-size: var(--h4);
    font-weight: 700;
    line-height: 1.5rem;
    color: var(--c-cream);
    border-radius: 6.25rem;
    transition: background 0.2s;
    width: 100%;
    text-align: center;

    &:hover {
      background: rgb(255 255 255 / 0.1);
    }
  }

  .mobile-menu__social {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu__social-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(246 237 220 / 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;

    &:hover {
      background: rgb(255 255 255 / 0.1);
    }

    img {
      display: block;
    }
  }

  .mobile-menu__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  @media (max-width: 63.9375rem) {
    .site-nav,
    .site-header__actions {
      display: none;
    }

    .site-header__burger {
      display: flex;
    }

    /* ── Mobile header (Figma 5378:10574) ──
       Container 390 × 80, p-[16px] all sides; logo 48×48 rounded-[12]
       on pink; burger 48×48 (p-12 around 24×24 icon) on primary. */
    .site-header__inner {
      padding-block: 1rem;        /* 16px (was 2rem on desktop) */
    }

    .site-logo__icon {
      border-radius: 0.75rem;     /* 12px Figma (was 15px) */
    }
  }

  /* ── Nav theme: light (header over dark sections) ── */
  &[data-nav-theme="light"] {
    .site-nav__link {
      color: var(--c-cream);

      &:hover {
        background: rgb(255 255 255 / .12);
      }
    }

    .site-header__burger {
      background: var(--c-cream);
      color: var(--c-primary); /* SVG stroke flips to dark wine via currentColor */

      img {
        filter: brightness(0);
      }
    }
  }

  /* ── Nav theme: pink (header over pink sections — logo inverted, buttons unchanged) ── */
  &[data-nav-theme="pink"] {
    .site-logo__icon--default  { display: none; }
    .site-logo__icon--inverted { display: flex; }
  }

  /* ── wp_nav_menu <ul> reset ───────────────────────────── */
  .site-nav__list,
  .mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents; /* child <li> items participate in parent flex/grid */

    li {
      display: contents;
    }
  }
}