/* =========================
   Webits 2.0 — Base & Primitives
   ========================= */

/* CSS Reset (lightweight) */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessible skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}
.skip-link:focus {
  left: 8px; top: 8px;
  background: var(--color-heading);
  color: #fff;
  padding: 8px 10px;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
}

/* Headings */
:where(h1, h2, h3, h4, h5, h6),
.wb-heading {
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}

:where(h1),
.wb-heading--h1 {
  font-size: var(--fs-h1);
  line-height: 0.96;
  letter-spacing: -0.047em;
  font-weight: var(--fw-bold);
}

:where(h2),
.wb-heading--h2 {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

:where(h3),
.wb-heading--h3 {
  font-size: var(--fs-h3);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

:where(h4),
.wb-heading--h4 {
  font-size: var(--fs-h4);
  line-height: 1.14;
  letter-spacing: -0.025em;
}

:where(h5),
.wb-heading--h5 {
  font-size: var(--fs-h5);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

:where(h6),
.wb-heading--h6 {
  font-size: var(--fs-h6);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: var(--fw-medium);
}

.wb-heading--inverse {
  color: rgba(255, 255, 255, 0.96);
}

@media (max-width: 767px) {
  :root {
    --fs-h1: clamp(38px, 11vw, 56px);
    --fs-h2: clamp(34px, 9vw, 48px);
    --fs-h3: clamp(22px, 6vw, 28px);
    --fs-h4: clamp(19px, 5vw, 24px);
    --fs-h5: clamp(16px, 4.2vw, 19px);
    --fs-h6: clamp(14px, 3.8vw, 16px);
  }

  :where(h1),
  .wb-heading--h1 {
    line-height: 1.02;
  }
}

p { margin: 0 0 var(--space-5); }

/* Links */
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Container */
.container {
  max-width: var(--container-max);
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  margin-left: auto;
  margin-right: auto;
}

/* Shared intro reveal */
html.js-intro [data-intro-reveal] {
  opacity: 0;
  transform: translateY(var(--motion-intro-reveal-distance));
  filter: blur(var(--motion-intro-reveal-blur));
  will-change: transform, filter, opacity;
}

html.js-intro [data-intro-reveal].is-intro-revealed {
  animation:
    introRevealIn var(--intro-reveal-duration, var(--motion-intro-reveal-duration))
    var(--motion-intro-reveal-ease)
    var(--intro-reveal-delay, 0ms)
    both;
}

@keyframes introRevealIn {
  0% {
    opacity: 0;
    transform: translateY(var(--motion-intro-reveal-distance));
    filter: blur(var(--motion-intro-reveal-blur));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Shared eyebrow / kicker label */
.home-kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  padding: 6px 8px 4px 8px;
  background: white;
}

/* Buttons */
.btn {
  --_bg: #f5f5f5;
  --_fg: var(--color-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-radius);
  text-align: center;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid transparent;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease-out);
  will-change: transform;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 40%, transparent);
}
.btn:active {
  transform: translateY(0); /* prevent extra push on active */
}

/* =========================
   Primary Button — Lacquered Solid
   ========================= */

.btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-primary);
  color: #fff;
  border-color: rgba(255,255,255,0.16);

  border-radius: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  padding: 14px 26px;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.16) inset,
    0 14px 30px rgba(0,0,0,0.16),
    0 5px 12px rgba(0,0,0,0.11);

  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out),
    filter var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

.btn--primary::before,
.btn--primary::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition:
    opacity 220ms var(--ease-out),
    transform 460ms var(--ease-out);
}

.btn--primary::before {
  top: -68%;
  left: -14%;
  width: 72%;
  height: 176%;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  filter: blur(20px);
  opacity: 0.24;
  transform: translate3d(0, 0, 0) scale(1);
}

.btn--primary::after {
  inset: 1px;
  border-radius: calc(var(--btn-radius) - 1px);
  border: 1px solid rgba(255,255,255,0.07);
  background: transparent;
  opacity: 1;
  transition: border-color 180ms var(--ease-out);
}

