/* Coaching Reviews: the same layout as the source site, in a light theme with an education blue accent.
   Every colour in the source stylesheet comes from these tokens, so changing them re-themes every page. */
:root, :host {
  --color-page: #f6f9fe;
  --color-surface: #ffffff;
  --color-surface-2: #eaf2fd;
  --color-line: #dbe5f2;
  --color-line-strong: #bfd0e8;
  --color-text: #0e1f3a;
  --color-muted: #50627c;
  --color-accent: #1a66d1;
  --color-accent-hover: #1557b5;
  --color-accent-soft: #1a66d11f;
  --color-on-accent: #ffffff;
  --color-good: #0d8a6a;
  --color-good-soft: #0d8a6a1f;
  color-scheme: light;
}

/* ---- Layout polish (owner, 2026-11-12: "layout better") ---- */

/* Headings: sentence case and one weight lighter, so pages read calmer; the hero keeps its poster style. */
:is(h2, h3).font-display.uppercase { text-transform: none; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
h1.font-display.uppercase:not(.sm\:text-\[64px\]) { text-transform: none; font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
.eyebrow { letter-spacing: .12em; font-weight: 700; }


/* Cards: soft blue-tinted depth and a gentle lift on hover. */
main :is(article, a, div).rounded-2xl.border.border-line.bg-surface {
  box-shadow: 0 1px 2px rgba(14, 31, 58, .04), 0 8px 24px -16px rgba(26, 102, 209, .18);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
main :is(article, a).rounded-2xl.border.border-line.bg-surface:hover {
  box-shadow: 0 2px 4px rgba(14, 31, 58, .05), 0 16px 32px -18px rgba(26, 102, 209, .35);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  main :is(article, a).rounded-2xl.border.border-line.bg-surface:hover { transform: none; }
}

/* Easier reading for long text. */
main p { line-height: 1.7; }
main .prose, main article :is(p, li) { font-size: 1.02em; }

/* Tables: zebra rows and a tinted header. */
main table thead tr, main table tr:first-child th { background: var(--color-surface-2); }
main table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-surface-2) 45%, transparent); }

/* College logos without an image show their alt text: keep it tidy. */
main img[alt$=" logo"] { font-size: 10px; color: var(--color-muted); overflow: hidden; }

/* Focus is always visible. */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 6px; }

/* ---- Site header (owner, 2026-11-12: clean menu on phone and laptop) ---- */
.crh { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--color-line); }
.crh-bar { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 68px; display: flex; align-items: center; gap: 28px; }
.crh-logo { flex: none; text-decoration: none; }
.crh-logo > span { font-size: 22px !important; }
.crh-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.crh-item { position: static; }
.crh-top { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none;
  font: 600 15px/1 inherit; font-family: inherit; color: var(--color-text); text-decoration: none; cursor: pointer; white-space: nowrap; }
.crh-top svg { width: 11px; height: 11px; color: var(--color-muted); transition: transform .2s ease; }
.crh-top:hover, .crh-top[aria-expanded="true"] { background: var(--color-surface-2); color: var(--color-accent); }
.crh-top[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--color-accent); }
.crh-only-m { display: none; }
.crh-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.crh-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-muted); cursor: pointer; }
.crh-icon:hover { color: var(--color-accent); border-color: var(--color-accent); }
.crh-icon svg { width: 18px; height: 18px; }
.crh-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px; background: var(--color-accent);
  color: var(--color-on-accent); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.crh-cta:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.crh-burger { display: none; flex-direction: column; gap: 4px; }
.crh-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }

/* Dropdown panels (desktop): full width under the bar, content centred. */
.crh-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface); border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line); box-shadow: 0 28px 48px -28px rgba(14, 31, 58, .35); }
.crh-panel[hidden] { display: none; }
.crh-panel-in { max-width: 1200px; margin: 0 auto; padding: 24px 20px 28px; }
.crh-grid, .crh-pane { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 28px; }
.crh-mega { display: grid; grid-template-columns: 200px 1fr; gap: 28px; }
.crh-tabs { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--color-line); padding-right: 16px; }
.crh-tabs button { text-align: left; padding: 10px 14px; border: 0; border-radius: 10px; background: none; font: 600 15px/1.2 inherit;
  font-family: inherit; color: var(--color-text); cursor: pointer; }
