/* ──────────────────────────────────────────────────────────────
   File: konnects.css
   Project: Konnects Website
   Version: v1.10 (header isolation + slides layering + logo clamp)
   Purpose: Keep layout primitives, full-bleed bands, tidy type,
            compact cards, KPI, icons, arc marks, CTA alignment.
            Make hero overlay/background strictly OPT-IN.
   Changelog (v1.10):
     - Isolate & raise header stacking context to prevent any hero/
       slider overlays from affecting the header on the Home page.
     - Demote slider background/overlay layers (z-index & pointer-events)
       so they can’t sit above the header.
     - Clamp site-logo dimensions and force width:auto to override
       Elementor’s width:100% rule in the header template.
   ────────────────────────────────────────────────────────────── */

/* TOKENS */
:root{
  --knx-ink:#0f172a; --knx-ink-2:#334155; --knx-muted:#475569;
  --knx-border:#e2e8f0; --knx-cloud:#F1F1F2; --knx-white:#ffffff;
  --knx-red:#DB1F26; --knx-charcoal:#242430; --knx-gray:#95969A;

  --knx-pad-top:       clamp(20px, 3.2vw, 28px);
  --knx-pad-bottom:    clamp(28px, 4.0vw, 40px);
  --knx-pad-top-sm:    clamp(16px, 2.6vw, 24px);
  --knx-pad-bottom-sm: clamp(22px, 3.2vw, 32px);
  --knx-hero-top:      clamp(48px, 6vw, 72px);
  --knx-hero-bottom:   clamp(44px, 5.4vw, 64px);
}

/* RESETS / SAFETY */
*,*::before,*::after{ box-sizing:border-box }
html,body{ overflow-x:hidden }
img,svg{ max-width:100%; height:auto }

/* ── HEADER HARDENING (fix for Home-page-only overlap) ───────── */

/* Create a new stacking context for the header and raise it. 
   'isolation:isolate' ensures blending/overlays below can't affect it. */
.elementor-location-header{
  position:relative;
  z-index:50;
  isolation:isolate;
}

/* Ensure the header always paints above any hero/slider background
   layers that might appear immediately after the header in the DOM. */
.elementor-location-header,
.elementor-location-header *{
  mix-blend-mode:normal;
}

/* Clamp the site logo in the header and cancel Elementor's width:100% */
.elementor-location-header .elementor-widget-theme-site-logo img{
  width:auto !important;
  height:auto;
  max-height: clamp(32px, 6vh, 52px);
  display:block;
}

/* Demote slide backgrounds/overlays so they can’t overlap the header */
.elementor-widget-slides .swiper-slide-bg,
.elementor-widget-slides .elementor-background-overlay{
  z-index:0 !important;
  pointer-events:none;
}

/* ── LAYOUT / SECTIONS (no default background colors here) ───── */

.knx-section{ padding:var(--knx-pad-top) 0 var(--knx-pad-bottom); position:relative }
.knx-sec-hero{ padding:var(--knx-hero-top) 0 var(--knx-hero-bottom) }
.knx-sec-intro,.knx-sec-why{ padding:var(--knx-pad-top-sm) 0 var(--knx-pad-bottom-sm) } /* denser */

/* Seamless stacking on pages that use .knx-page */
.knx-page .knx-section.e-con{ margin:0 }
.knx-page .knx-section + .knx-section{ margin-top:0 }

/* Centered content wrap (inner container) */
.knx-wrap,.knx-wrap>.e-con-inner{ max-width:1120px; margin:0 auto; padding:0 22px; position:relative }

/* Full-bleed bands without scrollbar penalty (outer container) */
.knx-band{
  position:relative;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:auto; left:auto; right:auto;
}

/* ── TYPOGRAPHY (neutral; GUI colors can override) ───────────── */

.knx-section .elementor-heading-title{ margin:0 0 10px; line-height:1.2; /* color:var(--knx-ink) */}
.knx-section p{ margin:0 0 12px; /*color:var(--knx-ink-2) */ }
.knx-section ul{ margin:0 0 0 18px; padding-left:0 }
.knx-section li{ margin:4px 0 }

.knx-hero .elementor-heading-title{ font-size:clamp(28px,6vw,44px); letter-spacing:-0.01em }
.knx-section h2.elementor-heading-title{ font-size:clamp(22px,3.4vw,32px) }
.knx-section h3.elementor-heading-title{ font-size:clamp(18px,2.5vw,24px) }
.knx-card h4.elementor-heading-title{ font-size:16px; margin:6px 0 6px }
.knx-tile h6.elementor-heading-title{ font-size:14px; margin:4px 0 0 }

/* Trim widget tail-space */
.knx-section .elementor-widget:not(:last-child){ margin-bottom:12px }
.knx-section .elementor-widget:last-child{ margin-bottom:0 }
.knx-section .elementor-widget-divider{ margin:0 0 12px 0 }

/* ── HERO (overlay/background now OPT-IN) ───────────────────── */

.knx-hero{
  position:relative; overflow:hidden;
  background:transparent; /* explicit default */
}

