/* Grid-rows dropdown. The move is CSS only: the panel is a one-row grid whose row animates 0fr -> 1fr around an
   overflow-hidden inner, so it opens to the links' natural height with no max-height guess, while it fades on the
   same .4s ease (Heron's header: .header-menu-dropdown{grid-template-rows:0fr;opacity:0;transition:opacity .4s ease,
   grid-template-rows .4s ease}, :hover -> 1fr / 1).
   Opens on: mouse hover (only where the device can hover), keyboard focus (:has(:focus-visible); :focus-within where
   :has() is missing), and .is-open (part.js: taps, Enter/Space, the API). part.js is optional: without it hover and
   keyboard still work; with it, taps toggle, Escape closes, aria-expanded is kept true and html.is-menu-open is set. */
.grd {
  --grd-dur: .4s;                 /* row + fade duration (Heron .4s) */
  --grd-ease: ease;               /* Heron: ease */
  --grd-border: 1px;              /* hairline; the panel overlaps the bar by one hairline so the hover never drops */
  --grd-min-w: 16.5rem;           /* panel width (Heron 26.4rem at their 10px rem = 264px) */
  --grd-row-pad: .85rem 1rem;
  --grd-ink: #1c1b19;
  --grd-muted: #6f6c66;
  --grd-bg: #f6f4ef;
  --grd-line: #d9d5cc;
  --grd-accent: #2f55d4;
  --grd-tint: #0000000a;          /* open trigger tint (Heron .header-menu-item.active) */
  --grd-chev-turn: 180deg;
  position: relative;
}
.grd__list { display: flex; list-style: none; margin: 0; padding: 0; }
.grd__item { position: relative; display: flex; }
.grd__trigger, .grd__link {
  font: inherit; color: var(--grd-muted); background: transparent; border: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45em; padding: 0 1.1rem; min-height: 3.5rem; text-decoration: none;
  transition: color var(--grd-dur) var(--grd-ease), background-color var(--grd-dur) var(--grd-ease);
}
.grd__trigger:hover, .grd__link:hover { color: var(--grd-ink); }
.grd__trigger:focus-visible, .grd__link:focus-visible, .grd__row:focus-visible { outline: 2px solid var(--grd-accent); outline-offset: -2px; }
.grd__chev { width: .7em; height: .7em; flex: none; transition: transform var(--grd-dur) var(--grd-ease); }

.grd__panel {
  position: absolute; top: calc(100% - var(--grd-border)); left: 0; z-index: 30;
  display: grid; grid-template-rows: 0fr; opacity: 0; pointer-events: none;
  min-width: var(--grd-min-w); max-width: calc(100vw - 2rem);
  transition: opacity var(--grd-dur) var(--grd-ease), grid-template-rows var(--grd-dur) var(--grd-ease);
}
.grd__item[data-grd-align="end"] > .grd__panel { left: auto; right: 0; }
.grd__inner {
  min-height: 0; overflow: hidden;                         /* the 0fr row can only shrink an inner that may be 0 tall */
  display: flex; flex-direction: column;
  background: var(--grd-bg); box-shadow: inset 0 0 0 var(--grd-border) var(--grd-line);
}
.grd__row {
  display: block; padding: var(--grd-row-pad); color: var(--grd-muted); text-decoration: none;
  border-bottom: var(--grd-border) solid var(--grd-line); transition: color var(--grd-dur) var(--grd-ease);
}
.grd__row:last-child { border-bottom: 0; }
.grd__row:hover { color: var(--grd-accent); }

/* open states (kept in separate rules: a selector list with :has() is dropped whole where :has() is missing) */
.grd__item.is-open > .grd__panel { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
.grd__item.is-open > .grd__trigger { background-color: var(--grd-tint); color: var(--grd-ink); }
.grd__item.is-open > .grd__trigger .grd__chev { transform: rotate(var(--grd-chev-turn)); }
.grd__item:not(.is-dismissed):has(:focus-visible) > .grd__panel { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
.grd__item:not(.is-dismissed):has(:focus-visible) > .grd__trigger { background-color: var(--grd-tint); color: var(--grd-ink); }
.grd__item:not(.is-dismissed):has(:focus-visible) > .grd__trigger .grd__chev { transform: rotate(var(--grd-chev-turn)); }
@media (hover: hover) {
  .grd__item:not(.is-dismissed):hover > .grd__panel { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
  .grd__item:not(.is-dismissed):hover > .grd__trigger { background-color: var(--grd-tint); color: var(--grd-ink); }
  .grd__item:not(.is-dismissed):hover > .grd__trigger .grd__chev { transform: rotate(var(--grd-chev-turn)); }
}
@supports not selector(:has(*)) {
  .grd__item:not(.is-dismissed):focus-within > .grd__panel { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .grd { --grd-dur: 0s; }
}