/* =========================================
   responsive.css
   All screen-size rules for styles.css
   and product_style.css
   ========================================= */

/* ===== Large Desktop ≥1920px ===== */
@media (min-width: 1920px) {
  body {
    font-size: 18px;
  }

  .center-wrapper {
    height: 500px;
  }
  .product-box h2 {
    font-size: 24px;
  }
}

/* ===== Standard Desktop & Laptop (1440px–1919px) ===== */
@media (max-width: 1919px) and (min-width: 1440px) {
  body {
    font-size: 17px;
  }
  .center-wrapper {
    height: 450px;
  }
}

/* ===== Small Laptop (1280px–1439px) ===== */
@media (max-width: 1439px) and (min-width: 1280px) {
  body {
    font-size: 16px;
  }
  .center-wrapper {
    height: 420px;
  }
  .product-container {
    max-width: 95%;
  }
}

/* ===== Tablet Landscape (1024px–1279px) ===== */
@media (max-width: 1279px) and (min-width: 1024px) {
  .nav-bar {
    padding: 0 10px;
  }
  .mission-vision-wrapper {
    gap: 15px;
  }
  .center-wrapper {
    height: 380px;
  }
  .product-container {
    max-width: 90%;
  }
}

/* ===== Tablet Portrait (768px–1023px) ===== */
@media (max-width: 1023px) and (min-width: 768px) {
  .nav-bar {
    flex-direction: column;
    padding: 10px;
  }
  .mission-vision-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .product-container {
    padding: 0 10px;
  }
  .product-box {
    padding: 20px;
  }
}

/* ===== Shared Slideshow Adjustments (≤768px) ===== */
@media (max-width: 768px) {
  .center-wrapper {
    height: 400px;
  }

  .slideshow-container {
    max-width: 100%;
  }

  .slideshow-container video {
    border-radius: 0;
  }
}

/* ===== Mobile Landscape (576px–767px) ===== */
@media (max-width: 767px) and (min-width: 576px) {
  .site-header {
    padding: 10px;
  }
  .navbar .menu {
    flex-direction: column;
  }
  .product-box {
    padding: 15px;
    margin-bottom: 25px;
  }
  .product-box h2 {
    font-size: 19px;
  }
  .center-wrapper {
    height: 320px;
  }
}

/* ===== Mobile Portrait ≤575px ===== */
@media (max-width: 575px) {
  body {
    font-size: 14px;
  }
  .site-header {
    padding: 8px;
  }
  .navbar .menu {
    flex-direction: column;
    align-items: flex-start;
  }
  .center-wrapper {
    height: 300px;
  }
  .product-box {
    padding: 12px;
    margin-bottom: 20px;
  }
  .product-box h2 {
    font-size: 18px;
  }
}

/* ============ NAVBAR – HAMBURGER ============ */

/* Default (desktop): show full menu, hide toggle */

/* Hamburger button - always visible */
.nav-toggle {
  font-size: 28px;
  padding: 10px 15px;
  cursor: pointer;
  background: none;
  border: none;
  position: fixed; /* fixed so it stays on top */
  top: 15px;
  right: 15px; /* adjust as needed */
  z-index: 9999; /* make sure it's above everything */
}

/* Mobile / tablet */
@media (max-width: 768px) {
  .nav-toggle {
    font-size: 24px;
    top: 10px;
    right: 10px;
  }

  /* Hide menu by default */
  .navbar .menu,
  .nav-bar .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ddd;
  }

  .menu {
    display: none; /* hidden by default */
  }

  .menu.show {
    display: block;
  }

  .navbar .menu li a,
  .nav-bar .menu li a {
    padding: 12px 16px;
    display: block;
    color: green;
    font-weight: bold;
    border-bottom: 1px solid #eee;
  }

  .navbar .menu li a:hover {
    background: #f5f5f5;
  }
}
/* Desktop - menu always visible */
@media (min-width: 992px) {
  .menu {
    display: flex !important; /* or block/flex as per design */
  }
  .nav-toggle {
    display: none; /* hide hamburger on desktop */
  }
}

/* Mobile - menu hidden by default, toggled with button */
@media (max-width: 991px) {
  .menu {
    display: none; /* hide menu by default */
    position: absolute;
    top: 60px; /* below header */
    left: 0;
    width: 100%;
    background: #333;
    padding: 20px;
    z-index: 999;
  }
  .menu.show {
    display: block;
  }
  .menu ul {
    flex-direction: column;
  }
  .nav-toggle {
    display: block; /* show hamburger button */
  }
}