/* POPHIES navigation — dropdown panels and mega panels.
   Loaded after style.css; only the header navigation is styled here.

   The shipped popover behaviour (assets/wp-behaviors/behaviors.js, 0.4.0) owns
   the panels' open state and placement: it toggles [hidden] on [data-panel],
   writes aria-expanded on the trigger, and writes inline position/left/top/
   max-width/max-height/overflow/z-index while a panel is open. This file
   therefore never sets position, left, top, max-height or overflow on
   .nav-panel, and never sets display on it unconditionally — the behaviour
   stylesheet's [hidden]{display:none} must keep winning. It does set the panel
   width: the behaviour measures the rendered panel, then clamps and flips it.

   No transform/filter/will-change/contain on .site-header, .nav, .nav-links or
   .nav-item--panel: any of those would become the containing block of the
   fixed panel and push it out of place. */

/* ---------- 1. The bar: brand | items | call to action ---------- */
.nav-links {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  margin-left: auto;
  margin-right: auto;
}

/* One stable row of items, spaced by gap rather than by margins. */
.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
}

.nav-item { flex: 0 0 auto; }

/* An item with a panel is two controls in one row: the label navigates to the
   section the plan gives it, the caret beside the label opens the panel. */
.nav-item__split {
  display: inline-flex;
  align-items: center;
}

/* One link shape for plain links and for panel triggers. */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.14s var(--ease);
}

/* The label keeps the link shape; the caret beside it gives up the label's side
   padding and holds a target of its own, which the panel is anchored to. Both
   follow .nav-link above, so these padding values are the ones that win. */
.nav-link--label { padding-right: 0.3rem; }

.nav-link--trigger {
  padding: 0.45rem 0.4rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  justify-content: center;
}

.nav-link:hover { color: var(--brass); }
.nav-link[aria-current="page"] { color: var(--brass); }

/* The label is the link, so the label carries the current-page mark. */
.nav-link--label[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* When the page being read sits inside a panel, that item reads as current too. */
.nav-item--panel:has(.nav-panel a[aria-current="page"]) .nav-link--label,
.nav-item--panel:has(.nav-panel a[aria-current="page"]) .nav-link--trigger {
  color: var(--brass);
}

/* The item whose panel is open is brass, and its caret points up. */
.nav-link--trigger[aria-expanded="true"] { color: var(--brass); }

.nav-link__caret {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.14s var(--ease);
}

.nav-link--trigger[aria-expanded="true"] .nav-link__caret {
  transform: rotate(225deg);
}

/* ---------- 2. Panel shell ---------- */
/* Width only, for both panel kinds: the behaviour measures it, positions it
   fixed below the trigger and clamps it into the viewport. */
.nav-panel {
  width: min(1180px, calc(100vw - 2rem));
  margin: 0;
}

.nav-panel--drop { width: min(25rem, calc(100vw - 2rem)); }

/* Before the behaviour has initialised an item, keep its panel closed: the
   script loads in the footer and closes every panel with [hidden] when it
   starts, so an uninitialised panel would otherwise flash expanded on first
   paint. The guard is the runtime's own marker, data-enhanced. With JavaScript
   off no panel is hidden, so every panel link stays reachable in the flow. */
html.js .nav-item--panel:not([data-enhanced]) > .nav-panel { display: none; }

/* Padding, surface, edge and shadow live on the inner box; the outer panel can
   be scrolled vertically by the behaviour, so it carries nothing visual. */
.nav-panel__inner {
  padding: 1.5rem;
  border: 1px solid var(--stone);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow);
  white-space: normal;
}

.nav-panel__title {
  margin: 0 0 1.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--stone);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The title repeats the section the panel belongs to, so it links there. */
.nav-panel__title a { color: inherit; }
.nav-panel__title a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.nav-panel__foot {
  margin: 1.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--stone);
}

.nav-panel__foot .arrow {
  display: inline-block;
  transition: transform 0.14s var(--ease);
}

.nav-panel__foot .button:hover .arrow { transform: translateX(3px); }

/* Links inside a panel: no rule, and the current page in brass. */
.nav-panel a { text-decoration: none; }
.nav-panel a[aria-current="page"] { color: var(--brass); }
.nav-panel a:focus-visible { outline-offset: 2px; }

/* ---------- 3. Columns and the mega grid ---------- */
.nav-panel__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem 1.25rem;
}

.nav-col {
  flex: 0 1 8.5rem;
  min-width: 0;
}

/* The column that carries cards takes the free space; :first-child keeps the
   same shape in a browser without :has(). */
.nav-panel__grid > .nav-col:first-child,
.nav-panel__grid > .nav-col:has(.nav-cards) { flex: 1 1 18rem; }

.nav-panel__grid > .nav-col.nav-col--wide { flex: 1 1 22rem; }
.nav-panel__grid > .nav-col--aside { flex: 0 1 15rem; }

/* Column heading, in the eyebrow voice of style.css. A heading that names a
   destination is an <a> and keeps the same shape as the plain <p> labels. */
.nav-col__head {
  display: block;
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass);
}

a.nav-col__head:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.nav-col__foot {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--stone);
}

