/* ============================================================
   WEBFIXUS — neo-brutalist design system
   Loaded site-wide by the theme. The Elementor pages put their
   markup in HTML widgets that keep the prototype's inline styles
   for pixel fidelity; the classes below add the responsive
   behaviour the static prototype lacked.
   ============================================================ */

:root{
  --wfx-cream:#f3ede1;
  --wfx-ink:#14110c;
  --wfx-blue:#2b4cff;
  --wfx-red:#ff5a36;
  --wfx-green:#16a06a;
  --wfx-yellow:#ffd23f;
  --wfx-amber:#ffb300;
  --wfx-body:#3a352c;
  --wfx-muted:#6b6557;
}

/* ---- globals ---- */
html, body{ margin:0; background:var(--wfx-cream); }
body{ font-family:'Space Grotesk',sans-serif; color:var(--wfx-ink); }
*::selection{ background:var(--wfx-yellow); color:var(--wfx-ink); }
::placeholder{ color:#9a937f; }

/* Neutralise theme/Elementor wrappers so sections sit edge-to-edge */
.wfx-page .elementor-section,
.wfx-page .elementor-container,
.wfx-page .elementor-column,
.wfx-page .elementor-widget-html,
.wfx-page .elementor-widget-container{ margin:0; padding:0; }
.wfx-page .elementor-widget{ margin-bottom:0 !important; }

/* The centered content rail used by most sections */
.wfx-wrap{ max-width:1120px; margin:0 auto; }

/* ---- responsive grids ---- */
.wfx-grid{ display:grid; }
.wfx-cols-4{ grid-template-columns:repeat(4,1fr); }
.wfx-cols-3{ grid-template-columns:repeat(3,1fr); }
.wfx-cols-2{ grid-template-columns:repeat(2,1fr); }

@media (max-width:900px){
  .wfx-cols-4{ grid-template-columns:repeat(2,1fr); }
  .wfx-cols-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .wfx-cols-4,
  .wfx-cols-3,
  .wfx-cols-2{ grid-template-columns:1fr; }
  .wfx-split{ grid-template-columns:1fr !important; }
}

/* two-column split layouts (about / contact) collapse on mobile */
@media (max-width:820px){
  .wfx-split{ grid-template-columns:1fr !important; }
}

/* ---- fluid display headings ---- */
.wfx-h1{ font-size:clamp(40px,8vw,72px); }
.wfx-h1-lg{ font-size:clamp(38px,7.5vw,65px); }
.wfx-h2{ font-size:clamp(28px,5vw,40px); }
.wfx-h2-xl{ font-size:clamp(34px,6vw,54px); }

/* ---- mobile padding relief on the wide rails ---- */
@media (max-width:600px){
  .wfx-pad{ padding-left:20px !important; padding-right:20px !important; }
  .wfx-stats{ flex-wrap:wrap; }
  .wfx-stats > span{ flex:1 0 50% !important; border-right:0 !important; }
}

/* ---- nav (theme header) ---- */
.wfx-header{ position:sticky; top:0; z-index:50; background:var(--wfx-cream); border-bottom:3px solid var(--wfx-ink); }
.wfx-header-inner{ max-width:1120px; margin:0 auto; padding:16px 32px; display:flex; justify-content:space-between; align-items:center; }
.wfx-logo{ font-family:'Archivo',sans-serif; font-weight:900; font-size:22px; letter-spacing:-.02em; text-decoration:none; color:var(--wfx-ink); }
.wfx-nav{ display:flex; align-items:center; gap:22px; }
.wfx-nav a{ text-decoration:none; color:var(--wfx-ink); }
.wfx-nav-link{ font-family:'Space Mono',monospace; font-size:13px; font-weight:700; letter-spacing:.06em; padding-bottom:3px; border-bottom:3px solid transparent; }
.wfx-nav-link.is-active{ border-bottom-color:var(--wfx-blue); }
.wfx-nav-cta{ font-family:'Space Mono',monospace; font-size:13px; font-weight:700; letter-spacing:.04em; background:var(--wfx-blue); color:#fff !important; padding:9px 16px; border:2px solid var(--wfx-ink); box-shadow:3px 3px 0 var(--wfx-ink); }

@media (max-width:600px){
  .wfx-header-inner{ padding:12px 18px; flex-wrap:wrap; gap:10px; }
  .wfx-nav{ gap:14px; }
}

/* links inside HTML-widget markup that should look like the prototype's spans */
.wfx-a{ text-decoration:none; color:inherit; cursor:pointer; }

/* ============================================================
   RESPONSIVE RETROFIT
   The Elementor pages were built with fixed desktop sizes and no
   tablet/mobile values, so the home page overflowed sideways on
   phones (~429px wide content in a 390px viewport). These rules
   add the missing fluid behaviour. Verified at 390px: every page
   now has scrollWidth == viewport (no horizontal scroll).
   ============================================================ */

/* 1) Stop any sideways scroll from an element overshooting. */
html, body{ overflow-x:hidden; max-width:100%; }
img, svg, video, iframe{ max-width:100%; height:auto; }
*, *::before, *::after{ box-sizing:border-box; }

/* 2) Tablet — ease the wide content rail's side padding. */
@media (max-width:1024px){
  .elementor-widget-html [style*="padding:56px 32px"],
  .elementor-widget-html [style*="padding: 56px 32px"]{
    padding-left:24px !important; padding-right:24px !important;
  }
}

/* 3) Phone (<=767px) — the real fixes. */
@media (max-width:767px){

  /* 3a) Fluid-scale every big display heading so the longest single
         word can never exceed the viewport. Covers Elementor heading
         widgets AND raw h1-h3 inside HTML widgets. */
  .elementor-heading-title,
  .elementor-widget-html h1,
  .elementor-widget-html h2,
  .elementor-widget-html h3{
    font-size:clamp(22px, 8.5vw, 38px) !important;
    line-height:1.06 !important;
    overflow-wrap:break-word; word-break:break-word;
  }

  /* 3b) Relax the heavy letter-spacing on the big stat headings. */
  .elementor-widget-heading .elementor-heading-title{ letter-spacing:.02em !important; }

  /* 3c) Collapse the oversized rail padding. */
  .elementor-widget-html [style*="padding:56px 32px"],
  .elementor-widget-html [style*="padding: 56px 32px"]{ padding:30px 18px !important; }

  /* 3d) Any prototype flex row wraps instead of overflowing. */
  .elementor-widget-html [style*="display:flex"],
  .elementor-widget-html [style*="display: flex"]{ flex-wrap:wrap !important; }

  /* 3e) Elementor inner columns go full width on phones. */
  .elementor-column{ width:100% !important; }

  /* 3f) Long words in body copy break rather than overflow. */
  .elementor-widget-text-editor,
  .elementor-widget-html p{ overflow-wrap:break-word; }

  /* 3g) Header / nav — let it wrap and keep the CTA on-screen. */
  .wfx-header-inner, .wfx-nav,
  .elementor-nav-menu, .elementor-widget-wrap{ flex-wrap:wrap !important; }
}