/* ════════════════════════════════════════════════════════════════════
   UNICOMPASS — THEME LAYER v21  (uc-theme.css)
   Loaded LAST on every public page (after elite.css + header styles).

   Goals
   • Every text/background pair meets WCAG AA (4.5:1 body, 3:1 large text)
   • One typeface (Manrope), one navy + gold palette, calmer spacing
   • No more blanket [style*=…] recolouring — colours come from tokens

   How the contrast reset works
   Older stylesheets set `-webkit-text-fill-color` with !important on
   hundreds of selectors. That property paints text *instead of* `color`,
   so inline colours and later fixes were silently ignored. Important
   declarations inside a cascade layer outrank all un-layered important
   declarations, so the single rule below makes `color` the one source
   of truth again — without touching the legacy files line by line.
   The contrast-critical rules live in @layer uc-fix for the same reason:
   they must win over legacy `!important` rules of any specificity.
   ════════════════════════════════════════════════════════════════════ */

/* Layer order: for !important declarations the FIRST layer wins, and every
   layered !important beats every un-layered !important in the legacy files. */
@layer uc-reset, uc-fix;

@layer uc-reset {
  *, *::before, *::after { -webkit-text-fill-color: currentColor !important; }
}

/* ─── 1. DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  --uc-navy-950: #071427;
  --uc-navy-900: #0A1D35;
  --uc-navy-800: #0C2340;
  --uc-navy:     #0F2A5C;
  --uc-navy-600: #1E3A7A;
  --uc-navy-100: #E8EEFA;
  --uc-navy-50:  #F3F6FC;

  --uc-gold:     #F0C040;   /* fills & text on dark */
  --uc-gold-500: #E5B22E;
  --uc-gold-600: #C99A1E;   /* borders / decorative only */
  --uc-gold-100: #FDF3D7;
  --uc-amber-ink:#8A4B08;   /* gold-family TEXT on light (7.0:1 on white) */
  --uc-amber-text:#A15C07;  /* accent text on white (5.2:1) */

  --uc-ink:      #0F172A;
  --uc-text:     #1E293B;
  --uc-text-2:   #334155;
  --uc-muted:    #475569;   /* 7.6:1 on white */
  --uc-subtle:   #5B6474;   /* 6.0:1 on white — the lightest grey allowed for text */
  --uc-line:     #E2E8F0;
  --uc-line-2:   #CBD5E1;
  --uc-bg:       #F5F7FB;

  --uc-green-ink:#047857;
  --uc-green-bg: #ECFDF5;
  --uc-blue-ink: #1D4ED8;
  --uc-blue-bg:  #EFF6FF;
  --uc-red-ink:  #B91C1C;
  --uc-red-bg:   #FEF2F2;
  --uc-purple-ink:#6D28D9;
  --uc-purple-bg:#F5F3FF;

  --uc-on-dark:   #FFFFFF;
  --uc-on-dark-2: rgba(255,255,255,.86);
  --uc-on-dark-3: rgba(255,255,255,.72);   /* minimum for text on navy */

  --uc-radius:   12px;
  --uc-radius-lg:18px;
  --uc-shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,42,92,.06);
  --uc-shadow:   0 4px 18px rgba(15,42,92,.08);
  --uc-shadow-lg:0 18px 48px rgba(15,42,92,.14);
  --uc-focus:    0 0 0 3px rgba(240,192,64,.55);

  /* Remap legacy tokens that were used as text colours on light backgrounds */
  --f-body:  'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-serif: 'DM Serif Display', Georgia, serif;
  --mist:       #5B6474;
  --text-light: #5B6474;
  --slate:      #475569;
  --success:    #047857;
  --warn:       #A15C07;
}

