/* Learn Better Living - Custom Styles */

:root {
  /* Mode-specific colors (set dynamically by Alpine.js) */
  --mode-accent: #10B981;
  --mode-accent-light: #D1FAE5;

  /* Brand colors */
  --brand-dark: #1F2937;
  --brand-gray: #6B7280;
  --brand-light-gray: #F9FAFB;
}

/* Font */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Skip to content link for accessibility */
.skip-to-content {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1rem;
  background-color: #000;
  color: #fff;
  text-decoration: none;
}

.skip-to-content:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

/* Focus styles for accessibility */
*:focus-visible {
  outline: 2px solid var(--mode-accent);
  outline-offset: 2px;
}

/* Mode accent utilities */
.bg-mode-accent {
  background-color: var(--mode-accent);
}

.bg-mode-accent-light {
  background-color: var(--mode-accent-light);
}

.text-mode-accent {
  color: var(--mode-accent);
}

.border-mode-accent {
  border-color: var(--mode-accent);
}

/* Smooth transitions for mode switching */
.mode-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Custom shadows */
.shadow-soft {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.shadow-soft-lg {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Hover effects */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile menu animation */
@media (max-width: 768px) {
  .mobile-menu-enter {
    animation: slideDown 0.3s ease;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

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

/* Minimum touch target size (44x44px per WCAG) */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile nav link sizing */
@media (max-width: 768px) {
  .mobile-nav-link {
    min-height: 48px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
  }
  
  /* Larger hamburger touch target */
  .mobile-menu-btn {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -8px;
    padding: 8px;
  }
  
  /* Footer links need more touch space */
  footer a {
    display: inline-block;
    padding: 8px 0;
    min-height: 44px;
    line-height: 28px;
  }
  
  /* Prevent zoom on input focus (iOS) */
  input, select, textarea {
    font-size: 16px !important;
  }
  
  /* Better text sizing on mobile */
  h1, .text-4xl, .text-5xl {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  
  h2, .text-3xl {
    font-size: 1.375rem !important;
    line-height: 1.3 !important;
  }
  
  h3, .text-2xl {
    font-size: 1.125rem !important;
  }
  
  /* Reduce section padding */
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Stack cards with less gap */
  .grid {
    gap: 1rem !important;
  }
  
  /* All buttons and CTAs */
  .btn, button[type="submit"], a[class*="rounded-lg"],
  a[class*="bg-emerald"], a[class*="bg-teal"] {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 1rem;
  }
  
  /* Fix horizontal overflow */
  body {
    overflow-x: hidden;
  }
  
  /* Card padding */
  .card, [class*="rounded-xl"], [class*="rounded-2xl"] {
    padding: 1rem !important;
  }
  
  /* Stats grid */
  .grid-cols-4, .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Hero adjustments */
  .py-16, .py-20, .py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Extra small screens */
@media (max-width: 375px) {
  h1, .text-4xl, .text-5xl {
    font-size: 1.5rem !important;
  }
  
  .px-4, .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .btn, button, a[class*="rounded-lg"] {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
  
  nav {
    padding-top: env(safe-area-inset-top);
  }
  
  .sticky-cta {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Improve tap highlighting on mobile */
@media (hover: none) {
  a, button {
    -webkit-tap-highlight-color: rgba(16, 185, 129, 0.2);
  }
}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .hover-lift:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Landscape mode */
@media (max-height: 500px) and (orientation: landscape) {
  section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* Print styles */
@media print {
  nav,
  footer,
  .no-print {
    display: none;
  }
}