/*
 * Castlo Industrial - Responsive CSS
 * Media queries globales y transversales.
 * Los componentes individuales tienen sus propios breakpoints en css/header.css,
 * css/nav.css, css/footer.css, etc. Este archivo maneja reglas que afectan
 * múltiples secciones simultáneamente.
 *
 * Variables de diseño definidas en style.css (:root).
 * --nav-height no existe en style.css; se define aquí como única variable nueva.
 */

/* ============================================================
   GLOBAL — Prevent horizontal scroll on all viewports
============================================================ */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

:root {
  --nav-height: 48px;
}

/* ============================================================
   CONTAINER ADJUSTMENTS BY BREAKPOINT
============================================================ */
@media (max-width: 1280px) {
  .container,
  .castlo-container {
    padding: 0 2rem;
  }
}

@media (max-width: 768px) {
  .container,
  .castlo-container {
    padding: 0 1rem;
  }
}

/* Headers use position:sticky (in flow) — no padding-top needed on page wrap */

/* ============================================================
   TYPOGRAPHY RESPONSIVE SCALE
============================================================ */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
  h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); }
  h3 { font-size: clamp(1.1rem, 3vw, 1.3rem); }
}

/* ============================================================
   SECTION PADDING SCALE
   Todas las secciones (castlo-services, castlo-categories, etc.)
   usan padding-top/bottom de 4rem en desktop.
   En móvil reducir a 2.5rem.
============================================================ */
@media (max-width: 768px) {
  #castlo-services,
  #castlo-categories,
  #castlo-trust,
  #castlo-brands,
  #castlo-featured-products,
  #castlo-resources,
  #castlo-cta-banner {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (max-width: 480px) {
  #castlo-services,
  #castlo-categories,
  #castlo-trust,
  #castlo-brands,
  #castlo-featured-products,
  #castlo-resources,
  #castlo-cta-banner {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* ============================================================
   GRID RESPONSIVE FALLBACKS
   Service cards y grids de secciones
============================================================ */
@media (max-width: 1024px) {
  /* 4-col grids → 2 cols */
  .services-grid,
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 4-col products → 3 cols */
  .featured-products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  /* 2-col grids → 1 col */
  .services-grid,
  .trust-grid {
    grid-template-columns: 1fr !important;
  }
  /* Products → 2 cols */
  .featured-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Resources → 1 col */
  .resources-grid {
    grid-template-columns: 1fr !important;
  }
  /* Categories → auto-fill smaller */
  .categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  }

  /* Contain all iframes on mobile */
  iframe {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  /* Products → 1 col */
  .featured-products-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   TOUCH TARGET SIZES (Accessibility)
   Botones y links táctiles deben tener mínimo 44x44px
============================================================ */
@media (max-width: 768px) {
  .btn,
  .header-action-item,
  .filter-section-title,
  .view-btn {
    min-height: 44px;
  }
}

/* ============================================================
   PREFERS-REDUCED-MOTION (Accessibility)
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-slide {
    transition: none !important;
  }
}

/* ============================================================
   PRINT STYLES
============================================================ */
@media print {
  #castlo-topbar,
  #castlo-header,
  #castlo-nav,
  #castlo-announcement-bar,
  #castlo-footer,
  .mobile-menu-toggle,
  .mobile-menu-drawer,
  .mobile-menu-overlay,
  .hero-prev,
  .hero-next,
  .hero-dots,
  .shop-filter-mobile-btn,
  .shop-sidebar-overlay {
    display: none !important;
  }

  #castlo-page-wrap {
    padding-top: 0 !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: white;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ============================================================
   HIGH CONTRAST MODE (Accessibility)
============================================================ */
@media (prefers-contrast: high) {
  :root {
    --castlo-light-border: #666666;
    --castlo-mid-gray: #444444;
  }

  .btn-outline {
    border-color: white;
  }

  .filter-section {
    border-bottom-color: #666;
  }
}

/* ============================================================
   FOCUS VISIBLE (Accessibility)
   Asegurar que los elementos con focus sean visibles para
   usuarios de teclado
============================================================ */
:focus-visible {
  outline: 3px solid var(--castlo-orange);
  outline-offset: 2px;
}

/* Remover outline para mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   SCROLLBAR CUSTOM (WebKit)
   Barra de scroll sutil para el sidebar y otros contenedores
============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--castlo-light-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--castlo-mid-gray, #718096);
}

/* ============================================================
   SELECTION COLOR
============================================================ */
::selection {
  background: rgba(232, 93, 4, 0.2);
  color: var(--castlo-navy);
}