/* ============================================
   global.css
   Shared across every page. Bootstrap 5 (via CDN
   in header.php) handles grid/layout/spacing/buttons
   structurally — this file ONLY holds what Bootstrap
   can't give us: brand colors, fonts, nav/footer/button
   skins, and the few custom visual touches (WA float,
   split logo, hover effects).
============================================ */

/* ============================================
   FLUID ROOT — drives the entire type + spacing scale.
   Every component size in this project is expressed in rem, so the
   root below scales the whole storefront uniformly. Expressed in rem
   (not px) so a reader's browser font-size preference still applies.

     <= 689px viewport : 16px  (phones/tablets keep today's sizing)
        1280px         : 17.9px  (x1.12)
        1440px         : 18.4px  (x1.15)
        1920px+        : 20px    (x1.25, capped — never grows on ultrawide)
============================================ */
html {
  font-size: clamp(1rem, 0.86rem + 0.325vw, 1.25rem);
}

:root {
  /* .tv-nav height. Single source of truth: the fixed navbar sits outside
     the flow, so every page hero computes its top padding from this. */
  --tv-nav-h: 72px;

  --blue:    #1870B5;
  --navy:    #0E1B2A;
  --navy2:   #162233;
  --navy3:   #1E2F42;
  --navy4:   #243549;
  --white:   #FFFFFF;
  --smoke:   #7A8FA6;
  --silver:  #A8BDD0;
  --blue2:   #2589D4;
  --blue3:   #0E5C96;
}

body {
  font-family:'Barlow', sans-serif;
  background: var(--navy);
  color: var(--white);
  /* Safety net against horizontal page scroll. `clip` rather than `hidden`
     because `hidden` would turn body into a scroll container and break the
     position:sticky category tabs on the products page. */
  overflow-x: clip;
}

/* Bootstrap's reboot does not constrain image width — this does. */
img, svg, video { max-width: 100%; }
img { height: auto; }

/* Hatch on navy sections only — not hero/page-hero */
section.featured,
section.dealer-cta,
section.benefits-section,
section.pd-specs-section,
section.pd-enquiry,
section.pd-bottom-cta {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.012),
    rgba(255,255,255,0.012) 7px,
    transparent 7px,
    transparent 14px
  ) !important;
}

/* ── GRID TEXTURE — applied to dark sections via .tv-grid class ── */
.tv-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}

/* ── HATCH TEXTURE — diagonal stripe ── */
.tv-hatch {
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.07),
      rgba(255,255,255,0.07) 7px,
      transparent 7px,
      transparent 14px
    ) !important;
}


/* ============================================
   TYPE SCALE
   Use these classes for ALL headings/body text
   on every page so sizing stays consistent.
   Headings -> Barlow Condensed (900 weight)
   Body/UI  -> Barlow (400-600 weight)
============================================ */

/* Page-level hero heading (biggest on a page, hero sections only) */
.h1-display {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; letter-spacing:0.0125em; line-height:1.05;
  font-size:clamp(3rem,5.6vw,4.75rem);
  color:var(--white);
}

/* Section heading (used on every page for each content block) */
.h2-section {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; letter-spacing:0.0125em; line-height:0.95;
  font-size:clamp(2.375rem,5vw,3.875rem);
  color:var(--white);
}

/* Card/component heading (product names, machine models, testimonial names) */
.h3-card {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; line-height:1.1;
  font-size:1.375rem;
  color:var(--white);
}

/* Small eyebrow/overline label above headings */
.label-overline {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; letter-spacing:0.25rem; text-transform:uppercase;
  font-size:0.6875rem;
  color:var(--blue);
}

/* Body paragraph text */
.text-body {
  font-family:'Barlow', sans-serif;
  font-weight:400; line-height:1.75;
  font-size:1rem;
  color:var(--smoke);
}

/* Large body text (hero descriptions, intro paragraphs) */
.text-body-lg {
  font-family:'Barlow', sans-serif;
  font-weight:400; line-height:1.8;
  font-size:1.1875rem;
  color:var(--smoke);
}

/* Small UI text (badges, meta labels, captions) */
.text-meta {
  font-family:'Barlow', sans-serif;
  font-weight:600; letter-spacing:0.09375rem; text-transform:uppercase;
  font-size:0.6875rem;
  color:var(--smoke);
}

/* Big stat/number display (trust strip, hero stats) */
.stat-display {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; line-height:1;
  font-size:2.875rem;
  color:var(--white);
}

