/* ============================================================
   guide.css — fresh design system, written from scratch.
   For the DC Education Pathways Guide.
   Pairs with sboe-tokens.css (brand colors + Poppins/Montserrat).
   Class prefix: .gd-*   No carryover from prior systems.
   ============================================================ */

/* -- BASE / PAGE FRAME ------------------------------------- */
html, body{ margin: 0; padding: 0; }
body{
  background: #2A4A6B;        /* calm flat wash so sheets pop */
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  padding: 28px 0;
}
@media print{
  body{ background: white; padding: 0; }
}

.gd-page{
  width: 8.5in;
  min-height: 11in;       /* grow taller when content demands it — never clip */
  margin: 0 auto 22px;
  background: white;
  position: relative;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .14);
  page-break-after: always;
  break-after: page;
  page-break-inside: avoid;
  break-inside: avoid;
}
@media print{
  .gd-page{ margin: 0; box-shadow: none; }
}

/* The reusable inner wrap most body pages use — proper margins. */
.gd-inset{
  position: relative;
  margin: .9in .7in .85in;   /* leaves room for running head (top) + running foot (bottom) */
  display: flex;
  flex-direction: column;
  min-height: calc(11in - 1.75in);
}

/* -- TYPOGRAPHY -------------------------------------------- */
.gd-page h1, .gd-page h2, .gd-page h3, .gd-page h4{
  font-family: 'Poppins', 'Helvetica Neue', sans-serif;
  font-weight: 800;
  color: var(--capitol-slate);
  letter-spacing: -.012em;
  margin: 0;
}
.gd-page p{ margin: 0 0 9pt; color: var(--body-text); }
.gd-page em{ font-style: italic; color: var(--dc-coral); }
.gd-page strong{ color: var(--capitol-slate); font-weight: 700; }
.gd-page a{ color: var(--ward-blue); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Eyebrow (small all-caps label above titles) */
.gd-eye{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 9pt;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ward-blue);
  display: inline-block;
  margin: 0 0 12pt;
}
.gd-eye::before{
  content: '';
  display: inline-block;
  width: 28px; height: 2px;
  background: var(--dc-coral);
  vertical-align: 4px;
  margin-right: 10px;
}

/* Page title */
.gd-title{
  font-size: 30pt;
  line-height: 1.04;
  max-width: 7in;
  margin: 0 0 14pt;
}
/* Page lede / subhead */
.gd-lede{
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5pt;
  line-height: 1.55;
  color: var(--capitol-slate);
  font-weight: 500;
  max-width: 6.2in;
  margin: 8pt 0 22pt;       /* extra breathing room above and below */
}
/* Section headings inside body */
.gd-h3{
  font-size: 11.5pt;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ward-blue);
  font-weight: 800;
  margin: 14pt 0 5pt;
  padding-bottom: 4pt;
  border-bottom: 1.5px solid var(--ward-blue);
}
/* Body prose */
.gd-prose{
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5pt;
  line-height: 1.55;
}
.gd-prose p{ margin: 0 0 8pt; }

/* -- RUNNING HEAD & FOOT ----------------------------------- */
.gd-rhead{
  position: absolute;
  top: .42in;
  left: .7in;
  right: .7in;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 8pt;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4pt;
  border-bottom: 1px solid var(--border);
}
.gd-rhead .l{ color: var(--ward-blue); font-weight: 700; }
.gd-rhead .r{ font-style: italic; letter-spacing: .04em; text-transform: none; color: var(--muted); }

.gd-rfoot{
  position: absolute;
  bottom: .42in;
  left: .7in;
  right: .7in;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 8pt;
  letter-spacing: .04em;
  color: var(--muted);
  pointer-events: none;          /* doesn't block content above */
}
.gd-rfoot > span:not(.pg){ display: none; }
.gd-rfoot .pg{
  font-weight: 800;
  font-size: 9pt;
  color: var(--capitol-slate);
  background: var(--coral-tint);
  padding: 3px 8px;
  border-radius: 2px;
}

/* ============================================================
   COVER
   ============================================================ */
