/* The Wooden Spoon - Main CSS File */
/* This file imports all component CSS files */

/* Base Styles */
@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./base/compatibility.css');

/* Component Styles */
@import url('./components/navigation.css');
@import url('./components/hero.css');
@import url('./components/quick-links.css');
@import url('./components/back-to-top.css');
@import url('./components/footer.css');
@import url('./components/location-recommendation.css');

/* Layout Styles */
@import url('./layouts/header.css');
@import url('./layouts/grid.css');

/* Page-Specific Styles */
@import url('./pages/home.css');
@import url('./pages/about.css');
@import url('./pages/locations.css');
@import url('./pages/menus.css');
@import url('./pages/breads.css');
@import url('./pages/social.css');
@import url('./pages/bread-order.css');
@import url('./pages/catering-order.css');
@import url('./pages/confirmation.css');

/* Responsive Styles */
@import url('./responsive/mobile.css');
@import url('./responsive/tablet.css');
@import url('./responsive/desktop.css');

/* Global text capitalization */
body, 
body * {
  text-transform: capitalize !important;
}

/* Capitalize headings */
h1, h2, h3, h4, h5, h6 {
  text-transform: capitalize;
}

/* Capitalize navigation */
.ws-nav-list a,
.ws-footer-nav a {
  text-transform: capitalize;
}

/* Capitalize buttons */
.ws-hero-btn,
.ws-submit-btn,
.ws-add-item-btn {
  text-transform: capitalize;
}

/* Capitalize form labels */
label {
  text-transform: capitalize;
}

/* Enhanced Mobile Optimizations */
@media (max-width: 768px) {
  /* Ensure text doesn't cause overflow on mobile */
  .ws-location-title,
  .ws-location-info p,
  .ws-location-btn {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Prevent iframe overflow on mobile */
  iframe {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Ensure all content stays within bounds */
  .ws-location,
  .ws-location-map,
  .ws-location-actions {
    max-width: 100%;
    overflow: hidden;
  }
  
  /* Improve touch targets */
  button, 
  .ws-btn,
  .ws-nav-toggle,
  .ws-back-to-top {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Prevent horizontal scrolling */
  body {
    overflow-x: hidden;
    width: 100%;
  }
  
  /* Improve form inputs on mobile */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px 16px;
    border-radius: 8px;
  }
  
  /* Better spacing for mobile */
  .ws-form-group {
    margin-bottom: 24px;
  }
  
  /* Improve modal positioning */
  .ws-modal {
    padding: 16px;
  }
  
  .ws-modal-content {
    width: 100%;
    max-width: 95%;
    margin: 20px auto;
  }
}

/* Extra small mobile optimizations */
@media (max-width: 480px) {
  /* Reduce padding for very small screens */
  .ws-container,
  .ws-form-section,
  .ws-main-card {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  /* Stack form elements vertically */
  .ws-form-top-section {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  /* Improve button sizing */
  .ws-btn,
  .ws-hero-btn,
  .ws-submit-btn {
    width: 100%;
    max-width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
  }
  
  /* Better image handling */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Improve navigation on very small screens */
  .ws-nav {
    padding: 0 12px;
  }
  
  .ws-nav-list li a {
    padding: 12px 16px;
    font-size: 0.95rem;
  }
}

/* Landscape orientation fixes */
@media (max-width: 768px) and (orientation: landscape) {
  .ws-hero {
    min-height: 40vh;
    max-height: 50vh;
  }
  
  .ws-hero-title {
    font-size: 1.6rem;
  }
  
  .ws-hero-tagline {
    font-size: 1rem;
  }
  
  /* Adjust modal for landscape */
  .ws-modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .ws-nav-logo img,
  .ws-hero-logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  /* Basic dark mode adjustments */
  .ws-modal {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  .ws-modal-content {
    background-color: #2a2a2a;
    color: #ffffff;
  }
}