/* Routes to Care mega menu — shared across every page's top nav.
   Reuses existing tokens (--display, --body, --ink, --paper, --lime, --lime-deep,
   --purple-deep, --lavender) and the site's flat offset-shadow / square-border
   editorial language rather than Material-style blurred shadows or new radii. */

/* header.top (not .header-right) is the positioned ancestor: header.top spans
   the full viewport width on every page, so `right:24px` on .routes-mega
   reliably means "24px from the actual viewport edge" regardless of each
   page's own header padding. .header-right is only as wide as its flex
   content and its right edge isn't reliably near the viewport edge at
   narrower desktop/tablet widths, which caused the panel to overflow off
   the left side of the screen at ~768px when anchored to it instead. */
header.top{position:relative;}

/* "Routes to Care" is a real link (.top-links-rtc-link, navigates to
   routes-to-care.html — inherits the site's plain nav.top-links a{} color/underline
   rules like every sibling link) plus a small separate disclosure toggle
   (.mega-toggle) that opens/closes the panel. Grouped in one inline-flex
   span so hovering either piece (or the gap between) reads as one target. */
.top-links-rtc{display:inline-flex;align-items:center;gap:2px;}
.mega-toggle{
  font:inherit;
  color:inherit;
  background:none;
  border:none;
  padding:4px 2px;
  margin:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
}
.mega-toggle:hover,.mega-toggle:focus-visible{color:var(--purple-deep);}
.mega-toggle .mega-caret{font-size:10px;display:inline-block;transition:transform .15s ease;}
.mega-toggle[aria-expanded="true"] .mega-caret{transform:rotate(180deg);}

/* Panel styled as a page of the guide rather than a generic UI surface: a
   warm off-white paper tone (the same #fffdf6 used by the field-note/
   timeline cards elsewhere on Routes to Care) instead of flat white, plus
   one small taped corner echoing how those cards are "pinned." Flat ink
   border + offset shadow (no blur, no new radius) match the site's existing
   square editorial language rather than a soft dashboard-style dropdown. */
.routes-mega{
  position:absolute;
  top:100%;
  right:24px;
  width:min(720px,calc(100vw - 48px));
  background:#fffdf6;
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  z-index:70;
  margin-top:10px;
  padding:26px 28px 20px;
}
.routes-mega::before{
  /* #F5A623 matches --punk-orange, the exact tape colour used by routes-to-care.html's
     own field notes/timeline cards — hardcoded because that custom property
     is only defined locally on pages with their own cover (routes-to-care.html,
     about-routes-to-care.html), not in every page's shared :root, and this
     stylesheet is loaded site-wide. */
  content:"";
  position:absolute;
  top:-11px;
  left:26px;
  width:52px;
  height:17px;
  background:#F5A623;
  border:1px solid rgba(34,30,31,.25);
  opacity:.92;
  transform:rotate(-3deg);
  pointer-events:none;
}
.routes-mega-h{
  font-family:var(--display);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--purple-deep);
  margin:0 0 14px;
}
.routes-mega-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px 24px;
  padding-bottom:16px;
  border-bottom:2px dashed rgba(34,30,31,.28);
}
.routes-mega-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 8px;
  border-radius:10px;
  text-decoration:none;
  color:var(--ink);
}
.routes-mega-item:hover,.routes-mega-item:focus-visible{background:var(--lavender);}
/* The six menu icons are the illustrator's own artwork (assets/img/menu/), replacing the
   emoji that stood in for them. They are DECORATIVE: each one sits beside a title and a
   description that already name the destination, so they carry alt="" and stay out of the
   accessibility tree rather than repeating the link text to a screen reader.
   `flex:0 0 auto` and the explicit width/height keep the two-column grid from reflowing
   while they load, and object-fit:contain guarantees the square source is never stretched. */
.routes-mega-icon{width:26px;height:26px;flex:0 0 auto;object-fit:contain;margin-top:1px;}
.routes-mega-title{display:block;font-weight:800;font-size:14.5px;}
.routes-mega-desc{display:block;font-size:12px;color:#5a5556;margin-top:2px;line-height:1.35;}
.routes-mega-cta{
  display:block;
  text-align:center;
  margin:16px 0 14px;
  background:var(--lime);
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  color:var(--ink);
  font-family:var(--display);
  font-size:17px;
  text-decoration:none;
  padding:12px 20px;
}
.routes-mega-cta:hover,.routes-mega-cta:focus-visible{background:var(--lime-deep);}
.routes-mega-foot{
  margin:0;
  padding-top:14px;
  border-top:1px solid #e4e4e4;
  font-size:12px;
  color:#777;
  text-align:center;
}
.routes-mega-foot a{color:var(--purple-deep);font-weight:700;text-decoration:none;margin-left:4px;}

@media (max-width:900px){ .routes-mega{right:12px;} }
@media (max-width:640px){ .routes-mega-grid{grid-template-columns:1fr;} }

/* The mega menu is desktop-only — every page already hides nav.top-links at
   max-width:560px, but .routes-mega is a sibling of that nav (so it can be
   positioned relative to .header-right), so it needs its own guard. */
@media (max-width:560px){ .routes-mega{display:none!important;} }

/* ---------- Mobile sidebar: Routes to Care resource sub-list ---------- */
.sidebar-rtc-sub{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:2px 0 6px 30px;
  padding-left:12px;
  border-left:2px solid #e4ddc9;
}
/* .sidebar nav a (0,1,2) already sets font-family/font-size/padding for every
   sidebar link, beating a plain ".sidebar-rtc-sub a" (0,1,1) rule here on
   specificity — match its ancestor chain to win instead of using !important. */
.sidebar nav .sidebar-rtc-sub a{
  font-family:var(--body);
  font-size:14.5px;
  font-weight:700;
  padding:8px 10px;
}
.sidebar nav .sidebar-rtc-sub a.sidebar-rtc-cta{color:var(--purple-deep);}