.btn--primary:hover {
  background: var(--color-primary-600);
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.24) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 18px 38px rgba(0,0,0,0.18),
    0 8px 20px rgba(0,0,0,0.12);
  transform: translateY(-1px);
  filter: saturate(1.04);
}

.btn--primary:hover::before {
  opacity: 0.34;
  transform: translate3d(8%, 6%, 0) scale(1.04);
}

.btn--primary:active::before {
  opacity: 0.22;
  transform: translate3d(3%, 2%, 0) scale(1.01);
}

.btn--primary:active {
  background: var(--color-primary-800);
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 10px 22px rgba(0,0,0,0.15),
    0 4px 10px rgba(0,0,0,0.10);
  filter: none;
}

.btn--primary:active::after {
  border-color: rgba(255,255,255,0.06);
}

/* Reduced motion — no animation */
@media (prefers-reduced-motion: reduce) {
  html.js-intro [data-intro-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  .btn--primary::before {
    display: none;
  }
  .btn--primary {
    transition: none !important;
    filter: none !important;
  }
}

/* Secondary button (outline, subtle fill on hover) */
.btn--secondary {
  --_bg: transparent;
  --_fg: var(--color-heading);
  border-color: var(--color-border-strong);
  background: white;
}
.btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  background: color-mix(in srgb, var(--color-secondary) 12%, #fff);
  border-color: color-mix(in srgb, var(--color-secondary) 40%, var(--color-border-strong));
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .btn, a { transition: none !important; }
}

a, a:hover, a:focus, a:active {
    text-decoration: none!important;
}

/* ===== iOS/WebKit tap + focus normalisation ===== */
/* Remove iOS grey/blue tap flash on interactive elements */
a, area, button, input, label, select, textarea, summary,
[role="button"], .btn {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

/* Remove native button appearance that can cause flashes on tap in iOS */
button, input[type="button"], input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box; /* avoids odd focus bleed on iOS */
}

/* Suppress generic focus halo on pointer clicks, keep our :focus-visible */
a:focus,
button:focus,
[role="button"]:focus,
.btn:focus {
  outline: none; /* we reintroduce visible focus via :focus-visible below */
}

/* Ensure keyboard focus is clearly visible (AA) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 40%, transparent);
  border-radius: var(--radius-2);
}

.btn.btn--primary:focus-visible {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--color-bg) 88%, transparent),
    0 0 0 5px color-mix(in srgb, var(--color-primary) 34%, transparent),
    0 14px 30px rgba(0,0,0,0.16),
    0 5px 12px rgba(0,0,0,0.11);
}

/* Optional: prevent long-press callout on logos/icons (keeps copy/select elsewhere) */
.wb-header__logo img { -webkit-touch-callout: none; } 


/* ===== Utility: vertical grid lines (responsive & reusable) ===== */
.wb-bg-vertlines {
  --grid-line-color: color-mix(in srgb, var(--color-border) 35%, transparent);
  --grid-col: 240px;
  --grid-line: 1px;

  background-image:
    repeating-linear-gradient(
      to right,
      var(--grid-line-color) 0,
      var(--grid-line-color) var(--grid-line),
      transparent var(--grid-line),
      transparent var(--grid-col)
    );
  background-size: auto 100%;
  background-position: center top;
  background-repeat: repeat;
}

/* Tablet: slightly tighter rhythm */
@media (max-width: 1024px) {
  .wb-bg-vertlines {
    --grid-col: 180px;
    --grid-line-color: color-mix(in srgb, var(--color-border) 30%, transparent);
  }
}

/* Mobile: switch to viewport-based spacing so 2–3 lines are always visible */
@media (max-width: 600px) {
  .wb-bg-vertlines {
    --grid-col: 30vw; /* roughly 3 lines on a 390–430px screen */
    --grid-line-color: color-mix(in srgb, var(--color-border) 25%, transparent);
  }
}

/* Optional dark mode refinement */
@media (prefers-color-scheme: dark) {
  .wb-bg-vertlines {
    --grid-line-color: color-mix(in srgb, var(--color-border) 20%, transparent);
  }
}