/* =================================================================
   SPAV — CONSERVATIVE VISUAL REFINEMENT
   File: assets/css/spav-refine.css  |  Version: 20261006rf8
   Philosophy: 90% original preserved. 10% polish only.
   ─ No container width change (keeps 1500px)
   ─ No forced image aspect ratios
   ─ No gold glow / no aggressive shadows
   ─ Max card hover lift: translateY(-2px)
   ─ Primarily fixes missing class definitions + adds subtle
     micro-interactions that don't alter visual character
   =================================================================*/


/* ═══════════════════════════════════════════════════════════
   1. MISSING CLASS DEFINITIONS
   Classes referenced in index-1.php HTML but not defined
   in spav.min.css — without these, elements render without
   their intended styling.
   ═══════════════════════════════════════════════════════════ */

/* Centered section heading block
   (Leadership, Quick Access, Campus Life headings) */
.sec-hdr-centered {
  text-align: center;
  margin-bottom: 40px;
}

.sec-hdr-centered .gold-bar,
.sec-hdr-centered .gold-bar-w {
  margin-left: auto;
  margin-right: auto;
}

/* Gold bar — white/dark-bg variant */
.gold-bar-w {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(212,160,23,0.85), rgba(245,200,66,0.75));
}

/* Director name — rendered in HTML but class absent from CSS */
.l-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
  line-height: 1.3;
}

/* Section sub-text on dark backgrounds */
.sec-sub-w {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.72;
  margin-top: 8px;
}

/* Section sub-caption (all-caps variant) on dark backgrounds */
.sec-sub-caps {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.54);
  margin-top: 8px;
}


/* ═══════════════════════════════════════════════════════════
   2. NAV — ACTIVE / CURRENT PAGE STATE
   The .dnav-link hover underline exists but the persistent
   active state for the current page is not defined.
   ═══════════════════════════════════════════════════════════ */

.dnav-item.active > .dnav-link,
.dnav-link.active {
  color: var(--gold2, #F5C842);
}

.dnav-item.active > .dnav-link::after,
.dnav-link.active::after {
  transform: scaleX(1);
}


/* ═══════════════════════════════════════════════════════════
   3. HOMEPAGE MICRO-INTERACTIONS  (body.home scope)
   Only visible on hover. Max lift: translateY(-2px).
   No gold borders, no glows, no spring animations.
   ═══════════════════════════════════════════════════════════ */

/* ─ Leadership — tighter director-to-deans vertical gap ─ */
body.home .leader-card {
  margin-bottom: 12px;
}

body.home .sec-leadership .sec-hdr-centered {
  margin-bottom: 28px;
}

/* ─ Card transitions — shared base ─ */
body.home .leader-card,
body.home .dean-card,
body.home .ev-card,
body.home .vid-card,
body.home .qa-card {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

body.home .leader-card:hover,
body.home .dean-card:hover,
body.home .ev-card:hover,
body.home .vid-card:hover,
body.home .qa-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.11);
}

/* ─ Art Lab — image soft zoom only, no card lift ─ */
body.home .artlab-card {
  overflow: hidden;
}

body.home .artlab-card img {
  transition: transform 300ms ease;
}

body.home .artlab-card:hover img {
  transform: scale(1.02);
}

/* ─ Notification items ─ */
body.home .ni {
  border-radius: 6px;
  transition: background 140ms ease;
}

body.home .ni:hover {
  background: rgba(212, 160, 23, 0.045);
}

body.home .ni-date {
  display: block;
  margin-top: 3px;
}

body.home .ni-body a {
  transition: color 140ms ease;
}

body.home .ni-body a:hover {
  color: #D4A017;
}

/* ─ Important Links — readability + subtle indent on hover ─ */
body.home .litem {
  font-size: 13.5px;
  line-height: 1.55;
  transition: padding-left 180ms ease, background 140ms ease;
}

body.home .litem:hover {
  padding-left: 14px;
}

/* ─ View-more links ─ */
body.home .view-more {
  transition: opacity 150ms ease;
}

body.home .view-more:hover {
  opacity: 0.72;
}

