/* ============================================
   MOBILE BASE - Core Mobile Foundation
   Organic Urban — Mobile-First Foundation
   ============================================
   
   This file provides the foundation for all mobile styles.
   It uses CSS custom properties from core/variables.css
   and follows mobile-first principles.
   
   PRINCIPLES:
   1. Minimal, targeted rules
   2. Use CSS custom properties
   3. Avoid !important (only when absolutely critical)
   4. Proper specificity
   5. Performance optimized
   ============================================ */

/* ============================================
   MOBILE BREAKPOINT
   ============================================ */
@media screen and (max-width: 768px) {
  
  /* ============================================
     VIEWPORT CONSTRAINTS
     ============================================ */
  
  /* Prevent horizontal scroll at root level; keep vertical scroll enabled */
  html {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
  }
  
  body {
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100vw;
    width: 100%;
    /* Use CSS variable for padding-top (header height) */
    padding-top: var(--header-height-mobile, 60px);
    /* Use CSS variable for padding-bottom (bottom nav + safe area) */
    padding-bottom: calc(
      var(--mobile-bottom-nav-height, 64px) + 
      var(--mobile-safe-area-bottom, env(safe-area-inset-bottom))
    );
    min-height: 100vh;
  }
  
  /* ============================================
     BOX SIZING
     ============================================ */
  
  /* Ensure consistent box-sizing */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* ============================================
     MAIN CONTENT AREA
     ============================================ */
  
  /* Main content containers */
  main,
  .main-content,
  .page-content {
    min-height: calc(100vh - var(--header-height-mobile, 60px));
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  
  /* ============================================
     CONTAINER CONSTRAINTS
     ============================================ */
  
  /* Top-level containers */
  body > .container,
  main > .container,
  main > section,
  .page-content > .container {
    max-width: 100vw;
    width: 100%;
    padding-left: var(--mobile-padding-container, 1rem);
    padding-right: var(--mobile-padding-container, 1rem);
  }
  
  /* ============================================
     SECTION PADDING
     ============================================ */
  
  /* Standard sections get mobile padding */
  section {
    padding-left: var(--mobile-padding-section, 1rem);
    padding-right: var(--mobile-padding-section, 1rem);
    max-width: 100vw;
  }
  
  /* Section inner containers reset padding */
  .section-inner,
  [class*="-inner"] {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* ============================================
     TOUCH OPTIMIZATIONS
     ============================================ */
  
  /* Touch targets - minimum 44px */
  button,
  a,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn {
    min-height: var(--mobile-touch-target-min, 44px);
    min-width: var(--mobile-touch-target-min, 44px);
    touch-action: manipulation;
  }
  
  /* Remove tap highlight, use custom */
  a,
  button,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: rgba(122, 154, 122, 0.2);
  }
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  /* Base font size */
  body {
    font-size: var(--mobile-font-size-base, 16px);
    line-height: var(--mobile-line-height, 1.6);
  }
  
  /* Headings */
  h1 {
    font-size: var(--mobile-heading-size-h1, 1.75rem);
    line-height: 1.2;
  }
  
  h2 {
    font-size: var(--mobile-heading-size-h2, 1.5rem);
    line-height: 1.3;
  }
  
  h3 {
    font-size: var(--mobile-heading-size-h3, 1.25rem);
    line-height: 1.4;
  }
  
  /* Text wrapping */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  
  /* ============================================
     IMAGES
     ============================================ */
  
  /* Responsive images */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* ============================================
     FORMS
     ============================================ */
  
  /* Form elements */
  input,
  textarea,
  select {
    width: 100%;
    max-width: 100%;
    min-height: var(--mobile-input-height, 48px);
    font-size: var(--mobile-font-size-base, 16px); /* Prevents zoom on iOS */
  }
  
  /* ============================================
     TABLES
     ============================================ */
  
  /* Tables become scrollable on mobile */
  table {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* ============================================
     GRID & FLEX FALLBACKS
     ============================================ */
  
  /* Grids become single column by default */
  /* Excludes: homepage-categories-grid (own responsive in style.css) */
  .grid:not([class*="keep-grid"]):not(.homepage-categories-grid):not(.bestsellers-grid),
  [class*="-grid"]:not([class*="keep-grid"]):not(.homepage-categories-grid):not(.bestsellers-grid) {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mobile-spacing-md, 1rem);
  }
  
  /* Flex containers stack on mobile */
  .flex:not([class*="keep-flex"]),
  [class*="flex"]:not([class*="keep-flex"]) {
    flex-direction: column;
  }
  
  /* ============================================
     CARDS
     ============================================ */
  
  /* Cards take full width on mobile */
  /* Excludes: homepage-category-card (sized by grid in style.css) */
  .card:not([class*="keep-width"]):not([class*="homepage-category"]):not(.ou-product-card),
  [class*="-card"]:not([class*="keep-width"]):not([class*="homepage-category"]):not([class*="bestseller"]):not(.ou-product-card):not([class*="ou-product-card"]) {
    width: 100%;
    max-width: 100%;
  }
  
  /* ============================================
     OVERFLOW PREVENTION
     ============================================ */
  
  /* Prevent any element from causing horizontal scroll */
  * {
    max-width: 100%;
  }
  
  /* Allow specific elements to overflow if needed */
  pre,
  code,
  table {
    max-width: 100%;
  }
  
  /* ============================================
     SAFE AREA SUPPORT (iOS)
     ============================================ */
  
  /* Elements that need safe area padding */
  .safe-area-top {
    padding-top: calc(var(--mobile-padding-section, 1rem) + var(--mobile-safe-area-top, env(safe-area-inset-top)));
  }
  
  .safe-area-bottom {
    padding-bottom: calc(var(--mobile-padding-section, 1rem) + var(--mobile-safe-area-bottom, env(safe-area-inset-bottom)));
  }
  
  .safe-area-left {
    padding-left: calc(var(--mobile-padding-section, 1rem) + var(--mobile-safe-area-left, env(safe-area-inset-left)));
  }
  
  .safe-area-right {
    padding-right: calc(var(--mobile-padding-section, 1rem) + var(--mobile-safe-area-right, env(safe-area-inset-right)));
  }
  
}

/* ============================================
   SMALL MOBILE (320px - 374px)
   ============================================ */
@media screen and (max-width: 374px) {
  :root {
    --mobile-padding-section: 0.75rem; /* 12px */
    --mobile-padding-container: 0.75rem; /* 12px */
  }
}

/* ============================================
   LARGE MOBILE (414px+)
   ============================================ */
@media screen and (min-width: 414px) and (max-width: 768px) {
  :root {
    --mobile-padding-section: 1.25rem; /* 20px */
    --mobile-padding-container: 1.25rem; /* 20px */
  }
}

/* ============================================
   LANDSCAPE MODE (Mobile)
   Special handling for landscape orientation
   ============================================ */
@media screen and (max-width: 896px) and (orientation: landscape) {
  /* Reduce header height in landscape for more content space */
  :root {
    --header-height-mobile: 50px;
    --mobile-bottom-nav-height: 48px;
  }

  body {
    padding-top: var(--header-height-mobile, 50px);
    padding-bottom: calc(var(--mobile-bottom-nav-height, 48px) + env(safe-area-inset-bottom));
  }

  /* Compact header in landscape */
  .site-header {
    height: var(--header-height-mobile, 50px);
  }

  /* Hide bottom nav in very short landscape viewports */
  @media (max-height: 400px) {
    #mobile-bottom-nav {
      display: none;
    }

    body {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  /* Adjust chatbot button position */
  .ou-chatbot {
    bottom: calc(var(--mobile-bottom-nav-height, 48px) + 12px + env(safe-area-inset-bottom));
  }

  /* Two-column product grids even on landscape mobile */
  .product-grid,
  [class*="product"][class*="grid"] {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Adjust hero sections for landscape */
  /* Excludes: homepage-category-card--hero (it's a card, not a hero section) */
  .hero-section,
  [class*="hero"]:not([class*="homepage-category"]) {
    min-height: auto;
    padding-top: var(--mobile-spacing-md);
    padding-bottom: var(--mobile-spacing-md);
  }

  /* Reduce vertical spacing in landscape */
  section {
    padding-top: var(--mobile-spacing-md);
    padding-bottom: var(--mobile-spacing-md);
  }
}