/* ============================================================
   XYLEM — Polish layer: asymmetric layouts + trade-lane map
   Loaded after enhance.css. Desktop-only asymmetry; mobile
   gracefully falls back to the existing single-column stacks.
   ============================================================ */

/* ---------- 1. ASYMMETRIC SECTION HEADERS ---------- */
/* Split header: heading hard-left, supporting note/accent right */
.section-hdr.split{
  display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end;
  text-align:left;margin-bottom:44px;
}
.section-hdr.split .sh-lead{max-width:none}
.section-hdr.split .sh-lead .eyebrow{margin-bottom:10px}
.section-hdr.split .sh-lead p{margin-top:12px;max-width:520px}
.section-hdr.split .sh-aside{
  border-left:2px solid var(--orange);padding-left:20px;padding-bottom:6px;
}
.section-hdr.split .sh-aside .sh-kicker{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:44px;font-weight:800;
  color:var(--navy);line-height:1;
}
.section-hdr.split .sh-aside .sh-kicker span{color:var(--primary)}
.section-hdr.split .sh-aside .sh-sub{
  font-size:13px;color:var(--text-light);margin-top:6px;line-height:1.5;
}
@media(max-width:820px){
  .section-hdr.split{grid-template-columns:1fr;gap:18px;align-items:start}
  .section-hdr.split .sh-aside{border-left:none;border-top:2px solid var(--orange);
    padding-left:0;padding-top:14px}
  .section-hdr.split .sh-aside .sh-kicker{font-size:34px}
}

/* ---------- 2. ASYMMETRIC STATS BAR ---------- */
/* One hero stat (large) + supporting stats in a tighter grid */
.stats-bar.asym .stats-inner{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:0;align-items:center;
}
.stats-bar.asym .stat-item:first-child{
  text-align:left;padding:6px 30px 6px 4px;border-right:1px solid rgba(255,255,255,.14);
}
.stats-bar.asym .stat-item:first-child .stat-num{font-size:clamp(46px,6vw,72px)}
.stats-bar.asym .stat-item:first-child .stat-label{font-size:14px;letter-spacing:.5px}
.stats-bar.asym .stat-item{position:relative;padding:6px 18px}
.stats-bar.asym .stat-item:not(:first-child):not(:last-child)::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  height:38px;width:1px;background:rgba(255,255,255,.1);
}
@media(max-width:820px){
  .stats-bar.asym .stats-inner{grid-template-columns:1fr 1fr;gap:20px 10px}
  .stats-bar.asym .stat-item:first-child{grid-column:1 / -1;text-align:center;
    border-right:none;border-bottom:1px solid rgba(255,255,255,.14);padding:0 0 16px}
  .stats-bar.asym .stat-item:not(:first-child):not(:last-child)::after{display:none}
}

/* ---------- 3. OFFSET / OVERLAP ACCENT ---------- */
/* Let a section pull up slightly into the one above for rhythm */
.section.pull-up{margin-top:-40px;position:relative;z-index:2}
@media(max-width:820px){.section.pull-up{margin-top:0}}

