/* ============================================================
   Locatium.AI — Responsive Stylesheet
   Injected after inline <style> on every page.
   Uses specificity overrides where needed (!important sparingly).
   ============================================================ */

/* ----------------------------------------------------------
   GLOBAL BASE
   ---------------------------------------------------------- */
html { overflow-x: hidden; }

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

*, *::before, *::after { box-sizing: border-box; }

/* ----------------------------------------------------------
   HAMBURGER BUTTON — hidden on desktop, shown ≤768px
   ---------------------------------------------------------- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background .15s;
  flex-shrink: 0;
  color: inherit;
}

.nav-hamburger:hover {
  background: rgba(0, 0, 0, .06);
}

.ham-line {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Animated X when open */
.nav-hamburger[aria-expanded="true"] .ham-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] .ham-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger[aria-expanded="true"] .ham-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----------------------------------------------------------
   ≤1024px — LAPTOP TUNING
   Tighten nav, constrain mega menus to viewport
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Tighten nav item spacing */
  .nav-trigger {
    padding: 8px 10px !important;
    font-size: 14px !important;
  }

  .nav-right {
    gap: 8px !important;
  }

  .nav-right .btn {
    padding: 7px 14px !important;
    font-size: 13px !important;
  }

  /* Cap mega menu to viewport */
  .mega {
    width: min(780px, calc(100vw - 32px)) !important;
    grid-template-columns: 180px 1fr 200px !important;
  }

  .mega-col3 {
    width: 200px !important;
    min-width: 200px !important;
  }

  /* Tighten inner containers */
  .section-inner,
  .nav-inner,
  .footer-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Ensure sections don't overflow at laptop width */
  .section { padding-left: 20px !important; padding-right: 20px !important; }
  footer   { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ----------------------------------------------------------
   ≤768px — TABLET / MOBILE: Hamburger nav + layout stacking
   ---------------------------------------------------------- */
@media (max-width: 768px) {

  /* ── Show hamburger; hide desktop nav elements ── */
  .nav-hamburger {
    display: flex !important;
    margin-left: auto; /* push to far-right of flex row */
  }
  .nav-links     { display: none !important; }
  .nav-right     { display: none !important; }

  /* ── Prevent body scroll when overlay is open ── */
  body.nav-locked { overflow: hidden !important; }
  html.nav-locked { overflow: hidden !important; } /* iOS Safari */

  /* ── Sub-nav (product pages only) — hide behind overlay ── */
  body.nav-locked .sub-nav { display: none !important; }

  /* ── Sub-nav: smaller height + horizontal scroll on mobile ── */
  .sub-nav-inner {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;   /* Firefox */
    padding-left: 16px !important;
    padding-right: 16px !important;
    height: 30px !important;
  }
  .sub-nav-inner::-webkit-scrollbar { display: none !important; } /* Chrome/Safari */
  .sub-nav-link { padding: 2px 8px !important; font-size: 12px !important; }
  .sub-nav-label { display: none !important; } /* "Smart Network CapEx" label: hide to save space */

  /*
   * Remove backdrop-filter from .nav at mobile.
   * backdrop-filter creates a containing block for position:fixed descendants
   * (Chromium/WebKit). Without it, the fixed overlay is correctly positioned
   * relative to the viewport, not the 64px nav bar.
   */
  .nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── Mobile overlay: full-screen panel below the nav bar ── */
  .nav-links.nav-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #fff !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 0 0 40px !important;
    z-index: 998 !important;
    border-top: 1px solid #e5e7eb !important;
    gap: 0 !important;
  }

  /* ── Nav items ── */
  .nav-links.nav-open .nav-item {
    border-bottom: 1px solid #f3f4f6 !important;
  }

  .nav-links.nav-open .nav-trigger {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: inherit !important;
  }

  /* Chevron rotates when dropdown is open (our .mob-open class) */
  .nav-links.nav-open .nav-item.mob-open .nav-chevron {
    transform: rotate(180deg) !important;
  }

  /*
   * DROPDOWNS inside overlay
   * The existing inline JS on each page uses .is-open on .nav-item.
   * We respond to that class here — no extra toggle logic needed.
   *
   * IMPORTANT: override position:fixed + inline top/left set by positionDropdown()
   * so dropdowns flow inline within the overlay instead of jumping to a
   * viewport-absolute position.
   */
  .nav-links.nav-open .dropdown {
    position: static !important;
    top: unset !important;
    left: unset !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    display: none !important;
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 20px 16px !important;
    background: #f9fafb !important;
  }

  /* Show dropdown when our JS adds .mob-open (tap only, never hover) */
  .nav-links.nav-open .nav-item.mob-open > .dropdown {
    display: block !important;
  }

  /*
   * Mega menus have class="dropdown mega" on the same element.
   * A standalone .mega rule would have equal specificity to the .dropdown rule
   * above and — appearing later — would override display:none for ALL megas.
   * Scoping to .mob-open ensures the mega is only visible when explicitly opened.
   */
  .nav-links.nav-open .nav-item.mob-open > .mega {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Hide sidebar (col1) and preview card (col3); show only item list (col2) */
  .nav-links.nav-open .mega-col1,
  .nav-links.nav-open .mega-col3 {
    display: none !important;
  }

  .nav-links.nav-open .mega-col2 {
    width: 100% !important;
    min-height: unset !important;
    padding: 0 !important;
    border-left: none !important;
  }

  .nav-links.nav-open .mega-col2-label { display: none !important; }

  /* Show all item panels (not just the active tab) */
  .nav-links.nav-open .mega-items-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  .nav-links.nav-open .mega-item {
    padding: 8px 0 !important;
    font-size: 14px !important;
  }

  /* ── Solutions: single column ── */
  .nav-links.nav-open .dd-sol-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* ── Case studies and other 2-col grids ── */
  .nav-links.nav-open .dropdown [style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Simple link rows ── */
  .nav-links.nav-open .dd-sm-link {
    display: flex !important;
    align-items: center !important;
    padding: 8px 0 !important;
    font-size: 14px !important;
  }

  .nav-links.nav-open .dd-section-label-inner {
    margin-top: 12px !important;
    margin-bottom: 4px !important;
  }

  /* ── Page layout adjustments ── */
  .section-inner,
  .nav-inner,
  .footer-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .section { padding-left: 16px !important; padding-right: 16px !important; }
  footer   { padding-left: 16px !important; padding-right: 16px !important; }

  /* ── Grids: 4-col / 3-col → 2-col ── */
  .grid-4,
  .grid-3,
  .metrics-inner { grid-template-columns: 1fr 1fr !important; }

  .footer-top { grid-template-columns: 1fr 1fr !important; }

  /* ── Hero ── */
  .home-hero-content { text-align: center !important; }
  .hero-ctas { justify-content: center !important; flex-wrap: wrap !important; }

  /* ── Platform chain-panel stats strip: "Real-time" at 36px overflows on mobile ── */
  .cp-stat { padding: 20px 12px !important; }
  .cp-stat-val { font-size: 20px !important; }

  /* ── Sol-prod-module and approach-tag: larger touch targets ── */
  .sol-prod-module,
  .approach-tag {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }

  /* ── Minimum 44px tap targets ── */
  .btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ----------------------------------------------------------
   ≤480px — MOBILE: Full single-column, reduced spacing
   ---------------------------------------------------------- */
@media (max-width: 480px) {

  /* Single column for all grid layouts */
  .grid-4,
  .grid-3,
  .grid-2,
  .metrics-inner,
  .summary-grid,
  .footer-top,
  .cta-block { grid-template-columns: 1fr !important; }

  /* Section / nav / footer padding */
  .section-inner,
  .nav-inner,
  .footer-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .section  { padding-left: 14px !important; padding-right: 14px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
  footer    { padding-left: 14px !important; padding-right: 14px !important; }

  /* Footer bottom stacking */
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  .footer-cta {
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Newsletter row */
  .newsletter-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .newsletter-btn {
    width: 100% !important;
    text-align: center !important;
  }

  /* Hero slider */
  .hero-slider { height: 200px !important; }
  .slider-nav  { width: 36px !important; height: 36px !important; font-size: 14px !important; }
  .slider-nav.prev { left: 8px !important; }
  .slider-nav.next { right: 8px !important; }

  /* Cards */
  .card { padding: 20px 16px !important; }

  /* Tables: horizontal scroll */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Tab lists */
  .tabs,
  .tab-list { flex-wrap: wrap !important; }

  /* CTA blocks */
  .cta-inner {
    flex-direction: column !important;
    text-align: center !important;
  }

  /* Hero title clamp adjustment */
  .hero-title  { font-size: clamp(26px, 8vw, 40px) !important; }
  .section-title { font-size: clamp(22px, 6vw, 34px) !important; }

  /* Platform layer tabs */
  .layer-tabs { flex-wrap: wrap !important; gap: 8px !important; }
  .layer-tab  { flex: 1 1 auto !important; text-align: center !important; }

  /* Platform cards horizontal scroll containers */
  .scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* ----------------------------------------------------------
   OVERFLOW SAFETY — always applied
   ---------------------------------------------------------- */
.nav-inner,
.section-inner,
.footer-inner { width: 100%; }

/* ----------------------------------------------------------
   SOL-HERO: centered layout (text + CTAs + KPI cards)
   ---------------------------------------------------------- */
.sol-hero-inner { text-align: center; }
.sol-hero-sub   { margin-left: auto; margin-right: auto; }
.sol-hero-ctas  { justify-content: center; }
.sol-hero-kpis  { justify-content: center; }

/* ----------------------------------------------------------
   SOL-PROD-CARD: stretched link so the whole card navigates
   The ::after of .sol-prod-link covers the entire card.
   .sol-prod-module links sit above (z-index 1) so they
   still navigate to their own individual pages.
   ---------------------------------------------------------- */
.sol-prod-card { position: relative; }

.sol-prod-link::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
}

.sol-prod-module {
  position: relative;
  z-index: 1;
}