/* ==========================================================================
   RESPONSIVE LAYER  -  assets/css/responsive.css
   Loaded last, after style.css / enhance.css / glass3d.css.

   This sheet only adjusts layout, rhythm, type scale and touch ergonomics so
   the whole site works on a 320px phone, a tablet, a laptop and a large
   display. It never sets colour, background or the light-theme / imagery
   rules - those are owned by the sheets above and must stay untouched.
   ========================================================================== */

/* --- 1. Foundations ------------------------------------------------------ */

/* Stop iOS landscape from inflating text, and keep taps honest. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* One gutter that breathes with the viewport, reused everywhere. */
:root { --gutter: clamp(16px, 4vw, 24px); }

/* Keep the 1200px ceiling but never let padding crowd a narrow screen or
   leave the content stranded in the middle of a very wide one. */
.container { width: min(1200px, 100% - (var(--gutter) * 2)); }

/* --- 2. Fluid type ------------------------------------------------------- */

/* Continuous scales instead of stepped jumps, so there is no device width at
   which a heading is suddenly too big or too small. */
.hero-title {
  font-size: clamp(1.9rem, 1.05rem + 3.6vw, 3.4rem);
  line-height: 1.12;
}
.section-title { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.5rem); }
.section-subtitle { font-size: clamp(1rem, 0.94rem + 0.5vw, 1.2rem); }

/* The inner-page heroes all use a plain <h1> inside their section. */
.page-hero h1,
.catalog-hero h1,
.course-hero h1,
.about-hero h1,
.contact-hero h1,
.career-hero h1,
.careers-hero h1,
.lms-hero h1,
.register-hero h1 {
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.15;
}
.hero-description { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem); }

/* Hero vertical rhythm scales with the screen. The floor clears the sticky
   header (70px) plus the "continue where you left off" bar. */
.hero {
  padding: clamp(120px, 19vw, 168px) 0 clamp(56px, 9vw, 92px);
}

/* --- 3. Media & long content never break the box ------------------------ */
img, svg, video, iframe, canvas { max-width: 100%; }
.written-lesson-body, .about-content, .content-page, .legal-content {
  overflow-wrap: anywhere; word-break: break-word;
}
pre, code { overflow-x: auto; max-width: 100%; }

/* --- 4. Multi-column layouts that must stack ---------------------------- */

/* The contact page never collapsed: a 1fr/2fr split squeezed the form to
   two-thirds of a phone screen and the name row to ~40px inputs. */
@media (max-width: 960px) {
  .contact-container { grid-template-columns: 1fr !important; }
  .contact-info { order: 2; }
}

@media (max-width: 760px) {
  .form-row, .cm-row, .row-2, .form-grid,
  .register-grid, .ceo-container { grid-template-columns: 1fr !important; }
  .instructor-container { flex-direction: column; }
  .instructor-image, .instructor-info { min-width: 0; }
  .contact-form { padding: 26px 22px; }
  .form-group { margin-bottom: 16px; }
}

@media (max-width: 560px) {
  .contact-form { padding: 22px 16px; }
  .written-lesson { padding: 20px 18px 22px; }
  .written-lesson.notes { padding: 16px 18px 18px; }
}

/* --- 5. Forms: 16px fields stop iOS from zooming the page on focus ------ */
@media (max-width: 760px) {
  .form-group input, .form-group select, .form-group textarea,
  .cm-field input, .cm-field select, .cm-field textarea,
  .lms-login input, .newsletter-form input, .search-box input {
    font-size: 16px;
  }
}

/* --- 6. Touch ergonomics ------------------------------------------------- */
@media (hover: none) {
  .btn, .btn-sm, .mobile-nav a, .footer-col ul li a, .social-icons a,
  .footer-social-icons a { min-height: 44px; }
  .mobile-nav a { display: flex; align-items: center; }
  /* Hover lift is meaningless (and sticky) on touch; keep the layout still. */
  .btn:hover, .card:hover, .crystal-card:hover, .category-card:hover,
  .program-card:hover, .benefit-card:hover, .stat-card:hover { transform: none; }
}

/* --- 7. Mobile menu stays on screen and scrolls when long -------------- */
.mobile-menu {
  max-height: calc(100vh - 72px);          /* fallback for older browsers */
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- 8. Notches / rounded corners --------------------------------------- */
@supports (padding: max(0px)) {
  .header .container,
  .site-footer .container {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .wa-float { left: max(14px, env(safe-area-inset-left)); }
}

/* --- 9. Very small screens (320-380px) ---------------------------------- */
@media (max-width: 380px) {
  .section-title::after { width: 60px; }
  .hero-title { font-size: 1.75rem; }
  .logo-container img { width: 40px; height: 40px; }
}

/* Header on the narrowest phones: the brand mark plus a truncated name must
   leave room for the hamburger, otherwise the bar pushes past 320px. */
@media (max-width: 420px) {
  .header-container { padding: 0 12px; gap: 10px; }
  .logo-container { min-width: 0; flex: 1 1 auto; }
  .logo-container img { flex-shrink: 0; }
  .logo-text {
    min-width: 0; font-size: 14px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .hamburger { flex-shrink: 0; }
}

/* --- 10. Large displays -------------------------------------------------- */
@media (min-width: 1440px) {
  .container { width: min(1320px, 100% - (var(--gutter) * 2)); }
}

/* CMTI-LEMON-MILK-BEGIN */
@font-face{font-family:'Lemon Milk';src:url('/assets/fonts/lemonmilk-bold.woff2') format('woff2'),url('/assets/fonts/lemonmilk-bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
h1,h2,h3,.logo,.brand,.site-title{font-family:'Lemon Milk','Poppins','Segoe UI',Arial,sans-serif;letter-spacing:.02em}
/* CMTI-LEMON-MILK-END */