/* =========================
   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 */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--fw-medium); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); font-weight: var(--fw-medium); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-snug); font-weight: var(--fw-medium); }

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;
}

/* 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 (sleek hover) */
.btn--primary {
  --_bg: var(--color-primary);
  --_fg: #fff;
  box-shadow: var(--shadow-1);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--color-primary) 25%, transparent);
  background: var(--color-primary-700);
}

/* Secondary button (outline, subtle fill on hover) */
.btn--secondary {
  --_bg: transparent;
  --_fg: var(--color-heading);
  border-color: var(--color-border-strong);
  background: transparent;
}
.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);
}

/* 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);
  }
}