/* 
 * Oahu Mobile Car Detailing - Modular CSS Architecture
 * Main stylesheet that imports all components
 */

/* Base styles - foundational CSS */
@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./base/typography.css');

/* Layout components */
@import url('./components/layout.css');

/* UI Components */
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/forms.css');

/* Site structure */
@import url('./components/header.css');
@import url('./components/navigation.css');
@import url('./components/footer.css');

/* Interactive components */
@import url('./components/cart.css');

/* Page-specific styles */
@import url('./pages/home.css');

/* Cookie banner styles */
#cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #111;
  color: #fff;
  padding: 14px;
  display: none;
}

#cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.5);
  display: none;
}

#cookie-modal[aria-hidden="false"] {
  display: block;
}

#cookie-modal .modal-content {
  background: #fff;
  color: #111;
  max-width: 560px;
  margin: 10vh auto;
  padding: 20px 22px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Utility classes for responsive behavior */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
  
  /* Ensure bottom content is visible on mobile */
  body {
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
  }
  
  main {
    padding-bottom: 40px !important;
  }
  
  /* Ensure CTA section has proper spacing on mobile */
  .section.cta {
    padding-bottom: 60px !important;
  }
  
  /* Ensure footer is visible */
  .site-footer {
    margin-bottom: env(safe-area-inset-bottom, 20px) !important;
  }
}

@media (min-width: 769px) {
  .show-on-mobile {
    display: none !important;
  }
}

/* Hero → Review badge */
.hero .hero-review-badge{
  display:inline-flex; align-items:center; gap:.8rem;
  margin-top:1rem; padding:.5rem .75rem;
  background:#fff; color:#111; border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  font-size:14px; line-height:1;
}
.hero .hrb-logos{ display:flex; gap:.4rem; }
.hero .hrb-logo{ width:22px; height:22px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; }
.hero .hrb-rating{ display:flex; align-items:center; gap:.5rem; }
.hero .hrb-score{ font-size:20px; font-weight:700; }
.hero .hrb-stars{ display:flex; gap:2px; }
.hero .hrb-stars .star{ width:16px; height:16px; fill:#FFD166; }
.hero .hrb-link{ color:#111; text-decoration:none; border-bottom:1px solid rgba(17,17,17,.25); padding-bottom:1px; }
.hero .hrb-link:hover{ border-bottom-color:#111; }
@media (max-width:640px){
  .hero .hero-review-badge{ gap:.6rem; padding:.5rem .6rem; }
  .hero .hrb-score{ font-size:18px; }
  .hero .hrb-logo{ width:20px; height:20px; }
}

/* --- iOS Safari SVG hard fix inside review badge --- */
.hero .hero-review-badge{display:inline-flex;align-items:center;gap:.8rem;flex-wrap:nowrap;white-space:nowrap;line-height:1}
.hero .hero-review-badge svg{display:block!important;width:auto!important;height:auto!important;max-width:none!important;flex:0 0 auto}
.hero .hrb-logos>.hrb-logo{width:22px!important;height:22px!important;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.06) inset}
.hero .hrb-stars>.star{width:16px!important;height:16px!important;fill:#FFD166;display:block;flex:0 0 auto}

@media (max-width:640px){
  .hero .hero-review-badge{gap:.6rem;padding:.5rem .6rem}
  .hero .hrb-logos>.hrb-logo{width:20px!important;height:20px!important}
  .hero .hrb-stars>.star{width:14px!important;height:14px!important}
}

/* Force hide mobile menu on desktop */
@media (min-width: 1000px) {
  .mobile-sidebar,
  .mobile-nav-content,
  .mobile-nav-header,
  .mobile-nav-links,
  .mobile-phone-section,
  .mobile-phone-btn,
  .mobile-nav-close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: -9999 !important;
  }
}