/*
 * The header of the website: logo, the places of the site, the search field, the account and the cart. It wears the
 * header colours of the look. Only on screens of 1024px and wider with a mouse (see layout.css); sticky.
 */

@layer components {
  .site-header {
    display: none;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--header);
    color: var(--on-header);
  }

  /* Large text may not fit one row: what does not fit goes to a second row (the search field first) instead of out of the page. */
  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end; /* a second row (large text) has the account and the cart at the right, under the search */
    gap: var(--s-2) var(--s-5);
    max-width: var(--frame-max);
    min-height: var(--header-row-h);
    margin-inline: auto;
    padding: var(--s-2) var(--s-6);
  }

  .site-header__brand {
    display: flex;
    flex: none;
    align-items: center;
    min-height: var(--tap);
  }

  .site-header__logo {
    display: block;
    width: auto;
    height: 44px;
  }

  .site-header__nav {
    display: flex;
    gap: var(--s-1);
  }

  .site-header__link,
  .site-header__account {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--tap);
    padding: 0 var(--s-4);
    border-radius: var(--r-pill);
    color: inherit;
    font-weight: 600;
    text-decoration: none;
  }

  .site-header__link[aria-current='page'],
  .site-header__account[aria-current='page'] {
    background: var(--header-btn);
    box-shadow: var(--header-btn-shadow);
    font-weight: 700;
  }

  /* The search field: a pill in the colour of the surfaces, so that it reads on a teal, an ivory and a dark header. */
  .site-header__search {
    display: flex;
    flex: 1 1 12rem;
    align-items: center;
    gap: var(--s-1);
    min-width: 0;
    min-height: var(--tap);
    max-width: 360px;
    margin-left: auto;
    padding: 0 var(--s-3) 0 0;
    /* the outline of the pill is a shadow, not a border: the button and the field inside it are 44px, the whole height of the pill */
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    color: var(--muted);
  }

  .site-header__search:focus-within {
    outline: 3px solid var(--focus-on-header);
    outline-offset: 2px;
  }

  /* The magnifier is the submit button, so the search works without JavaScript; in the pill it is a quiet icon. */
  .site-header__search-submit {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: inherit;
  }

  .site-header__search-submit:active {
    opacity: 0.6;
  }

  .site-header__field {
    flex: 1;
    min-width: 0;
    min-height: var(--tap);
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
  }

  .site-header__field::placeholder {
    color: var(--muted);
    opacity: 1;
  }

  .site-header__cart {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border-radius: 50%;
    background: var(--header-btn);
    box-shadow: var(--header-btn-shadow);
    color: var(--on-header);
    text-decoration: none;
  }

  .site-header__cart[aria-current='page'] {
    outline: 2px solid currentcolor;
    outline-offset: -2px;
  }

  .site-header__brand:active,
  .site-header__link:active,
  .site-header__account:active,
  .site-header__cart:active {
    opacity: 0.6;
  }

  /* The count: the colours of the header the other way round, so that it shows on any header. */
  .site-header__count {
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--on-header);
    color: var(--header);
    font-size: min(0.75rem, 12px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .site-header {
      display: block;
    }
  }

  /*
   * Not wide enough for the search field next to the rest (large text, or a window of 1024px): one row it is, so the
   * search field is the magnifier alone, a round button like the cart that goes to the search page, which then has its
   * field (search.css shows the field of the page while this one is not shown). The width is what one row takes at the
   * size of the text: 462px of logo, gaps and padding, and 26.7rem of words, icons and the field at its smallest
   * (12rem); measured at 100% to 250% text. rem in a container query is the font size of the page (see layout.css).
   */
  @container app (width <= calc(27rem + 470px)) {
    .site-header__search {
      flex: none;
      width: var(--tap);
      padding: 0;
      background: transparent;
      box-shadow: none;
    }

    .site-header__field {
      display: none;
    }

    .site-header__search-submit {
      width: var(--tap);
      height: var(--tap);
      background: var(--header-btn);
      box-shadow: var(--header-btn-shadow);
      color: var(--on-header);
    }
  }

  /* The pointer is over it: only where there is a pointer to be over things. */
  @media (hover: hover) and (pointer: fine) {
    .site-header__link:hover,
    .site-header__account:hover {
      background: var(--header-btn);
      box-shadow: var(--header-btn-shadow);
    }

    .site-header__cart:hover,
    .site-header__search-submit:hover {
      filter: brightness(0.94);
    }
  }
}