/* The aside is the one column with a surface of its own. */
.nav-col--aside {
  padding: 1rem 1rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--ivory);
}

/* ---------- 4. Cards, records, ticks, notes ---------- */
.nav-cards {
  display: grid;
  gap: 0.3rem;
}

.nav-card { min-width: 0; }

/* One card shape: the representative image block beside its title and note. */
.nav-card__link {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  color: inherit;
  transition: background-color 0.14s var(--ease);
}

.nav-card__link:hover { background: var(--ivory); }

.nav-card__media,
.nav-feature__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ivory);
}

/* The ratio is fixed, so a real photograph later never shifts the panel. */
.nav-card__image,
.nav-feature__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Deliberate blank where there is no photograph yet: a pale tile with one fine
   brass line along its top — no caption, no icon, nothing that reads as a
   failed load. The box keeps the 4/3 ratio either way. */
.nav-card__blank,
.nav-feature__blank {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--surface-soft);
  border-top: 2px solid var(--brass);
}

.nav-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.nav-card__name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.14s var(--ease);
}

.nav-card__link:hover .nav-card__name { color: var(--brass); }

.nav-card__note,
.nav-record__note,
.nav-feature__note {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--graphite);
}

/* A card note is held to two lines so cards in a column stay even. */
.nav-card__note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Record lists of the narrower panels. */
.nav-records { display: grid; }

.nav-record + .nav-record { border-top: 1px solid var(--stone); }

.nav-record__link {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.35rem;
  border-radius: var(--radius-sm);
  color: inherit;
  transition: background-color 0.14s var(--ease);
}

.nav-record__link:hover { background: var(--ivory); }

.nav-record__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.14s var(--ease);
}

.nav-record__link:hover .nav-record__title { color: var(--brass); }

/* Ticks: the same terms or links where a photograph would only repeat the
   name. A short rule leads each one and turns brass on hover. */
.nav-ticks { display: grid; gap: 0.1rem; }

.nav-tick {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  border-radius: var(--radius-sm);
  color: inherit;
  font-size: var(--fs-small);
  transition: color 0.14s var(--ease);
}

.nav-tick::before {
  content: "";
  flex: 0 0 auto;
  width: 0.7rem;
  height: 1px;
  background: var(--stone);
  transition: background-color 0.14s var(--ease);
}

.nav-tick:hover { color: var(--brass); }
.nav-tick:hover::before { background: var(--brass); }

/* Definition list of customisation levels, OEM / ODM. */
.nav-notes { margin: 0; }

.nav-notes dt {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* A customisation level links to the case studies that used it. */
.nav-notes dt a { color: inherit; }
.nav-notes dt a:hover { color: var(--brass); text-decoration: underline; text-underline-offset: 0.25em; }

.nav-notes dd {
  margin: 0.2rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--graphite);
}

.nav-notes dt + dd { margin-bottom: 0.9rem; }
.nav-notes dt:last-of-type + dd { margin-bottom: 0; }

/* Featured model, in the aside column of the Products panel. */
.nav-feature {
  display: grid;
  gap: 0.55rem;
  color: inherit;
}

.nav-feature__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.14s var(--ease);
}

.nav-feature:hover .nav-feature__title { color: var(--brass); }

/* ---------- 5. How many columns, by width ---------- */
/* Record cards of a mega panel go two up as soon as their column has room. */
@media (min-width: 900px) {
  .nav-cards--records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-cards--records .nav-card__link {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }
}

/* Middle widths: three columns — two thirds for cards or records, one third for
   a tick column or the aside. */
@media (min-width: 900px) and (max-width: 1149px) {
  .nav-panel__grid > .nav-col { flex: 0 1 calc(33.333% - 1rem); }

  .nav-panel__grid > .nav-col:first-child,
  .nav-panel__grid > .nav-col:has(.nav-cards),
  .nav-panel__grid > .nav-col.nav-col--wide { flex: 1 1 calc(66.666% - 1rem); }

  .nav-panel__grid > .nav-col--aside { flex: 1 1 calc(33.333% - 1rem); }
}

/* Narrow: one column, stacked. */
@media (max-width: 899px) {
  .nav-panel__grid { display: block; }

  .nav-panel__grid > .nav-col + .nav-col { margin-top: 1.35rem; }
}

/* ---------- 6. Narrow screens: items in one scrollable row ---------- */
/* No drawer and no script: the items stay visible and swipe sideways, and the
   call to action falls to the next line as .nav wraps. */
@media (max-width: 999px) {
  .nav-links {
    flex: 1 1 100%;
    margin: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.35rem;
    white-space: nowrap;
  }

  .nav-links::-webkit-scrollbar { display: none; }

  .nav-list { flex-wrap: nowrap; }

  .nav-panel--drop { width: min(22rem, calc(100vw - 2rem)); }
  .nav-panel__inner { padding: 1.1rem; }
  .nav-panel__title { margin-bottom: 0.9rem; }
}

/* ---------- 7. Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .nav-link__caret,
  .nav-card__link,
  .nav-card__name,
  .nav-record__link,
  .nav-record__title,
  .nav-tick,
  .nav-tick::before,
  .nav-feature__title,
  .nav-panel__foot .arrow { transition: none; }
}