/* Site header (app/views/layouts/public/_header.html.erb). */
@layer sections {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--pl-green-950);
    color: var(--pl-paper);
    border-bottom: 1px solid var(--pl-header-line);
  }

  /* .pl-container supplies the 1216px column and the side gutters. */
  .site-header__nav {
    height: var(--pl-header-h);
    display: flex;
    align-items: center;
    gap: clamp(10px, 2.4vw, 28px);
  }

  /* Logo → #top */
  .site-header__home {
    flex: none;
    display: flex;
    align-items: center;
    height: 44px;
    padding-bottom: 3px;
    color: inherit;
  }

  .site-header__logo {
    display: block;
    width: 104px;
    height: 32px;
  }

  /* Section links (hidden ≤900px by .pl-hide-md) */
  .site-header__links {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 15px;
    font-weight: 600;
  }

  .site-header__link {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--pl-r-pill);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-header__actions {
    flex: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* ქარ / ENG pill: two links, the current language is white. */
  .site-header__langs {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--pl-r-pill);
    background: var(--pl-fill-light);
  }

  .site-header__lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 40px;
    padding: 0 11px;
    border-radius: var(--pl-r-pill);
    background: transparent;
    color: var(--pl-paper);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
  }

  /* 44px tall hit area over the pill's 2px padding and the gap between links. */
  .site-header__lang::before {
    content: "";
    position: absolute;
    inset: -2px -1px;
  }

  .site-header__lang[aria-current="true"] {
    background: var(--pl-paper);
    color: var(--pl-green-950);
  }

  /* Cream "Order" → #checkout */
  .site-header__cta {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--pl-r-pill);
    background: var(--pl-cream);
    color: var(--pl-green-950);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  /*
   * Small phones: the 390px row (logo, pill, CTA) is 336px wide and would
   * scroll sideways below 380px. Inside the 480px breakpoint every size is a
   * clamp() that equals the normal value down to 380px, reaches 88×27 / 40px /
   * 8px / 14px at 360px and 78×24 / 6px / 12px at 320px.
   */
  @media (max-width: 480px) {
    .site-header__nav {
      gap: clamp(8px, 10vw - 28px, max(10px, 2.4vw));
    }

    .site-header__logo {
      /* height = width × 92.2 / 300, so 104×32 is kept exactly from 381px up. */
      width: clamp(78px, max(25vw - 2px, 80vw - 200px), 104px);
      height: clamp(24px, max(7.683vw - 0.615px, 24.587vw - 61.467px), 32px);
    }

    .site-header__lang {
      min-width: clamp(44px, 30vw - 68px, 46px);
      padding: 0 clamp(6px, max(5vw - 10px, 15vw - 46px), 11px);
    }

    .site-header__cta {
      padding: 0 clamp(12px, max(5vw - 4px, 30vw - 94px), 20px);
    }
  }
}