/* Extends the hero's redesign (site-theme, following hero-parallax.css) to
   the rest of the page, at the user's request to carry the same look
   further than the hero. Pure CSS/animation only — no markup, copy, or
   section structure changes; only pseudo-elements are added for glow
   layers, so no new DOM nodes either. Every hover effect here adds color/
   border/shadow only, never `transform`, so it never competes with or
   bypasses the reduced-motion gating motion.css already does for the
   card lifts that exist. Dark sections (values, brochure-download,
   footer) get the hero's glow treatment; light sections get gold accents
   and card refinements instead, since a screen-blend glow only reads
   against a dark backdrop. */

/* ---- Global type + buttons ---- */

:root {
  --serif: 'Manrope', var(--sans), sans-serif;
}

.button {
  border-radius: 999px;
  background: linear-gradient(135deg, #b1834a 0%, #c4a572 55%, #e7cb9c 100%);
  border-color: transparent;
  color: #16304f;
  box-shadow: 0 14px 32px rgba(196, 165, 114, .28);
}

.button:hover {
  background: linear-gradient(135deg, #c4986a 0%, #dec69e 55%, #f5e2ba 100%);
  box-shadow: 0 18px 40px rgba(196, 165, 114, .4);
}

/* ---- Header navigation: bigger, more legible link labels ---- */

.header nav > a {
  font-size: 14px;
}

@media (max-width: 1100px) {
  .header nav > a {
    font-size: 13px;
  }
}

@media (max-width: 1000px) {
  .header nav > a {
    font-size: 16px;
  }
}

/* ---- Institution stats band ---- */

.institution-band {
  position: relative;
}

.institution-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(196, 165, 114, .5), transparent);
}

.institution-band a {
  transition: transform .3s ease;
}

.institution-band a > strong {
  color: #a9834c;
  transition: color .3s ease;
}

.institution-band a:hover > strong {
  color: #183b63;
}

/* ---- About: the polaroid-style stamp becomes part of the hero's glass-card family ---- */

.about-stamp {
  background: linear-gradient(160deg, rgba(26, 54, 91, .96) 0%, rgba(10, 24, 43, .94) 100%);
  box-shadow: 0 28px 60px rgba(6, 15, 28, .35);
}

.about-stamp strong {
  color: #fff;
}

.about-stamp > span {
  color: rgba(226, 205, 169, .85);
}

/* ---- Chairman: a soft gold halo behind the portrait, echoing the hero glow ---- */

.chairman-portrait {
  position: relative;
}

.chairman-portrait::before {
  content: '';
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: radial-gradient(circle at 50% 35%, rgba(196, 165, 114, .3), transparent 65%);
  filter: blur(36px);
  pointer-events: none;
}

/* ---- Program / course cards: gold accents on top of the existing hover lift ---- */

.program-card {
  transition: border-color .3s ease, box-shadow .3s ease;
}

.program-card:hover {
  border-color: rgba(196, 165, 114, .4);
}

.card-number {
  background: linear-gradient(135deg, #b1834a, #c4a572);
  color: #16304f;
  font-weight: 700;
}

.course-card {
  transition: border-color .3s ease;
}

.course-icon {
  color: #a9834c;
}

.facilities-grid article {
  transition: border-color .3s ease;
}

.facilities-grid article:hover {
  border-color: rgba(196, 165, 114, .5);
}

/* ---- Gallery: a gold edge on hover, alongside the existing scale/shadow ---- */

.gallery-item {
  border: 1px solid transparent;
  transition: border-color .3s ease;
}

.gallery-item:hover {
  border-color: rgba(196, 165, 114, .45);
}

/* ---- Values: dark section, so it gets the hero's screen-blend glow pair ---- */

.values {
  position: relative;
  overflow: hidden;
}

.values::before,
.values::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.values::before {
  top: -200px;
  right: -120px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(196, 165, 114, .35), transparent 70%);
}

.values::after {
  bottom: -180px;
  left: -100px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(130, 178, 255, .25), transparent 70%);
}

.value-grid article {
  position: relative;
  z-index: 1;
  transition: border-color .3s ease, background-color .3s ease;
}

.value-grid article:hover {
  border-color: rgba(196, 165, 114, .5);
  background-color: rgba(255, 255, 255, .03);
}

/* ---- Admissions: sequential steps get a gold badge instead of a plain numeral ---- */

.steps li > span {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(196, 165, 114, .4);
  background: rgba(196, 165, 114, .08);
  font-size: 19px;
  color: #a9834c;
}

/* ---- Brochure download + footer: dark sections, same glow language ---- */

.brochure-download {
  position: relative;
  overflow: hidden;
}

.brochure-download::before {
  content: '';
  position: absolute;
  top: -140px;
  right: 12%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 165, 114, .3), transparent 70%);
  filter: blur(80px);
  mix-blend-mode: screen;
  pointer-events: none;
}

footer {
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 165, 114, .4), transparent);
}

/* ---- FAQ: a small gold accent on the open indicator ---- */

.faq details[open] summary span {
  color: #183b63;
}