/* ==========================================================================
   WN4AFT — Radio Resources page (/radio-resources.html)
   Loaded only by /radio-resources.html, after /styles.css. Every rule is
   scoped to body.res-page, so no other page is affected. Uses the :root
   tokens from styles.css. No inline styles; no external images or logos.
   ========================================================================== */

.res-page .res-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Main-nav link for the current page (only this page marks it). */
.res-page .site-nav > ul > li > a[aria-current="page"]:not(.nav-get-started) {
  color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0;
}
@media (max-width: 760px) {
  .js .res-page .site-nav > ul > li > a[aria-current="page"]:not(.nav-get-started) { box-shadow: inset 3px 0 0 var(--gold); border-radius: 6px; }
}

/* ---------- Hero ---------- */
.res-page .res-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(circle at 82% 40%, rgba(212, 167, 44, 0.13) 0, transparent 44%),
    linear-gradient(180deg, var(--navy-deep), var(--navy));
  color: var(--on-navy);
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem);
}
.res-page .res-hero-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.res-page .res-hero h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.25rem); color: var(--on-navy); line-height: 1.02; margin-bottom: 1rem; }
.res-page .res-intro-title {
  font-size: var(--step-2); color: var(--gold); letter-spacing: 0.03em; margin: 0 0 1rem;
  padding-left: 0.9rem; border-left: 3px solid var(--gold);
}
.res-page .res-intro-body p { color: var(--on-navy-muted); font-size: var(--step-1); line-height: 1.65; max-width: 40rem; }
.res-page .res-intro-body p:last-child { margin-bottom: 0; }
.res-page .res-hero-art { justify-self: center; width: min(100%, 250px); }
.res-page .res-art { width: 100%; height: auto; overflow: visible; }
.res-page .res-art-post { stroke: var(--on-navy); stroke-width: 6; stroke-linecap: round; fill: none; }
.res-page .res-art-board { stroke-width: 3; stroke-linejoin: round; }
.res-page .res-art-board-1 { fill: var(--gold); stroke: var(--gold); }
.res-page .res-art-board-2 { fill: var(--navy-soft); stroke: rgba(212, 167, 44, 0.7); }
.res-page .res-art-board-3 { fill: var(--navy-soft); stroke: rgba(201, 210, 222, 0.5); }
.res-page .res-art-line { stroke: rgba(245, 239, 224, 0.75); stroke-width: 5; stroke-linecap: round; fill: none; }
.res-page .res-art-line-ink { stroke: var(--navy-deep); }
.res-page .res-art-wave { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; fill: none; }
.res-page .res-art-dot { fill: var(--gold); }

/* ---------- Layout: topic index + topics ---------- */
.res-page .res-body { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.res-page .res-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.res-page .res-toc { position: sticky; top: 5.5rem; }
.res-page .res-toc-title {
  font-family: var(--font-display); font-size: var(--step--1); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-ink); margin: 0 0 0.75rem;
}
.res-page .res-toc-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); counter-reset: res-toc; }
.res-page .res-toc-list li { counter-increment: res-toc; }
.res-page .res-toc-list a {
  display: flex; gap: 0.6rem; align-items: baseline; padding: 0.55rem 0 0.55rem 1rem; margin-left: -2px;
  border-left: 2px solid transparent; color: var(--navy); text-decoration: none;
  font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; letter-spacing: 0.02em; line-height: 1.3;
}
.res-page .res-toc-list a::before {
  content: counter(res-toc, decimal-leading-zero); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--gold-ink); flex: none;
}
.res-page .res-toc-list li:last-child a::before { content: "\2192"; }
.res-page .res-toc-list a:hover { border-left-color: var(--gold); color: var(--gold-ink); }
.res-page .res-toc-list a:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 2px; }

/* ---------- A topic (one admin "section") ---------- */
.res-page .res-topics { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.res-page .res-topic { scroll-margin-top: 5.5rem; }
.res-page .res-topic-head {
  display: flex; align-items: baseline; gap: 1rem; padding-bottom: 0.85rem; margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--navy);
}
.res-page .res-topic-num {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--gold-ink);
  letter-spacing: 0.04em; line-height: 1; flex: none;
}
.res-page .res-topic-title { font-size: var(--step-3); color: var(--navy); margin: 0; line-height: 1.1; }

.res-page .res-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.res-page .res-entry {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem); gap: 0.5rem 2rem;
  grid-template-areas: "name kind" "desc links";
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 2rem);
  scroll-margin-top: 5.5rem;
}
.res-page .res-entry-name { grid-area: name; font-size: var(--step-2); color: var(--navy); margin: 0; line-height: 1.15; }
.res-page .res-entry-desc { grid-area: desc; }
.res-page .res-entry-desc p { max-width: 40rem; }
.res-page .res-entry-desc p:last-child { margin-bottom: 0; }
.res-page .res-entry-kind {
  grid-area: kind; align-self: center; justify-self: start; margin: 0;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
}
.res-page .res-entry-kind .res-ext { margin: 0; width: 13px; height: 13px; }

