/* style.css */
:root {
  /* PRIMARY */
  --kav-red:          #C0392B;   /* Brand red — primary CTA, accents */
  --kav-red-dark:     #96281B;   /* Hover state for red buttons */
  --kav-red-light:    #E74C3C;   /* Lighter red for badges, tags */

  /* DARK BACKGROUNDS */
  --kav-dark:         #1A1A1A;   /* Main dark bg — hero, footer */
  --kav-dark-2:       #242424;   /* Section dark bg */
  --kav-dark-3:       #2E2E2E;   /* Card dark bg */

  /* LIGHT BACKGROUNDS */
  --kav-white:        #FFFFFF;
  --kav-off-white:    #F8F8F6;   /* Alternate section bg */
  --kav-light-grey:   #ECECEC;   /* Borders, dividers */
  --kav-mid-grey:     #9A9A9A;   /* Subtext, captions */

  /* ACCENT */
  --kav-gold:         #C9A84C;   /* Premium accent — use sparingly */
  --kav-steel:        #6C7A89;   /* Steel grey for spec sections */

  /* OVERRIDE BOOTSTRAP PRIMARY */
  --bs-primary:       #C0392B;
  --bs-primary-rgb:   192, 57, 43;
}

/* ── GLOBAL RESPONSIVE RESET ────────────────────────────── */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  background-color: var(--kav-dark) !important;
  margin: 0;
  padding: 0;
  position: relative;
}