/* ─ Campus Life play button ─ */
body.home .vid-play {
  transition: transform 200ms ease, background-color 200ms ease;
}

body.home .vid-card:hover .vid-play {
  transform: scale(1.07);
  background-color: rgba(212, 160, 23, 0.18);
}

/* ─ Government logo items ─ */
body.home .logo-item {
  transition: transform 180ms ease;
}

body.home .logo-item:hover {
  transform: translateY(-2px);
}

/* ─ Quick Access button ─ */
body.home .qa-btn {
  transition: opacity 150ms ease;
}

body.home .qa-btn:hover {
  opacity: 0.84;
}


/* ═══════════════════════════════════════════════════════════
   4. READABILITY & TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

/* Section headings — DM Sans replaces Playfair Display.
   font-family: body.home scope beats base CSS (specificity 0-2-1 vs 0-1-0).
   font-size !important beats conflicting base CSS !important rules. */
body.home .sec-title {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600;
}

@media (min-width: 1024px) {
  body.home .sec-title {
    font-size: 28px !important;
    line-height: 1.25;
  }
}

/* Body text — modest size bump where it was cramped */
body.home .ni-body a {
  font-size: 14px;
}

body.home .d-desc {
  font-size: 14px;
  line-height: 1.6;
}

/* Line-height improvements */
body.home .about-box p {
  line-height: 1.85;
}

body.home .ev-desc {
  font-size: 14px;
  line-height: 1.72;
}


/* ═══════════════════════════════════════════════════════════
   5. GOVERNMENT INITIATIVES — logo strip polish
   ═══════════════════════════════════════════════════════════ */

/* Logo strip — slightly more breathing room */
body.home .logo-wrap {
  padding: 8px 16px;
}

/* Logo track — slightly wider gaps between logos */
body.home .logo-track {
  gap: 18px;
}

/* Logo containers — more internal padding, consistent alignment */
body.home .logo-item {
  padding: 11px;
  align-items: center;
  justify-content: center;
}


/* ═══════════════════════════════════════════════════════════
   6. FOOTER — readability polish
   ═══════════════════════════════════════════════════════════ */

/* Column headings: Playfair Display → DM Sans */
#site-footer .ft-col h3 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
}

/* Column links: 13.5px → 14.5px; improved line-height */
#site-footer .ft-col ul li a {
  font-size: 14.5px;
  line-height: 1.6;
}

/* Tagline and address: 13px → 14px */
#site-footer .ft-tagline,
#site-footer .ft-addr {
  font-size: 14px;
  line-height: 1.8;
}

/* Bottom bar: slightly larger + better line-height */
#site-footer .ft-bottom {
  font-size: 13.5px;
  line-height: 1.72;
}


/* ═══════════════════════════════════════════════════════════
   8. MOBILE RESPONSIVENESS FIXES (RF8)
   ═══════════════════════════════════════════════════════════ */

/* FIX 1: Header hamburger visible at ≤480px
   .hdr-brand has flex-shrink:0 in base CSS and renders 447px wide,
   pushing .hbg-btn off-screen at 375px. Allow brand to shrink and
   hide the brand text (leaving only the logo image) so the hamburger
   stays within the viewport and remains clickable. */
@media (max-width: 480px) {
  .hdr-brand {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }
  .hdr-brand-text {
    display: none;
  }
}

/* FIX 2: About / Notifications / Links single-column layout at ≤767px
   CSS Grid's 1fr expands to min-content by default. The notification
   panel has a min-content of ~416px, forcing the column wider than
   the container and clipping content (tabs, text, links) invisibly.
   minmax(0, 1fr) caps the track at the available space. */
@media (max-width: 767px) {
  body.home .three-col {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ═══════════════════════════════════════════════════════════
   7. ACCESSIBILITY — honour reduced-motion preference
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  body.home .leader-card,
  body.home .dean-card,
  body.home .artlab-card img,
  body.home .ev-card,
  body.home .vid-card,
  body.home .qa-card,
  body.home .logo-item,
  body.home .litem,
  body.home .ni,
  body.home .vid-play {
    transition: none !important;
    transform: none !important;
  }
}