/* ============================================================
   TJ EXPORTS — GLOBAL RESPONSIVE CSS
   Breakpoints: Mobile ≤ 480px | Tablet ≤ 768px | Laptop ≤ 1024px
   ============================================================ */

/* ── HAMBURGER TOGGLE (hidden on desktop) ── */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  cursor: pointer;
  z-index: 1100;
  background: none;
  border: none;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: #1e293b;
  border-radius: 3px;
  transition: all 0.3s ease;
}
/* When header is dark (index page) */
header.dark-nav .menu-toggle span { background: #fff; }

/* Active (X) state */
.menu-toggle.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ── PREVENT BODY SCROLL WHEN MENU OPEN ── */
body.nav-open { overflow: hidden; }

/* ── OVERLAY BEHIND MOBILE MENU ── */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 900;
}
.nav-overlay.active { display: block; }

/* ============================================================
   LAPTOP / SMALL DESKTOP  (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .logo img { width: 200px; height: 75px; }
  .nav-menu { gap: 22px; }
  .nav-menu li a { font-size: 13px; }

  /* Index hero */
  .hero h1, .hero h2 { font-size: 44px; }
  .hero p { font-size: 15px; }

  /* About/Contact/Enquiry hero overlay */
  .hero-overlay h1 { font-size: 48px; }
  .hero-overlay p  { font-size: 15px; }

  .section-title h2 { font-size: 32px; }

  /* Cert image */
  .cert-img-wrap img { width: 60%; }

  /* Products grid */
  .products-grid  { grid-template-columns: repeat(2,1fr); }

  /* Stats */
  .stats-grid    { grid-template-columns: repeat(2,1fr); }
  .stat-box h3   { font-size: 34px; }

  /* Why grid */
  .why-grid      { grid-template-columns: repeat(2,1fr); }

  /* About FAQ grid */
  .faq-grid      { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Contact form */
  .contact-section { width: 95%; }
}

/* ============================================================
   TABLET  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ── HEADER / NAV ── */
  .menu-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 80px 30px 30px;
    z-index: 1000;
    transition: right 0.35s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
    overflow-y: auto;
  }
  .nav-menu.open { right: 0; }
  .nav-menu li { width: 100%; }
  .nav-menu li a {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #1e293b;
  }
  .nav-menu li:last-child a { border-bottom: none; }

  /* Logo sizing */
  .logo img { width: 160px; height: 60px; }
  .navbar   { padding: 10px 0; }

  /* ── HERO (index) ── */
  .hero          { height: 55vh; min-height: 320px; }
  .slider        { height: 55vh; min-height: 320px; }
  .hero h1, .hero h2 { font-size: 30px; margin-bottom: 14px; }
  .hero p        { font-size: 14px; margin-bottom: 20px; max-width: 90%; }
  .hero-content  { padding: 20px; }
  .btn           { padding: 12px 26px; font-size: 14px; }

  /* ── HERO OVERLAY (other pages) ── */
  .hero-overlay h1 { font-size: 34px; }
  .hero-overlay p  { font-size: 14px; max-width: 95%; }

  /* ── SECTION SPACING ── */
  section, .section { padding: 60px 0; }
  .cert-section     { padding: 50px 0; }
  .stats            { padding: 60px 0; }
  .why-us           { padding: 60px 0; }
  .about-section    { padding: 60px 0; }
  .features         { padding: 60px 0; }
  .products         { padding: 60px 0; }

  /* ── CERT SECTION (index) ── */
  .cert-img-wrap img { width: 85%; max-height: 280px; }
  .about-grid        { grid-template-columns: 1fr; gap: 30px; }

  /* Certification badge row */
  .cert-badge-row { flex-direction: column; gap: 14px; }

  /* ── STATS ── */
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .stat-box h3  { font-size: 30px; }
  .stat-box     { padding: 30px 15px; }
  .stat-box i   { font-size: 30px; }

  /* ── PRODUCTS GRID ── */
  .products-grid { grid-template-columns: 1fr; gap: 24px; }
  .product-card img { height: 200px; }

  /* ── WHY US ── */
  .why-grid  { grid-template-columns: 1fr; gap: 20px; }
  .why-card  { padding: 30px 22px; }

  /* ── GLOBAL PRESENCE ── */
  .gp-heading { font-size: 28px; }
  .gp-card    { min-width: 130px; padding: 22px 18px 16px; }
  .gp-flag    { width: 70px; height: 46px; }

  /* ── ABOUT PAGE ── */
  .about-grid   { grid-template-columns: 1fr; gap: 30px; }
  .about-image img { height: 250px; }
  .about-content h2 { font-size: 24px; }
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .products-wrapper { grid-template-columns: 1fr; gap: 20px; }
  .products-title h2 { font-size: 30px; }

  /* FAQ grid (about page) */
  .faq-grid,
  [class*="faq"] > div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] { display: block !important; }
  div[style*="grid-template-columns: 1fr 1fr"] > div:first-child { margin-bottom: 30px; }

  /* ── CONTACT PAGE ── */
  .contact-section {
    grid-template-columns: 1fr !important;
    width: 92%;
    margin: 40px auto;
  }
  /* Contact form floats standalone on mobile */
  .contact-form { padding: 28px 22px; }
  .contact-form h2 { font-size: 24px; }

  /* Map */
  .map-section { width: 92%; margin: 30px auto; }
  .map-section iframe { height: 300px; }

  /* ── ENQUIRY PAGE grids ── */
  div[style*="grid-template-columns: 1fr 1fr"] {
    display: block !important;
  }
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    display: block !important;
  }

  /* ── FOOTER ── */
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px; }

  /* ── SECTION TITLE ── */
  .section-title h2 { font-size: 26px; }
  .section-title    { margin-bottom: 36px; }

  /* Table overflow fix */
  table { font-size: 12px; }
  div[style*="overflow-x:auto"], div[style*="overflow-x: auto"] { overflow-x: auto; }
}

