/* ============================================
   ZOLEARN ACADEMY - MOBILE RESPONSIVE STYLES
   Mobile-First Design (320px - 768px)
   Desktop Design Preserved (1024px+)
   ============================================ */

/* ========================================
   1. MOBILE NAVIGATION (320px - 768px)
   ======================================== */

/* Hide hamburger on desktop by default */
#mobile-menu-button {
  display: none !important;
}

/* Hide menu overlay by default — sidebar-menu.css controls show/hide */
#mobile-menu-overlay {
  display: none;
}

@media (max-width: 768px) {
  /* Fixed Navigation - Mobile Optimized with Hamburger Menu */
  #TopNavBar, nav {
    top: 10px !important;
    left: 10px !important;
    width: calc(100% - 20px) !important;
    transform: none !important;
    padding: 12px 16px !important;
    min-height: 60px !important;
    flex-wrap: nowrap !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* Logo - Mobile Size */
  #TopNavBar img, nav img {
    height: 36px !important;
    width: auto !important;
  }
  
  /* HIDE navigation links on mobile */
  nav > div.hidden,
  nav > .hidden,
  #TopNavBar > div.hidden,
  #TopNavBar > .hidden,
  .hidden.md\:flex,
  nav div[class*="hidden"],
  #TopNavBar div[class*="hidden"] {
    display: none !important;
  }
  
  /* Hide ALL buttons container on mobile */
  #TopNavBar > div.flex.items-center.gap-4,
  nav > div.flex.items-center.gap-4 {
    display: none !important;
  }
  
  /* SHOW hamburger menu button on mobile — sidebar-menu.css handles full styling */
  #mobile-menu-button {
    display: flex !important;
  }

  /* Mobile menu overlay — all styling handled by sidebar-menu.css */
  /* (rules here intentionally minimal to avoid conflicts) */
}

@media (max-width: 480px) {
  #TopNavBar, nav {
    padding: 10px 12px !important;
  }
  
  #TopNavBar img, nav img {
    height: 32px !important;
  }
}