/* ---------- 4. TRADE-LANE MAP (hero, self-contained SVG) ---------- */
.trade-map{position:relative;width:100%}
.trade-map svg{width:100%;height:auto;display:block;overflow:visible}
.tm-land{fill:#1B74C4;stroke:#0066CC;stroke-width:1}
.tm-grid{stroke:#3FA9F5;stroke-width:.6;opacity:.5}
.tm-hub circle{fill:var(--orange)}
.tm-hub-ring{fill:none;stroke:var(--orange);stroke-width:1.5;opacity:.6;
  transform-origin:center;transform-box:fill-box}
.tm-node{fill:#eaf3fb}
.tm-node-halo{fill:var(--ocean);opacity:.25}
.tm-route{fill:none;stroke:var(--ocean);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);opacity:.9}
.tm-route.accent{stroke:var(--orange)}
.tm-label{fill:#cfe0ef;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:600}
.tm-label-sm{fill:#9db8cf;font-family:'Plus Jakarta Sans',sans-serif;font-size:10px}
.tm-pulse{fill:var(--orange);opacity:0}
.tm-ship{fill:#dfeaf4;opacity:0}

/* animations run when .animate is added (via IntersectionObserver) */
.trade-map.animate .tm-route{animation:tmDraw 2.2s ease forwards}
.trade-map.animate .tm-route.r2{animation-delay:.5s}
.trade-map.animate .tm-route.r3{animation-delay:1s}
.trade-map.animate .tm-hub-ring{animation:tmRing 2.4s ease-out infinite}
.trade-map.animate .tm-node-halo{animation:tmHalo 2.4s ease-out infinite}
.trade-map.animate .tm-ship{animation:tmShip 3s ease-in forwards}
.trade-map.animate .tm-ship.s2{animation-delay:.5s}
.trade-map.animate .tm-ship.s3{animation-delay:1s}

@keyframes tmDraw{to{stroke-dashoffset:0}}
@keyframes tmRing{0%{transform:scale(.6);opacity:.7}70%{opacity:0}100%{transform:scale(2.4);opacity:0}}
@keyframes tmHalo{0%{transform:scale(.8);opacity:.35}70%{opacity:0}100%{transform:scale(2.2);opacity:0}}
@keyframes tmShip{0%{opacity:0;offset-distance:0%}12%{opacity:1}88%{opacity:1}100%{opacity:.9;offset-distance:100%}}
@media(prefers-reduced-motion:reduce){
  .trade-map.animate .tm-route{animation:none;stroke-dashoffset:0}
  .trade-map.animate .tm-hub-ring,.trade-map.animate .tm-node-halo,
  .trade-map.animate .tm-ship{animation:none}
  .trade-map .tm-ship{opacity:0}
}

/* ---------- 5. TRADE-LANE MAP ON MOBILE ---------- */
/* Show the hero map panel on mobile (override the two hide rules),
   but streamline it: keep the animated map, drop the mini-stats
   footer (the stats bar below already shows those numbers). */
@media(max-width:768px){
  .hero-map-panel{display:block !important;margin-top:8px}
  /* redundant with stats bar directly below — hide on mobile only */
  .hero-map-panel .hero-map-footer{display:none !important}
  .hero-map-header{padding:13px 16px}
  .hero-map-title{font-size:12px}
  .hero-map-live{font-size:10px}
  .hero-map-panel .trade-map{padding:8px 4px 10px}
  /* let the SVG scale full width; labels sized up a touch for small screens */
  .trade-map .tm-label{font-size:13px}
  .trade-map .tm-label-sm{font-size:11px}
  .trade-map .tm-route{stroke-width:2.4}
  .trade-map .tm-node{r:4}
}
/* very small phones: tighten hero padding so map + stats fit the fold nicely */
@media(max-width:420px){
  .hero-map-header{padding:11px 14px}
  .trade-map .tm-label{font-size:14px}
}

/* ══════════════════════════════════════════════
   MOBILE UX FIXES — tap targets & a11y
   Added during QA audit
══════════════════════════════════════════════ */
@media(max-width:768px){
  /* WCAG 2.5.5 — minimum 44x44px touch targets */
  .nav-toggle{min-width:44px;min-height:44px;padding:6px;display:inline-flex;
              align-items:center;justify-content:center}
  .footer-link{display:block;padding:13px 0;line-height:1.4;min-height:44px}
  .footer-links li{margin-bottom:0}
  .btn,.btn.btn-sm,.btn-whatsapp,.promo-cta{min-height:44px;display:inline-flex;
      align-items:center;justify-content:center}
  .nav-logo{min-height:44px;display:inline-flex;align-items:center}
  .footer-social{min-width:44px;min-height:44px;display:inline-flex;
      align-items:center;justify-content:center}
  .footer-bottom-link,.dtech-credit{display:inline-block;padding:11px 0;min-height:44px}
  .sticky-quote-close{min-width:44px;min-height:44px}
  input,select,textarea,button{min-height:44px}
  /* Inline contact + article-title links: pad to a comfortable tap area */
  .office-v2-detail a[href^="tel:"],.office-v2-detail a[href^="mailto:"],
  .footer-contact-item a[href^="tel:"],.footer-contact-item a[href^="mailto:"]{
      display:inline-block;padding:12px 0;min-height:44px}
  .insight-v2-title a,.insight-v2-link{display:block;padding:4px 0;min-height:44px}
  /* List-based navigation links (sitemap, footer nav, breadcrumbs) */
  .sitemap-col li a,.footer-links li a,.mobile-nav a{
      display:block;padding:12px 0;min-height:44px}
  /* Any remaining tel/mailto anywhere on the page */
  a[href^="tel:"],a[href^="mailto:"]{display:inline-block;padding:12px 0;min-height:44px}
  .mobile-nav-link{min-height:48px;display:flex;align-items:center}
  .mobile-nav-close{min-width:44px;min-height:44px;display:inline-flex;
                    align-items:center;justify-content:center}
  /* Prevent iOS auto-zoom on focus (needs >=16px) */
  input,select,textarea{font-size:16px !important}
}

/* Visible keyboard focus for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px;border-radius:2px
}

/* Footer credit link */
.dtech-credit{color:rgba(255,255,255,.55);transition:color .2s}
.dtech-credit:hover,.dtech-credit:focus{color:var(--secondary)}

/* ── Footer text → white; WhatsApp visibility; floating WhatsApp on left ── */
.footer-desc,.footer-contact-item,.footer-bottom p{color:#fff !important}
.footer-bottom-link{color:rgba(255,255,255,.75) !important}
.footer-bottom-link:hover{color:#fff !important}
.btn-whatsapp,.btn-whatsapp:hover,.btn-whatsapp .ic,.btn-whatsapp svg{color:#fff !important}
.nhava-badge,.nhava-badge:hover{background:#1B74C4 !important;color:#fff !important}
.float-whatsapp{left:28px !important;right:auto !important;color:#fff !important}
.float-whatsapp svg{width:26px;height:26px;fill:#fff !important;color:#fff !important}
.float-whatsapp-tooltip{right:auto !important;left:64px !important}
@media(max-width:768px){.float-whatsapp{left:16px !important;right:auto !important}}

/* ── Industries page: "Get an Industry Quote" as a CTA button ── */
.industry-row-link{display:inline-flex !important;align-items:center;gap:8px;margin-top:16px;padding:12px 22px;background:#1B74C4 !important;color:#fff !important;font-size:14px;font-weight:700;border-radius:6px;text-decoration:none !important;transition:all .25s ease;box-shadow:0 2px 8px rgba(10,42,77,.15)}
.industry-row-link:hover{background:#0A2A4D !important;color:#fff !important;transform:translateY(-1px);box-shadow:0 6px 16px rgba(10,42,77,.25)}

/* ══════════════════════════════════════════════
   BRAND NAME — full company name under header logo & above footer description
══════════════════════════════════════════════ */
.navbar .nav-logo{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.navbar .nav-logo-sub{font-size:10px;font-weight:600;line-height:1;letter-spacing:.2px;color:var(--text-mid,#5b6b7f);white-space:nowrap}
.footer-company{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;line-height:1.3;color:#fff;margin-bottom:8px}

/* ── Floating WhatsApp button: lift above the sticky quote bar while it is showing ── */
body.sq-visible .float-whatsapp{bottom:88px !important}
@media(max-width:768px){body.sq-visible .float-whatsapp{bottom:116px !important}}

/* ── Official WhatsApp floating button: brand green + white logo ── */
.float-whatsapp{background:#25D366 !important;box-shadow:0 4px 20px rgba(37,211,102,.5) !important}
.float-whatsapp:hover{background:#1ebe5b !important}
.float-whatsapp svg{width:32px !important;height:32px !important;fill:#fff !important}