/* ── NAV ── */
.tv-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:72px; display:flex; align-items:center;
  justify-content:space-between;
  background:rgba(14,27,42,0.97);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(27,117,188,0.2);
  transition:box-shadow 0.3s var(--tv-ease);
}
.nav-logo {
  display:flex; align-items:center;
  text-decoration:none; flex-shrink:0;
}
.nav-logo-tool {
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.625rem; font-weight:900; letter-spacing:0.0625rem;
  color:var(--navy) !important; background:var(--white) !important;
  padding:4px 10px 4px 12px; border-radius:3px 0 0 3px;
  display:inline-block;
}
.nav-logo-visor {
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.625rem; font-weight:900; letter-spacing:0.0625rem;
  color:var(--white) !important; background:var(--blue) !important;
  padding:4px 12px 4px 10px; border-radius:0 3px 3px 0;
  display:inline-block;
}

/* desktop links */
.nav-menu {
  display:flex; align-items:center; gap:4px;
}
.nav-link {
  font-family:'Barlow Condensed', sans-serif;
  font-size:0.9375rem; font-weight:400; letter-spacing:0.09375rem;
  text-transform:uppercase; color:var(--silver);
  text-decoration:none; padding:6px 12px; border-radius:3px;
  transition:color 0.2s var(--tv-ease), background 0.2s var(--tv-ease);
  white-space:nowrap;
  border-bottom:2px solid transparent;
}
.nav-link:hover { color:var(--white); }
.nav-link.active { color:var(--white); border-bottom-color:var(--blue); }
.nav-cta {
  background:var(--blue) !important; color:var(--white) !important;
  padding:8px 18px !important; border-radius:3px;
  border-bottom:none !important; margin-left:8px;
}
.nav-cta:hover { background:var(--blue2) !important; }

/* Between 992px and 1200px the full link set plus the CTA nearly fills the
   bar. Tighten tracking and padding there so it can never wrap or overflow. */
@media (min-width:992px) and (max-width:1199px) {
  .nav-link { padding:6px 9px; letter-spacing:0.0625rem; }
  .nav-cta  { padding:8px 14px !important; margin-left:4px; }
  .nav-logo-tool, .nav-logo-visor { font-size:1.5rem; }
}

/* hamburger — hidden on desktop */
.nav-burger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; background:none; border:none; cursor:pointer;
  padding:8px; width:40px; height:40px; flex-shrink:0;
}
.nav-burger span {
  display:block; height:2px; width:24px;
  background:var(--white); border-radius:2px;
  transition:all 0.3s var(--tv-ease);
  transform-origin:center;
}
/* burger → X animation */
.nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── MOBILE BOTTOM TAB BAR ── */
.mobile-tabbar {
  display:none;
}
@media (max-width:991px) {
  :root { --tv-nav-h: 56px; }
  /* hide desktop nav links on mobile, keep logo */
  .nav-menu { display:none !important; }
  .nav-burger { display:none !important; }
  .tv-nav { height:56px; }

  /* body padding so content doesn't hide behind tab bar */
  /* Must track .mobile-tabbar's height INCLUDING the iPhone safe-area inset —
     the @supports block below grows the bar to calc(64px + inset). */
  body { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }

  .mobile-tabbar {
    display:flex;
    position:fixed; bottom:0; left:0; right:0;
    z-index:1100;
    background:rgba(14,27,42,0.98);
    backdrop-filter:blur(20px);
    border-top:1px solid rgba(27,117,188,0.2);
    height:72px;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -4px 24px rgba(0,0,0,0.4);
  }

  .tab-item {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:4px; text-decoration:none;
    color:var(--smoke); font-size:0.6875rem; font-weight:600;
    letter-spacing:0.03125rem; text-transform:uppercase;
    transition:color 0.2s var(--tv-ease);
    position:relative;
    -webkit-tap-highlight-color:transparent;
  }
  .tab-item i {
    font-size:1.25rem;
    color:var(--smoke);
    transition:transform 0.2s var(--tv-ease), color 0.2s var(--tv-ease);
  }
  .tab-item span { font-size:0.6875rem; line-height:1; color:inherit; }
  .tab-item:hover { color:var(--white); }
  .tab-item:hover i { transform:translateY(-2px); color:var(--white); }
  .tab-item.active { color:var(--blue2); }
  .tab-item.active i { color:var(--blue2); }
  /* active dot indicator */
  .tab-item.active::after {
    content:'';
    position:absolute; top:6px;
    width:4px; height:4px; border-radius:50%;
    background:var(--blue2);
  }

  /* centre CTA bubble */
  .tab-item-cta { margin-top:-20px; }
  .tab-cta-bubble {
    width:52px; height:52px; border-radius:50%;
    background:var(--blue);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 20px rgba(24,112,181,0.5);
    transition:transform 0.2s var(--tv-ease), box-shadow 0.2s var(--tv-ease);
    margin-bottom:2px;
  }
  .tab-cta-bubble i {
    font-size:1.375rem; color:var(--white) !important;
    transform:none !important;
  }
  .tab-item-cta:hover .tab-cta-bubble {
    transform:translateY(-4px);
    box-shadow:0 8px 28px rgba(24,112,181,0.6);
  }
  .tab-item-cta.active .tab-cta-bubble { background:var(--blue2); }
  .tab-item-cta::after { display:none !important; }
  .tab-item-cta { color:var(--smoke); }
  .tab-item-cta.active { color:var(--blue2); }
  .tab-item-cta span { color:var(--smoke); }}

