/*
 * ppp-nav — the site's hidden toggle menu.
 *
 * Loaded by Divi pages (via the child theme) and by the static
 * /pub-cellar-ratings module (straight from this URL), so it must know nothing
 * about either host: no Divi selectors, no module selectors, everything scoped
 * under .ppp-nav. The markup it styles is the contract in
 * inc/class-ppp-nav-walker.php.
 *
 * A hamburger at EVERY width, on purpose. There is no breakpoint at which the
 * links spread out into a bar — that is the mobile-first requirement, and it
 * also means one behaviour to test rather than two layouts to keep consistent.
 *
 * What the host must provide:
 *   - a positioned ancestor of .ppp-nav: the panel hangs beneath it, full width
 *   - class "js" on <html> before first paint (Divi does this; the module has a
 *     one-line inline script). Without it the list renders inline, which is the
 *     no-JavaScript fallback and is intentional.
 */

.ppp-nav {
  /* Tokens. Hosts override these on .ppp-nav rather than editing the rules. */
  --ppp-nav-light: #ffffff;   /* the page ground; see CLAUDE.md > Brand */
  --ppp-nav-dark: #002e4f;    /* Cask Marque navy */
  --ppp-nav-accent: #dbb05a;  /* Cask Marque gold */
  /*
   * Light panel, dark text: the header it hangs from is transparent over a
   * light page, so a navy slab beneath it read as a different site. The rule
   * between items is the dark ink at low alpha so it tints with the ground.
   */
  --ppp-nav-bg: var(--ppp-nav-light);
  --ppp-nav-fg: var(--ppp-nav-dark);
  --ppp-nav-rule: rgba(0, 46, 79, 0.14);
  /*
   * The page behind an open menu: softened, not obliterated. 2px takes the
   * edge off text and imagery while leaving the page recognisable underneath;
   * the wash is faint enough that the panel's edge reads without the page
   * going grey.
   */
  --ppp-nav-backdrop: rgba(240, 240, 250, 0.2);
  --ppp-nav-blur: 2px;
  --ppp-nav-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ppp-nav-size: 44px;   /* toggle box; the minimum tap target */
  --ppp-nav-gutter: 1rem;
  --ppp-nav-max-width: 100rem;
  --ppp-nav-z: 1000;

  font-family: var(--ppp-nav-font);
  line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * Toggle
 * ------------------------------------------------------------------ */

.ppp-nav__toggle {
  display: grid;
  place-items: center;
  width: var(--ppp-nav-size);
  height: var(--ppp-nav-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  /*
   * inherit, not --ppp-nav-fg: the toggle sits in the HOST's header, whose
   * background the component does not control. Inside .ppp-header, which is
   * transparent over a light page, that is the header's gold; on a bare Divi
   * section it takes Divi's body colour and stays visible. Defaulting to white
   * made it vanish on staging until the section had been styled.
   */
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ppp-nav__toggle:focus-visible {
  outline: 2px solid var(--ppp-nav-accent);
  outline-offset: 2px;
}

/*
 * While open, the toggle is lifted one step above the panel so it sits over the
 * backdrop (below) rather than under it: the cross stays sharp and clickable
 * while the rest of the page blurs. Only while open, so the closed toggle
 * creates no stacking context of its own.
 */
.ppp-nav[data-open] .ppp-nav__toggle {
  position: relative;
  z-index: calc(var(--ppp-nav-z) + 1);
}

/*
 * The burger is three bars: the element and its two pseudo-elements. Drawn in
 * CSS rather than an icon so the component costs no extra request, and so it
 * takes the host's colour token.
 */
.ppp-nav__burger,
.ppp-nav__burger::before,
.ppp-nav__burger::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.ppp-nav__burger {
  position: relative;
}

.ppp-nav__burger::before,
.ppp-nav__burger::after {
  content: '';
  position: absolute;
  left: 0;
}

.ppp-nav__burger::before {
  top: -7px;
}

.ppp-nav__burger::after {
  top: 7px;
}

/* Open: the outer bars fold into a cross and the middle one disappears. */
.ppp-nav__toggle[aria-expanded='true'] .ppp-nav__burger {
  background: transparent;
}

.ppp-nav__toggle[aria-expanded='true'] .ppp-nav__burger::before {
  transform: translateY(7px) rotate(45deg);
}

.ppp-nav__toggle[aria-expanded='true'] .ppp-nav__burger::after {
  transform: translateY(-7px) rotate(-45deg);
}

/*
 * The accessible name, visually hidden. It is a <span> rather than aria-label so
 * a host that wants the word beside the icon only has to restyle it.
 */
.ppp-nav__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Panel
 * ------------------------------------------------------------------ */

/*
 * Hangs beneath the host's positioned ancestor, full width, over the content.
 * A drop-down rather than an off-canvas drawer: the menu is short, so there is
 * nothing to scroll and no need to lock the page behind it.
 */
.ppp-nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--ppp-nav-z);
  background: var(--ppp-nav-bg);
  color: var(--ppp-nav-fg);
  border-top: 1px solid var(--ppp-nav-rule);
  /* Lighter than it was on navy: a white panel over a white page is defined by this edge alone. */
  box-shadow: 0 12px 24px rgba(0, 46, 79, 0.18);
}

/*
 * The backdrop. A pseudo-element rather than an element so the markup contract
 * (the walker, the shortcode, the module's fallback) is untouched. It is fixed
 * to the viewport but painted inside the panel's stacking context at z -1, so
 * it sits behind the panel's own white and above everything outside it —
 * including the host's header text, which blurs along with the page; only the
 * lifted toggle stays sharp.
 *
 * Keyed on data-open, which only the script sets: a page without JavaScript
 * shows the list inline and must not blur itself for good. Tapping the
 * backdrop closes the menu — see onOutside in ppp-nav.js, which has to
 * recognise the panel's own box for that, because a pseudo-element reports
 * its clicks as the element it belongs to.
 */
.ppp-nav[data-open] .ppp-nav__panel::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--ppp-nav-backdrop);
  -webkit-backdrop-filter: blur(var(--ppp-nav-blur));
  backdrop-filter: blur(var(--ppp-nav-blur));
}

