/* ==========================================================================
   LOCAL FONT CONFIGURATIONS (POPPINS)
   ========================================================================== */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Fallback mappings for weights used across your files */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 800; /* Maps to bold asset */
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 900; /* Maps to bold asset */
  font-style: normal;
}

/* ==========================================================================
   DESIGN TOKENS & ROOT STYLES (PRIMARY TEAL WITH BRAND BLUE & ORANGE ACCENTS)
   ========================================================================== */
:root {
  --primary-teal: #00A7A0;
  --primary-teal-dark: #007570;
  --primary-teal-light: #e0f6f5;
  --earth-velvet: #112211;
  --text-dark: #2f3e46;
  --max-width: 1200px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* SPECIFIED NUS BLUE & NUS ORANGE COLORS */
  --accent-blue: #003D7C;
  --accent-blue-light: #e6eef5;
  --accent-orange: #EF7C00;
  --accent-orange-light: #fef2e6;
}

/* Applies Poppins globally as a clean baseline default */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

body {
  background-color: #f4f3f0; /* UPDATED: Soft warm gray for visual separation */
  color: var(--text-dark);
  min-height: 100vh;
}

.app-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.max-container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   GLOBAL NAVBAR STYLING BLOCK 
   ========================================================================= */
.global-navbar {
  background-color: #ffffff; 
  border-bottom: 2px solid #e9e6df; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); 
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 16px 0; 
}

.sustainability-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-blue); 
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 16px; 
}

.nav-right-cluster {
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand-logo-placeholder,
.brand-logo-secondary {
  width: auto;       
  height: 60px;       
  border-radius: 6px;
  object-fit: contain;
  background-color: #fcfbf7;
  border: none; 
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 24px;
}

.nav-item {
  color: var(--text-dark); 
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 6px 4px;
  transition: var(--transition);
}

.nav-item:hover {
  color: var(--primary-teal); 
}

/* CLEAN MODERN NO-UNDERLINE ACTIVE HIGHLIGHT */
.nav-item.active {
  color: var(--accent-blue) !important; 
  border-bottom: none !important; 
  font-weight: 800; 
}

/* ==========================================================================
   GLOBAL CORPORATE FOOTER STYLING (COMPACT SPATIAL & BALANCED WEIGHTS)
   ========================================================================== */
.app-footer {
  background: #00A7A0 !important; /* Retained your exact bright teal brand colorway */
  background-color: #00A7A0 !important; 
  color: #112211 !important;
  padding: 24px 0 !important; /* REDUCED: Creates a sleeker, thinner vertical footprint */
  margin-top: 48px !important; /* Slightly tighter gap between main content blocks */
  border-top: 2px solid #00A7A0 !important;
  width: 100% !important;
  display: block !important;
  position: relative !important;
  z-index: 9999 !important;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Content flows cleanly from top baseline boundary */
  gap: 32px; 
  flex-wrap: wrap;
}

.footer-corporate-info {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Tighter padding between flagship name and school address text */
  max-width: 600px; 
}

/* BALANCED SET 1: Both titles are now 15px and Bold */
.footer-company-name {
  font-size: 15px; 
  font-weight: 800;
  color: #112211 !important;
  line-height: 1.3;
}

.footer-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 4px; 
  text-align: right;
}

.footer-label {
  font-size: 15px; /* FIXED: Increased from 11px to match the left side */
  font-weight: 800;
  color: #112211 !important;
  line-height: 1.3; /* FIXED: Matched line height for perfect baseline alignment */
}

/* BALANCED SET 2: Both detail texts are 13px and regular weight */
.footer-address {
  margin: 0; /* Reset browser default margin to prevent alignment misalignment */
  font-size: 13px;
  color: #0b2927 !important;
  font-weight: 400; /* Turned off text boldness for standard readable weight */
  line-height: 1.4; 
}

.footer-email-text {
  font-size: 13px; 
  color: #0b2927 !important; 
  font-weight: 400; 
  line-height: 1.4;
}

/* ==========================================================================
   GLOBAL RESPONSIVE DESIGN BREAKPOINTS (PRECISE FOOTER ENGINE)
   ========================================================================== */

/* Extra Small Phones Optimization (Screens under 576px) */
@media (max-width: 576px) {
  .footer-container {
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important; 
    justify-content: space-between !important;
    align-items: flex-start !important; 
    gap: 16px !important;
    width: 100% !important;
  }

  /* FIXED: Changed 58% and 38% to 48% each so both sides have equal structural width */
  .footer-corporate-info {
    width: 48% !important; 
    max-width: 48% !important;
    text-align: left !important;
  }

  .footer-contact-actions {
    width: 48% !important;
    max-width: 48% !important;
    text-align: right !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
  }

  /* BALANCED MOBILE SIZES: Both titles 13px, both subtexts 11px */
  .footer-company-name {
    font-size: 13px !important; 
  }

  .footer-label {
    font-size: 13px !important; /* FIXED: Increased from 10.5px to match mobile left side */
    text-align: right !important;
    display: block !important;
    width: 100% !important;
  }

  .footer-address {
    font-size: 11px !important;
  }

  .footer-email-text {
    font-size: 11px !important; 
    text-align: right !important;
    display: block !important;
    width: 100% !important;
    word-break: break-all !important; 
  }
}

/* ==========================================================================
   SUPER-COMPACT MOBILE NAVBAR ENGINE: LOGOS TOP / LINKS BOTTOM
   ========================================================================== */
@media (max-width: 768px) {
  /* Keeps the total vertical navbar height highly compact */
  .global-navbar {
    padding: 8px 0 !important;
    width: 100% !important;
  }

  /* Reclaims horizontal edge pixels on small phone displays */
  .global-navbar .max-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    margin: 0 !important;
  }

  /* Stacks the twin logo row cleanly above the navigation links menu row */
  .nav-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* FIRST ROW: Forces both logos to remain at the top, pushed to opposite edges */
  .brand-group {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* SECOND ROW CONTAINER: Pulls out of logo alignment grid to drop safely below */
  .nav-right-cluster {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Menu block centers itself with comfortable touch spacing */
  .nav-links {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 24px !important; 
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 0 0 !important;
    border-top: 1px dashed #e9e6df; /* Adds a clean brand divider track line */
  }

  /* Crisp text metrics ensuring links never compress or clip */
  .nav-item {
    font-size: 13px !important;
    padding: 2px 0 !important;
    white-space: nowrap !important;
  }

  /* Left branding logo sizing parameters */
  .brand-logo-placeholder {
    height: 36px !important;
    width: auto !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* Right secondary partner logo sizing parameters */
  .brand-logo-secondary {
    height: 36px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
    
    /* CRITICAL TRANSITION FIX: Pulls the logo out of the cluster flex rules 
       and anchors it to the top right of the primary brand group bar */
    position: absolute !important;
    top: 8px;
    right: 16px;
  }
}