/* =========================================================
   CollegeHound marketing — shared chrome
   =========================================================

   The header, footer, announcement band, buttons, links and layout
   container, plus the design tokens they all read from. Extracted from
   homepage.css so the blog can wear the same chrome without inheriting the
   homepage's global reset, which would strip the bullets off every list in
   a 144-post corpus (`ul, ol { list-style: none }`).

   Loaded by: the homepage (before homepage.css) and every blog template.

   NOT build output. Like marketing.css and homepage.css it needs BOTH a
   .gitignore negation AND a .dockerignore whitelist, or `COPY priv priv`
   drops it and the page ships unstyled with every local check passing.
   That happened on 2026-09-09; see the note in .dockerignore.

   The :root block below is currently duplicated in homepage.css. That is
   deliberate and temporary: removing it there would collide with the
   in-flight wrap-fix PR. Delete the homepage.css copy once both have
   landed — the values must not be allowed to drift apart.
   ========================================================= */

:root {
  /* Palette (brand) */
  --ch-cream: #FBF9F1;
  --ch-navy: #0C1E78;
  --ch-slate: #363854;
  --ch-gray: #6E746A;          /* AA-corrected; palette #8A9085 fails at 13px */
  --ch-beige: #E4E2D3;
  --ch-band: #EFEDE3;          /* derived */
  --ch-royal: #2245B3;
  --ch-royal-hover: #1C3A99;
  --ch-royal-active: #172F82;
  --ch-navy-hover: #0A1860;
  --ch-gold: #FAE291;
  --ch-terracotta: #AA5F38;
  --ch-forest: #265632;
  --ch-tan: #C0B194;
  --ch-brown: #4A3A20;
  --ch-lavender: #9A8CAE;      /* AA-corrected; palette #9789AC fails on navy */
  --ch-on-navy-soft: #C9CDE6;  /* derived */
  --ch-green-light: #86E16E;
  --ch-white: #FFFFFF;
  --ch-cream-active: #EFEDE3;

  /* Chip tints (derived) */
  --chip-reach-bg: #F6E6DD;
  --chip-safety-bg: #E3F4D9;
  --chip-neutral-bg: #F1EFE8;
  --card-divider: #F0EDE4;
  --card-header-divider: #EEEBE2;

  /* Shape */
  --radius-card: 16px;
  --radius-card-lg: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 50px rgba(12, 30, 120, 0.08);
  --shadow-card-sm: 0 10px 30px rgba(12, 30, 120, 0.06);

  /* Type */
  --font-display: "Montserrat", Arial, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(42px, 4.3vw, 62px);
  --fs-h2: clamp(30px, 2.8vw, 40px);
  --fs-h3-diff: clamp(26px, 2vw, 28px);
  --fs-sub: clamp(19px, 1.5vw, 22px);
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-body: 17px;
  --fs-small: 13px;
  --fs-eyebrow: clamp(11px, 0.85vw, 12px);

  /* Spacing */
  --gutter: 24px;
  --section-y: 56px;
  --content-max: 1200px;
  --measure: 60ch;

  --transition: 120ms ease;
}

@media (min-width: 1024px) {
  :root { --gutter: 64px; --section-y: 96px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --gutter: 40px; --section-y: 72px; }
}

/* ---------- Chrome-scoped base ----------
   Deliberately NOT the homepage's global reset. Only what the chrome itself
   needs, scoped to the chrome, so nothing here can reach page content. */
.site-header, .site-header *, .band, .band *, .site-footer, .site-footer * { box-sizing: border-box; }
.site-header svg, .site-footer svg { max-width: 100%; display: block; }
.site-header p, .site-header ul, .band p, .site-footer p { margin: 0; }
.site-header ul, .site-nav { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--ch-royal); outline-offset: 3px; border-radius: 2px; }
.on-navy :focus-visible { outline-color: var(--ch-cream); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--ch-navy); color: var(--ch-cream); padding: 10px 14px; border-radius: 6px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons & links (§3) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1;
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
@media (min-width: 1024px) { .btn { min-height: 54px; } }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--transition); }
.btn:hover svg { transform: translateX(2px); }

.btn-primary { background: var(--ch-royal); color: var(--ch-white); }
.btn-primary:hover { background: var(--ch-royal-hover); color: var(--ch-white); }
.btn-primary:active { background: var(--ch-royal-active); }

.btn-inverted { background: var(--ch-cream); color: var(--ch-navy); }
.btn-inverted:hover { background: var(--ch-white); color: var(--ch-navy); }
.btn-inverted:active { background: var(--ch-cream-active); }

