/**
 * Audience link aggregator — dept-grouped link list rendered on the
 * /staff-portal, /parents, and /students resource pages by the
 * mvsd_audience_link_aggregator block.
 *
 * Compact dept-grouped layout: each dept is a small uppercase eyebrow
 * label followed by a flat list of its audience-relevant links. Goal is
 * dense info, scannable at a glance, low vertical real estate (vs. the D9
 * pattern of one stacked menu block per dept which ate the whole page).
 */

.audience-aggregator {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem);
}

.audience-aggregator__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  break-inside: avoid;
}

.audience-aggregator__dept {
  margin: 0;
  padding: 0 0 var(--space-2, 0.5rem);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--color-accent, #b45309);
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
}

.audience-aggregator__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.audience-aggregator__item {
  margin: 0;
}

.audience-aggregator__link {
  display: block;
  padding: 0.4rem 0.5rem;
  color: var(--color-link, var(--color-primary));
  text-decoration: none;
  font-size: var(--font-size-sm, 0.95rem);
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm, 4px);
  transition:
    background var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease);
}

.audience-aggregator__link:hover,
.audience-aggregator__link:focus-visible {
  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.04));
  border-left-color: var(--color-accent, #b45309);
  color: var(--color-link-hover, var(--color-primary-dark, var(--color-primary)));
}

