/* =============================================================
   SPARDHA360 — REDESIGN v5 (visual refresh overlay)
   Loaded LAST, after app.css / v3.css / v4-home.css / editorial.css
   Purpose: introduce a consistent gold/saffron accent, calm the
   hero photo treatment, flatten+differentiate exam cards, and
   tighten header/nav states — without touching base layout rules.
   ============================================================= */

:root{
  --sp5-gold:#C8880F;
  --sp5-gold-soft:#FBF1DD;
  --sp5-navy:#0B2A5B;
  --sp5-blue:#155EEF;
  --sp5-ink:#0A1730;
}
:root[data-theme="dark"]{
  --sp5-gold:#E7AA2A;
  --sp5-gold-soft:rgba(231,170,42,.12);
}

/* ---------- Header ---------- */
.sp3-header{border-bottom-color:#E7ECF3}
.sp3-logo{color:var(--sp5-navy)}
.sp3-desktop-nav a{position:relative}
.sp3-desktop-nav a:hover{background:transparent;color:var(--sp5-navy)}
.sp3-desktop-nav a::after{
  content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;
  border-radius:2px;background:var(--sp5-gold);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease;
}
.sp3-desktop-nav a:hover::after{transform:scaleX(1)}
.sp3-desktop-nav a[aria-current="page"]{background:transparent;color:var(--sp5-navy)}
.sp3-desktop-nav a[aria-current="page"]::after{transform:scaleX(1)}
.sp3-icon-btn:hover,.sp3-theme-btn:hover{border-color:var(--sp5-gold);color:var(--sp5-gold)}
.sp3-app-btn{background:var(--sp5-navy);border-color:var(--sp5-navy);box-shadow:0 8px 18px rgba(11,42,91,.2)}
.sp3-app-btn:hover{background:#092048}
:root[data-theme="dark"] .sp3-desktop-nav a:hover,
:root[data-theme="dark"] .sp3-desktop-nav a[aria-current="page"]{color:#F3D999}

/* ---------- Eyebrows / labels use the gold accent everywhere ---------- */
.sp3-eyebrow,.sp3-section-head>div>span,.sp3-journey>header span{
  color:var(--sp5-gold)!important;
}
.sp3-eyebrow::before{background:var(--sp5-gold)!important}

/* ---------- Hero ---------- */
.sp3-hero{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(21,94,239,.07), transparent 55%),
    linear-gradient(135deg,#fff 0%,#FBFDFF 55%,#EEF5FF 100%);
}
.sp3-hero-copy h1{font-weight:800;letter-spacing:-1.4px}
.sp3-hero-copy h1 em{color:var(--sp5-gold)}
.sp3-hero-copy>p{color:var(--sp3-muted,#5C6B82);font-weight:500}

/* Photo scrim: guarantees legible text over the building photo at every size */
.sp4-hero-background{position:relative}
.sp4-hero-background::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.85) 22%,rgba(255,255,255,.15) 55%,transparent 78%);
}
:root[data-theme="dark"] .sp4-hero-background::after{
  background:linear-gradient(90deg,rgba(11,20,41,.97) 0%,rgba(11,20,41,.86) 22%,rgba(11,20,41,.15) 55%,transparent 78%);
}

/* Unified pill search bar with clearer focus state */
.sp3-search{border-radius:999px;border-color:#D8E3F1;transition:box-shadow .15s ease,border-color .15s ease}
.sp3-search:focus-within{border-color:var(--sp5-blue);box-shadow:0 0 0 4px rgba(21,94,239,.12)}
.sp3-search button{border-radius:999px;background:var(--sp5-navy)}
.sp3-search button:hover{background:#092048}
.sp3-search select{border-radius:0}

.sp3-trust-line span{color:#516378;font-weight:700}

/* ---------- Exam cards: flatten + give each a restrained accent ---------- */
.sp3-exam-card{border-top:3px solid transparent}
.sp3-exam-card .sp4-exam-symbol{color:var(--sp5-navy)}
.tone-1{border-top-color:#155EEF}.tone-1 .sp4-exam-symbol{color:#155EEF}
.tone-2{border-top-color:#0F9D6A}.tone-2 .sp4-exam-symbol{color:#0F9D6A}
.tone-3{border-top-color:var(--sp5-gold)}.tone-3 .sp4-exam-symbol{color:var(--sp5-gold)}
.tone-4{border-top-color:#8B3DBE}.tone-4 .sp4-exam-symbol{color:#8B3DBE}
.tone-5{border-top-color:#C24545}.tone-5 .sp4-exam-symbol{color:#C24545}
.tone-6{border-top-color:#2F6F8F}.tone-6 .sp4-exam-symbol{color:#2F6F8F}
.sp3-exam-card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.sp3-exam-card:hover{transform:translateY(-3px)}
.sp3-mini-facts span{background:#F7F9FC;border-color:#E7ECF3;color:#5A6A80}
.sp3-exam-card strong b{color:var(--sp5-navy)}

/* ---------- Shortcuts row ---------- */
.sp4-shortcuts a:hover{color:var(--sp5-navy);background:var(--sp5-gold-soft)}
.sp4-shortcuts a b{color:var(--sp5-gold)}

/* ---------- Job cards ---------- */
.sp3-job-icon{background:var(--sp5-gold-soft);border-color:#F0DBA8;color:var(--sp5-gold)}
.sp3-job-card{transition:transform .16s ease,box-shadow .16s ease}
.sp3-job-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(22,55,110,.08)}
.sp3-job-meta b{color:var(--sp5-navy)}
.sp3-card-button{border-color:#E7ECF3;color:var(--sp5-navy)}
.sp3-card-button:hover{background:var(--sp5-gold-soft);border-color:#F0DBA8;color:#7A5709}

/* ---------- Article cards (latest posts) ---------- */
.sp4-article-card{transition:transform .16s ease,box-shadow .16s ease;box-shadow:0 4px 14px rgba(22,55,110,.03)}
.sp4-article-card:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(22,55,110,.08)}
.sp4-article-meta a{color:var(--sp5-navy)}
.sp4-read{color:var(--sp5-navy)!important}
.sp4-article-pages .current{background:var(--sp5-navy);border-color:var(--sp5-navy)}

/* ---------- Mock test cards ---------- */
.sp4-mock-grid>a{transition:transform .16s ease,box-shadow .16s ease}
.sp4-mock-grid>a:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(22,55,110,.07)}
.sp4-mock-grid>a span{color:var(--sp5-gold)}
.sp4-mock-grid>a b{color:var(--sp5-navy)}

/* ---------- Journey / preparation flow ---------- */
.sp3-journey-grid i{background:var(--sp5-gold-soft);color:var(--sp5-gold)}
.sp3-journey-grid article>b{color:#E3D3AE}

/* ---------- Live/new bar ---------- */
.sp31-live-label b{color:#0E8B5B}
.sp31-live-items span{color:var(--sp5-navy)}