/* ============================================================
   MOBILE  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  /* Container */
  .container { width: 94%; }

  /* Logo */
  .logo img { width: 130px; height: 50px; }

  /* Hero */
  .hero        { height: 50vh; min-height: 280px; }
  .slider      { height: 50vh; min-height: 280px; }
  .hero h1, .hero h2 { font-size: 22px; margin-bottom: 10px; }
  .hero p      { font-size: 13px; max-width: 100%; }
  .hero-content { padding: 15px; }
  .btn         { padding: 10px 22px; font-size: 13px; }

  /* Hero overlay */
  .hero-overlay h1 { font-size: 24px; }
  .hero-overlay p  { font-size: 13px; }

  /* Section */
  section, .section { padding: 45px 0; }

  /* Cert */
  .cert-img-wrap img { width: 100%; max-height: 220px; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-box h3  { font-size: 26px; }
  .stat-box     { padding: 22px 12px; }

  /* Product card */
  .product-card img { height: 180px; }
  .product-content  { padding: 18px; }
  .product-content h3 { font-size: 18px; }

  /* Feature grid */
  .feature-grid { grid-template-columns: 1fr !important; }

  /* About content */
  .about-content h2, .about-content h3 { font-size: 20px; }

  /* GP section */
  .gp-heading { font-size: 22px; }
  .gp-card    { min-width: 110px; padding: 16px 12px 12px; }
  .gp-flag    { width: 56px; height: 38px; }
  .gp-name    { font-size: 12px; }

  /* Contact */
  .contact-form { padding: 22px 16px; }
  .contact-form button { font-size: 14px; padding: 13px; }
  .map-section iframe  { height: 240px; }

  /* Nav menu wider on tiny screens */
  .nav-menu { width: 240px; right: -240px; }

  /* Footer */
  .copyright { font-size: 12px; padding: 16px 0; }

  /* Section title */
  .section-title h2 { font-size: 22px; }

  /* Cert badge flex */
  div[style*="display:flex"][style*="align-items:center"][style*="gap:20px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Table */
  table { min-width: 480px; }
}

/* ── PREVENT IMAGES OVERFLOW ── */
img { max-width: 100%; height: auto; }

/* ── FIX INLINE-STYLE GRIDS ON TABLET/MOBILE ── */
@media (max-width: 768px) {
  /* FAQ section in about.html */
  section[style*="padding: 90px"] > .container > div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }

  /* Enquiry sections */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
}

/* ============================================================
   ADDITIONAL EDGE-CASE FIXES
   ============================================================ */

/* Contact page — form is a sibling div, not inside .contact-section */
@media (max-width: 768px) {
  /* contact-section grid → single column */
  .contact-section { grid-template-columns: 1fr !important; }
  /* Enquiry page inline styled grids */
  .enquiry-wrapper { grid-template-columns: 1fr !important; }
  .contact-cards   { grid-template-columns: 1fr !important; }
}

/* ── PRODUCT PAGE sidebar mobile ── */
@media (max-width: 768px) {
  .layout { height: auto !important; overflow: visible !important; }
  .sidebar { width: 100% !important; min-width: unset !important; }
  .content { height: auto !important; overflow: visible !important; }
}

/* ── Prevent wide tables from breaking layout ── */
.cert-section table, section table {
  min-width: 0;
}
@media (max-width: 600px) {
  .cert-section div[style*="overflow-x:auto"],
  div[style*="overflow-x:auto"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Fix hero content buttons wrapping ── */
@media (max-width: 480px) {
  .hero-buttons { flex-direction: column; gap: 12px; align-items: center; }
}

/* ── Navbar: ensure hamburger is always right-aligned ── */
.navbar {
  position: relative;
}
@media (max-width: 768px) {
  .navbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  /* Override any inline flex-direction:column from old code */
  header .navbar { flex-direction: row !important; }
}