@layer uc-fix {

/* ─── 2. BASE ──────────────────────────────────────────────────────── */
html { overflow-x: clip !important; }
body {
  overflow-x: clip !important;
  color: var(--uc-text) !important;
  background: var(--uc-bg) !important;
  letter-spacing: 0 !important;
  text-rendering: optimizeLegibility;
}
p, li, td { letter-spacing: 0 !important; }
::selection { background: rgba(240,192,64,.35); color: var(--uc-ink); }

:focus-visible {
  outline: 2px solid var(--uc-gold-500) !important;
  outline-offset: 2px !important;
  box-shadow: var(--uc-focus);
}

/* Off-canvas mobile menu must not create a sideways scrollbar on desktop */
.mob-panel:not(.is-open) { visibility: hidden !important; }
.mob-panel { transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s !important; }
.mob-panel.is-open { transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s !important; }

/* Headings: one weight, one tracking */
h1, h2, h3, h4, h5, h6, .sec-title {
  font-family: var(--f-body) !important;
  letter-spacing: -0.02em !important;
}

/* Section kicker pill — gold text on pale gold failed (2.3:1) */
.sec-kicker {
  color: var(--uc-amber-ink) !important;
  background: var(--uc-gold-100) !important;
  border-color: rgba(201,154,30,.45) !important;
}
.section-ink .sec-kicker, .hero .sec-kicker, [class*="-hero"] .sec-kicker {
  color: var(--uc-gold) !important;
  background: rgba(240,192,64,.12) !important;
  border-color: rgba(240,192,64,.35) !important;
}
.sec-sub { color: var(--uc-muted) !important; }
.section-ink .sec-sub, .sec-sub.white { color: var(--uc-on-dark-3) !important; }

/* ─── 3. BUTTONS ───────────────────────────────────────────────────── */
/* Gold buttons: navy text (6.5:1+) instead of white (2.6:1) */
.btn-gold, a.btn-gold, button.btn-gold, .btn-nav, a.btn-nav,
.smartmatch-strip .sm-cta, .smartmatch-strip a.btn-gold {
  background: linear-gradient(135deg, #F5CB4F 0%, #E5B22E 100%) !important;
  color: var(--uc-navy) !important;
  border: 1px solid rgba(201,154,30,.55) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(229,178,46,.35) !important;
}
.btn-gold:hover, a.btn-gold:hover, .btn-nav:hover,
.smartmatch-strip .sm-cta:hover {
  background: linear-gradient(135deg, #F7D166 0%, #EABA3A 100%) !important;
  color: var(--uc-navy-900) !important;
  box-shadow: 0 6px 20px rgba(229,178,46,.45) !important;
}
.btn-gold i, .btn-nav i, .sm-cta i { color: inherit !important; }
.btn-gold:disabled, .btn-gold[disabled] { opacity: .6; cursor: not-allowed; }

.btn-navy, a.btn-navy { color: #FFFFFF !important; }
.btn-ghost-white, a.btn-ghost-white { color: #FFFFFF !important; }
.btn-ghost-navy, a.btn-ghost-navy,
.btn-outline-navy, a.btn-outline-navy {
  color: var(--uc-navy) !important;
  background: #FFFFFF !important;
  border: 1.5px solid var(--uc-line-2) !important;
}
.btn-ghost-navy:hover, .btn-outline-navy:hover { border-color: var(--uc-navy) !important; background: var(--uc-navy-50) !important; }

.btn, button.btn, a.btn { border-radius: 10px !important; }
.btn:active { transform: translateY(0) !important; }

/* ─── 4. NAVBAR ────────────────────────────────────────────────────── */
.navbar { background: var(--uc-navy-900) !important; }
.nav-links a, .nav-link-btn { color: rgba(255,255,255,.88) !important; }
.nav-links a:hover, .nav-link-btn:hover { color: var(--uc-gold) !important; }
.nav-dropdown-section { color: var(--uc-subtle) !important; }
.nav-dropdown a { color: var(--uc-text) !important; }
.nav-dropdown a:hover { color: var(--uc-navy) !important; }
.mob-sec { color: var(--uc-subtle) !important; }
.mob-panel a.mob-link { color: var(--uc-text) !important; }

/* ─── 5. HERO ──────────────────────────────────────────────────────── */
/* The outlined "Perfect" was a 1.5px stroke — hard to read. Make it solid gold. */
section.hero .hero-title .gold-stroke,
.hero .hero-title .gold-stroke {
  color: var(--uc-gold) !important;
  -webkit-text-stroke: 0 !important;
}
.hero-title .gold-fill, .hero-title .gold-word { color: var(--uc-gold) !important; }
.hero p, .hero-sub { color: var(--uc-on-dark-2) !important; }
.hero strong, .hero em { color: var(--uc-gold) !important; }
.hero-stats .stat-num { color: var(--uc-gold) !important; }
.hero-stats .stat-lbl { color: var(--uc-on-dark-3) !important; }
.hero-panel label, .field-dark label { color: rgba(240,192,64,.95) !important; }
.hero-panel input::placeholder, .field-dark input::placeholder { color: rgba(255,255,255,.62) !important; }
.hero-panel select, .hero-panel input { color: #FFFFFF !important; }

/* Inner-page heroes */
.page-hero-sm p, [class*="-hero"] > p { color: var(--uc-on-dark-2) !important; }
[class*="-hero"] strong, [class*="-hero"] em { color: var(--uc-gold) !important; }

/* ─── 6. CARDS & CONTENT (light surfaces) ─────────────────────────── */
.feat-card, .dest-card, .testi-card, .step-card, .uni-card, .career-card, .sc2, .card {
  border-color: var(--uc-line) !important;
  box-shadow: var(--uc-shadow-sm) !important;
}
.feat-card:hover, .dest-card:hover, .testi-card:hover, .step-card:hover,
.uni-card:hover, .career-card:hover, .sc2:hover {
  box-shadow: var(--uc-shadow) !important;
  border-color: rgba(201,154,30,.45) !important;
}
.feat-card p, .feat-desc, .step-desc, .career-desc, .testi-text,
.dest-count, .uni-desc { color: var(--uc-muted) !important; }
.feat-card p { font-size: .86rem !important; line-height: 1.6 !important; }
.feat-icon i { color: var(--uc-amber-text) !important; }

.step-num {
  background: var(--uc-navy) !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(15,42,92,.25) !important;
}

/* Gold-coloured values on white cards */
.career-salary, .schol-value, .testi-journey, .ip-course-fee, .ip-info-val.amber,
.sc2-value, .gc-step-label, .q-num, .uni-accom-val {
  color: var(--uc-amber-text) !important;
}
.sc2-value.full-val, .schol-value.full, .full-val { color: var(--uc-green-ink) !important; }
.testi-stars { color: #B7791F !important; letter-spacing: .1em; }

/* Small grey labels that were #9CA3AF / #94A3B8 (≈2.5:1) */
.rank-lbl, .ip-course-fee-lbl, .sc2-elig-lbl, .hint, .char-count, .chat-disclaimer,
.anon-note, .kpi-sub, .empty-msg, .uni-stat-lbl, .stat-lbl-sm, .prog-label,
.ip-stat-box-lbl, .ip-card-count, .sc2-country, .uni-loc, .cat-link:not(.active) .cat-count, .foot-accom {
  color: var(--uc-subtle) !important;
}

/* Status / category tags on tinted backgrounds */
.dest-work-tag      { color: var(--uc-green-ink) !important; background: var(--uc-green-bg) !important; }
.schol-type, .sc2-type { color: var(--uc-amber-ink) !important; }
.ib-level, .ib-score { color: var(--uc-text) !important; }

/* Deadlines (dark section) */
.dl-badge { color: #FFFFFF !important; background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.28) !important; }
.dl-days  { color: var(--uc-gold) !important; }

/* Links inside body copy */
main a:not([class]), .ip-desc a, .legal-body a, .policy-body a, article a:not([class]) {
  color: var(--uc-blue-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Forms on light backgrounds */
body input::placeholder, body textarea::placeholder { color: #6B7688 !important; }
select option { color: var(--uc-text); background: #FFFFFF; }

/* ─── 7. FOOTER ────────────────────────────────────────────────────── */
footer a, footer p, footer li { color: rgba(255,255,255,.78) !important; }
footer a:hover { color: var(--uc-gold) !important; }
.foot-copy, footer .copyright, footer [class*="copyright"] { color: rgba(255,255,255,.72) !important; }
.foot-legal-links span { color: rgba(255,255,255,.45) !important; } /* decorative separators */


/* ─── 7b. PAGE-SPECIFIC CONTRAST FIXES (found by automated audit) ──── */
/* Home — share box on the dark share section */
#shareUrl { background: transparent !important; color: #FFFFFF !important; }
/* Dark promo / callout cards that sit inside light sections */
.promo-card { background: linear-gradient(135deg,#FFFBF0,#FFF6DA) !important; }
.promo-card h3 { color: var(--uc-navy) !important; font-weight: 700 !important; }
.promo-card p  { color: var(--uc-muted) !important; }
.promo-card.promo-card--dark { background: linear-gradient(155deg,#0F2A5C,#0A1D35) !important; border-color: rgba(240,192,64,.25) !important; }
.promo-card.promo-card--dark h3 { color: #FFFFFF !important; }
.promo-card.promo-card--dark p  { color: var(--uc-on-dark-2) !important; }
/* AI advisor — suggestion chips */
.suggestion-chips .chip { background: #FFFFFF !important; color: var(--uc-text-2) !important; border-color: var(--uc-line-2) !important; }
.suggestion-chips .chip:hover { background: var(--uc-gold-100) !important; color: var(--uc-amber-ink) !important; border-color: var(--uc-gold-600) !important; }
/* Scholarships — dark eligibility wizard selects */
#wiz_nat, #wiz_dest, #wiz_qual, #wiz_award {
  background: rgba(255,255,255,.1) !important; color: #FFFFFF !important;
  border: 1.5px solid rgba(255,255,255,.3) !important;
}
#wiz_nat option, #wiz_dest option, #wiz_qual option, #wiz_award option { background: var(--uc-navy) !important; color: #FFFFFF !important; }
.sp2-btn, .shf-btn {
  background: linear-gradient(135deg,#F5CB4F,#E5B22E) !important; color: var(--uc-navy) !important;
}
/* IELTS — dark estimator card + practice centre header */
.ie-card .ie-label, .ie-card label { color: rgba(255,255,255,.82) !important; }
.il-card-head h2[style*="#FFFFFF"], .il-card-head h2[style*="#fff"] { color: #FFFFFF !important; }
.skill-tab { color: var(--uc-blue-ink) !important; }
.skill-tab.active { color: #FFFFFF !important; }
/* Footer translate badge */
.foot-translate-badge span { color: #BFDBFE !important; }
.foot-translate-badge { background: rgba(30,111,255,.28) !important; }
/* Institution page — hero actions */
.ip-actions a, .ip-actions button { text-decoration: none !important; }
.ip-schol-val.amber { color: var(--uc-amber-text) !important; }
.ip-schol-val.green { color: var(--uc-green-ink) !important; }
/* Forum */
.cat-link.active .cat-count { background: var(--uc-gold) !important; color: var(--uc-navy) !important; }
/* Psychometric */
.q-num { color: var(--uc-amber-text) !important; }

/* Badges & legal links */
.badge-gold { color: var(--uc-amber-ink) !important; background: var(--uc-gold-100) !important; border-color: rgba(201,154,30,.4) !important; }
.badge-green { color: #065F46 !important; background: #D1FAE5 !important; }
.badge-blue  { color: var(--uc-blue-ink) !important; }
.legal-body a:not(.btn), .legal-page a:not(.btn) { color: var(--uc-amber-ink) !important; text-decoration: underline; text-underline-offset: 2px; }
.foot-legal-links .foot-tagline { color: rgba(255,255,255,.75) !important; }
.uni-card-top .uni-loc, .sc2-head .sc2-country, .uni-card-foot .foot-accom { color: var(--uc-text-2) !important; }
h4, h5, h6 { letter-spacing: -0.005em !important; }

/* Anything painted with the v21 gold gradient always carries navy text */
[style*="linear-gradient(135deg,#F5CB4F"], [style*="linear-gradient(135deg,#F5CB4F"] i { color: var(--uc-navy) !important; }

/* Legacy gold-text utilities (var(--gold-dk) = #A87800 is 3.9:1 on white) */
.btn-ghost-gold, .btn-outline-gold, .tag.gold, .uni-type-tag, .scholarship-type { color: var(--uc-amber-ink) !important; }

/* Apply page — numbered step badges on the dark hero */
.ap-hero .ap-step b span { color: var(--uc-navy) !important; background: var(--uc-gold) !important; }

/* Mobile: hamburger bars were navy on the navy navbar */
.hamburger span { background: #FFFFFF !important; }
.hamburger:hover { background: rgba(255,255,255,.1) !important; }
@media (max-width: 640px) { .navbar { top: 0 !important; } }

/* A legacy rule painted every element whose class contains "-hero" with the
   hero gradient + border, so inner wrappers showed as boxes inside the hero. */
.ap-hero-in, .gc-hero-inner, .ielts-hero-inner, .ielts-hero-badges, .ip-hero-inner, .psych-hero-inner,
.search-hero-band-inner, .search-hero-chips, .search-hero-form, .sp2-hero-inner, .sp2-hero-stats, .sp2-hero-sub {
  background: transparent !important; border-bottom: 0 !important; box-shadow: none !important;
}
.ip-hero-bottom, .ielts-hero-bottom, .sp2-hero-bottom, .psych-hero-line {
  background: linear-gradient(90deg, transparent, #D4A017, #F0C040, #D4A017, transparent) !important;
  border: 0 !important; height: 3px !important; min-height: 0 !important; padding: 0 !important; opacity: .7;
}

/* Search page: hero title sat under the fixed navbar */
.search-hero-band { padding-top: calc(64px + 1.75rem) !important; }
@media (max-width: 640px) { .search-hero-band { padding-top: calc(56px + 1.25rem) !important; } }

} /* end @layer uc-fix */

/* ─── 8. MISC ──────────────────────────────────────────────────────── */
.goog-te-gadget, .goog-te-gadget span { color: var(--uc-text) !important; }
img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}