/* A reader who has asked for less transparency gets a plain wash instead of a blur. */
@media (prefers-reduced-transparency: reduce) {
  .ppp-nav[data-open] .ppp-nav__panel::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(0, 46, 79, 0.3);
  }
}

/*
 * Before the script has run, JavaScript-capable browsers must not flash the
 * open list; once it has, the `hidden` attribute is the state. A browser
 * without JavaScript never gets html.js, so the list simply shows — inline,
 * beneath the header — and the toggle is removed as it could do nothing.
 */
html.js .ppp-nav:not([data-enhanced]) .ppp-nav__panel {
  display: none;
}

html:not(.js) .ppp-nav__toggle {
  display: none;
}

html:not(.js) .ppp-nav__panel {
  position: static;
  box-shadow: none;
}

.ppp-nav__panel[hidden] {
  display: none;
}

.ppp-nav__list,
.ppp-nav__sublist {
  max-width: var(--ppp-nav-max-width);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.ppp-nav__list {
  padding: 0.5rem var(--ppp-nav-gutter) 0.75rem;
}

.ppp-nav__sublist {
  padding-left: 1.25rem;
}

.ppp-nav__item + .ppp-nav__item {
  border-top: 1px solid var(--ppp-nav-rule);
}

.ppp-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--ppp-nav-size);
  padding: 0.5rem 0.25rem;
  color: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.ppp-nav__sublist .ppp-nav__link {
  font-weight: 400;
}

.ppp-nav__link:hover,
.ppp-nav__link:focus-visible {
  color: var(--ppp-nav-accent);
}

.ppp-nav__link:focus-visible {
  outline: 2px solid var(--ppp-nav-accent);
  outline-offset: -2px;
  border-radius: 4px;
}

/* Set by ppp-nav.js from the page URL, never by the server — see the walker. */
.ppp-nav__link[aria-current='page'] {
  color: var(--ppp-nav-accent);
}

.ppp-nav__link[aria-current='page']::before {
  content: '';
  width: 3px;
  align-self: stretch;
  margin-right: 0.75rem;
  border-radius: 2px;
  background: var(--ppp-nav-accent);
}

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