/* IC Computers World — Mobile-First CSS */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
input, textarea, select { font-size: 16px !important; } /* prevent iOS zoom */
button, a { -webkit-tap-highlight-color: transparent; }

/* ── Fluid responsive headings ── */
@media (max-width: 767px) {
  .text-headline-xl { font-size: clamp(1.6rem, 6vw, 2.5rem) !important; line-height: 1.2 !important; }
  .text-headline-lg { font-size: clamp(1.2rem, 5vw, 1.75rem) !important; line-height: 1.25 !important; }
  .text-headline-md { font-size: clamp(1rem, 4vw, 1.35rem) !important; line-height: 1.35 !important; }
  .text-body-lg     { font-size: 0.9375rem !important; line-height: 1.6 !important; }
  .text-body-md     { font-size: 0.875rem  !important; }
}

/* ── Safe container padding (replaces hard-coded 64px margin-desktop on mobile) ── */
.rp { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px)  { .rp { padding-left: 2rem;   padding-right: 2rem;   } }
@media (min-width: 1024px) { .rp { padding-left: 4rem;   padding-right: 4rem;   } }

/* Override any element using px-margin-desktop on small screens */
@media (max-width: 767px) {
  .px-margin-desktop { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-margin-mobile  { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ── Mobile menu animation ── */
.mobile-menu-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-menu-panel.open { max-height: 500px; }

/* ── Mobile filter drawer (products page) ── */
.filter-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 55;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.filter-overlay.open { opacity: 1; pointer-events: auto; }

.filter-drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #f9f9f8;
  border-radius: 1.25rem 1.25rem 0 0;
  z-index: 60;
  max-height: 82vh;
  overflow-y: auto;
  padding: 1.25rem 1rem 5rem;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.filter-drawer.open { transform: translateY(0); }

.mobile-filter-fab {
  display: none;
  position: fixed;
  bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  background: #003527; color: #fff;
  padding: .7rem 1.5rem;
  border-radius: 9999px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em;
  box-shadow: 0 4px 20px rgba(0,53,39,.35);
  border: none; cursor: pointer;
  white-space: nowrap;
  align-items: center; gap: .4rem;
  transition: transform .15s;
}
.mobile-filter-fab:active { transform: translateX(-50%) scale(.97); }
@media (max-width: 1023px) { .mobile-filter-fab { display: flex; } }

/* ── Contact form success ── */
.btn-success { background-color: #16a34a !important; }
.btn-error   { background-color: #dc2626 !important; }

/* ── Touch-friendly minimum hit areas ── */
@media (max-width: 767px) {
  button, [role="button"], a.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── Reduce section vertical padding on mobile ── */
@media (max-width: 767px) {
  section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-20  { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-24  { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .pt-32  { padding-top: 5.5rem !important; }
  .pt-24  { padding-top: 3.5rem !important; }
  .gap-\[80px\] { gap: 2.5rem !important; }
  .mt-20  { margin-top: 2.5rem !important; }
}

/* ── Grid fixes on small screens ── */
@media (max-width: 767px) {
  .md\:grid-cols-3, .md\:grid-cols-4, .lg\:grid-cols-12,
  .lg\:grid-cols-2, .md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  .md\:col-span-2, .lg\:col-span-7, .lg\:col-span-5,
  .lg\:col-span-9, .lg\:col-span-3, .md\:col-span-1,
  .md\:w-1\/2, .md\:w-1\/3 {
    grid-column: span 1 !important;
    width: 100% !important;
  }
}

/* ── Product grid: 2 cols on tablet ── */
@media (min-width: 640px) and (max-width: 1023px) {
  #product-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Bento grid ── */
@media (max-width: 767px) {
  .bento-item { transform: none !important; }
}

/* ── Sticky sidebar: remove on mobile ── */
@media (max-width: 1023px) {
  .sticky.top-32 { position: static !important; }
  aside.lg\:col-span-3 { display: none; }
}

/* ── Footer responsive ── */
@media (max-width: 767px) {
  footer .flex.gap-8, footer .flex.gap-6 { flex-wrap: wrap; gap: .75rem; justify-content: center; }
  footer .grid-cols-3, footer .md\:grid-cols-3 { grid-template-columns: 1fr !important; }
}

/* ── Admin: sidebar responsive ── */
@media (max-width: 1023px) {
  aside.h-screen.w-64.fixed { display: none !important; }
  .ml-64 { margin-left: 0 !important; }
}