.res-page .res-links { grid-area: links; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; align-content: start; }
.res-page .res-link-item { display: grid; gap: 0.2rem; }
.res-page .res-link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-height: 48px; padding: 0.6rem 1rem; border: 2px solid var(--navy); border-radius: 10px;
  background: #FFFFFF; color: var(--navy); text-decoration: none;
  font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: 0.03em; line-height: 1.25;
  transition: background-color .2s, color .2s;
}
.res-page .res-link:hover { background: var(--navy); color: var(--on-navy); }
.res-page .res-link:hover .res-ext { stroke: var(--gold); }
.res-page .res-link:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 3px; }
.res-page .res-link-host { font-size: 0.85rem; color: var(--ink-muted); padding-left: 0.2rem; overflow-wrap: anywhere; }
.res-page .res-ext { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Tools on our website (internal links only) ---------- */
.res-page .res-tools-band { background: linear-gradient(180deg, var(--navy), var(--navy-deep)); color: var(--on-navy); scroll-margin-top: 4.5rem; }
.res-page .res-band-title { font-size: var(--step-3); color: var(--on-navy); margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.res-page .res-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.res-page .res-tool {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--navy-soft); border: 1px solid rgba(212, 167, 44, 0.35); border-top: 4px solid var(--gold); border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.res-page .res-tool-icon { width: 44px; height: 44px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.9rem; }
.res-page .res-tool-kicker { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.35rem; }
.res-page .res-tool-name { font-size: var(--step-2); color: var(--on-navy); margin: 0 0 0.6rem; }
.res-page .res-tool-desc { color: var(--on-navy-muted); margin: 0 0 1.5rem; flex: 1 1 auto; }
.res-page .res-btn-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.res-page .res-tools-band :focus-visible { outline-color: var(--gold); }

/* ---------- Not sure where to begin + About these links ---------- */
.res-page .res-close { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.res-page .res-close-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: stretch; }
.res-page .res-begin {
  background: #FFFFFF; border: 1px solid var(--rule); border-left: 6px solid var(--gold); border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 1.1rem; align-content: start;
}
.res-page .res-begin-icon { grid-row: 1 / span 2; width: 44px; height: 44px; fill: none; stroke: var(--gold-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.res-page .res-begin h2 { font-size: var(--step-2); color: var(--navy); margin: 0.2rem 0 0.5rem; }
.res-page .res-begin-body p:last-child { margin-bottom: 0; }
.res-page .res-begin-btn { grid-column: 2; justify-self: start; margin-top: 1.25rem; }
.res-page .res-about {
  background: var(--paper); border: 1px dashed var(--rule); border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 1rem; align-content: start;
}
.res-page .res-about-icon { grid-row: 1 / span 2; width: 32px; height: 32px; fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; }
.res-page .res-about h2 { font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: 0.25rem 0 0.5rem; }
.res-page .res-about-body p { color: var(--ink-muted); font-size: 0.98rem; }
.res-page .res-about-body p:last-child { margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .res-page .res-entry { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kind" "name" "desc" "links"; }
  .res-page .res-links { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin-top: 0.75rem; }
}
@media (max-width: 900px) {
  .res-page .res-layout { grid-template-columns: minmax(0, 1fr); }
  .res-page .res-toc { position: static; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 1rem 1.1rem 0.6rem; }
  .res-page .res-toc-list { border-left: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0 1rem; }
  .res-page .res-toc-list a { padding: 0.55rem 0; margin: 0; border-left: 0; border-top: 1px solid var(--rule); min-height: 44px; align-items: center; }
  .res-page .res-toc-list a:hover { border-left: 0; }
  .res-page .res-close-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .res-page .res-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .res-page .res-hero-art { display: none; }
  .res-page .res-tools { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .res-page .res-topic-head { gap: 0.7rem; }
  .res-page .res-begin { grid-template-columns: minmax(0, 1fr); }
  .res-page .res-begin-icon { grid-row: auto; width: 40px; height: 40px; }
  .res-page .res-begin-btn { grid-column: 1; justify-self: stretch; }
  .res-page .res-tool-btn { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .res-page .res-link { transition: none; }
}
@media print {
  .res-page .res-hero, .res-page .res-tools-band, .res-page .res-tool { background: #fff !important; color: #000 !important; border-color: #999 !important; }
  .res-page .res-hero h1, .res-page .res-intro-body p, .res-page .res-tool-name, .res-page .res-tool-desc, .res-page .res-band-title, .res-page .res-intro-title { color: #000 !important; }
  .res-page .res-hero-art, .res-page .res-toc { display: none; }
  .res-page .res-layout { grid-template-columns: 1fr; }
  .res-page .res-link::after { content: " (" attr(href) ")"; font-family: var(--font-body); font-size: 0.85rem; }
}