.audience-aggregator__link:focus-visible {
  outline: 2px solid var(--color-focus-ring, #2563eb);
  outline-offset: -2px;
}

/* External-link indicator: small upward-pointing arrow after the label. */
.audience-aggregator__link.is-external::after {
  content: " ↗";
  margin-left: 0.2em;
  font-size: 0.85em;
  opacity: 0.6;
}

/* Mobile: collapse to single column with tighter spacing. */
@media (max-width: 640px) {
  .audience-aggregator {
    grid-template-columns: 1fr;
    gap: var(--space-4, 1rem);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RESOURCE PAGE SIDEBAR MENUS — density + collapsible sections
   Added 2026-08-28.

   SCOPE
   -----
   Both sidebar menus on /student-resources, /parent-resources and
   /staff-portal render into .resource-menu and share the base styling in
   css/dept-page.css:

     * .resource-menu--school    a real Drupal menu, <school>-<aud>-resources.
     * .resource-menu--district  the audience link aggregator, whose
       'sidebar' variant deliberately emits menu-shaped ul/li/span+ul markup
       so it picks up the same CSS.

   This file loads AFTER dept-page.css in the layout group (see
   mvsd_core.libraries.yml), so equal-specificity rules here win. Nothing in
   dept-page.css is edited: it is shared with other in-flight work.

   1. DENSITY
   ----------
   Measured on staging at 1366px before this file:

     District Resources, collapsed (the reference the site owner named)
                     row 25.6px, pitch 26.6px
     District Resources, expanded sub-links
                     row 38.4px, pitch 39.4px
     School menu rows
                     row 46.4px, pitch 47.4px

   The reference 25.6px is an accident: js/resource-accordion.js wraps the
   dept label in a row div, so `.resource-menu > ul > li > span` (padding
   .75rem) stops matching and a bare line box is left. The owner likes that
   rhythm, so it is pinned here deliberately rather than left depending on a
   selector that happens to miss:

     font-size 0.875rem (14px) x line-height 1.4 = 19.6px
     + 3px padding-top + 3px padding-bottom      = 25.6px row
     + the 1px .resource-menu li border          = 26.6px pitch

   DESKTOP ONLY (>= 769px). Below that the sidebar becomes a touch accordion
   and dept-page.css gives every row .75rem padding (~44px targets). 25.6px
   would still clear WCAG 2.2 SC 2.5.8 (24x24), but there is no reason to
   spend that margin on a phone, and the "much tighter" District Resources
   the owner is comparing against is itself only tight on desktop.

   2. COLLAPSE
   -----------
   js/resource-accordion.js rewraps each menu into native details/summary.
   Native elements were chosen over button + aria-expanded on purpose: Enter
   AND Space, focus, and expanded-state announcement all come for free, and
   it matches templates/paragraphs/paragraph--accordion-item.html.twig.
   `.resource-menu__heading` is moved onto the summary so the existing
   dept-page.css heading treatment (accent rule on desktop, green bar on
   mobile) lands unchanged; the h2 survives inside it for the document
   outline, which the summary content model explicitly permits.
   ══════════════════════════════════════════════════════════════════════ */

.resource-menu {
  --rm-lh: 1.4;
  --rm-pad-y: 3px;
}

/* ── 0. Re-anchor the top-level row styling for the <details> shape ──
   dept-page.css styles top-level rows with `.resource-menu > ul > li > a`
   and `.resource-menu > ul > li > span`. Once the JS moves the <ul> inside
   <details>, that <ul> is no longer a direct child of .resource-menu and
   BOTH selectors stop matching — links drop to unstyled 16px body text with
   no padding and no hover. The rules below mirror dept-page.css onto the
   wrapped shape. The unwrapped (no-JS) shape keeps being served by
   dept-page.css itself, so both remain correct. Deeper rows are unaffected:
   `.resource-menu li li a` is a descendant selector and still matches. */

.resource-menu__panel > ul > li > span {
  display: block;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  padding-right: 2.5rem;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary);
  cursor: default;
}

.resource-menu__panel > ul > li > a {
  display: block;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text, #333);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.resource-menu__panel > ul > li > a:hover,
.resource-menu__panel > ul > li > a:focus-visible {
  background: var(--color-primary-light, #e8f5ed);
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .resource-menu__panel > ul > li > a {
    color: var(--color-primary, #01491f);
    border-left: 3px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
  }

  .resource-menu__panel > ul > li > a:hover,
  .resource-menu__panel > ul > li > a:focus-visible {
    background: var(--color-primary-light, #e8f5ed);
    border-left-color: var(--color-accent, #f5a623);
  }
}

/* ── 1. Density (desktop only) ──────────────────────────────────────── */
@media (min-width: 769px) {

  /* Every row that carries a label, whatever built it: school links,
     aggregator sub-links, dept labels (both the JS and the no-JS shape),
     and the sub-menu summary that replaces the dept label. */
  .resource-menu > ul > li > a,
  .resource-menu__panel > ul > li > a,
  .resource-menu li li a,
  .resource-menu > ul > li > span,
  .resource-menu__panel > ul > li > span,
  .resource-menu .resource-item-row > span,
  .resource-menu .resource-submenu__summary {
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--rm-lh);
    padding-top: var(--rm-pad-y);
    padding-bottom: var(--rm-pad-y);
  }

  /* The dept label is a group heading, so give it a heading's weight and
     colour, which is what dept-page.css always intended for
     `.resource-menu > ul > li > span` before the JS wrapper stopped that
     selector matching. Row height stays 25.6px, so the rhythm the owner
     measured is preserved exactly; only weight, size and colour move. */
  .resource-menu .resource-item-row > span,
  .resource-menu .resource-submenu__label {
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary);
  }

  /* The legacy sub-toggle button (only reachable when a parent item is
     itself a link, where a summary would nest interactives) must not
     re-inflate the row it sits in. */
  .resource-menu .resource-sub-toggle {
    align-self: stretch;
    min-height: 0;
  }
}

/* ── 2. Collapsible section heading ─────────────────────────────────── */

.resource-menu__panel {
  margin: 0;
}

summary.resource-menu__heading,
summary.resource-submenu__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  cursor: pointer;
  /* Suppress the UA disclosure triangle in every engine; the JS appends a
     chevron of our own so it can carry the brand colour. */
  list-style: none;
}

summary.resource-menu__heading::-webkit-details-marker,
summary.resource-submenu__summary::-webkit-details-marker {
  display: none;
}

summary.resource-menu__heading::marker,
summary.resource-submenu__summary::marker {
  content: "";
}

/* The h2 keeps the outline; the summary carries the styling. */
.resource-menu__title {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  flex: 1 1 auto;
  min-width: 0;
}

/* Chevron drawn as a mask so it inherits colour and needs no font glyph.
   (The old `content: 25BC` rule in dept-page.css is invalid CSS and has
   been rendering nothing.) */
.resource-menu__chevron,
.resource-submenu__chevron {
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  color: var(--color-accent, #f5a623);
  background: currentColor;
  transition: transform var(--transition-fast, 150ms) ease;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

details[open] > summary > .resource-menu__chevron,
details[open] > summary > .resource-submenu__chevron {
  transform: rotate(180deg);
}

/* House convention (css/base.css): 3px, --color-focus-ring (#b45309) on
   light surfaces, --color-focus-ring-on-dark (#ffbf47) on dark ones. The
   offset is negative rather than base.css's +2px because these rows are
   25.6px tall and sit directly on top of one another — an outset ring
   would overlap its neighbours. */
summary.resource-menu__heading:focus-visible,
summary.resource-submenu__summary:focus-visible {
  outline: 3px solid var(--color-focus-ring, #b45309);
  outline-offset: -3px;
}

summary.resource-menu__heading:hover .resource-menu__chevron,
summary.resource-submenu__summary:hover .resource-submenu__chevron {
  color: var(--color-primary);
}

/* ── 3. Collapsible sub-menu (dept group) ───────────────────────────── */

.resource-submenu {
  margin: 0;
}

summary.resource-submenu__summary {
  padding-left: var(--space-4, 1rem);
  padding-right: var(--space-4, 1rem);
}

summary.resource-submenu__summary:hover {
  background: var(--color-primary-light, #e8f5ed);
}

.resource-submenu__label {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── 4. Mobile: keep the green header bar and comfortable targets ───── */
@media (max-width: 768px) {
  /* dept-page.css reserves 2.5rem on the right for the never-rendered
     ::after chevron. The real chevron is now a flex child, so give the
     reserved space back. */
  summary.resource-menu__heading {
    padding-right: var(--space-4, 1rem);
  }

  /* On mobile dept-page.css paints this heading with the school's dark
     --color-primary. #b45309 on that green is about 1.9:1 and fails
     WCAG 2.2 SC 1.4.11 (3:1 for non-text); the on-dark token is the one
     the other 23 dark-surface rings in this theme already use. */
  summary.resource-menu__heading:focus-visible {
    outline-color: var(--color-focus-ring-on-dark, #ffbf47);
  }

  summary.resource-submenu__summary {
    background: var(--color-bg-subtle, #f8f8f8);
    padding-top: var(--space-3, 0.75rem);
    padding-bottom: var(--space-3, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary, #01491f);
  }

  summary.resource-submenu__summary .resource-submenu__chevron {
    color: var(--color-primary, #01491f);
  }
}

/* ── 5. Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .resource-menu__chevron,
  .resource-submenu__chevron {
    transition: none;
  }
}

/* ── 6. Print ───────────────────────────────────────────────────────── */
/* js/resource-accordion.js sets `open` on every panel at beforeprint and
   restores it afterwards, the same mechanism js/print-collapsible.js uses
   for details.para-accordion__item (which does not match these panels).
   The rules below are the no-JS fallback, and also cover an engine that
   prints before the listener runs; see the header of
   css/print-collapsible.css for why neither rule alone is enough. */
@media print {
  .resource-menu details::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }

  .resource-menu details:not([open]) > *:not(summary) {
    display: block !important;
  }

  .resource-menu__chevron,
  .resource-submenu__chevron,
  .resource-sub-toggle {
    display: none !important;
  }

  summary.resource-menu__heading,
  summary.resource-submenu__summary {
    cursor: auto;
  }

  /* Keep a group label with the start of its list. */
  summary.resource-submenu__summary {
    break-after: avoid;
    page-break-after: avoid;
  }
}