.gd-cover{
  background:
    radial-gradient(60% 70% at 20% 0%, rgba(124,197,217,.20), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(212,115,108,.18), transparent 55%),
    linear-gradient(155deg, var(--capitol-slate) 0%, var(--ward-blue) 100%);
  color: white;
  padding: 0;
}
.gd-cover::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
  background-size: 16px 16px;
  opacity: .35;
  pointer-events: none;
}
.gd-cover-wrap{
  position: absolute;
  inset: 0;
  padding: .8in .9in 1in;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.gd-cover-mast{
  display: flex;
  align-items: center;
  gap: 14px;
}
.gd-cover-mast img{ height: 36px; }
.gd-cover-mast .mast-text{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 9.5pt;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.gd-cover-mast .mast-text small{
  display: block;
  font-size: 7.5pt;
  letter-spacing: .12em;
  margin-top: 3px;
  color: rgba(255,255,255,.85);
}

.gd-cover-spacer{ flex: 1; }

.gd-cover-tag{
  display: inline-block;
  background: var(--rising-teal);
  color: var(--capitol-slate);
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 9pt;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 7px 14px;
  margin-bottom: 22px;
  align-self: flex-start;
}
.gd-cover h1{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 68pt;
  line-height: .96;
  letter-spacing: -.03em;
  color: white;
  margin: 0 0 16px;
  max-width: 6.5in;
}
.gd-cover h1 em{
  color: var(--rising-teal);
  font-style: italic;
}
.gd-cover h1 .gd-period{ color: var(--dc-coral); }

.gd-cover-deck{
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5pt;
  line-height: 1.4;
  color: #FFFFFF;
  max-width: 5.4in;
  margin: 0 0 38px;
  font-weight: 500;
}

.gd-cover-foot{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(255,255,255,.24);
  padding-top: 18px;
}
.gd-cover-foot .cell{
  font-family: 'Poppins', sans-serif;
  font-size: 7.5pt;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.gd-cover-foot .cell strong{
  display: block;
  font-weight: 700;
  font-size: 10.5pt;
  letter-spacing: .04em;
  text-transform: none;
  color: white;
  margin-top: 4px;
}

/* ============================================================
   WELCOME / CONTENTS (P02)
   ============================================================ */
.gd-welcome-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 38px;
  flex: 1;
  align-content: start;
}
.gd-welcome-grid > div{ min-width: 0; }
.gd-welcome-grid h2{
  font-size: 26pt;
  line-height: 1.06;
  margin-bottom: 14pt;
}
.gd-welcome-grid .gd-prose p{ font-size: 10.3pt; }

.gd-toc{
  border-top: 2px solid var(--capitol-slate);
}
.gd-toc-row{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;     /* vertical center so the big numeral lines up with the multi-line name */
  padding: 10px 0 9px;
  border-bottom: 1px solid var(--border);
}
.gd-toc-row .n{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 18pt;
  color: var(--ward-blue);
  line-height: 1;
}
.gd-toc-row .name{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 11.5pt;
  color: var(--capitol-slate);
}
.gd-toc-row .name small{
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 8.5pt;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}
.gd-toc-row .pg{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 9.5pt;
  color: var(--ward-blue);
  letter-spacing: .08em;
}

/* ============================================================
   CHAPTER DIVIDER PAGE
   ============================================================ */
/* Section divider — light page, full-bleed coastal blue bar on the left
   edge, brand-colored typography. Designed as a clean chapter break, not
   a dark slab. */
.gd-page.gd-divider{
  background: #FFFFFF !important;
  color: var(--capitol-slate) !important;
  padding: 0;
}
.gd-divider::before{
  content: '';
  position: absolute;
  top: 0; left: 0;
  bottom: 0;
  width: .42in;
  background: linear-gradient(180deg, var(--ward-blue) 0%, var(--capitol-slate) 100%);
  z-index: 1;
}
.gd-divider::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(30, 48, 72, .08) 1px, transparent 0);
  background-size: 16px 16px;
  opacity: .5;
  pointer-events: none;
}
.gd-divider-wrap{
  position: absolute;
  inset: 0;
  padding: 1in .9in 1in 1.25in;   /* extra left to clear the colored bar */
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}
.gd-divider-tag{
  display: inline-block;
  align-self: flex-start;
  background: var(--capitol-slate);
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 14pt;
  letter-spacing: .22em;
  padding: 10px 22px;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.gd-divider h2{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 56pt;
  line-height: 1.0;
  letter-spacing: -.025em;
  color: var(--capitol-slate) !important;
  margin: 0 0 22pt;
  max-width: 6.4in;
}
.gd-divider h2 em{ color: var(--dc-coral) !important; font-style: italic; }
.gd-divider-deck{
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5pt;
  line-height: 1.55;
  color: var(--body-text) !important;
  max-width: 5.6in;
  margin: 0 0 26pt;
  font-weight: 500;
}
.gd-divider-bullets{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  max-width: 6in;
}
.gd-divider-bullets div{
  font-family: 'Montserrat', sans-serif;
  font-size: 10pt;
  line-height: 1.45;
  color: var(--capitol-slate) !important;
  padding-top: 10px;
  border-top: 2px solid var(--border);
}
.gd-divider-bullets div b{
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 9pt;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ward-blue);
  margin-bottom: 4px;
}

