/**
 * LegalMind Mobile Responsive Fixes
 * Makes the entire platform mobile-friendly
 * Enhanced with Professional Font System
 */

/* Import professional fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Serif+Pro:wght@400;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

/* Professional Font Variables */
:root {
  /* Primary Font - Clean, professional sans-serif */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Secondary Font - Elegant serif for headings */
  --font-secondary: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  
  /* Display Font - Sophisticated serif for special headings */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  
  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
}

/* Global Typography Reset */
* {
  font-family: var(--font-primary);
}

/* ============================================
   BASE MOBILE OPTIMIZATIONS
   ============================================ */

/* Prevent scrolling glitches and jumps */
html {
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}

body {
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 768px) {
  
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Reduce overall padding on mobile */
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Interview page main container - minimal side padding */
  body main.px-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Chat container should fill available width */
  main .flex-grow.flex.flex-col {
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* ============================================
     NAVBAR / HEADER - HAMBURGER MENU
     ============================================ */
  
  /* Navbar container - compact */
  nav .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  nav .py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  /* Hamburger menu button */
  .mobile-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
    position: relative;
  }
  
  /* Hamburger icon (three lines) */
  .hamburger-icon {
    width: 24px;
    height: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .hamburger-icon span {
    display: block;
    height: 3px;
    width: 100%;
    background: #0F2D52;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  /* Hamburger animation when active */
  .mobile-nav-toggle.active .hamburger-icon span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  
  .mobile-nav-toggle.active .hamburger-icon span:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-nav-toggle.active .hamburger-icon span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }
  
  /* Mobile menu dropdown - clean and professional */
  .mobile-nav-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 0 0 12px 12px !important;
    padding: 0.75rem 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    z-index: 999 !important;
    /* No animation - instant appearance */
  }
  
  /* Professional mobile menu items */
  .mobile-nav-menu a,
  .mobile-nav-menu button {
    width: 100% !important;
    text-align: left !important;
    padding: 1rem 1.5rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #F3F4F6 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    max-height: none !important;
    justify-content: flex-start !important;
    color: #1F2937 !important;
    background: transparent !important;
    transition: background-color 0.2s ease !important;
    text-decoration: none !important;
  }
  
  .mobile-nav-menu button {
    background: transparent !important;
    color: #1F2937 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    cursor: pointer !important;
  }
  
  .mobile-nav-menu button#logoutBtn,
  .mobile-nav-menu button[id*="logout"] {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    border-top: 1px solid #FECACA !important;
  }
  
  .mobile-nav-menu a:hover,
  .mobile-nav-menu button:hover {
    background: #F9FAFB !important;
  }
  
  .mobile-nav-menu button#logoutBtn:hover,
  .mobile-nav-menu button[id*="logout"]:hover {
    background: #FEE2E2 !important;
  }
  
  /* Add icons to menu items */
  .mobile-nav-menu a[href*="dashboard"]::before,
  .mobile-nav-menu button[onclick*="dashboard"]::before {
    content: '📊';
    margin-right: 0.75rem;
    font-size: 1.1rem;
  }
  
  .mobile-nav-menu a[href*="upload"]::before,
  .mobile-nav-menu button[onclick*="upload"]::before {
    content: '📄';
    margin-right: 0.75rem;
    font-size: 1.1rem;
  }
  
  .mobile-nav-menu a[href*="interview"]::before,
  .mobile-nav-menu button[onclick*="interview"]::before {
    content: '💬';
    margin-right: 0.75rem;
    font-size: 1.1rem;
  }
  
  .mobile-nav-menu button#logoutBtn::before,
  .mobile-nav-menu button[id*="logout"]::before {
    content: '🚪';
    margin-right: 0.75rem;
    font-size: 1.1rem;
  }
  
  /* Navbar - clean and simple */
  nav {
    position: relative !important;
  }
  
  nav > div {
    position: relative !important;
  }
  
  /* ============================================
     HERO SECTIONS
     ============================================ */
  
  /* Hero text sizing */
  h1 {
    font-size: 1.875rem !important; /* 30px instead of 48px+ */
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 1.25rem !important; /* 20px */
  }
  
  /* Hero sections padding */
  .py-20,
  .py-24,
  .py-32 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  /* Hero button sizing */
  .px-8 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  .py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  /* ============================================
     FORMS & INPUTS
     ============================================ */
  
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 0.75rem !important;
  }
  
  button {
    min-height: 44px; /* iOS touch target */
    font-size: 1rem !important;
  }
  
  /* ============================================
     CARDS & GRIDS
     ============================================ */
  
  /* Force single column on mobile */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Card padding reduction */
  .p-8 {
    padding: 1.5rem !important;
  }
  
  .p-6 {
    padding: 1rem !important;
  }
  
  /* ============================================
     PRICING CARDS
     ============================================ */
  
  .pricing-card,
  [class*="pricing"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem;
  }
  
  /* ============================================
     MODALS & POPUPS
     ============================================ */
  
  .modal-content,
  [class*="modal"] {
    width: 95% !important;
    max-width: 95vw !important;
    margin: 1rem !important;
    padding: 1.5rem !important;
  }
  
  /* Legal Modal - Full Mobile Redesign */
  
  /* Legal modal container - stable positioning */
  .legal-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
    background: white !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 10000 !important;
    /* Remove any transforms that cause glitching */
    transform: none !important;
  }
  
  /* Enhanced overlay with backdrop blur */
  .legal-modal-overlay {
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  
  /* Clean professional header */
  .legal-modal-header {
    padding: 1rem 1.5rem !important;
    background: #0F2D52 !important;
    color: white !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 60px !important;
    border-bottom: 1px solid #E5E7EB !important;
    flex-shrink: 0 !important;
  }
  
  .legal-modal-header h2,
  #legalModalTitle {
    font-size: 1.125rem !important; /* 18px */
    font-weight: 700 !important;
    color: white !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
  }
  
  /* Simple close button - no overhang */
  .close-legal-modal {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    padding: 0.5rem !important;
    flex-shrink: 0 !important;
    color: white !important;
    margin-left: 1rem !important;
    transition: background-color 0.2s ease !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .close-legal-modal:hover {
    background: rgba(255, 255, 255, 0.2) !important;
  }
  
  .close-legal-modal svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  
  /* Clean body content */
  .legal-modal-body {
    padding: 1.5rem !important;
    font-size: 0.9375rem !important; /* 15px - better readability */
    line-height: 1.7 !important;
    background: white !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
  }
  
  /* Clean typography */
  .legal-modal-body h3 {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 700 !important;
    color: #0F2D52 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
    margin-top: 1.5rem !important;
  }
  
  .legal-modal-body h3:first-child {
    margin-top: 0 !important;
  }
  
  .legal-modal-body h4 {
    font-size: 1.0625rem !important; /* 17px */
    font-weight: 600 !important;
    color: #1F2937 !important;
    line-height: 1.4 !important;
    margin-bottom: 0.625rem !important;
    margin-top: 1.5rem !important;
  }
  
  .legal-modal-body p {
    font-size: 0.9375rem !important; /* 15px */
    color: #4B5563 !important;
    line-height: 1.7 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Last updated text */
  .legal-modal-body .text-sm.text-gray-600 {
    font-size: 0.8125rem !important; /* 13px */
    color: #6B7280 !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Lists - better spacing */
  .legal-modal-body ul {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.7 !important;
    margin-left: 1.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
    padding-left: 0 !important;
  }
  
  .legal-modal-body li {
    margin-bottom: 0.625rem !important;
    padding-left: 0.25rem !important;
    color: #4B5563 !important;
  }
  
  .legal-modal-body section {
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #F3F4F6 !important;
  }
  
  .legal-modal-body section:last-child {
    border-bottom: none !important;
  }
  
  /* Warning/highlight boxes */
  .legal-modal-body .bg-yellow-50 {
    padding: 1rem !important;
    margin: 1.25rem 0 !important;
    border-radius: 8px !important;
  }
  
  /* Links in modal */
  .legal-modal-body a {
    color: #2563EB !important;
    font-weight: 500 !important;
  }
  
  /* ============================================
     DOCUMENT VIEW MODAL (On Documents Page)
     ============================================ */
  
  /* Make view modal full-screen on mobile */
  #viewModal .modal-content {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* View modal header - sticky navy gradient */
  #viewModal .modal-content > div:first-child {
    padding: 1rem !important;
    background: linear-gradient(135deg, #0F2D52 0%, #1a3a5f 100%) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }
  
  /* View modal title section */
  #viewModal h3,
  #viewDocTitle {
    font-size: 1.125rem !important; /* 18px */
    font-weight: 700 !important;
    color: white !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  
  #viewModal .text-sm.text-gray-600 {
    font-size: 0.8125rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-top: 0.25rem !important;
  }
  
  /* Close button in view modal */
  #closeViewModal {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.5rem !important;
    color: white !important;
    flex-shrink: 0 !important;
  }
  
  #closeViewModal:hover {
    background: rgba(255, 255, 255, 0.3) !important;
  }
  
  #closeViewModal svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  
  /* View modal body content */
  #viewDocContent {
    padding: 1.5rem 1.25rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
  
  /* Document info grid */
  #viewDocContent .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  #viewDocContent .bg-slate-50 {
    padding: 1rem !important;
    border-radius: 8px !important;
  }
  
  #viewDocContent h4 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 0.75rem !important;
  }
  
  #viewDocContent p {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.5rem !important;
  }
  
  #viewDocContent .text-gray-500 {
    font-size: 0.8125rem !important;
    color: #6B7280 !important;
  }
  
  /* Status badges in view modal */
  #viewDocContent span {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.625rem !important;
  }
  
  /* Action buttons container in view modal */
  #viewDocContent .flex.justify-between,
  #viewDocContent > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    padding-top: 1.25rem !important;
    margin-top: 1.25rem !important;
    border-top: 2px solid #E5E7EB !important;
  }
  
  /* All action buttons in view modal - consistent sizing */
  #viewDocContent button {
    font-size: 0.9375rem !important; /* 15px */
    padding: 0.875rem 1.5rem !important;
    min-height: 48px !important;
    max-height: 48px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }
  
  /* Delete button in modal - red, full width */
  #viewDocContent button[onclick*="delete"] {
    background: #EF4444 !important;
    color: white !important;
    border: none !important;
    order: 2 !important;
  }
  
  #viewDocContent button[onclick*="delete"]:hover {
    background: #DC2626 !important;
  }
  
  /* Close button in modal - blue, full width */
  #viewDocContent button[onclick*="closeViewModal"] {
    background: #2563EB !important;
    color: white !important;
    border: none !important;
    order: 1 !important;
  }
  
  #viewDocContent button[onclick*="closeViewModal"]:hover {
    background: #0F2D52 !important;
  }
  
  /* ============================================
     TABLES
     ============================================ */
  
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* ============================================
     INTERVIEW / CHAT INTERFACE
     ============================================ */
  
  /* Chat container - full width */
  main > div.flex.flex-col {
    width: 100% !important;
    margin: 0 !important;
  }
  
  #messagesContainer {
    max-height: 60vh !important;
    padding: 1rem !important;
  }
  
  .message {
    max-width: 90% !important;
    font-size: 0.9375rem !important; /* 15px */
  }
  
  /* Chat container - remove any margins, ensure full width */
  .flex-grow.flex.flex-col.bg-white {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
  }
  
  /* Input area - absolutely full width at bottom */
  #inputArea {
    padding: 1rem !important;
    width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }
  
  /* Input container - stack textarea above send button */
  #inputArea > div.flex.items-end {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Textarea wrapper - full width */
  #inputArea .flex-grow {
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Textarea - full width */
  #answerInput,
  #userInput,
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
    width: 100% !important;
    min-height: 80px !important;
    padding: 0.75rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Send button - full width with horizontal icon layout */
  button#submitBtn {
    width: 100% !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  
  /* Override any space-x class on button */
  button#submitBtn.space-x-2 {
    gap: 0.5rem !important;
  }
  
  /* Send button icon - keep beside text */
  button#submitBtn svg {
    display: inline-block !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  
  /* Send button text */
  button#submitBtn span {
    display: inline-block !important;
    margin: 0 !important;
  }
  
  /* Ensure button internals stay horizontal */
  button#submitBtn > * {
    display: inline-flex !important;
  }
  
  /* ============================================
     DASHBOARD
     ============================================ */
  
  .dashboard-card {
    margin-bottom: 1rem !important;
  }
  
  /* ============================================
     DOCUMENTS PAGE
     ============================================ */
  
  /* Documents page header - make buttons smaller and stack */
  #uploadBtn,
  #fixAllBtn,
  #viewResultsBtn {
    font-size: 0.875rem !important; /* 14px */
    padding: 0.75rem 1.25rem !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Documents page - parent container with title and buttons */
  .mb-8 > .flex.items-start.justify-between {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 1.5rem !important;
  }
  
  /* Documents page - the button container specifically */
  .mb-8 .flex.space-x-3 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* All buttons in documents header - force consistent styling */
  .mb-8 .flex.space-x-3 > button {
    width: 100% !important;
    margin: 0 !important;
    flex: none !important;
  }
  
  /* Document cards - ensure content stays inside */
  #docList li,
  .document-list li {
    padding: 1rem !important;
    overflow: hidden !important;
  }
  
  /* Document card inner container - stack on mobile */
  #docList li > div,
  .document-list li > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  
  /* Document info section */
  #docList li .flex-grow,
  .document-list li .flex-grow {
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  
  /* Document action buttons (View, Delete) - keep inside card */
  #docList li .flex.space-x-2,
  .document-list li .flex.space-x-2 {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }
  
  #docList li button,
  .document-list li button {
    font-size: 0.875rem !important; /* 14px */
    padding: 0.5rem 1rem !important;
    flex: 1 !important;
    min-height: 40px !important;
  }
  
  .document-actions {
    width: 100% !important;
    margin-top: 0.75rem !important;
    display: flex;
    gap: 0.5rem;
  }
  
  /* ============================================
     FIX-ALL RESULTS
     ============================================ */
  
  .phase-section {
    padding: 1rem !important;
  }
  
  .issue-card {
    padding: 0.75rem !important;
  }
  
  /* ============================================
     NOTIFICATIONS
     ============================================ */
  
  #notification-container {
    top: 10px !important;
    right: 10px !important;
    left: 10px !important;
    max-width: calc(100% - 20px) !important;
  }
  
  .notification {
    min-width: auto !important;
    width: 100% !important;
  }
  
  /* ============================================
     COOKIE BANNER
     ============================================ */
  
  #cookie-consent-banner {
    padding: 1rem !important;
  }
  
  #cookie-consent-banner > div {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  #cookie-consent-banner button {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* ============================================
     FOOTER
     ============================================ */
  
  footer {
    padding: 2rem 1rem !important;
  }
  
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center;
  }
  
  /* ============================================
     UTILITY CLASSES
     ============================================ */
  
  .mobile-hide {
    display: none !important;
  }
  
  .mobile-show {
    display: block !important;
  }
  
  /* Stack flex items on mobile - EXCEPT navbar */
  main .flex.space-x-4,
  main .flex.space-x-6,
  main .flex.space-x-8,
  .flex.space-x-4:not(nav .flex),
  .flex.space-x-6:not(nav .flex),
  .flex.space-x-8:not(nav .flex) {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  main .flex.space-x-4 > *,
  main .flex.space-x-6 > *,
  main .flex.space-x-8 > *,
  .flex.space-x-4:not(nav .flex) > *,
  .flex.space-x-6:not(nav .flex) > *,
  .flex.space-x-8:not(nav .flex) > * {
    width: 100%;
  }
  
  /* Keep navbar horizontal */
  nav .flex {
    flex-direction: row !important;
  }
  
  nav .flex > * {
    width: auto !important;
  }
  
  /* ============================================
     TEXT SIZING
     ============================================ */
  
  .text-5xl {
    font-size: 2rem !important; /* 32px */
  }
  
  .text-4xl {
    font-size: 1.875rem !important; /* 30px */
  }
  
  .text-3xl {
    font-size: 1.5rem !important; /* 24px */
  }
  
  .text-2xl {
    font-size: 1.25rem !important; /* 20px */
  }
  
  .text-xl {
    font-size: 1.125rem !important; /* 18px */
  }
  
  /* ============================================
     SPACING ADJUSTMENTS
     ============================================ */
  
  .pt-28,
  .pt-24,
  .pt-20 {
    padding-top: 5rem !important; /* Account for compact horizontal navbar */
  }
  
  /* Extra padding for main content */
  main {
    padding-top: 5rem !important;
  }
  
  .mb-16,
  .mb-12 {
    margin-bottom: 2rem !important;
  }
  
  .mt-16,
  .mt-12 {
    margin-top: 2rem !important;
  }
  
  /* ============================================
     IMAGES & MEDIA
     ============================================ */
  
  img,
  svg {
    max-width: 100%;
    height: auto;
  }
  
  /* ============================================
     BUTTONS
     ============================================ */
  
  button,
  .btn,
  a.button {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem !important;
  }
  
  /* Full width buttons for main content (not navbar) */
  main button:not(nav button),
  main .btn,
  main a.button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  
  /* Keep navbar buttons sized properly */
  nav button,
  nav a {
    width: auto !important;
  }
  
}

/* ============================================
   TABLET (768px - 1024px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
  
  .px-6 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  h1 {
    font-size: 2.5rem !important;
  }
  
  h2 {
    font-size: 2rem !important;
  }
  
}

/* ============================================
   SMALL MOBILE (max-width: 375px)
   ============================================ */

@media (max-width: 375px) {
  
  h1 {
    font-size: 1.5rem !important; /* 24px */
  }
  
  h2 {
    font-size: 1.25rem !important; /* 20px */
  }
  
  .px-6,
  .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  button,
  input {
    font-size: 14px !important;
  }
  
}

/* ============================================
   ACCESSIBILITY & TOUCH TARGETS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Touch devices */
  
  button,
  a,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Larger tap targets */
  nav a,
  nav button {
    padding: 0.75rem 1rem !important;
  }
  
}