* 1. Global Reset & Overflow Lock */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
}

/* FIX: Kill white gap between Nav and Hero */
#nav-placeholder {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Mobile Menu - The "Safe" Version */
#mobileMenu {
    position: fixed;
    top: 64px;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: #4b5563;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none; 
}

/* 5. Helpers */
.logo-wrapper {
    display: flex;
    align-items: center;
    padding-right: 60px;
    position: relative;
}

/* 6. Desktop-Only Hover */
@media (hover: hover) {
    .quiz-opt:hover { transform: translateX(5px); }
}

/* KILL SCROLLING */
body.menu-active {
    overflow: hidden !important;
    touch-action: none !important;
    position: fixed;
    width: 100%;
}

body.menu-active #mobileMenu {
    touch-action: auto !important;
    pointer-events: auto !important;
}

body.menu-active nav {
    pointer-events: auto !important;
}

/* Lock scrolling when quiz is open */
body.quiz-active {
    overflow: hidden !important;
    height: 100vh;
    overscroll-behavior: none; 
}

.relative.flex.flex-col.overflow-x-hidden {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
}

/* --- 9. QUIZ SPINNER & SUCCESS STATES --- */
.quiz-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #f97316;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

#quizSuccessMessage i {
    display: block;
    animation: scaleUp 0.5s ease-out forwards;
}

@keyframes scaleUp {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* FIX: Force hidden ONLY inside quiz to protect Desktop Navbar Tabs */
#quizModal .hidden {
    display: none !important;
}

/* --- 10. SHARED RULES (deduped from per-page inline <style> blocks) --- */
#nav-placeholder {
    position: sticky;
    top: 0;
    z-index: 9999;
}

.score-row:hover {
    background-color: #fff7ed;
    transition: 0.3s;
}

/* Calculator Slider Styling (IELTS / TOEFL band calculators) */
input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #f97316; /* Orange-500 */
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #e5e7eb;
    border-radius: 2px;
}

/* Clear space for the fixed mobile call/WhatsApp bar so footer copy isn't hidden behind it */
@media (max-width: 767px) {
    footer[data-nosnippet] {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

/* --- 11. SHARED HERO BANNER (single-topic program pages) ---
   Used as-is by new pages; existing pages that already carry their own
   inline copy of this block are untouched (their inline <style> loads
   after this file, so it keeps winning wherever it differs). */
.tfe-integrated-hero {
    background: linear-gradient(to right, #f59e0b, #f97316);
    padding: 240px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
}
.tfe-integrated-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    pointer-events: none;
}
.tfe-hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}
.tfe-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
}
.tfe-hero-text h1 {
    font-size: 96px;
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 24px;
    letter-spacing: -3px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.tfe-hero-text h1 span { color: #ffffff; }
.tfe-hero-text p {
    font-size: 28px;
    font-weight: 600;
    font-style: italic;
    opacity: 1;
    margin-bottom: 20px;
    line-height: 1.4;
}
@media (max-width: 1024px) {
    .tfe-hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .tfe-hero-text h1 { font-size: 48px; }
    .tfe-integrated-hero { padding: 140px 0; min-height: auto; }
}

/* --- 12. SHARED LEAD FORM CARD (lead-form.html partial) ---
   Same rule as above: existing pages carry their own inline copy which
      loads after this file and keeps winning; new/shared pages rely on this. */
      .tfe-hero-card {
              background: #fff;
                  padding: 40px 30px;
                      border-radius: 20px;
                          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                              color: #1f1f1f;
      }
      .tfe-hero-card h3 {
              font-size: 24px;
                  font-weight: 800;
                      text-transform: uppercase;
                          font-style: italic;
                              margin-bottom: 5px;
                                  text-align: center;
                                      color: #1f2937;
      }
      .tfe-hero-card p {
              font-size: 11px;
                  color: #9ca3af;
                      text-align: center;
                          margin-bottom: 25px;
                              font-weight: 700;
                                  text-transform: uppercase;
                                      letter-spacing: 1.5px;
      }
      .tfe-hero-card input,
      .tfe-hero-card textarea {
              width: 100%;
                  padding: 14px 16px;
                      margin-bottom: 12px;
                          border: 1px solid #e5e7eb;
                              border-radius: 8px;
                                  background: #f9fafb;
                                      font-size: 15px;
                                          transition: all 0.2s;
      }
      .tfe-hero-card input:focus,
      .tfe-hero-card textarea:focus {
              outline: none;
                  border-color: #f97316;
                      background: #fff;
      }
      .tfe-hero-card button {
              width: 100%;
                  background: #f97316;
                      color: #fff;
                          padding: 18px;
                              border: none;
                                  border-radius: 8px;
                                      font-weight: 800;
                                          text-transform: uppercase;
                                              font-style: italic;
                                                  cursor: pointer;
                                                      transition: all 0.2s;
                                                          margin-top: 10px;
                                                              font-size: 16px;
      }
      .tfe-hero-card button:hover {
              background: #ea580c;
                  transform: translateY(-2px);
      }
      @media (max-width: 1024px) {
              .tfe-hero-card {
                          margin: 0 auto;
                                  max-width: 450px;
              }
      }