/* ============================================================
   BODY PAGE LAYOUTS
   Each page type chooses its own structure; classes below are
   composable, not a single template.
   ============================================================ */

/* Two-column reading layout, balanced */
.gd-two{
  column-count: 2;
  column-gap: 26px;
  column-fill: balance;
  flex: 1;
  min-height: 0;
}
.gd-two > *{ break-inside: avoid-column; }
.gd-two h3, .gd-two h4{ break-after: avoid; }

/* Full-width block that should escape a column */
.gd-span{ column-span: all; margin: 12pt 0; }

/* Stat row, 4 columns by default */
.gd-stats{
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 14px;
  margin: 8pt 0 12pt;
}
.gd-stat{
  border-top: 3px solid var(--ward-blue);
  padding: 8px 0 0;
}
.gd-stat .num{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 32pt;
  line-height: .95;
  color: var(--capitol-slate);
  letter-spacing: -.02em;
}
.gd-stat .num small{
  font-size: 14pt;
  color: var(--ward-blue);
  margin-left: 1px;
  font-weight: 700;
}
.gd-stat .lab{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ward-blue);
  margin: 6pt 0 3pt;
}
.gd-stat .desc{
  font-family: 'Montserrat', sans-serif;
  font-size: 8.8pt;
  line-height: 1.4;
  color: var(--body-text);
}

