/*
 * Phase 10.2a-2 — navigation layer. Minimal layout support for availability-driven navigation.
 * Design v3.2 tokens only; header/footer visuals are otherwise unchanged (shell.css stays the source).
 */

/* Current page: same underline language as the expanded mega trigger (desktop). */
@media (width >= 1200px) {
  .nessie-primary > a[aria-current='page'],
  .nessie-primary .nessie-mega-trigger.nessie-is-current > button { box-shadow: inset 0 -3px 0 var(--nessie-navy); }

  /* Fewer than five live items: keep them together instead of spreading to the edges. */
  .nessie-primary:is([data-nav-count='1'], [data-nav-count='2'], [data-nav-count='3'], [data-nav-count='4']) { justify-content: flex-start; gap: 0 32px; }

  /* Footer hubs: brand column plus as many hub columns as are live (1–7). */
  .nessie-footer__grid--hubs { grid-template-columns: minmax(240px, 1.3fr) repeat(auto-fit, minmax(128px, 1fr)); gap: 40px; }
}

.nessie-mega .nessie-menu a[aria-current='page'] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.nessie-mega__hub + .nessie-mega__hub { display: block; margin-top: 8px; }
.nessie-footer__group .nessie-menu a[aria-current='page'],
.nessie-footer__legal .nessie-menu a[aria-current='page'] { color: var(--nessie-navy); font-weight: 600; }

/*
 * Phase 10.2b Step 4 — mobile/tablet 買取品目 panel: the hub links become the first rows.
 * The 買取品目 button already names the panel, so the decorative intro is visually hidden but kept
 * in the accessibility tree (its heading is the panel's aria-labelledby target). Desktop is untouched.
 */
@media (width <= 1199px) {
  .nessie-mega { padding-top: 0; }
  .nessie-mega__grid > div:first-child > :is(.nessie-eyebrow, h2, p) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .nessie-mega__hub, .nessie-mega__hub + .nessie-mega__hub { display: flex; width: 100%; min-height: 52px; align-items: center; margin: 0; padding: 13px 0; border-bottom: 1px solid var(--nessie-line); color: var(--nessie-navy); font-size: var(--nessie-type-pc-navigation); font-weight: 600; text-decoration: none; }
}

/*
 * Sticky Header v1 (theme 0.9.14) — CSS only, no JS, no spacer: the header stays in the document flow.
 * Desktop: the 26px utility bar scrolls away; main header (84px) + navigation (46px) stay at the top.
 * Mobile: the frozen 76px header stays; the open menu keeps its own `.is-open` fixed/dialog behaviour.
 * Short landscape: not sticky. Anchors and the /assessment/ sidebar read the same visible offset.
 * Kept here (theme-versioned) because shell.css / lower.css are enqueued with a pinned version.
 */
:root {
  --nessie-sticky-admin: var(--wp-admin--admin-bar--height, 0px); /* Logged-in only; 0 for visitors. */
  --nessie-sticky-collapse: 0px;  /* Height that scrolls away above the sticky part. */
  --nessie-sticky-offset: 76px;   /* Visible sticky header height (anchors, sticky sidebars). */
}

/*
 * Anchor targets land 16px below the sticky header. scroll-margin on [id] rather than scroll-padding on the root:
 * root padding would make the browser treat the header's own controls as obscured, so navigation.js returning
 * focus to the menu toggle would scroll the page. WordPress already pads the root by the admin bar when logged in.
 */
:where([id]) { scroll-margin-top: calc(var(--nessie-sticky-offset) + 16px); }

.nessie-header { position: sticky; top: calc(var(--nessie-sticky-admin) - var(--nessie-sticky-collapse)); }
.nessie-assessment__aside { top: calc(var(--nessie-sticky-admin) + var(--nessie-sticky-offset) + 24px); }

@media (width >= 1200px) {
  :root { --nessie-sticky-collapse: 26px; --nessie-sticky-offset: 130px; } /* utility 26; main 84 + nav 46. */
  .nessie-utility .nessie-container { height: var(--nessie-sticky-collapse); }
  /* Short screens: the open panel scrolls itself. 3px = the expanded trigger's underline, which grows the nav while open. */
  .nessie-header .nessie-mega { max-height: calc(100dvh - var(--nessie-sticky-admin) - var(--nessie-sticky-offset) - 3px); overflow-y: auto; overscroll-behavior: contain; }
}

/* WordPress scrolls its admin bar away below 601px, so the header returns to the very top there. */
@media (width <= 600px) {
  :root { --nessie-sticky-admin: 0px; }
}

@media (width <= 1199px) and (height <= 500px) {
  :root { --nessie-sticky-offset: 0px; }
  .nessie-header { position: relative; }
}