.btn-header {
  min-height: 44px; padding: 0 20px; font-size: 15px;
  background: var(--ch-navy); color: var(--ch-cream);
}
.btn-header:hover { background: var(--ch-royal); color: var(--ch-cream); }
.btn-header:active { background: var(--ch-navy-hover); }

.btn-block { width: 100%; }

/* In-article CTA. The homepage's .btn is a single-line pill: `white-space:
   nowrap`, no vertical padding, height held by min-height. Blog CTA labels run
   to 40 characters ("Create a free account - no credit card"), which at 16px
   would push past a 320px viewport and overflow the page. This variant lets the
   label wrap and pays for the wrap with real vertical padding. */
.btn-article {
  white-space: normal;
  max-width: 100%;
  text-align: center;
  padding: 14px 26px;
  line-height: 1.3;
  margin: 8px 0;
}

.btn-sm { min-height: 48px; font-size: 15px; padding: 0 22px; }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ch-royal); font-weight: 700; text-decoration: none;
  min-height: 44px; /* hit target */
}
.link svg { width: 16px; height: 16px; flex: none; transition: transform var(--transition); }
.link:hover { color: var(--ch-royal); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.link:hover svg { transform: translateX(2px); }
.link:active { color: var(--ch-navy); }
.link-inline { min-height: 0; }

.prose a { color: var(--ch-navy); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--ch-royal); }

@media (prefers-reduced-motion: reduce) {
  .btn, .link, .btn svg, .link svg { transition: none; }
  .btn:hover svg, .link:hover svg { transform: none; }
}

/* ---------- Layout primitives ---------- */
.container { max-width: var(--content-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); border-top: 1px solid var(--ch-beige); }
.section-head { display: flex; flex-direction: column; gap: 14px; }
.section-head + * { margin-top: 28px; }
@media (min-width: 1024px) { .section-head + * { margin-top: 36px; } }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
}
.stack { display: flex; flex-direction: column; }
.stack-4 { gap: 4px; } .stack-6 { gap: 6px; } .stack-8 { gap: 8px; } .stack-10 { gap: 10px; } .stack-14 { gap: 14px; }
.cell { max-width: 52ch; }

/* ---------- Announcement band (block 0) ---------- */
.band {
  background: var(--ch-band); color: var(--ch-navy);
  font-size: var(--fs-small); line-height: 1.4; text-align: center;
  padding: 9px 20px;
}
.band-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; }
.band .link { min-height: 44px; padding: 0 4px; margin: -13px 0; white-space: nowrap; }

/* ---------- Header (block 1) ---------- */
.site-header { border-bottom: 1px solid var(--ch-beige); background: var(--ch-cream); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 12px; min-width: 0; }
.site-header .wordmark { flex: none; }
.site-nav { flex: none; }
@media (max-width: 359px) { .wordmark span { display: none; } .btn-header { padding: 0 14px; } }
@media (min-width: 1024px) { .site-header .container { padding-top: 20px; padding-bottom: 20px; } }
.wordmark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ch-navy); min-height: 44px; }
.wordmark img { width: 30px; height: 30px; }
/* Real dog mark: viewBox 81x76, so fix the height and let the width follow. */
.wordmark svg { height: 30px; width: auto; color: var(--ch-navy); }
.wordmark span { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
@media (min-width: 1024px) { .wordmark span { font-size: 20px; } }
.site-nav { display: flex; align-items: center; gap: 14px; }
.site-nav a:not(.btn) { color: var(--ch-slate); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.site-nav a:not(.btn):hover { color: var(--ch-navy); }
.site-nav a[aria-current="page"] { color: var(--ch-navy); font-weight: 700; }
.site-nav a.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .site-nav { gap: 32px; }
  .site-nav a:not(.btn) { font-size: 15px; }
  .site-nav a.nav-desktop { display: inline-flex; }
}

/* ---------- Footer (unchanged this pass) ----------
   The live footer markup is kept verbatim from the previous template, so it
   carries Tailwind classes rather than .site-footer and the rules below do
   not reach it. This one rule does: it gives those links the same 44px hit
   target the rest of the page has, and the negative margin cancels the
   padding so the footer's spacing is unchanged. */
footer .max-w-4xl a { display: inline-block; padding: 12px 4px; margin: -12px 0; }

/* ---------- Footer (unchanged this pass) ---------- */
.site-footer { padding: 32px var(--gutter); text-align: center; font-size: 14px; color: var(--ch-gray); }
.site-footer p { margin: 0 0 6px; max-width: none; }
.site-footer a { color: var(--ch-navy); display: inline-block; padding: 12px 4px; margin: -12px 0; }