/* Pull-out aside, magazine-style. No left-rail tip-box look. */
.gd-aside{
  position: relative;
  break-inside: avoid;
  margin: 10pt 0 0;
  padding: 14px 18px 13px;
  background: white;
  box-shadow: 0 1px 0 var(--border), 0 14px 26px -18px rgba(15,23,42,.32);
  border-radius: 2px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10pt;
  line-height: 1.5;
  color: var(--capitol-slate);
}
.gd-aside::before{
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 4px;
  background: var(--ward-blue);
}
.gd-aside .lab{
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 8.5pt;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ward-blue);
  margin: 0 0 6pt;
}
.gd-aside.coral{ background: linear-gradient(180deg, #FFFCFB 0%, var(--coral-tint) 100%); }
.gd-aside.coral::before{ background: var(--dc-coral); }
.gd-aside.coral .lab{ color: var(--dc-coral); }
.gd-aside.teal{ background: linear-gradient(180deg, #F7FCFE 0%, var(--rising-tint) 100%); }
.gd-aside.teal::before{ background: var(--rising-teal); }
.gd-aside.teal .lab{ color: #1F8BAA; }

/* Comparison table: two or three column heads, tight rows */
.gd-cmp{
  display: grid;
  grid-template-columns: 1.2fr repeat(var(--cmp, 2), 1fr);
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5pt;
  margin: 12pt 0;
  break-inside: avoid;
}
.gd-cmp > div{
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--body-text);
  line-height: 1.35;
}
.gd-cmp .gd-cmp-head{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: white;
  background: var(--capitol-slate);
  border-bottom-color: var(--capitol-slate);
}
.gd-cmp .gd-cmp-row{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 10pt;
  color: var(--capitol-slate);
  background: var(--ward-tint);
}
.gd-cmp .gd-cmp-cell strong{ color: var(--capitol-slate); }

/* Figure block (SVG + caption) */
.gd-fig{
  margin: 8pt 0 12pt;
  break-inside: avoid;
}
.gd-fig svg{
  display: block;
  width: 100%;
  height: auto;
  background: #FBFCFD;
  border-radius: 2px;
}
.gd-fig .cap{
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5pt;
  line-height: 1.4;
  color: var(--muted);
  padding-top: 4pt;
  margin-top: 4pt;
  border-top: 1px solid var(--border);
}
.gd-fig .cap b{
  color: var(--ward-blue);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  margin-right: 4px;
}

/* Bullet list */
.gd-page ul.gd-list,
.gd-page ol.gd-list{
  margin: 4pt 0 10pt;
  padding-left: 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10pt;
  line-height: 1.55;
}
.gd-page ul.gd-list li::marker{ color: var(--ward-blue); }
.gd-page ol.gd-list li::marker{ color: var(--ward-blue); font-weight: 800; }
.gd-page ul.gd-list li,
.gd-page ol.gd-list li{ margin: 0 0 4pt; color: var(--body-text); }

/* Step rows (numbered, tall) for processes like IEP, FAFSA */
.gd-steps{
  display: grid;
  gap: 5px;
  margin: 4pt 0 6pt;
}
.gd-step{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}
.gd-step .n{
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ward-blue);
  color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 10pt;
  display: grid;
  place-items: center;
}
.gd-step .body{
  font-family: 'Montserrat', sans-serif;
  font-size: 9.3pt;
  line-height: 1.4;
  color: var(--body-text);
  padding-top: 1px;
}
.gd-step .body b{
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 10.5pt;
  color: var(--capitol-slate);
  margin-bottom: 3px;
}

/* Closing call-out hero (last page) */
/* Closing page — light page with brand-color text. White-on-coral was
   getting overridden by templates.css, leaving white text invisible on
   a white background. Flipping to a light cream sheet with capitol-slate
   text and coral accents reads clearly regardless of cascade. */
.gd-page.gd-closing{
  background: linear-gradient(180deg, #FFFCFB 0%, var(--coral-tint) 100%) !important;
  color: var(--capitol-slate) !important;
  padding: 0;
}
.gd-closing::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
  background-size: 16px 16px;
  opacity: .35;
}
.gd-closing-wrap{
  position: absolute;
  inset: 0;
  padding: 1in .9in;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.gd-page.gd-closing h2{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 46pt;
  line-height: 1.02;
  color: var(--capitol-slate) !important;
  letter-spacing: -.02em;
  margin: 0 0 16pt;
}
.gd-closing h2 em{ color: var(--dc-coral) !important; font-style: italic; }
.gd-closing-deck{
  font-family: 'Montserrat', sans-serif;
  font-size: 13pt;
  line-height: 1.5;
  color: var(--body-text) !important;
  max-width: 5.6in;
  margin: 0 0 24pt;
  font-weight: 500;
}
.gd-closing-dir{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
}
.gd-closing-dir > div{
  border-top: 2px solid var(--dc-coral);
  padding-top: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5pt;
  line-height: 1.5;
  color: var(--body-text) !important;
}
.gd-closing-dir > div b{
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 8.5pt;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ward-blue) !important;
  margin-bottom: 3px;
}
.gd-closing-dir > div a{ color: var(--ward-blue); border-bottom-color: rgba(61,107,138,.4); }

/* Print: don't strip backgrounds and colors from any page (cover, closing,
   asides). Chromium/Safari respect print-color-adjust; older Chrome still
   needs the prefixed -webkit-* variant. */
@media print{
  .gd-page, .page, .t-cover, .gd-cover, .gd-closing, .gd-aside, .gd-divider, .gd-stat{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Hide the reader toolbar in print so PDFs export cleanly. */
@media print{
  .sboe-reader, .toolbar{ display: none !important; }
}

/* ============================================================
   Cover overrides — clean off the legacy "double line"
   and add a .t-cover-plain modifier that strips decorative
   elements (★★★ stars + rainbow gradient bar) from every
   supplemental doc cover so it reads as a solid brand wash.
   ============================================================ */
.t-cover .cover-volume::before{
  background: var(--dc-coral) !important;
  height: 1.5px !important;
  border-radius: 0 !important;
  opacity: .9;
}
.t-cover .cover-volume{
  border-top: 0 !important;
}

/* Supplemental docs — no photo, no stars, no decorative bar.
   The Pathways Guide and the At-A-Glance handout keep the full
   treatment; every other doc carries .t-cover-plain on its cover. */
.t-cover.t-cover-plain{
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(124,197,217,.18) 0%, transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(212,115,108,.18) 0%, transparent 55%),
    linear-gradient(155deg, var(--capitol-slate) 0%, #234A78 50%, var(--ward-blue) 100%) !important;
}
.t-cover.t-cover-plain::after{
  /* Soft brand-dot texture instead of the photo. */
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0) !important;
  background-size: 16px 16px !important;
  opacity: .5 !important;
  pointer-events: none !important;
}
.t-cover.t-cover-plain .cover-volume::before{ display: none !important; }
.t-cover.t-cover-plain .cover-volume{
  border-top: 1px solid rgba(255,255,255,.22) !important;
  padding-top: 18px !important;
}
.t-cover.t-cover-plain .cover-volume .cv-cell:first-child::before{ display: none !important; }