/* iPhone safe area support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-tabbar {
    height:calc(64px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
  }
}

/* ── BUTTONS (Bootstrap btn classes not used — brand look needs custom) ── */
.btn-primary, .btn-outline, .btn-white {
  font-family:'Barlow Condensed', sans-serif;
  font-size:0.9375rem; font-weight:600; letter-spacing:0.125rem;
  text-transform:uppercase; text-decoration:none;
  padding:14px 34px; border-radius:3px; transition:all 0.2s; display:inline-block;
}
.btn-primary { background:var(--blue); color:var(--white); border:none; }
.btn-primary:hover { background:var(--blue2); transform:translateY(-1px); box-shadow:0 6px 20px rgba(27,117,188,0.4); }
.btn-outline { border:1.5px solid rgba(168,189,208,0.4); color:var(--white); background:transparent; padding:13px 32px; }
.btn-outline:hover { border-color:var(--blue); background:rgba(27,117,188,0.1); }
.btn-white { background:var(--white); color:var(--navy); border:none; }
.btn-white:hover { background:#F4F7FA; transform:translateY(-1px); }

/* ============================================
   ANIMATION SYSTEM
   All pages use these classes + keyframes.
   Timing: cubic-bezier(0.22,1,0.36,1) everywhere.
   Load: .tv-load-* classes (staggered on page load)
   Scroll: .tv-reveal (triggered by main.js observer)
   Hover: defined per-component but use --tv-ease
============================================ */

:root {
  --tv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tv-dur:  0.6s;
}

/* ── KEYFRAMES ── */
@keyframes tvFadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes tvFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes tvSlideRight {
  from { opacity:0; transform:translateX(-24px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── PAGE LOAD ANIMATIONS ── */
/* Apply to hero elements — staggered via delay */
.tv-load {
  opacity:0;
  animation: tvFadeUp var(--tv-dur) var(--tv-ease) forwards;
}
.tv-load-1 { animation-delay:0.05s; }
.tv-load-2 { animation-delay:0.15s; }
.tv-load-3 { animation-delay:0.25s; }
.tv-load-4 { animation-delay:0.35s; }
.tv-load-5 { animation-delay:0.45s; }
.tv-load-6 { animation-delay:0.55s; }

/* ── SCROLL REVEAL ── */
/* Elements start hidden, main.js adds .tv-in when in viewport */
.tv-reveal {
  opacity:0;
  transform:translateY(32px);
  transition: opacity var(--tv-dur) var(--tv-ease),
              transform var(--tv-dur) var(--tv-ease);
}
.tv-reveal.tv-in {
  opacity:1;
  transform:translateY(0);
}
/* stagger siblings via CSS nth-child delay */
.tv-reveal:nth-child(2) { transition-delay:0.08s; }
.tv-reveal:nth-child(3) { transition-delay:0.16s; }
.tv-reveal:nth-child(4) { transition-delay:0.24s; }
.tv-reveal:nth-child(5) { transition-delay:0.32s; }
.tv-reveal:nth-child(6) { transition-delay:0.40s; }

/* ── HOVER SYSTEM ── */
/* Lift — cards, product cards, testimonials */
.tv-hover-lift {
  transition: transform 0.25s var(--tv-ease),
              box-shadow 0.25s var(--tv-ease);
}
.tv-hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

/* Scale — buttons, icons */
.tv-hover-scale {
  transition: transform 0.2s var(--tv-ease);
}
.tv-hover-scale:hover { transform: scale(1.04); }

/* Glow — blue elements */
.tv-hover-glow {
  transition: box-shadow 0.25s var(--tv-ease);
}
.tv-hover-glow:hover {
  box-shadow: 0 0 0 3px rgba(24,112,181,0.35);
}

/* ── BUTTON HOVER (applied globally to all .btn-primary) ── */
.btn-primary {
  transition: background 0.2s var(--tv-ease),
              transform 0.2s var(--tv-ease),
              box-shadow 0.2s var(--tv-ease) !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(24,112,181,0.45) !important;
}
.btn-outline {
  transition: border-color 0.2s var(--tv-ease),
              background 0.2s var(--tv-ease),
              transform 0.2s var(--tv-ease) !important;
}
.btn-outline:hover { transform: translateY(-2px) !important; }

/* ── REDUCE MOTION SUPPORT ── */
@media (prefers-reduced-motion: reduce) {
  .tv-load, .tv-reveal, .tv-hover-lift,
  .tv-hover-scale, .tv-hover-glow,
  .btn-primary, .btn-outline {
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}
.section-label { font-family:'Barlow Condensed', sans-serif; font-size:0.875rem; font-weight:600; letter-spacing:0.25rem; text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
.section-title { font-family:'Barlow Condensed', sans-serif; font-size:clamp(2.375rem,5vw,3.875rem); font-weight:700; line-height:0.95; letter-spacing:0.0125em; color:var(--white); margin-bottom:20px; }

/* ============================================
   PAGE EDGE MARGIN — ABSOLUTE, NON-NEGOTIABLE
   Every section uses ONLY this. No other padding
   class (px-4, px-lg-5, page-px, etc.) should ever
   be combined with this on the same element.
============================================ */
html body .edge {
  padding-left:1.25rem !important;
  padding-right:1.25rem !important;
  margin-left:0 !important;
  margin-right:0 !important;
  width:100% !important;
  max-width:100% !important;
}
@media (min-width:600px) {
  html body .edge { padding-left:2rem !important; padding-right:2rem !important; }
}
@media (min-width:992px) {
  /* Grows with both the type scale (rem floor) and the viewport (vw), capped
     so an ultrawide monitor doesn't push content into a narrow column. */
  html body .edge {
    padding-left:clamp(5rem, 5.5vw, 10rem) !important;
    padding-right:clamp(5rem, 5.5vw, 10rem) !important;
  }
}

/* ── WHATSAPP FLOAT ── */
.wa-float {
  position:fixed; bottom:30px; right:30px; z-index:9999;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  font-size:1.625rem; cursor:pointer; box-shadow:0 4px 24px rgba(37,211,102,0.4);
  transition:transform 0.2s;
}
.wa-float:hover { transform:scale(1.1); }
.wa-tooltip {
  position:absolute; right:68px; top:50%; transform:translateY(-50%);
  background:var(--navy); color:var(--white); padding:8px 14px; border-radius:4px;
  border:1px solid rgba(27,117,188,0.3); font-size:0.8125rem; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.wa-float:hover .wa-tooltip { opacity:1; }

@media (max-width:991px) {
  .wa-float {
    bottom:calc(72px + 16px);
    right:16px;
    width:46px; height:46px;
    font-size:1.375rem;
  }
  .wa-float .wa-tooltip { display:none; }
}

/* hamburger icon color fix */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
footer { background:#080E15; padding:4rem 0 1.75rem; border-top:1px solid rgba(27,117,188,0.15); }

/* ── FOOTER ── */
@media (max-width:575px) {
  footer { padding:2.25rem 0 1.25rem; }
  footer .col-6.col-lg-2 { display:none !important; }
  .footer-tool, .footer-visor { font-size:1.25rem; }
  .footer-desc { font-size:0.875rem; margin-bottom:10px; }
  .footer-gst { font-size:0.625rem; }
  .footer-contact-item { font-size:0.875rem; }
  .footer-bottom { flex-direction:column; gap:6px; text-align:center; padding-top:16px; }
  .footer-copy { font-size:0.6875rem; }
}
.footer-grid { margin-bottom:48px; }
.footer-logo-wrap { display:flex; margin-bottom:18px; }
.footer-tool {
  font-family:'Barlow Condensed', sans-serif; font-size:1.5rem; font-weight:900; letter-spacing:0.0625rem;
  color:var(--navy); background:var(--white); padding:3px 8px 3px 10px; border-radius:2px 0 0 2px;
}
.footer-visor {
  font-family:'Barlow Condensed', sans-serif; font-size:1.5rem; font-weight:900; letter-spacing:0.0625rem;
  color:var(--white); background:var(--blue); padding:3px 10px 3px 8px; border-radius:0 2px 2px 0;
}
.footer-desc { font-size:0.875rem; color:var(--smoke); line-height:1.75; margin-bottom:20px; }
.footer-gst { font-size:0.6875rem; color:#3a5068; letter-spacing:0.0625rem; }
.footer-col h4 {
  font-family:'Barlow Condensed', sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:0.1875rem;
  text-transform:uppercase; color:var(--blue); margin-bottom:20px; padding-bottom:10px;
  border-bottom:1px solid rgba(27,117,188,0.2);
}
.footer-col a { display:block; font-size:0.875rem; color:var(--smoke); text-decoration:none; margin-bottom:10px; transition:color 0.2s; }
.footer-col a:hover { color:var(--white); }
.footer-contact-item { font-size:0.875rem; color:var(--smoke); margin-bottom:10px; display:flex; gap:8px; }
.footer-bottom {
  border-top:1px solid rgba(27,117,188,0.1); padding-top:22px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
.footer-copy { font-size:0.75rem; color:#2a4055; }@media (max-width:575px) { .footer-hide-mobile { display:none !important; } }