/*
 * ppp-header — the site header, shared by every Divi page and the static
 * /pub-cellar-ratings module. Styles the markup in ppp-header.html and nothing
 * else; the menu inside it is styled by ../nav/ppp-nav.css.
 *
 * Host-agnostic on purpose: no Divi selectors, no module selectors, its own
 * tokens, its own box-sizing and its own resets on the elements it owns, so it
 * renders the same whether the host is a Divi Code module (which gives <p> a
 * padding-bottom and lists a disc) or the module's bare stylesheet.
 *
 * TRANSPARENT, and gold. The header paints no background of its own: it sits
 * on whatever the host puts behind it, which on both hosts is light, so every
 * mark it draws — title, strapline, ? badge, burger — is gold to stand out
 * against that. There are no logos and, on Divi pages, no title either: the
 * text block is opt-in per page (see ppp-header.html), so the header can be as
 * little as a single toggle at the left.
 *
 * Mobile-first. The base rules are the phone layout; wider screens are reached
 * only through the min-width queries at the bottom.
 */

.ppp-header {
  /* Tokens. Sampled from the badge artwork and the PPP site; see CLAUDE.md > Brand. */
  --ppp-navy: #002e4f;
  --ppp-gold: #dbb05a;
  --ppp-font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ppp-font-display: 'ivymode', 'Archivo', Georgia, serif;
  --ppp-gutter: 1rem;
  --ppp-max-width: 100rem;
  /* The menu toggle's box, as ../nav/ppp-nav.css sizes it. Referenced to centre against. */
  --ppp-toggle-size: 44px;

  /* The menu panel hangs beneath the nearest positioned ancestor of .ppp-nav — this. */
  position: relative;
  background: transparent;
  color: var(--ppp-gold);
  padding: 0.75rem var(--ppp-gutter);
  font-family: var(--ppp-font-body);
  font-size: 1rem;
  line-height: 1.5;
}

.ppp-header,
.ppp-header * {
  box-sizing: border-box;
}

/*
 * Menu — text block, one row at every width. The toggle is first and at the
 * left, directly above the left-aligned links in the panel it opens; the text
 * block, when a page has one, absorbs all the free space and centres its own
 * lines. A page WITHOUT a text block is just the toggle at the left gutter.
 *
 * align-items: flex-start, NOT center: the text block grows when .ppp-promise
 * is opened, and a centred toggle would re-centre against the taller column —
 * sliding down as the reader expands the list and back up as they close it.
 * Pinned to the top, opening the disclosure only ever adds height below. The
 * title carries a small top padding instead, so its first line sits centred on
 * the 44px toggle beside it.
 */
.ppp-header__inner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: var(--ppp-max-width);
  margin: 0 auto;
}

/*
 * The text is centred on the header, not on the space left beside the toggle,
 * so its right margin mirrors the toggle's width on the left. That costs 44px
 * of column at 375px, leaving ~240px, which the title takes in two lines and
 * the strapline (~207px) in one.
 */
.ppp-header__text {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: var(--ppp-toggle-size);
  text-align: center;
  text-shadow: 0.01em 0.02em black;
}

/* The site menu, from ../nav/ppp-nav.css. Sized by the component (44px). */
.ppp-header__nav {
  flex: none;
}

/*
 * A <p>, not a heading — this header is on every page and each page's real
 * <h1> is in its content. Margin AND padding reset: Divi gives <p> a
 * padding-bottom of 1em. The top padding is what centres the first line of
 * the title on the toggle's box: half of (44px less one line of this size).
 */
.ppp-header__title {
  margin: 0;
  padding: calc((var(--ppp-toggle-size) - 1.2em) / 2) 0 0;
  font-family: var(--ppp-font-display);
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 400;
  color: inherit;
}

/*
 * The strapline is the <summary> of .ppp-promise, so it carries both classes:
 * this rule owns how it looks, .ppp-promise__summary owns how it behaves.
 */
.ppp-header__strapline {
  margin: 0;
  color: inherit;
  font-size: 0.875rem;
}

.ppp-promise {
  margin: 0.25rem 0 0;
}

/*
 * The whole strapline is the control, so it must not stretch to the full width
 * of the centred column — inline-flex keeps the hit area to the words
 * themselves plus the badge, centres the badge on the text, and lets
 * text-align on the parent centre the whole thing.
 */
.ppp-promise__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* Padding rather than min-height: 44px of tap target without a 44px-tall row. */
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  list-style: none;
}

/* Chrome and Safari still paint their own marker without both of these. */
.ppp-promise__summary::-webkit-details-marker {
  display: none;
}

/*
 * The affordance. A ringed ? is read as "more about this" on sight, which is
 * why the control needs no wording of its own.
 */
.ppp-promise__summary::after {
  content: '?';
  display: grid;
  place-items: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * Open state fills the badge, so the control still reads as "pressed". A chevron
 * could rotate to say this; a ? cannot, so the state has to come from the fill.
 * Navy on the gold fill: the one place the header uses a second colour, because
 * gold-on-gold would erase the glyph.
 */
.ppp-promise[open] .ppp-promise__summary::after {
  background: var(--ppp-gold);
  color: var(--ppp-navy);
}

/* Removing the marker also removes the default focus ring in some browsers. */
.ppp-promise__summary:focus-visible {
  outline: 2px solid var(--ppp-gold);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Explicit list-style and padding: Divi would otherwise give it a disc and an indent. */
.ppp-promise__list {
  display: grid;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
  /* .ppp-header__text centres the title and the control; ragged-right bullets
     read better than centred ones, and the ✓ markers need a common left edge. */
  text-align: left;
}

.ppp-promise__item {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.5rem;
  font-size: 0.8125rem;
  color: inherit;
}

.ppp-promise__item::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Larger screens
 * ------------------------------------------------------------------ */

@media (min-width: 40em) {
  .ppp-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .ppp-header__inner {
    gap: clamp(0.75rem, 3vw, 2rem);
  }

  .ppp-header__title {
    font-size: 1.75rem;
  }

  /*
   * Three across rather than stacked, so opening the promise costs one row of
   * header instead of three.
   */
  .ppp-promise__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ppp-promise__summary::after {
    transition: none;
  }
}