/* Custom One — "Resources" mega menu. Markup + links: /resources-menu.js.
   Colors come from --res-* tokens; the control page (body.f3) maps them to its
   own theme tokens so the panel follows its light/dark toggle. */
.res-panel{
  --res-bg:#ffffff; --res-text:#141619; --res-mute:#787e87; --res-line:#e6e6e0; --res-hover:#1a73e8;
  position:fixed; left:0; right:0; top:72px; z-index:120;
  background:var(--res-bg); color:var(--res-text);
  border-top:1px solid var(--res-line); border-bottom:1px solid var(--res-line);
  box-shadow:0 30px 60px -30px rgba(15,15,17,.25);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  font-family:inherit;
}
.res-panel.open{ opacity:1; visibility:visible; transform:none; transition:opacity .18s ease, transform .18s ease; }
body.f3 .res-panel{ --res-bg:var(--f3-panel); --res-text:var(--f3-text); --res-mute:var(--f3-mute); --res-line:var(--f3-line); --res-hover:var(--f3-acc); }

.res-inner{
  max-width:1240px; margin:0 auto; padding:40px 32px 48px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
}
.res-col{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.res-head{ font-size:14px; font-weight:500; color:var(--res-mute); margin-bottom:6px; }
.res-col a{
  font-size:22px; font-weight:500; letter-spacing:-.015em; line-height:1.25;
  color:var(--res-text); text-decoration:none; transition:color .15s ease;
}
.res-col a:hover, .res-col a:focus-visible{ color:var(--res-hover); }

/* Trigger: pages style it like their other nav links; this adds the caret. */
.res-trigger{ font:inherit; background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.res-trigger::after{
  content:""; width:7px; height:7px; margin-top:-3px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .18s ease, margin .18s ease; opacity:.7;
}
.res-trigger[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:3px; }

/* Burger-menu version: grouped, compact. */
.res-mobile{ display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; text-align:left; width:100%; }
.res-mobile .res-col{ gap:8px; }
.res-mobile .res-head{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin:0; }
.res-mobile .res-col a{ font-size:16px; font-weight:600; }

@media (max-width:980px){ .res-panel{ display:none; } }
@media (prefers-reduced-motion:reduce){ .res-panel, .res-trigger::after{ transition:none; } }