/* ========== GLOBAL STYLES ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --igf-primary: #0a3d62;
  --igf-primary-dark: #06223b;
  --igf-accent: #1e7e6c;
  --igf-accent-secondary: #c29b2e;
  --igf-accent-light: #5bb5a0;
  --igf-white: #ffffff;
  --igf-gray-50: #f8fafc;
  --igf-gray-100: #f1f5f9;
  --igf-gray-200: #e2e8f0;
  --igf-gray-600: #475569;
  --igf-gray-700: #334155;
  --igf-gray-800: #1e293b;
  --font-family: "Inter", sans-serif;
  --gradient-primary: linear-gradient(135deg, var(--igf-primary) 0%, #164f7a 100%);
  --gradient-hero: linear-gradient(135deg, var(--igf-primary-dark) 0%, var(--igf-primary) 100%);
  --radius-lg: 12px;
  --radius-xl: 20px;
  --transition: all 0.3s ease;
  --transition-fast: all 0.2s ease;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Fluid typography system variables */
  --fs-h1: clamp(1.8rem, 4.5vw, 3rem);
  --fs-h2: clamp(1.4rem, 3.5vw, 2.25rem);
  --fs-h3: clamp(1.2rem, 2.8vw, 1.65rem);
  --fs-h4: clamp(1.05rem, 2.2vw, 1.25rem);
  --fs-body: clamp(0.85rem, 1.1vw, 0.95rem);
  --fs-small: clamp(0.75rem, 0.9vw, 0.85rem);
  --fs-tiny: clamp(0.65rem, 0.8vw, 0.72rem);
}

body {
  font-family: var(--font-family);
  color: var(--igf-gray-800);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  display: block !important;
}

/* ===== GLOBAL TYPOGRAPHY SYSTEM ===== */
h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.25;
  color: var(--igf-primary);
  margin-bottom: 0.5rem;
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3;
  color: var(--igf-primary);
  margin-bottom: 0.5rem;
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
  color: var(--igf-primary);
  margin-bottom: 0.5rem;
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.4;
  color: var(--igf-primary);
  margin-bottom: 0.5rem;
}

small, .text-small {
  font-size: var(--fs-small);
}

.text-tiny {
  font-size: var(--fs-tiny);
}

/* ===== HIDE BREADCRUMBS GLOBALLY ===== */
.breadcrumb,
.breadcrumb-item,
[aria-label="breadcrumb"] {
  display: none !important;
}

/* ===== UNIFIED PAGE BANNER TYPOGRAPHY ===== */
.page-banner h1 {
  font-size: var(--fs-h1) !important;
  font-weight: 800;
  color: white;
  margin-bottom: 0.5rem;
}

.page-banner h1 .highlight {
  color: var(--igf-accent-light);
}

.page-banner .banner-description {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.8);
  max-width: 520px;
}

/* ===== UNIFIED SECTION HEADING SCALES ===== */
.section-title {
  font-size: var(--fs-h2) !important;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--igf-primary-dark);
  letter-spacing: -0.02em;
}

.section-badge {
  font-size: var(--fs-tiny);
}

/* ===== UNIFIED CARD TYPOGRAPHY ===== */
.mission-card h4,
.focus-card h4,
.service-card h4,
.event-card h4 {
  font-size: var(--fs-h4) !important;
}

.mission-card p,
.focus-card p,
.service-card p,
.event-card p,
.facility-features li {
  font-size: var(--fs-small) !important;
}

/* ===== MOBILE PAGE BANNER ALIGNMENT ===== */
@media (max-width: 768px) {
  .page-banner {
    text-align: center !important;
  }
  .page-banner .banner-description {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* REMOVE ALL GAPS */
main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: block !important;
}

section {
  margin-bottom: 0 !important;
}

/* Fix footer gap */
#footer-placeholder {
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: block !important;
  clear: both;
}

/* Remove any flex:1 that causes gaps */
[style*="flex: 1"],
[style*="flex:1"],
div[style*="flex: 1"],
main[style*="flex: 1"] {
  flex: none !important;
  display: block !important;
}

.gradient-text {
  background: linear-gradient(135deg, var(--igf-accent) 0%, #e8c468 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-badge {
  display: inline-block;
  background: rgba(194, 155, 46, 0.12);
  color: var(--igf-accent);
  padding: 0.25rem 1rem;
  border-radius: 50px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--igf-primary-dark);
  letter-spacing: -0.02em;
}

.title-underline {
  width: 60px;
  height: 3px;
  background: var(--igf-accent);
  margin: 0.75rem 0 1.25rem 0;
  border-radius: 2px;
}

.title-underline.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.title-underline.bg-white {
  background: var(--igf-accent);
}

/* ========== REMOVE GAP AFTER FOOTER ========== */
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  display: block !important;
}

/* Remove any gap after footer */
#footer-placeholder {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: block !important;
  line-height: 0;
}

#footer-placeholder footer,
#footer-placeholder .footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove any body or html bottom spacing */
body::after,
html::after {
  display: none !important;
  content: none !important;
}

/* Ensure no extra space at the very bottom */
body > :last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove any default body margin */
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* ========== DIRECT FIX FOR GAP AFTER FOOTER ========== */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: auto !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Target the exact element with flex:1 */
[style*="flex: 1"],
[style*="flex:1"],
[style*="flex: 1;"],
[style*="flex:1;"] {
  flex: none !important;
  flex: 0 0 auto !important;
  display: block !important;
}

/* Remove all spacing from footer placeholder */
#footer-placeholder {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* Remove spacing from footer itself */
#footer-placeholder footer,
footer {
  margin: 0 !important;
  padding: 10px 0 !important;
  display: block !important;
}

/* Remove any spacing after the last element */
body > :last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Force body to end exactly at footer */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

main {
  flex: 1 !important;
}

#footer-placeholder {
  flex: none !important;
}