/* Opt-in overlay: add .knx-hero--overlay to the hero/container */
.knx-hero.knx-hero--overlay::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,1) 0%,
                              rgba(255,255,255,.86) 45%,
                              rgba(255,255,255,.40) 100%);
  z-index:0;
}

/* Keep hero content above overlay when used */
.knx-hero>*{ position:relative; z-index:1 }

/* Optional helpers for class-based bg control (still opt-in) */
.knx-bg-cover{ background-size:cover; background-position:center; background-repeat:no-repeat }
.knx-bg-fixed{ background-attachment:fixed }

/* ── CHIP ────────────────────────────────────────────────────── */

.knx-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #cbd5e1; background:rgba(255,255,255,.7);
  padding:4px 10px; border-radius:999px; font-size:10px; color:#334155;
}
.knx-chip:before{ content:""; width:8px; height:8px; border-radius:999px; background:var(--knx-red); display:inline-block }

/* ── GRIDS / CARDS / TILES ───────────────────────────────────── */

.knx-grid,.knx-grid>.e-con-inner{ display:flex; flex-wrap:wrap; gap:16px; flex-direction:row!important }
.knx-card,.knx-tile{ border:1px solid var(--knx-border); border-radius:12px; background:#fff; padding:14px }
.knx-grid4 .knx-card,.knx-grid4 .knx-tile{ width:100% }
@media(min-width:768px){ .knx-grid4 .knx-card,.knx-grid4 .knx-tile{ width:calc(50% - 8px) } }
@media(min-width:1024px){ .knx-grid4 .knx-card,.knx-grid4 .knx-tile{ width:calc(25% - 12px) } }

/* Compact “What” cards */
.knx-sec-what .knx-grid4{ gap:12px }
@media(min-width:1024px){ .knx-sec-what .knx-grid4{ gap:14px } }
.knx-sec-what .knx-card{ padding:12px }
@media(min-width:1024px){ .knx-sec-what .knx-card{ padding:14px } }
.knx-sec-what .knx-card h4.elementor-heading-title{ font-size:15px; margin:4px 0 4px }
.knx-sec-what .knx-card p{ margin:0; line-height:1.45 }

/* 3-step cards */
.knx-grid3{ counter-reset:knxstep }
.knx-grid3 .knx-step{
  position:relative; border:1px solid var(--knx-border); border-radius:12px;
  background:#fff; padding:16px; width:100%; overflow:visible
}
@media(min-width:1024px){ .knx-grid3 .knx-step{ width:calc(33.333% - 10px) } }
.knx-grid3 .knx-step::before{
  counter-increment:knxstep; content:counter(knxstep);
  position:absolute; left:16px; top:-18px; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:999px; background:var(--knx-red);
  color:#fff; font-weight:700; font-size:12px; line-height:1;
  box-shadow:0 2px 4px rgba(2,6,23,.15); z-index:3; border:2px solid #fff
}

/* ── KPI ─────────────────────────────────────────────────────── */

.knx-kpi-box{ border:1px solid var(--knx-border); border-radius:18px; background:#fff; padding:18px 16px; box-shadow:0 1px 2px rgba(0,0,0,.04) }
.knx-kpi-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px }
@media(max-width:767px){ .knx-kpi-list{ grid-template-columns:1fr } }
.knx-kpi-label{ font-size:10px; color:#64748b; margin-bottom:2px; text-transform:uppercase; letter-spacing:.02em }
.knx-kpi-val{ font-size:1rem; font-weight:700; color:var(--knx-ink) }

/* ── BUTTONS ─────────────────────────────────────────────────── */

.knx-btn{ display:inline-block; padding:10px 14px; border-radius:10px; font-weight:700; line-height:1; text-decoration:none; transition:.2s; font-size:.86rem }
.knx-btn-primary{ background:var(--knx-red); color:#fff }
.knx-btn-outline{ border:1px solid #fecaca; color:var(--knx-red); background:#fff5f5 }
.knx-btn-invert{ background:#fff; color:var(--knx-red); border:1px solid #fecaca }

/* ── SEPARATORS ──────────────────────────────────────────────── */

.knx-sep{ height:3px; width:60px; background:var(--knx-red); border-radius:6px; margin:6px 0 14px }
.knx-sep.right{ margin-left:auto }
.knx-sep.center{ margin-left:auto; margin-right:auto }

/* ── ICONS ───────────────────────────────────────────────────── */

.knx-icon{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:#fef2f2; color:#DB1F26; border:1px solid #fecaca }
.knx-icon .knx-i{ display:block; width:18px; height:18px; background-repeat:no-repeat; background-size:18px 18px }
.knx-tile .knx-icon{ display:inline-flex; margin:0 auto 6px }
.knx-tile .elementor-heading-title{ text-align:center }

/* Icon sprites (data URIs) */
.knx-i-pathways{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h10c3 0 6 2 6 5s-3 5-6 5H9'/><circle cx='4' cy='6' r='1.5' fill='%23DB1F26' stroke='none'/><circle cx='9' cy='16' r='1.5' fill='%23DB1F26' stroke='none'/></svg>"); }
.knx-i-copper{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V5'/><path d='M7 10l5-5 5 5'/></svg>"); }
.knx-i-testing{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='5'/><path d='M21 21l-4.3-4.3'/></svg>"); }
.knx-i-mac{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5v14'/></svg>"); }
.knx-i-office{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='10' height='16' rx='1'/><path d='M18 20V8h2v12z'/><path d='M8 8h2M8 12h2M8 16h2'/></svg>"); }
.knx-i-warehouse{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10l9-6 9 6v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/><path d='M7 21v-6h10v6'/></svg>"); }
.knx-i-retail{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12l-8 8-8-8 8-8 8 8z'/></svg>"); }
.knx-i-industrial{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20h18'/><path d='M3 20v-6l6-3v9'/><path d='M9 20v-6l6-3v9'/><path d='M18 20v-8h3v8'/></svg>"); }

/* New: Health Care & Pharmaceuticals */
.knx-i-hcpharma{
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 3h4v4h4v4h-4v4h-4v-4H6V7h4V3z'/><path d='M5 19c-.94-.94-.94-2.46 0-3.4l2.6-2.6c.94-.94 2.46-.94 3.4 0 .94.94.94 2.46 0 3.4L8.4 19c-.94.94-2.46.94-3.4 0z'/><path d='M7.1 14.9l3 3'/></svg>");
}

/* New: Public (Government, Crown agencies, museums, parks & attractions, fairs & exhibitions) */
.knx-i-public{
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-5 9 5'/><path d='M4 20h16'/><path d='M6 10v8'/><path d='M10 10v8'/><path d='M14 10v8'/><path d='M18 10v8'/><path d='M5 22h14'/></svg>");
}

/* New: Emergency Services (Police, Fire, Ambulance) */
.knx-i-emergency{
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 18h10c0-3.5-1.5-7-5-7s-5 3.5-5 7z'/><path d='M6 18h12'/><path d='M12 3v2'/><path d='M4.9 6.1l1.4 1.4'/><path d='M19.1 6.1l-1.4 1.4'/><path d='M3 12h2'/><path d='M21 12h-2'/></svg>");
}

/* New: National Retail & Brand Rollouts (variant) */
.knx-i-retail2{
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23DB1F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6h12'/><circle cx='6' cy='6' r='1.2' fill='%23DB1F26' stroke='none'/><circle cx='12' cy='6' r='1.2' fill='%23DB1F26' stroke='none'/><circle cx='18' cy='6' r='1.2' fill='%23DB1F26' stroke='none'/><path d='M5 10h14v8H5z'/><path d='M4 10h16'/><path d='M11 14h2v4h-2z'/><path d='M7.5 14h3'/></svg>");
}

/* ── ARCS (decor) ────────────────────────────────────────────── */

.knx-arc{
  --arc-size:320px; --arc-offset:-28px;
  position:absolute; width:var(--arc-size); height:var(--arc-size);
  pointer-events:none; opacity:.12; transform-origin:50% 50%; z-index:0;
}
.knx-arc::before{
  content:""; position:absolute; inset:0; background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='none' stroke='%23DB1F26' stroke-linecap='round' stroke-linejoin='round'><path d='M0,300 A 300 300 0 0 1 300,0' vector-effect='non-scaling-stroke' stroke-width='1.25'/><path d='M0,276 A 276 276 0 0 1 276,0' vector-effect='non-scaling-stroke' stroke-width='1.25'/><path d='M0,252 A 252 252 0 0 1 252,0' vector-effect='non-scaling-stroke' stroke-width='1.25'/><path d='M0,228 A 228 228 0 0 1 228,0' vector-effect='non-scaling-stroke' stroke-width='1.25'/><path d='M0,204 A 204 204 0 0 1 204,0' vector-effect='non-scaling-stroke' stroke-width='1.25'/><path d='M0,180 A 180 180 0 0 1 180,0' vector-effect='non-scaling-stroke' stroke-width='1.25'/></g></svg>");
}
.knx-arc--tl{ top:var(--arc-offset); left:var(--arc-offset); transform:rotate(0deg) }
.knx-arc--tr{ top:var(--arc-offset); right:var(--arc-offset); transform:rotate(90deg) }
.knx-arc--br{ bottom:var(--arc-offset); right:var(--arc-offset); transform:rotate(180deg) }
.knx-arc--bl{ bottom:var(--arc-offset); left:var(--arc-offset); transform:rotate(270deg) }
.knx-arc--light{ opacity:.08 }
.knx-arc--strong{ opacity:.16 }

/* ── CTA ─────────────────────────────────────────────────────── */

.knx-sec-cta{ text-align:center }
.knx-sec-cta .knx-btn{ display:inline-block; margin:10px 8px 0; white-space:nowrap }
@media(max-width:480px){ .knx-sec-cta .knx-btn{ display:block; margin:10px auto 0 } }
.knx-sec-cta .e-con:last-child,
.knx-sec-cta .elementor-widget:last-child{ margin-bottom:0; padding-bottom:0 }

/* Optional (keep only if you want quick class-based backgrounds)
.knx-zebra-white{ background-color:#fff !important }
.knx-zebra-light{ background-color:var(--knx-cloud) !important }
*/