/* CampusWorth approved navy / gold / teal identity, 2026-09-30. */
:root {
  --background: #f8f6ef;
  --foreground: #102a43;
  --primary: #062a4c;
  --primary-foreground: #fffaf0;
  --secondary: #e6f1ef;
  --secondary-foreground: #0c3650;
  --muted: #edf2ef;
  --muted-foreground: #526b76;
  --accent: #e7ba59;
  --accent-foreground: #061d37;
  --border: #cedbd8;
  --ring: #08777c;
  --bg: #f8f6ef;
  --ink: #102a43;
  --teal: #08777c;
  --gold: #e7ba59;
  --soft: #e6f1ef;
  --line: #cedbd8;
}
body { background: #f8f6ef; }

/* Both the Next export and the editorial pages use the same approved mark. */
header.sticky, .site-header {
  background: linear-gradient(105deg, #031a32 0%, #082f52 72%, #063e52 100%) !important;
  border-bottom: 1px solid rgba(231,186,89,.48) !important;
}
header.sticky a[aria-label="CampusWorth home"],
.site-header .brand { color: #fffaf0 !important; }
header.sticky a[aria-label="CampusWorth home"] > span > span:first-child {
  display: inline-block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  background: #041a32 url('/brand/campusworth-approved-mark.png') center / cover no-repeat;
  border-radius: 9px;
}
header.sticky a[aria-label="CampusWorth home"] > span > span:first-child svg { display: none; }
header.sticky a[aria-label="CampusWorth home"] span[class*="text-[#17776f]"] { color: #e7ba59 !important; }
header.sticky a[aria-label="CampusWorth home"] span[class*="text-muted-foreground"] { color: #c5d8dc !important; }
/* Desktop links sit on navy. The direct-child mobile menu sits on paper and
   needs its own dark link color. */
header.sticky > div nav a,
header.sticky button[aria-label="Open navigation"] { color: #f5f7f4 !important; }
header.sticky > div nav a:hover { color: #e7ba59 !important; }
header.sticky > nav a { color: #102a43 !important; }
header.sticky > nav a:hover { color: #08777c !important; }
header.sticky > nav a[class*="bg-primary"] { color: #fffaf0 !important; }
header.sticky a[href="/colleges/"][data-slot="button"] {
  background: #e7ba59 !important;
  color: #061d37 !important;
  border-color: #e7ba59 !important;
  font-weight: 750;
}
.site-header .brand-mark { display: none; }
.site-header .brand::before {
  content: "";
  display: inline-block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 9px;
  background: #041a32 url('/brand/campusworth-approved-mark.png') center / cover no-repeat;
}
.site-header .brand strong { color: #fffaf0; }
.site-header .brand strong span { color: #e7ba59; }
.site-header .brand small { color: #c5d8dc; }
.site-header nav a { color: #f5f7f4; }
.site-header nav a:hover { color: #e7ba59; }
.site-header nav a[aria-current="page"] { color: #e7ba59; }
.site-header .header-cta, .site-header .button { background: #e7ba59; color: #061d37; }

/* The main discovery surface adopts the campaign's midnight palette. */
main:has(form[aria-label="Search colleges"]) > section:first-child {
  background: radial-gradient(circle at 78% 12%, #0d5067 0%, transparent 39%),
              linear-gradient(120deg, #031a32 0%, #062a4c 65%, #082b49 100%) !important;
  border-bottom: 3px solid #e7ba59;
}
main:has(form[aria-label="Search colleges"]) > section:first-child h1 { color: #fffaf0; }
main:has(form[aria-label="Search colleges"]) > section:first-child .eyebrow { color: #e7ba59; }
main:has(form[aria-label="Search colleges"]) > section:first-child h1 + p { color: #dce8eb !important; }
main:has(form[aria-label="Search colleges"]) > section:first-child ul { color: #dce8eb !important; }
main:has(form[aria-label="Search colleges"]) > section:first-child ul svg { color: #72cbc5 !important; }
main:has(form[aria-label="Search colleges"]) > section:first-child img[src="/images/college-campus-hero.webp"] {
  border-radius: 20px;
  box-shadow: 0 28px 72px rgba(0,0,0,.35), 0 0 0 3px rgba(231,186,89,.65);
}
main:has(form[aria-label="Search colleges"]) > section:first-child form {
  box-shadow: 0 25px 70px rgba(0,0,0,.3);
}

.hub-hero, .article-hero, .hero:has(.hero-note) {
  background: radial-gradient(circle at 88% 8%, #0d5067 0%, transparent 40%),
              linear-gradient(120deg, #031a32, #082e50) !important;
  border-bottom: 2px solid #e7ba59;
}
.hub-hero h1, .article-hero h1, .hero:has(.hero-note) h1,
.hub-hero .eyebrow, .article-hero .eyebrow, .hero:has(.hero-note) .eyebrow { color: #fffaf0 !important; }
.hub-hero p, .article-hero .dek, .hero:has(.hero-note) .lede,
.article-hero .breadcrumbs, .hero:has(.hero-note) .breadcrumbs { color: #dce8eb !important; }
.hub-hero .eyebrow, .article-hero .eyebrow, .hero:has(.hero-note) .eyebrow { color: #e7ba59 !important; }
.hero:has(.hero-note) em { color: #e7ba59; }
.button.primary { background: #e7ba59; color: #061d37; }
.button.primary:hover { background: #f1cb77; color: #061d37; }

/* Editorial pages use --muted for text while the Next app uses it for a pale
   surface. Restore the editorial text token anywhere the editorial header is
   present, then retain the decision workspace's full local palette. */
body:has(.site-header) { --muted: #526b76; }
body:has(.hero-note) {
  --ink: #102a43;
  --deep: #062a4c;
  --teal: #08777c;
  --mint: #e6f1ef;
  --gold: #e7ba59;
  --paper: #f8f6ef;
  --line: #cedbd8;
  --muted: #526b76;
}

/* Section order is already clear from the page flow; remove decorative labels. */
body:has(.hero-note) .section-head .eyebrow { display: none; }
body:has(.hero-note) .section-head h2 { margin-top: 0; }

/* Replace the remaining legacy W marks in the shared and editorial footers. */
footer a[aria-label="CampusWorth home"] > span > span:first-child {
  display: inline-block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  background: #041a32 url('/brand/campusworth-approved-mark.png') center / cover no-repeat;
  border-radius: 9px;
}
footer a[aria-label="CampusWorth home"] > span > span:first-child svg { display: none; }
footer a[aria-label="CampusWorth home"] span[class*="text-[#17776f]"] { color: #b78316 !important; }

footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
footer .brand::before {
  content: "";
  display: inline-block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 9px;
  background: #041a32 url('/brand/campusworth-approved-mark.png') center / cover no-repeat;
}

/* Newsletter signup card mark. */
main div:has(> form.newsletter-form) > div:first-child > span:first-child {
  background: #041a32 url('/brand/campusworth-approved-mark.png') center / cover no-repeat;
  border-radius: 9px;
}
main div:has(> form.newsletter-form) > div:first-child > span:first-child svg { display: none; }

@media (max-width: 850px) {
  .site-header .header-inner {
    flex-wrap: wrap;
    gap: 10px 18px;
    padding-block: 11px;
  }
  .site-header nav {
    order: 3;
    width: 100%;
    gap: 19px;
    overflow-x: auto;
    padding: 4px 0 2px;
    scrollbar-width: none;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { flex: 0 0 auto; white-space: nowrap; }
  .site-header .header-cta { display: none; }
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #0a9da0;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
