/* =============================================================
   barrio_npm_prototype — landing submenu compact-collapse

   Opt-in compact-collapse 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, §14C 2-state simplification 2026-10-14).

   Activation contract:
   - Wrapper carries .np-submenu--autohide (from _submenu-wrapper.html.twig).
   - Sibling JS (js/landing-submenu-autohide.js) toggles
     .is-collapsed-compact on the wrapper on button click.
   - Toggle button (.np-submenu-toggle) is gated behind html.js so
     it doesn't render as a dead control 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 → compact scrollHeight on
     collapse, compact → full on expand). */
  overflow: hidden;
  transition: max-height 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- compact collapsed state ----------
   Cross-nav stays clickable — each L2 tile compresses to its
   coloured header band only. Description + browse cue + L3 rows +
   mobile inline children all hide via max-height:0 transitions.

   Rationale (user testing 2026-10): participants did not recognise
   the earlier "▼ Show section menu" strip (hide variant) as section
   nav. Keeping the title bands always visible preserves navigability
   while still focusing the viewport on the filter results. */

/* Transitionable base: prepared to animate max-height / opacity /
   padding when the .is-collapsed-compact class is added or removed.
   Applies on every wrapper in autohide mode so first-paint arrives with
   the properties defined — subsequent class toggles animate cleanly
   (display: none can't be transitioned; max-height + opacity + padding
   can). Server-side initial rendering paints straight into the target
   state without triggering the transition, because CSS transitions
   only fire when a property changes AFTER the initial style
   computation. See _submenu-wrapper.html.twig for the server-side
   initial-state emission. */
.np-submenu--autohide .np-landing-item--parent > .np-landing-link .np-landing-body {
  overflow: hidden;
  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease,
              padding-top 280ms cubic-bezier(0.4, 0, 0.2, 1),
              padding-bottom 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.np-submenu--autohide .np-landing-active-row,
.np-submenu--autohide .np-landing-children {
  overflow: hidden;
  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease,
              margin-top 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide the descriptive body (description + browse cue) on L2 tiles.
   max-height upper bound generous enough for editor-typical body
   copy (2–4 lines of description + browse-cue arrow); if descriptions
   ever grow beyond this, bump the bound rather than switching to JS
   scrollHeight measurement (which would run per-tile per-toggle). */
.np-submenu--autohide.is-collapsed-compact .np-landing-item--parent > .np-landing-link .np-landing-body {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Hide the L3 active row (desktop) + inline mobile children.
   max-height upper bound is generous — L3 rows on the tallest sections
   land ~200-300px. Bump if a section grows more L3s than the bound
   accommodates. */
.np-submenu--autohide.is-collapsed-compact .np-landing-active-row,
.np-submenu--autohide.is-collapsed-compact .np-landing-children {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

/* 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;
}

/* ---------- single toggle button, full-width below the menu ----------
   One button per wrapper, rendered after {{ landing_submenu }} by
   _submenu-wrapper.html.twig. Toggles between expanded (full cards)
   and compact (title bands only). Label + icon flip to match
   current state (JS updates both on click; server emits the correct
   initial pair based on submenu_initial_collapsed).

   Hidden by default (no-JS fallback). The theme's html.js class
   (added by Drupal core's misc/drupal.js) reveals it. 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;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 8px 0 12px;
  padding: 8px 12px;
  border: 1px solid #d8d3c8;
  border-radius: 6px;
  background: #faf8f4;
  color: #4a453d;
  font-size: 13px;
  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;
}

/* ---------- "your filter was applied" flash ----------
   JS adds .np-search-just-applied to the nearest result container on
   compact-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,
  .np-submenu--autohide .np-landing-item--parent > .np-landing-link .np-landing-body,
  .np-submenu--autohide .np-landing-active-row,
  .np-submenu--autohide .np-landing-children {
    transition: none;
  }
  .np-search-just-applied {
    animation: none;
  }
}