img, svg, iframe, video, .row, .container, .container-fluid, header, nav, section, footer {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.container, .container-fluid {
  overflow: hidden;
  max-width: 100% !important;
}

img {
  max-width: 100%;
  height: auto;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
/* DISPLAY — hero titles, section headlines, product names */
h1, h2, h3, .display-1, .display-2, .display-3,
.display-4, .display-5, .display-6, .section-title {
  font-family: 'Playfair Display', serif;
}

/* BODY — body text, nav, buttons, specs, labels */
body, p, a, button, input, select, textarea,
.btn, .nav-link, .card-text, .lead {
  font-family: 'DM Sans', sans-serif;
}

/* MONO — dimensions, model numbers, spec tables */
.spec-value, .model-number, code, .dimensions {
  font-family: 'JetBrains Mono', monospace;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* TYPOGRAPHY SCALE */
h1 { font-size: clamp(2rem, 4.5vw + 0.5rem, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw + 0.5rem, 2.8rem); font-weight: 600; }
h3 { font-size: clamp(1.3rem, 2vw + 0.5rem, 2rem); font-weight: 600; }

.hero-title    { font-size: clamp(2.2rem, 5.5vw + 0.5rem, 4.8rem); line-height: 1.15; overflow-wrap: break-word; }
.hero-subtitle { font-size: clamp(0.95rem, 1.8vw + 0.2rem, 1.25rem); font-weight: 300; }
.section-title { font-size: clamp(1.6rem, 2.8vw + 0.4rem, 2.5rem); }
.spec-label    { font-size: 0.85rem; color: var(--kav-mid-grey); }

/* ── SPACING & UTILITIES ────────────────────────────────── */
.section-padding    { padding: 80px 0; }
.section-padding-sm { padding: 50px 0; }
.section-padding-lg { padding: 120px 0; }
.bg-off-white       { background-color: var(--kav-off-white); }
.bg-dark-custom     { background-color: var(--kav-dark); }

/* ── SHADOWS & EFFECTS ──────────────────────────────────── */
.shadow-kav-sm  { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.shadow-kav-md  { box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.shadow-kav-lg  { box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.shadow-kav-red { box-shadow: 0 8px 30px rgba(192,57,43,0.35); }
.border-top-red { border-top: 3px solid var(--kav-red) !important; }

/* ── TRANSITIONS ────────────────────────────────────────── */
.btn          { transition: all 0.2s ease; }
.card         { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.nav-link     { transition: color 0.2s ease; }
a             { transition: color 0.2s ease; }

/* Image zoom — parent needs overflow:hidden */
.img-hover-zoom { overflow: hidden; border-radius: 10px; }
.img-hover-zoom img { transition: transform 0.4s ease; }
.img-hover-zoom:hover img { transform: scale(1.06); }

/* ── NAVBAR ─────────────────────────────────────────────── */
.nav-transparent { background: transparent !important; }
.nav-scrolled {
  background-color: var(--kav-dark) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
#mainNav { transition: background-color 0.35s ease, box-shadow 0.35s ease; }

/* Mobile Offcanvas styling */
.offcanvas-end {
  width: 300px !important;
  max-width: 85vw !important;
}

.mobile-nav-link {
  display: block;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 12px 10px;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: all 0.2s ease;
  border-radius: 4px;
}
.mobile-nav-link:hover, .mobile-nav-link:focus {
  color: var(--kav-red-light);
  background-color: rgba(255,255,255,0.05);
  padding-left: 15px;
}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-kav-red {
  background-color: var(--kav-red);
  color: #fff !important;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-kav-red:hover {
  background-color: var(--kav-red-dark);
  transform: translateY(-1px);
}
.btn-kav-red:active { transform: scale(0.97); }

/* Touch target enhancement for mobile buttons */
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── HERO SECTION ───────────────────────────────────────── */
.hero-section {
  min-height: 100vh;
  padding-top: 110px;
  padding-bottom: 60px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* CSS parallax — desktop */
  position: relative;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,26,26,0.92) 0%, rgba(26,26,26,0.55) 100%);
  z-index: 1;
}

/* ── CATEGORY CARDS ─────────────────────────────────────── */
.category-card {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-top 0.3s;
}
.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 45px rgba(0,0,0,0.5);
  border-top: 3px solid var(--kav-red) !important;
}
.category-card .overflow-hidden img {
  transition: transform 0.4s ease;
}
.category-card:hover .overflow-hidden img {
  transform: scale(1.07);
}

/* ── FLOATING ELEMENTS & STICKY BOTTOM ──────────────────── */
body.has-sticky-bottom {
  padding-bottom: 65px;
}

.whatsapp-float {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 54px;
  height: 54px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,0.5);
  z-index: 1040;
  transition: transform 0.2s, bottom 0.3s ease;
}
.whatsapp-float:hover { transform: scale(1.1); color: #fff; }

.back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: var(--kav-red);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1040;
  box-shadow: 0 4px 15px rgba(192,57,43,0.4);
  transition: background 0.2s, bottom 0.3s ease;
}
.back-to-top-btn:hover { background: var(--kav-red-dark); }

/* Adjust floating buttons when sticky bottom CTA bar is present on mobile */
body.has-sticky-bottom .whatsapp-float {
  bottom: 75px;
}
body.has-sticky-bottom .back-to-top-btn {
  bottom: 135px;
}

/* Sticky Bottom Bar Styling */
.sticky-bottom {
  box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
  z-index: 1030;
}

/* ── TABLE RESPONSIVENESS ──────────────────────────────── */
.table-responsive {
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
}

.table th, .table td {
  white-space: nowrap;
}

.table td.spec-value, .table td.model-number {
  white-space: normal;
}

/* ── RESPONSIVE MEDIA QUERIES ────────────────────────────── */
@media (max-width: 991.98px) {
  .section-padding    { padding: 60px 0; }
  .section-padding-sm { padding: 40px 0; }
  .section-padding-lg { padding: 80px 0; }
  
  [data-aos] {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .hero-section {
    min-height: 85vh;
    padding-top: 100px;
    padding-bottom: 50px;
  }
}

@media (max-width: 767.98px) {
  .section-padding    { padding: 45px 0; }
  .section-padding-sm { padding: 30px 0; }
  .section-padding-lg { padding: 55px 0; }

  iframe {
    max-height: 320px;
  }

  .hero-section {
    background-attachment: scroll; /* Fixes iOS parallax jitter */
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 50px;
  }

  .whatsapp-float {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
    right: 15px;
    bottom: 75px;
  }

  .back-to-top-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    right: 15px;
    bottom: 20px;
  }

  body.has-sticky-bottom .whatsapp-float {
    bottom: 72px;
    right: 15px;
  }

  body.has-sticky-bottom .back-to-top-btn {
    bottom: 125px;
    right: 15px;
  }

  /* Product filter buttons container on mobile */
  .filter-btn {
    font-size: 0.85rem;
    padding: 6px 14px;
  }
}

@media (max-width: 575.98px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-subtitle br {
    display: none;
  }

  .btn-lg {
    font-size: 1rem;
    padding: 10px 20px;
    width: 100%;
  }

  .d-flex.flex-wrap.gap-3 {
    gap: 10px !important;
  }
}