.crh-tabs button:hover { background: var(--color-surface-2); }
.crh-tabs button[aria-selected="true"] { background: var(--color-accent-soft); color: var(--color-accent); }
.crh-pane[hidden] { display: none; }
.crh-pane-title { display: none; }
.crh-h { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.crh-col ul { list-style: none; margin: 0 0 10px; padding: 0; }
.crh-col a { display: block; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; color: var(--color-text); font-size: 14px; text-decoration: none; }
.crh-col a:hover { background: var(--color-surface-2); color: var(--color-accent); }

/* Laptop widths: tighter. */
@media (max-width: 1180px) {
  .crh-bar { gap: 16px; }
  .crh-top { padding: 0 9px; font-size: 14px; }
}

/* Phone and small tablet: menu button and a slide-down panel with tap-to-open sections. */
@media (max-width: 960px) {
  .crh-bar { height: 60px; gap: 10px; }
  .crh-logo > span { font-size: 19px !important; }
  .crh-cta { display: none; }
  .crh-burger { display: inline-flex; }
  .crh-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100dvh - 60px); overflow-y: auto; background: var(--color-surface); border-bottom: 1px solid var(--color-line);
    box-shadow: 0 24px 40px -24px rgba(14, 31, 58, .35); padding: 8px 16px 20px; }
  .crh.is-open .crh-nav { display: flex; }
  .crh.is-open .crh-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .crh.is-open .crh-burger span:nth-child(2) { opacity: 0; }
  .crh.is-open .crh-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .crh-only-m { display: block; }
  .crh-item { border-bottom: 1px solid var(--color-line); }
  .crh-top { width: 100%; height: 52px; padding: 0 4px; justify-content: space-between; font-size: 16px; border-radius: 0; }
  .crh-top:hover, .crh-top[aria-expanded="true"] { background: none; }
  .crh-panel { position: static; border: 0; box-shadow: none; background: none; }
  .crh-panel-in { padding: 0 4px 14px; }
  .crh-mega { display: block; }
  .crh-tabs { display: none; }
  .crh-pane, .crh-pane[hidden] { display: block; }
  .crh-pane-title { display: block; margin: 10px 0 4px; font-weight: 800; font-size: 15px; color: var(--color-text); }
  .crh-grid, .crh-pane { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .crh-pane { display: grid; }
  .crh-pane .crh-pane-title { grid-column: 1 / -1; }
  .crh-col a { padding: 8px; font-size: 14px; }
}
@media (max-width: 420px) {
  .crh-grid, .crh-pane { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .crh-top svg, .crh-burger span { transition: none; }
}

/* Links to pages that aren't released yet (pending.py parks them): text stays, nothing to click. */
a[data-pending] { cursor: default; }
a[data-pending]:hover { color: inherit; }
a[data-pending].rounded-full, a[data-pending][class*="min-h-"] { opacity: .45; pointer-events: none; }

/* Hard-coded colours from the source's dark theme, re-pointed at the light tokens. */
.rich { color: var(--color-text); }
.rich a { color: var(--color-accent); }
.text-text\/50 { color: color-mix(in oklab, var(--color-text) 50%, transparent); }
.text-text\/60 { color: color-mix(in oklab, var(--color-text) 60%, transparent); }
.text-text\/70 { color: color-mix(in oklab, var(--color-text) 70%, transparent); }
.text-muted\/70 { color: color-mix(in oklab, var(--color-muted) 85%, transparent); }
.placeholder\:text-muted\/70::placeholder, .placeholder\:text-muted\/80::placeholder { color: color-mix(in oklab, var(--color-muted) 80%, transparent); }
.bg-text\/15 { background-color: color-mix(in oklab, var(--color-text) 8%, transparent); }
.bg-text\/25 { background-color: color-mix(in oklab, var(--color-text) 12%, transparent); }
.grid-bg { background-image: linear-gradient(#1a66d10d 1px, #0000 1px), linear-gradient(90deg, #1a66d10d 1px, #0000 1px); }