/* =============================================================
   barrio_npm_prototype — landing submenu auto-hide

   Opt-in autohide chrome around #submenu on search / filter surfaces
   where the tall landing submenu would obscure fresh results after
   a page-reload navigation. See
   documentation/landing-submenu-autohide-on-search-plan.md
   (§14A locked decisions).

   Activation contract:
   - Wrapper carries .np-submenu--autohide (from _submenu-wrapper.html.twig).
   - Sibling JS (js/landing-submenu-autohide.js) toggles .is-collapsed
     on the wrapper, driven by URL params + sessionStorage.
   - Toggle buttons (.np-submenu-toggle) are gated behind html.js so
     they don't render as dead controls when JS is disabled.

   Everything outside .np-submenu--autohide is untouched — non-scoped
   pages render exactly as before.
   ============================================================= */

/* ---------- transition scaffold ---------- */
.np-submenu--autohide .np-landing-submenu {
  /* Set overflow so max-height clamps content cleanly. Height is
     driven from JS (measured scrollHeight → 0 on collapse, 0 →
     measured scrollHeight → 'none' on expand). */
  overflow: hidden;
  transition: max-height 260ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease;
}

.np-submenu--autohide.is-collapsed .np-landing-submenu {
  max-height: 0;
  opacity: 0;
}

/* Post-transitionend hard-hide, applied by JS. Removes the collapsed
   grid from the tab order + assistive-tech tree; expansion re-runs
   the reverse (JS removes .is-hidden-after-transition first, then
   sets max-height). visibility:hidden is used rather than display:none
   so the transition endpoint stays measurable if the user re-expands
   mid-frame. */
.np-submenu--autohide.is-collapsed .np-landing-submenu.is-hidden-after-transition {
  visibility: hidden;
}

/* ---------- compact variant (A/B candidate — plan §14B) ----------
   Cross-nav stays clickable — each L2 tile compresses to its
   coloured header band only. Description + browse cue + L3 rows +
   mobile inline children all hide. Same max-height transition
   applies (measured from the fully-expanded state → the compact
   scrollHeight, both driven by JS).

   Rationale: "compression itself is a filter-applied cue" +
   discoverability of cross-nav (jumping to another cluster mid-
   search doesn't require a toggle click first). Costs ~50-80px of
   vertical space vs full-collapse's ~28px strip.

   The two variant classes are mutually exclusive — JS applies one
   or the other via drupalSettings.npmSubmenuAutohide.variant. Both
   remove on expand. */
.np-submenu--autohide.is-collapsed-compact .np-landing-submenu {
  /* Same opacity behaviour skipped — nav stays fully opaque so the
     header bands remain scannable. Height clamps to the summed
     tile-heads via JS-measured scrollHeight. */
  overflow: hidden;
}

/* Hide the descriptive body (description + browse cue) on L2 tiles. */
.np-submenu--autohide.is-collapsed-compact .np-landing-item--parent > .np-landing-link .np-landing-body {
  display: none;
}

/* Hide the L3 active row (desktop) + inline mobile children entirely. */
.np-submenu--autohide.is-collapsed-compact .np-landing-active-row,
.np-submenu--autohide.is-collapsed-compact .np-landing-children {
  display: none;
}

/* Tighten the tile shadow so a row of compact bands doesn't look
   like a row of full cards — subtler chrome matches the compressed
   information density. */
.np-submenu--autohide.is-collapsed-compact .np-landing-item--parent {
  box-shadow: 0 1px 2px rgba(40, 40, 40, .05);
}
.np-submenu--autohide.is-collapsed-compact .np-landing-item--parent:hover {
  box-shadow: 0 2px 6px rgba(40, 40, 40, .09);
  transform: translateY(-1px);
}

/* Nudge the grid gap down so bands read as a tight pill row rather
   than a spaced-out card grid. */
.np-submenu--autohide.is-collapsed-compact .np-landing-list {
  gap: 0.5rem;
}

/* ---------- toggle buttons ----------
   Hidden by default (no-JS fallback per §9 of the plan). The theme's
   html.js class (added by Drupal core's misc/drupal.js) reveals them.
   Also gated by the wrapper class so a stray .np-submenu-toggle in
   another context doesn't accidentally render. */
.np-submenu--autohide .np-submenu-toggle {
  display: none;
}
html.js .np-submenu--autohide .np-submenu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  margin: 0 0 8px auto;
  border: 1px solid #d8d3c8;
  border-radius: 999px;
  background: #faf8f4;
  color: #4a453d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
html.js .np-submenu--autohide .np-submenu-toggle:hover {
  background: #f0ebe0;
  border-color: #6c675f;
  color: #2c2c2b;
}
html.js .np-submenu--autohide .np-submenu-toggle:focus-visible {
  outline: 2px solid #2c2c2b;
  outline-offset: 2px;
}
.np-submenu-toggle-icon {
  font-size: 10px;
  line-height: 1;
  color: #6c675f;
}
.np-submenu-toggle:hover .np-submenu-toggle-icon {
  color: #2c2c2b;
}

/* The show button is a full-width strip (per plan §6) so it reads as
   a visible "expand me" affordance where the submenu used to be. Hide
   button stays a compact pill top-right of the still-visible submenu. */
html.js .np-submenu--autohide .np-submenu-toggle--hide {
  align-self: flex-end;
}
html.js .np-submenu--autohide .np-submenu-toggle--show {
  display: none;
  width: 100%;
  justify-content: center;
  margin: 4px 0 12px;
  padding: 8px 12px;
  font-size: 13px;
}
html.js .np-submenu--autohide.is-collapsed .np-submenu-toggle--show {
  display: inline-flex;
}
html.js .np-submenu--autohide.is-collapsed .np-submenu-toggle--hide {
  display: none;
}

/* The [hidden] attribute must always win over display rules — Drupal
   core often flips this on/off dynamically and expects layout to
   follow. */
.np-submenu-toggle[hidden] { display: none !important; }

/* Flex the wrapper so the hide toggle sits above the submenu grid
   without extra structural markup. Only in autohide mode. */
.np-submenu--autohide {
  display: flex;
  flex-direction: column;
}

/* ---------- "your filter was applied" flash ----------
   JS adds .is-just-applied to the nearest result container on
   collapsed-auto loads (URL-triggered collapse), for ~600ms.
   Deliberately subtle — a small settle + fade-in. Never fires on
   manual toggling (§7.2). */
.np-search-just-applied {
  animation: np-search-just-applied 600ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes np-search-just-applied {
  0%   { transform: translateY(-6px); opacity: 0.85; }
  100% { transform: translateY(0);    opacity: 1;    }
}

/* ---------- prefers-reduced-motion ----------
   Users with reduced-motion get instant snaps for every animated
   surface: collapse/expand, results flash, and the JS-driven
   smooth scroll (JS reads matchMedia and passes behavior:'auto'). */
@media (prefers-reduced-motion: reduce) {
  .np-submenu--autohide .np-landing-submenu {
    transition: none;
  }
  .np-search-just-applied {
    animation: none;
  }
}