/* ==========================================================================
   UNIFIED FONT — MKCE Website
   Single source of truth for font consistency across every page.
   Include AFTER all other CSS to enforce the same font everywhere.
   ========================================================================== */

/* Inter font moved to <link rel="preload"> in HTML head to break render-blocking CSS chain */

:root {
  --site-font: 'Inter', system-ui, -apple-system, sans-serif;
  --hero-title-size: clamp(2.2rem, 5vw, 3.5rem);
  --hero-title-line: 1.08;
  --hero-title-weight: 900;
  --hero-body-size: 1.02rem;
  --hero-body-line: 1.8;
  --hero-body-color: rgba(255, 255, 255, 0.92);
  --hero-title-color: #fff;
  --hero-title-shadow: 0 2px 14px rgba(8, 25, 56, 0.35);
}

body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th,
label, input, select, textarea, button,
.nav-link, .btn, .badge, .card,
.dropdown-item, .breadcrumb-item {
  font-family: var(--site-font) !important;
}

/* Override department page --dp-font variable */
:root {
  --dp-font: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Override IEDC font variable */
:root {
  --iedc-font: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* =====================================================================
   CFL Hero Typography Parity
   Makes hero text across pages follow CFL font style + color system.
   ===================================================================== */

body:not(.hero-typography-legacy) [class*='hero'],
body:not(.hero-typography-legacy) [class*='hero-'],
body:not(.hero-typography-legacy) [class*='hero_'],
body:not(.hero-typography-legacy) .hero-content,
body:not(.hero-typography-legacy) .hero-text,
body:not(.hero-typography-legacy) .ar-hero__inner,
body:not(.hero-typography-legacy) .iq-hero-content,
body:not(.hero-typography-legacy) .ac-hero__inner,
body:not(.hero-typography-legacy) .iedc-hero,
body:not(.hero-typography-legacy) .lm-hero,
body:not(.hero-typography-legacy) .lm-hostel-hero {
  color: var(--hero-title-color) !important;
}

body:not(.hero-typography-legacy) [class*='hero'] h1,
body:not(.hero-typography-legacy) [class*='hero-'] h1,
body:not(.hero-typography-legacy) [class*='hero_'] h1,
body:not(.hero-typography-legacy) [class*='hero'] h2,
body:not(.hero-typography-legacy) [class*='hero-'] h2,
body:not(.hero-typography-legacy) [class*='hero_'] h2,
body:not(.hero-typography-legacy) .hero-content h1,
body:not(.hero-typography-legacy) .hero-text h1,
body:not(.hero-typography-legacy) .ar-hero__title,
body:not(.hero-typography-legacy) .iq-hero h1,
body:not(.hero-typography-legacy) .ac-hero__inner h1,
body:not(.hero-typography-legacy) .iedc-hero__title,
body:not(.hero-typography-legacy) .lm-hero__title,
body:not(.hero-typography-legacy) .lm-hostel-hero__title {
  font-family: var(--site-font) !important;
  font-size: var(--hero-title-size) !important;
  font-weight: var(--hero-title-weight) !important;
  line-height: var(--hero-title-line) !important;
  color: var(--hero-title-color) !important;
  text-shadow: var(--hero-title-shadow) !important;
}

body:not(.hero-typography-legacy) [class*='hero'] h1 span,
body:not(.hero-typography-legacy) [class*='hero-'] h1 span,
body:not(.hero-typography-legacy) [class*='hero_'] h1 span,
body:not(.hero-typography-legacy) [class*='hero'] h2 span,
body:not(.hero-typography-legacy) [class*='hero-'] h2 span,
body:not(.hero-typography-legacy) [class*='hero_'] h2 span,
body:not(.hero-typography-legacy) .hero-content h1 span,
body:not(.hero-typography-legacy) .hero-text h1 span,
body:not(.hero-typography-legacy) .ar-hero__title span,
body:not(.hero-typography-legacy) .iq-hero h1 span,
body:not(.hero-typography-legacy) .ac-hero__inner h1 span,
body:not(.hero-typography-legacy) .iedc-hero__title span,
body:not(.hero-typography-legacy) .lm-hero__title span,
body:not(.hero-typography-legacy) .lm-hostel-hero__title span {
  background: linear-gradient(90deg, #c7e6ff, #ffd54f) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body:not(.hero-typography-legacy) [class*='hero'] p,
body:not(.hero-typography-legacy) [class*='hero-'] p,
body:not(.hero-typography-legacy) [class*='hero_'] p,
body:not(.hero-typography-legacy) [class*='hero'] [class*='subtitle'],
body:not(.hero-typography-legacy) [class*='hero-'] [class*='subtitle'],
body:not(.hero-typography-legacy) [class*='hero_'] [class*='subtitle'],
body:not(.hero-typography-legacy) [class*='hero'] [class*='desc'],
body:not(.hero-typography-legacy) [class*='hero-'] [class*='desc'],
body:not(.hero-typography-legacy) [class*='hero_'] [class*='desc'],
body:not(.hero-typography-legacy) .hero-content > p,
body:not(.hero-typography-legacy) .hero-text > p,
body:not(.hero-typography-legacy) .ar-hero__subtitle,
body:not(.hero-typography-legacy) .iq-hero p,
body:not(.hero-typography-legacy) .ac-hero__inner p,
body:not(.hero-typography-legacy) .iedc-hero__desc,
body:not(.hero-typography-legacy) .lm-hero__subtitle,
body:not(.hero-typography-legacy) .lm-hostel-hero__desc {
  font-family: var(--site-font) !important;
  font-size: var(--hero-body-size) !important;
  line-height: var(--hero-body-line) !important;
  color: var(--hero-body-color) !important;
}

@media (max-width: 768px) {
  body:not(.hero-typography-legacy) [class*='hero'] h1,
  body:not(.hero-typography-legacy) [class*='hero-'] h1,
  body:not(.hero-typography-legacy) [class*='hero_'] h1,
  body:not(.hero-typography-legacy) [class*='hero'] h2,
  body:not(.hero-typography-legacy) [class*='hero-'] h2,
  body:not(.hero-typography-legacy) [class*='hero_'] h2,
  body:not(.hero-typography-legacy) .hero-content h1,
  body:not(.hero-typography-legacy) .hero-text h1,
  body:not(.hero-typography-legacy) .ar-hero__title,
  body:not(.hero-typography-legacy) .iq-hero h1,
  body:not(.hero-typography-legacy) .ac-hero__inner h1,
  body:not(.hero-typography-legacy) .iedc-hero__title,
  body:not(.hero-typography-legacy) .lm-hero__title,
  body:not(.hero-typography-legacy) .lm-hostel-hero__title {
    font-size: 2.4rem !important;
  }
}

@media (max-width: 480px) {
  body:not(.hero-typography-legacy) [class*='hero'] h1,
  body:not(.hero-typography-legacy) [class*='hero-'] h1,
  body:not(.hero-typography-legacy) [class*='hero_'] h1,
  body:not(.hero-typography-legacy) [class*='hero'] h2,
  body:not(.hero-typography-legacy) [class*='hero-'] h2,
  body:not(.hero-typography-legacy) [class*='hero_'] h2,
  body:not(.hero-typography-legacy) .hero-content h1,
  body:not(.hero-typography-legacy) .hero-text h1,
  body:not(.hero-typography-legacy) .ar-hero__title,
  body:not(.hero-typography-legacy) .iq-hero h1,
  body:not(.hero-typography-legacy) .ac-hero__inner h1,
  body:not(.hero-typography-legacy) .iedc-hero__title,
  body:not(.hero-typography-legacy) .lm-hero__title,
  body:not(.hero-typography-legacy) .lm-hostel-hero__title {
    font-size: 2rem !important;
  }
}