/* ========================================
   2. HERO SECTION - MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  /* Hero Container - Stack vertically on mobile */
  section.min-h-screen {
    min-height: auto !important;
    padding: 90px 16px 40px 16px !important;
    overflow-x: hidden !important;
  }
  
  /* Stack hero content vertically and center everything */
  section.min-h-screen > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Hero Content - Full width, centered */
  section .w-full.md\\:w-1\\/2.space-y-8 {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  /* Hero Content spacing - Proper vertical rhythm */
  section .space-y-8 > * {
    margin-top: 16px !important;
  }
  
  section .space-y-8 > *:first-child {
    margin-top: 0 !important;
  }
  
  /* Hero Heading - Readable size with good line-height */
  h1.font-display-lg,
  h1.text-display-lg-mobile,
  h1.md\\:text-display-lg {
    font-size: 34px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
  
  /* Hero Paragraph - Readable with good spacing */
  section p.font-body-lg {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  
  /* Hero Buttons - Keep horizontal with proper spacing */
  section .flex.flex-wrap.gap-4 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding-top: 12px !important;
    flex-wrap: wrap !important;
  }
  
  section .flex.flex-wrap.gap-4 button {
    min-width: 130px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }
  
  /* Hero Image Container - Full width, below content */
  section .aspect-square,
  section .w-full.md\\:w-1\\/2.relative,
  section > div > div.w-full.md\\:w-1\\/2.relative {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 0 0 !important;
    align-items: center !important;
    justify-content: center !important;
    order: 2 !important;
  }
  
  /* Hero images - Fit within screen */
  section.min-h-screen img,
  section.relative.min-h-screen img {
    display: block !important;
    width: 100% !important;
    max-width: 450px !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
  }
  
  /* Floating stat cards - Smaller and better positioned */
  .floating-stat,
  .glass-card.animate-bounce,
  div.absolute.glass-card {
    display: flex !important;
    padding: 10px !important;
    font-size: 10px !important;
    gap: 8px !important;
    align-items: center !important;
  }
  
  div.absolute.glass-card .w-12 {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-shrink: 0 !important;
  }
  
  div.absolute.glass-card .material-symbols-outlined {
    font-size: 20px !important;
  }
  
  div.absolute.glass-card .font-title-lg {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  
  div.absolute.glass-card .font-label-caps {
    font-size: 8px !important;
    line-height: 1.2 !important;
  }
  
  /* Adjust floating card positions for mobile */
  div.absolute.-top-10 {
    top: -10px !important;
  }
  
  div.absolute.-right-10 {
    right: 5px !important;
  }
  
  div.absolute.-bottom-6 {
    bottom: -10px !important;
  }
  
  div.absolute.-left-12 {
    left: 5px !important;
  }
  
  /* Student Stats - Centered */
  section .flex.items-center.gap-6 {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    text-align: center !important;
    padding-top: 12px !important;
    width: 100% !important;
  }
  
  /* Student profile images */
  section .flex.-space-x-3,
  div.flex.-space-x-3 {
    display: flex !important;
    justify-content: center !important;
    margin-right: 0 !important;
  }
  
  section .flex.-space-x-3 img {
    width: 36px !important;
    height: 36px !important;
  }
  
  /* Student stats text */
  section .flex.items-center.gap-6 .font-headline-md {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  
  section .flex.items-center.gap-6 .font-body-md {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  
  /* Badge centered */
  section .inline-flex.items-center.gap-2 {
    padding: 6px 12px !important;
    font-size: 10px !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  
  section .inline-flex.items-center.gap-2 .material-symbols-outlined {
    font-size: 14px !important;
  }
  
  /* Gradient orb - proportional */
  section .aspect-square > div.absolute {
    width: 80% !important;
    height: 80% !important;
  }
  
  /* Prevent horizontal overflow */
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 480px) {
  /* Maintain laptop proportions on small phones */
  h1.font-display-lg {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  
  section p.font-body-lg {
    font-size: 8px !important;
    line-height: 1.4 !important;
  }
  
  section .flex.flex-wrap.gap-4 button {
    padding: 6px 10px !important;
    font-size: 8px !important;
  }
  
  /* Proportionally smaller stat cards */
  div.absolute.glass-card {
    padding: 5px !important;
    gap: 5px !important;
  }
  
  div.absolute.glass-card .w-12 {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }
  
  div.absolute.glass-card .material-symbols-outlined {
    font-size: 14px !important;
  }
  
  div.absolute.glass-card .font-title-lg {
    font-size: 10px !important;
  }
  
  div.absolute.glass-card .font-label-caps {
    font-size: 5px !important;
  }
  
  /* Tighter spacing */
  section.min-h-screen > div {
    gap: 15px !important;
  }
  
  /* Student images proportional */
  section .flex.-space-x-3 img {
    width: 20px !important;
    height: 20px !important;
  }
  
  section .flex.items-center.gap-6 .font-headline-md {
    font-size: 10px !important;
  }
  
  section .flex.items-center.gap-6 .font-body-md {
    font-size: 7px !important;
  }
  
  /* Badge proportional */
  section .inline-flex.items-center.gap-2 {
    padding: 3px 6px !important;
    font-size: 6px !important;
  }
  
  section .inline-flex.items-center.gap-2 .material-symbols-outlined {
    font-size: 8px !important;
  }
  
  /* Maintain gradient orb */
  section .aspect-square > div.absolute {
    width: 80% !important;
    height: 80% !important;
  }
}

/* ========================================
   3. TYPOGRAPHY - MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  /* Headings - Readable on mobile */
  h2.font-headline-md,
  h2.text-headline-md {
    font-size: 28px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
  
  h3.font-title-lg,
  h3.text-title-lg {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
  
  /* Body Text - Readable */
  p.font-body-lg,
  p.text-body-lg {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  p.font-body-md,
  p.text-body-md {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  
  /* Labels */
  .font-label-caps,
  .text-label-caps {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }
}

/* ========================================
   4. LAYOUT - MOBILE GRID SYSTEM
   ======================================== */

@media (max-width: 768px) {
  /* Container Padding - Proper mobile spacing */
  .px-container-padding-desktop {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  .px-container-padding-mobile {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Section Spacing - Comfortable on mobile */
  .py-section-gap {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* Grid Layouts - Stack on mobile for better readability */
  .grid.grid-cols-2,
  .md\\:grid-cols-2,
  .lg\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .grid.grid-cols-3,
  .md\\:grid-cols-3,
  .lg\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .grid.grid-cols-4,
  .md\\:grid-cols-4,
  .lg\\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* Flex Layouts - Stack on mobile */
  .flex.flex-col.md\\:flex-row,
  .flex.flex-col.lg\\:flex-row {
    flex-direction: column !important;
  }
  
  /* Max Width Containers */
  .max-w-7xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-2xl {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Text center sections - proper margins */
  .text-center.mb-16 {
    margin-bottom: 24px !important;
  }
  
  .mb-16 {
    margin-bottom: 24px !important;
  }
  
  .mb-12 {
    margin-bottom: 20px !important;
  }
  
  .mb-8 {
    margin-bottom: 16px !important;
  }
  
  .mb-6 {
    margin-bottom: 12px !important;
  }
  
  .mb-4 {
    margin-bottom: 8px !important;
  }
}

@media (max-width: 480px) {
  .px-container-padding-mobile {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .py-section-gap {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* ========================================
   5. BUTTONS - MOBILE TOUCH OPTIMIZATION
   ======================================== */

@media (max-width: 768px) {
  /* All Buttons */
  button,
  .btn,
  a.btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    touch-action: manipulation;
  }
  
  /* Primary Buttons */
  .bg-primary,
  .bg-secondary {
    padding: 14px 28px !important;
  }
  
  /* Button Groups */
  .flex.gap-4 button,
  .flex.gap-3 button {
    width: 100% !important;
  }
  
  /* Icon Buttons */
  button.material-symbols-outlined {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }
}

/* ========================================
   6. FORMS & INPUTS - MOBILE OPTIMIZED
   ======================================== */

@media (max-width: 768px) {
  /* Input Fields */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    border-radius: 12px !important;
    min-height: 48px !important;
  }
  
  /* Labels */
  label {
    font-size: 13px !important;
    margin-bottom: 8px !important;
    display: block;
  }
  
  /* Form Groups */
  .field-grid,
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ========================================
   7. CARDS & CONTAINERS - MOBILE
   ======================================== */

@media (max-width: 768px) {
  /* Card Styling - Comfortable on mobile */
  .glass-card,
  .card,
  .glass-card-premium {
    padding: 20px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }
  
  /* Program Cards - Full width stacked */
  .glass-card-premium.p-10 {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: space-between !important;
  }
  
  /* Card Headers */
  .card-head {
    font-size: 14px !important;
    margin-bottom: 12px !important;
  }
  
  /* Card icons */
  .glass-card-premium .w-14 {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
  }
  
  .glass-card-premium .material-symbols-outlined {
    font-size: 28px !important;
  }
  
  /* Card titles */
  .glass-card-premium h3 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
  }
  
  /* Card descriptions */
  .glass-card-premium p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
  }
  
  /* Eligibility badges */
  .glass-card-premium .font-label-caps {
    font-size: 10px !important;
    padding: 6px 12px !important;
    margin-bottom: 12px !important;
    display: inline-block !important;
  }
  
  /* Apply buttons in cards */
  .glass-card-premium button {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    margin-top: auto !important;
  }
}

@media (max-width: 480px) {
  .glass-card,
  .card {
    padding: 16px !important;
  }
}

/* ========================================
   8. IMAGES - RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  /* All Images */
  img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 12px;
  }
  
  /* Hero Images */
  section img.w-full {
    max-width: 100% !important;
    margin: 0 auto;
  }
  
  /* Logo Exception */
  #TopNavBar img,
  nav img[alt*="logo"],
  nav img[alt*="Logo"] {
    width: auto !important;
    height: 36px !important;
  }
}

/* ========================================
   9. FOOTER - MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  footer {
    padding: 32px 10px 20px !important;
  }
  
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center;
  }
  
  footer h4 {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }
  
  footer p,
  footer a {
    font-size: 11px !important;
    line-height: 1.6 !important;
  }
  
  footer .flex {
    justify-content: center !important;
  }
  
  footer .space-y-6 {
    margin-bottom: 20px !important;
  }
  
  footer .space-y-4 li {
    margin-bottom: 8px !important;
  }
}

/* ========================================
   10. TABLES - MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  /* Table Container */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px !important;
  }
  
  th, td {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }
}

/* ========================================
   11. MODALS - MOBILE OPTIMIZED
   ======================================== */

@media (max-width: 768px) {
  .modal-overlay {
    padding: 0 !important;
  }
  
  .modal,
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 90vh !important;
  }
  
  .modal-body {
    padding: 20px 16px !important;
  }
}

/* ========================================
   12. UTILITY CLASSES - MOBILE
   ======================================== */

@media (max-width: 768px) {
  /* Hide on Mobile */
  .hidden-mobile {
    display: none !important;
  }
  
  /* Show on Mobile Only */
  .show-mobile {
    display: block !important;
  }
  
  /* Text Alignment */
  .text-center-mobile {
    text-align: center !important;
  }
  
  /* Spacing */
  .gap-mobile-sm {
    gap: 12px !important;
  }
  
  .gap-mobile-md {
    gap: 20px !important;
  }
  
  /* Prevent Horizontal Scroll */
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  * {
    max-width: 100%;
  }
}

/* ========================================
   13. PERFORMANCE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
  /* Smooth Scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* Touch Optimization */
  * {
    -webkit-tap-highlight-color: rgba(0, 88, 188, 0.1);
    -webkit-touch-callout: none;
  }
  
  /* Prevent Text Size Adjust */
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
}

/* ========================================
   14. SPECIFIC PAGE FIXES
   ======================================== */

/* Placement Marquee - Mobile */
@media (max-width: 768px) {
  /* Marquee section */
  section.py-20 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  
  /* Marquee heading */
  section.py-20 h2 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
  }
  
  /* Marquee company names */
  .animate-marquee span {
    font-size: 16px !important;
  }
}

/* Enquiry Form Section - Mobile */
@media (max-width: 768px) {
  /* Enquiry section - better alignment */
  section.py-section-gap.relative {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  
  /* Enquiry flex container */
  section.py-section-gap .flex.flex-col.lg\\:flex-row {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  /* Enquiry text content */
  section.py-section-gap .w-full.lg\\:w-1\\/2 {
    width: 100% !important;
    padding: 16px 10px !important;
  }
  
  section.py-section-gap h2 {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }
  
  section.py-section-gap .font-body-lg {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
  
  section.py-section-gap ul li {
    font-size: 11px !important;
    gap: 8px !important;
  }
  
  /* Enquiry form */
  section.py-section-gap .bg-white {
    padding: 20px !important;
    border-radius: 12px !important;
  }
  
  section.py-section-gap form .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  section.py-section-gap input,
  section.py-section-gap select {
    height: 44px !important;
    font-size: 13px !important;
    padding: 0 16px !important;
  }
  
  section.py-section-gap label {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  
  section.py-section-gap button[type="submit"] {
    height: 48px !important;
    font-size: 12px !important;
  }
}

/* TNEA Finder - Mobile */
@media (max-width: 768px) {
  .topbrand {
    padding: 16px 12px !important;
  }
  
  .brand-org {
    font-size: 18px !important;
  }
  
  .brand-sub {
    font-size: 12px !important;
  }
  
  .phone-chip {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
  
  .mainhead h1 {
    font-size: 22px !important;
  }
  
  .stat-row {
    gap: 16px !important;
  }
}

/* Fees Structure - Mobile */
@media (max-width: 768px) {
  .search-panel {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  
  .search-input {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }
  
  .filter-select {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  
  .fee-card {
    margin-bottom: 16px !important;
  }
  
  .cards-wrap {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Programs Page - Mobile */
@media (max-width: 768px) {
  .hero-gradient {
    padding-top: 120px !important;
    padding-bottom: 40px !important;
  }
  
  .cat-tab {
    padding: 10px 16px !important;
    font-size: 11px !important;
  }
}

/* About Page - Mobile */
@media (max-width: 768px) {
  .reveal-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ========================================
   15. ANIMATION & TRANSITIONS
   ======================================== */

@media (max-width: 768px) {
  /* Smooth Transitions */
  * {
    transition: all 0.3s ease !important;
  }
  
  /* Hover Effects - Convert to Active */
  button:active,
  a:active {
    transform: scale(0.95) !important;
    opacity: 0.8;
  }
}

/* ========================================
   16. ACCESSIBILITY - MOBILE
   ======================================== */

@media (max-width: 768px) {
  /* Focus States */
  *:focus {
    outline: 2px solid #0058bc !important;
    outline-offset: 2px !important;
  }
  
  /* Touch Targets */
  a, button, input, select {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* ========================================
   17. MOBILE HAMBURGER MENU STYLES
   ======================================== */

@media (max-width: 768px) {
  /* Ensure hamburger menu button is visible */
  #mobile-menu-button {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    z-index: 1000 !important;
  }
  
  #mobile-menu-button span {
    width: 24px !important;
    height: 3px !important;
    background: #00113a !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    display: block !important;
  }
  
  /* Mobile menu overlay — all styling handled by sidebar-menu.css */
}

/* ========================================
   END OF MOBILE RESPONSIVE STYLES
   ======================================== */

/* ============================================================
   sidebar-menu.css (loaded after this file) handles all
   mobile menu styling. No overrides needed here.
   ============================================================ */