/* ============================================================================
   walb.tech — Design System Base Stylesheet
   Phase 2 deliverable. All tokens, base resets, base element styles, and
   minimal utilities. Components are documented in DESIGN-SYSTEM.md and
   rendered through Hugo partials in layouts/partials/paige/.
   ========================================================================== */

/* ---- 1. Google Fonts ---------------------------------------------------- */
/* Fonts are loaded from layouts/partials/paige/links.html via <link rel="stylesheet">
   with preconnect, which is faster than @import (no render-blocking, parallel fetch).
   See DESIGN-SYSTEM.md §8.3. */


/* ---- 2. Design Tokens (CSS custom properties) -------------------------- */
:root {
  /* Brand — slate (primary) */
  --walb-slate-900: #0F172A;   /* near-black, used only in dark mode bg */
  --walb-slate-800: #1E293B;   /* dark surface in dark mode */
  --walb-slate-700: #334155;   /* hover for primary text on light surfaces */
  --walb-slate-600: #475569;   /* PRIMARY — body text, headings, UI */
  --walb-slate-500: #64748B;   /* secondary text */
  --walb-slate-400: #94A3B8;   /* muted / descriptor / fine print */
  --walb-slate-300: #CBD5E1;   /* disabled controls, borders strong */
  --walb-slate-200: #E2E8F0;   /* DIVIDER — hairlines, card borders */
  --walb-slate-100: #F1F5F9;   /* subtle fill / hover backgrounds */
  --walb-slate-50:  #F8FAFC;   /* section background */

  /* Brand — orange (accent) */
  --walb-accent-700: #0E7490;  /* accessible orange for body-size text on white (WCAG AA 4.5:1+) */
  --walb-accent-600: #155E75;  /* hover state for accent surfaces / pressed CTA */
  --walb-accent-500: #0E7490;  /* PRIMARY ACCENT — buttons, monogram, logo dot */
  --walb-accent-400: #06B6D4;  /* light accent / decorative only */
  --walb-accent-50:  #ECFEFF;  /* tint background, soft callout fill */

  /* Functional supporting tones */
  --walb-focus-ring:  #06B6D4; /* orange-400 — focus rings; sits well on both bg colors */
  --walb-success-700: #15803D; /* AA on white */
  --walb-success-50:  #F0FDF4;
  --walb-warning-700: #B45309; /* AA on white */
  --walb-warning-50:  #FFFBEB;
  --walb-danger-700:  #B91C1C; /* AA on white */
  --walb-danger-50:   #FEF2F2;

  /* Surfaces */
  --walb-bg:          #FFFFFF;
  --walb-bg-subtle:   var(--walb-slate-50);
  --walb-bg-muted:    var(--walb-slate-100);
  --walb-surface:     #FFFFFF;
  --walb-border:      var(--walb-slate-200);
  --walb-border-strong: var(--walb-slate-300);

  /* Semantic text */
  --walb-text:        var(--walb-slate-600);
  --walb-text-strong: var(--walb-slate-700);
  --walb-text-muted:  var(--walb-slate-400);
  --walb-text-on-accent: #FFFFFF;
  --walb-link:        var(--walb-accent-700);
  --walb-link-hover:  var(--walb-accent-600);

  /* Typography */
  --walb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --walb-font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --walb-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Type scale — modular 1.200 (minor third), anchored at 16px body */
  --walb-fs-display: 4.5rem;   /* 72px */
  --walb-fs-h1:      3rem;     /* 48px */
  --walb-fs-h2:      2.25rem;  /* 36px */
  --walb-fs-h3:      1.5rem;   /* 24px */
  --walb-fs-h4:      1.25rem;  /* 20px */
  --walb-fs-h5:      1.125rem; /* 18px */
  --walb-fs-h6:      1rem;     /* 16px */
  --walb-fs-lead:    1.25rem;  /* 20px */
  --walb-fs-body:    1rem;     /* 16px */
  --walb-fs-small:   0.875rem; /* 14px */
  --walb-fs-caption: 0.75rem;  /* 12px */

  /* Line heights */
  --walb-lh-tight:  1.1;
  --walb-lh-snug:   1.25;
  --walb-lh-normal: 1.5;
  --walb-lh-relaxed: 1.65;

  /* Letter spacing */
  --walb-ls-display: -0.03em;
  --walb-ls-tight:   -0.02em;
  --walb-ls-normal:  0;
  --walb-ls-wide:    0.04em;
  --walb-ls-eyebrow: 0.18em;   /* uppercase descriptors */

  /* Spacing — 4px base scale */
  --walb-space-0:  0;
  --walb-space-1:  0.25rem;   /* 4px */
  --walb-space-2:  0.5rem;    /* 8px */
  --walb-space-3:  0.75rem;   /* 12px */
  --walb-space-4:  1rem;      /* 16px */
  --walb-space-5:  1.5rem;    /* 24px */
  --walb-space-6:  2rem;      /* 32px */
  --walb-space-7:  3rem;      /* 48px */
  --walb-space-8:  4rem;      /* 64px */
  --walb-space-9:  6rem;      /* 96px */
  --walb-space-10: 8rem;      /* 128px */

  /* Layout */
  --walb-container-max: 1200px;
  --walb-container-narrow: 760px;   /* prose width */
  --walb-container-wide:   1440px;  /* hero / full-bleed allow */
  --walb-gutter-mobile: var(--walb-space-4);   /* 16 */
  --walb-gutter-tablet: var(--walb-space-6);   /* 32 */
  --walb-gutter-desktop: var(--walb-space-7);  /* 48 */

  /* Radius */
  --walb-radius-sm: 4px;
  --walb-radius-md: 6px;
  --walb-radius-lg: 10px;
  --walb-radius-xl: 16px;
  --walb-radius-pill: 999px;

  /* Borders */
  --walb-border-width: 1px;

  /* Shadow / elevation — used sparingly per modern-minimal direction */
  --walb-shadow-none: none;
  --walb-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --walb-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --walb-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --walb-shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.10);
  --walb-shadow-focus: 0 0 0 3px rgba(6, 182, 212, 0.45);

  /* Motion */
  --walb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --walb-dur-fast: 120ms;
  --walb-dur-base: 180ms;
  --walb-dur-slow: 280ms;

  /* Breakpoints (reference only — used in @media) */
  --walb-bp-sm: 640px;
  --walb-bp-md: 768px;
  --walb-bp-lg: 1024px;
  --walb-bp-xl: 1280px;
  --walb-bp-2xl: 1536px;

  /* z-index */
  --walb-z-base: 1;
  --walb-z-dropdown: 100;
  --walb-z-sticky: 200;
  --walb-z-overlay: 300;
  --walb-z-modal: 400;
  --walb-z-toast: 500;
}

/* ---- Dark mode tokens. Triggered by prefers-color-scheme or .walb-dark
       class on <html>. Kept reserved/quiet — content site will likely launch
       light-only, but tokens are wired for future-proofing. ----------------- */
@media (prefers-color-scheme: dark) {
  :root:not(.walb-light) {
    --walb-bg:          var(--walb-slate-900);
    --walb-bg-subtle:   var(--walb-slate-800);
    --walb-bg-muted:    #273548;
    --walb-surface:     var(--walb-slate-800);
    --walb-border:      #2C3A4F;
    --walb-border-strong: #3D4D66;

    --walb-text:        #E2E8F0;
    --walb-text-strong: #F8FAFC;
    --walb-text-muted:  #94A3B8;
    --walb-link:        var(--walb-accent-400);
    --walb-link-hover:  var(--walb-accent-500);
  }
}

:root.walb-dark {
  --walb-bg:          var(--walb-slate-900);
  --walb-bg-subtle:   var(--walb-slate-800);
  --walb-bg-muted:    #273548;
  --walb-surface:     var(--walb-slate-800);
  --walb-border:      #2C3A4F;
  --walb-border-strong: #3D4D66;
  --walb-text:        #E2E8F0;
  --walb-text-strong: #F8FAFC;
  --walb-text-muted:  #94A3B8;
  --walb-link:        var(--walb-accent-400);
  --walb-link-hover:  var(--walb-accent-500);
}


/* ---- 3. Base reset ----------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Defensive: prevent horizontal scrolling on the document. Header overflow
     is the real fix (see media queries on .walb-site-header__logo /
     __actions); this catches anything else that ever sneaks off-axis. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--walb-bg);
  color: var(--walb-text);
  font-family: var(--walb-font-sans);
  font-size: var(--walb-fs-body);
  line-height: var(--walb-lh-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

hr {
  border: 0;
  border-top: var(--walb-border-width) solid var(--walb-border);
  margin: var(--walb-space-7) 0;
}

::selection {
  background: var(--walb-accent-500);
  color: #FFFFFF;
}


/* ---- 4. Typography ----------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--walb-space-4);
  font-family: var(--walb-font-sans);
  color: var(--walb-text-strong);
  font-weight: 700;
  line-height: var(--walb-lh-snug);
  letter-spacing: var(--walb-ls-tight);
}

h1 {
  font-size: var(--walb-fs-h1);
  font-weight: 800;
  line-height: var(--walb-lh-tight);
  letter-spacing: var(--walb-ls-display);
}
h2 { font-size: var(--walb-fs-h2); font-weight: 700; }
h3 { font-size: var(--walb-fs-h3); font-weight: 700; }
h4 { font-size: var(--walb-fs-h4); font-weight: 600; }
h5 { font-size: var(--walb-fs-h5); font-weight: 600; }
h6 { font-size: var(--walb-fs-h6); font-weight: 600; }

.walb-display {
  font-size: var(--walb-fs-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--walb-ls-display);
  color: var(--walb-text-strong);
  margin: 0 0 var(--walb-space-5);
}

.walb-lead {
  font-size: var(--walb-fs-lead);
  line-height: var(--walb-lh-relaxed);
  color: var(--walb-slate-500);
  margin: 0 0 var(--walb-space-6);
  max-width: 60ch;
}

p {
  margin: 0 0 var(--walb-space-4);
  max-width: 70ch;
}
/* Cancel the prose width constraint where it doesn't make sense — narrow
   card / footer / hero contexts have their own width logic. */
.walb-card p,
.walb-site-footer p,
.walb-hero p,
.walb-mobile-nav p { max-width: none; }

small, .walb-small {
  font-size: var(--walb-fs-small);
  line-height: var(--walb-lh-normal);
}

.walb-caption {
  font-size: var(--walb-fs-caption);
  line-height: var(--walb-lh-normal);
  color: var(--walb-text-muted);
}

/* Eyebrow / descriptor — Manrope uppercase letterspaced */
.walb-eyebrow {
  display: inline-block;
  font-family: var(--walb-font-display);
  font-weight: 700;
  font-size: var(--walb-fs-caption);
  letter-spacing: var(--walb-ls-eyebrow);
  text-transform: uppercase;
  color: var(--walb-text-muted);
  margin: 0 0 var(--walb-space-3);
}

.walb-eyebrow--accent { color: var(--walb-accent-700); }

a {
  color: var(--walb-link);
  text-decoration: none;
  transition: color var(--walb-dur-fast) var(--walb-ease);
}
a:hover {
  color: var(--walb-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:focus-visible {
  outline: none;
  box-shadow: var(--walb-shadow-focus);
  border-radius: var(--walb-radius-sm);
}

strong, b { font-weight: 700; color: var(--walb-text-strong); }

code, pre, kbd, samp { font-family: var(--walb-font-mono); font-size: 0.9375em; }
code {
  background: var(--walb-bg-muted);
  padding: 0.125em 0.375em;
  border-radius: var(--walb-radius-sm);
  color: var(--walb-text-strong);
}
pre {
  background: var(--walb-bg-subtle);
  border: 1px solid var(--walb-border);
  border-radius: var(--walb-radius-md);
  padding: var(--walb-space-4);
  overflow-x: auto;
  line-height: var(--walb-lh-normal);
}
pre code { background: transparent; padding: 0; }

blockquote {
  margin: var(--walb-space-6) 0;
  padding-left: var(--walb-space-5);
  border-left: 3px solid var(--walb-accent-500);
  color: var(--walb-text-strong);
  font-size: var(--walb-fs-lead);
  line-height: var(--walb-lh-relaxed);
}

ul, ol { margin: 0 0 var(--walb-space-4); padding-left: var(--walb-space-5); }
li { margin-bottom: var(--walb-space-2); }


/* Fluid headings on small screens — keep display restrained on mobile. */
@media (max-width: 640px) {
  :root {
    --walb-fs-display: 2.5rem;  /* 40 */
    --walb-fs-h1:      2rem;    /* 32 */
    --walb-fs-h2:      1.625rem;/* 26 */
    --walb-fs-h3:      1.25rem; /* 20 */
    --walb-fs-lead:    1.125rem;/* 18 */
  }
}


/* ---- 5. Layout primitives --------------------------------------------- */
.walb-container {
  width: 100%;
  max-width: var(--walb-container-max);
  margin-inline: auto;
  padding-inline: var(--walb-gutter-mobile);
}
.walb-container--narrow { max-width: var(--walb-container-narrow); }
.walb-container--wide   { max-width: var(--walb-container-wide); }

@media (min-width: 768px) {
  .walb-container { padding-inline: var(--walb-gutter-tablet); }
}
@media (min-width: 1024px) {
  .walb-container { padding-inline: var(--walb-gutter-desktop); }
}

.walb-section {
  padding-block: var(--walb-space-8);
}
@media (min-width: 768px) {
  .walb-section { padding-block: var(--walb-space-9); }
}

.walb-section--subtle { background: var(--walb-bg-subtle); }
.walb-section--divider-top    { border-top: 1px solid var(--walb-border); }
.walb-section--divider-bottom { border-bottom: 1px solid var(--walb-border); }


/* ---- 6. Buttons -------------------------------------------------------- */
.walb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--walb-space-2);
  font-family: var(--walb-font-sans);
  font-weight: 600;
  font-size: var(--walb-fs-body);
  line-height: 1;
  padding: 0.75rem 1.25rem;            /* 12 x 20 */
  border-radius: var(--walb-radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--walb-dur-fast) var(--walb-ease),
              border-color var(--walb-dur-fast) var(--walb-ease),
              color var(--walb-dur-fast) var(--walb-ease),
              box-shadow var(--walb-dur-fast) var(--walb-ease),
              transform var(--walb-dur-fast) var(--walb-ease);
  white-space: nowrap;
}
.walb-btn:focus-visible {
  outline: none;
  box-shadow: var(--walb-shadow-focus);
}
.walb-btn[disabled],
.walb-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — accent orange */
.walb-btn--primary {
  background: var(--walb-accent-500);
  color: #FFFFFF;
  border-color: var(--walb-accent-500);
}
.walb-btn--primary:hover { background: var(--walb-accent-600); border-color: var(--walb-accent-600); color: #FFFFFF; }
.walb-btn--primary:active { background: var(--walb-accent-700); border-color: var(--walb-accent-700); transform: translateY(1px); }

/* Secondary — outline slate */
.walb-btn--secondary {
  background: var(--walb-surface);
  color: var(--walb-text-strong);
  border-color: var(--walb-border-strong);
}
.walb-btn--secondary:hover { background: var(--walb-bg-subtle); border-color: var(--walb-slate-400); color: var(--walb-text-strong); }
.walb-btn--secondary:active { background: var(--walb-bg-muted); transform: translateY(1px); }

/* Ghost — transparent */
.walb-btn--ghost {
  background: transparent;
  color: var(--walb-text-strong);
  border-color: transparent;
}
.walb-btn--ghost:hover { background: var(--walb-bg-muted); color: var(--walb-text-strong); }

/* Link-style button */
.walb-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--walb-link);
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.walb-btn--link:hover { color: var(--walb-link-hover); }

/* Sizes */
.walb-btn--sm { padding: 0.5rem 0.875rem; font-size: var(--walb-fs-small); }
.walb-btn--lg { padding: 1rem 1.5rem; font-size: 1.0625rem; }


/* ---- 7. Form inputs --------------------------------------------------- */
.walb-field { display: flex; flex-direction: column; gap: var(--walb-space-2); margin-bottom: var(--walb-space-5); }
.walb-label { font-size: var(--walb-fs-small); font-weight: 600; color: var(--walb-text-strong); }
.walb-help  { font-size: var(--walb-fs-caption); color: var(--walb-text-muted); }

.walb-input,
.walb-textarea,
.walb-select {
  font-family: var(--walb-font-sans);
  font-size: var(--walb-fs-body);
  line-height: var(--walb-lh-normal);
  color: var(--walb-text-strong);
  background: var(--walb-surface);
  border: 1px solid var(--walb-border-strong);
  border-radius: var(--walb-radius-md);
  padding: 0.625rem 0.875rem;          /* 10 x 14 */
  width: 100%;
  transition: border-color var(--walb-dur-fast) var(--walb-ease),
              box-shadow var(--walb-dur-fast) var(--walb-ease);
}
.walb-input::placeholder,
.walb-textarea::placeholder { color: var(--walb-text-muted); }

.walb-input:hover,
.walb-textarea:hover,
.walb-select:hover { border-color: var(--walb-slate-400); }

.walb-input:focus,
.walb-textarea:focus,
.walb-select:focus {
  outline: none;
  border-color: var(--walb-accent-500);
  box-shadow: var(--walb-shadow-focus);
}

.walb-input[aria-invalid="true"],
.walb-textarea[aria-invalid="true"],
.walb-select[aria-invalid="true"] { border-color: var(--walb-danger-700); }

.walb-textarea { min-height: 7.5rem; resize: vertical; }

/* Checkbox / radio — minimal custom styling */
.walb-check, .walb-radio {
  display: inline-flex; align-items: flex-start; gap: var(--walb-space-2);
  font-size: var(--walb-fs-body); color: var(--walb-text-strong);
}
.walb-check input[type="checkbox"],
.walb-radio input[type="radio"] {
  accent-color: var(--walb-accent-500);
  width: 1.125rem; height: 1.125rem; margin-top: 0.1875rem;
}


/* ---- 8. Cards --------------------------------------------------------- */
.walb-card {
  display: flex;
  flex-direction: column;
  background: var(--walb-surface);
  border: 1px solid var(--walb-border);
  border-radius: var(--walb-radius-lg);
  padding: var(--walb-space-5);
  transition: border-color var(--walb-dur-base) var(--walb-ease),
              box-shadow var(--walb-dur-base) var(--walb-ease),
              transform var(--walb-dur-base) var(--walb-ease);
}
.walb-card--interactive:hover {
  border-color: var(--walb-slate-300);
  box-shadow: var(--walb-shadow-md);
  transform: translateY(-2px);
}
.walb-card--interactive:focus-within {
  border-color: var(--walb-accent-500);
  box-shadow: var(--walb-shadow-focus);
}

/* .walb-card__icon — see §24 (live definition). Dead-code duplicate removed. */
.walb-card__title { font-size: var(--walb-fs-h4); margin-bottom: var(--walb-space-2); }
.walb-card__body  { color: var(--walb-text); margin-bottom: var(--walb-space-4); }
.walb-card__cta   { font-weight: 600; margin-top: auto; }

.walb-card--image { padding: 0; overflow: hidden; }
.walb-card--image .walb-card__media {
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--walb-bg-muted);
}
.walb-card--image .walb-card__media img { width: 100%; height: 100%; object-fit: cover; }
.walb-card--image .walb-card__content { padding: var(--walb-space-5); }


/* ---- 9. Tags / pills -------------------------------------------------- */
.walb-tag {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-family: var(--walb-font-display);
  font-size: var(--walb-fs-caption);
  font-weight: 700;
  letter-spacing: var(--walb-ls-eyebrow);
  text-transform: uppercase;
  color: var(--walb-text-strong);
  background: var(--walb-bg-subtle);
  border: 1px solid var(--walb-border);
  border-radius: var(--walb-radius-pill);
  padding: 0.25rem 0.625rem;
}
.walb-tag--accent { background: var(--walb-accent-50); color: var(--walb-accent-700); border-color: var(--walb-accent-400); }
.walb-tag--solid  { background: var(--walb-slate-700); color: #FFFFFF; border-color: var(--walb-slate-700); }


/* ---- 10. Callouts / alerts ------------------------------------------- */
.walb-callout {
  border: 1px solid var(--walb-border);
  background: var(--walb-bg-subtle);
  border-left: 3px solid var(--walb-slate-400);
  border-radius: var(--walb-radius-md);
  padding: var(--walb-space-4) var(--walb-space-5);
  color: var(--walb-text-strong);
}
.walb-callout__title {
  font-size: var(--walb-fs-small); font-weight: 700;
  letter-spacing: var(--walb-ls-wide); text-transform: uppercase;
  margin: 0 0 var(--walb-space-2);
  color: var(--walb-text-muted);
}
.walb-callout--info    { border-left-color: var(--walb-slate-500); }
.walb-callout--warning { border-left-color: var(--walb-warning-700); background: var(--walb-warning-50); }
.walb-callout--success { border-left-color: var(--walb-success-700); background: var(--walb-success-50); }
.walb-callout--danger  { border-left-color: var(--walb-danger-700);  background: var(--walb-danger-50); }


/* ---- 11. Tables ------------------------------------------------------- */
.walb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--walb-fs-body);
}
.walb-table th,
.walb-table td {
  padding: var(--walb-space-3) var(--walb-space-4);
  text-align: left;
  border-bottom: 1px solid var(--walb-border);
  vertical-align: top;
}
.walb-table th {
  font-family: var(--walb-font-display);
  font-size: var(--walb-fs-caption);
  font-weight: 700;
  letter-spacing: var(--walb-ls-wide);
  text-transform: uppercase;
  color: var(--walb-text-muted);
  background: var(--walb-bg-subtle);
  border-bottom: 1px solid var(--walb-border-strong);
}
.walb-table tbody tr:hover { background: var(--walb-bg-subtle); }


/* ---- 12. Pricing display --------------------------------------------- */
.walb-price {
  display: inline-flex; align-items: baseline; gap: 0.375rem;
  color: var(--walb-text-strong);
  font-weight: 800;
}
.walb-price__prefix {
  font-family: var(--walb-font-display);
  font-size: var(--walb-fs-caption);
  font-weight: 700;
  letter-spacing: var(--walb-ls-eyebrow);
  text-transform: uppercase;
  color: var(--walb-text-muted);
}
.walb-price__amount { font-size: 2rem; line-height: 1; letter-spacing: var(--walb-ls-tight); }
.walb-price__suffix { font-size: var(--walb-fs-small); font-weight: 500; color: var(--walb-text-muted); }
.walb-price__disclaimer { display: block; font-size: var(--walb-fs-caption); color: var(--walb-text-muted); margin-top: var(--walb-space-2); font-weight: 400; }
.walb-price--quote { font-size: var(--walb-fs-h4); font-weight: 700; color: var(--walb-text-strong); }


/* ---- 13. Header / nav (top site nav) --------------------------------- */
.walb-site-header {
  position: sticky; top: 0; z-index: var(--walb-z-sticky);
  /* Translucent dark slate so the blur effect shows when content scrolls under.
     Matches the forced-dark theme body bg (#1A2436) with ~85% alpha. */
  background: rgba(26, 36, 54, 0.85);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--walb-border);
}
.walb-site-header__inner {
  display: flex; align-items: center; gap: var(--walb-space-5);
  height: 4.5rem;
  width: 100%; max-width: var(--walb-container-max);
  margin-inline: auto;
  padding-inline: var(--walb-gutter-mobile);
}
@media (min-width: 768px) { .walb-site-header__inner { padding-inline: var(--walb-gutter-tablet); } }
@media (min-width: 1024px) { .walb-site-header__inner { padding-inline: var(--walb-gutter-desktop); } }

.walb-site-header__logo { flex: 0 0 auto; display: inline-flex; min-width: 0; }
.walb-site-header__logo img,
.walb-site-header__logo svg {
  height: 4.5rem;
  width: auto;
  max-width: 100%;
}
/* Shrink the logo on phones so the header doesn't overflow horizontally
   alongside the toggle button. */
@media (max-width: 640px)  { .walb-site-header__logo img, .walb-site-header__logo svg { height: 2.5rem; } }
@media (min-width: 641px) and (max-width: 1023px) { .walb-site-header__logo img, .walb-site-header__logo svg { height: 3.25rem; } }

.walb-nav { display: none; flex: 1 1 auto; }
@media (min-width: 1024px) { .walb-nav { display: flex; gap: var(--walb-space-5); align-items: center; justify-content: center; } }

/* Header text colors use semantic tokens; with the forced-dark theme below,
   --walb-text-strong resolves to a light slate. */
.walb-nav__link {
  font-size: var(--walb-fs-body);
  font-weight: 600;
  color: var(--walb-text-strong);
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--walb-dur-fast) var(--walb-ease),
              border-color var(--walb-dur-fast) var(--walb-ease);
}
.walb-nav__link:hover,
.walb-nav__link[aria-current="page"] {
  color: var(--walb-accent-400);
  border-bottom-color: var(--walb-accent-500);
}

.walb-site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--walb-space-3); flex: 0 0 auto; }

/* Below the desktop breakpoint, the CTA button in the header is hidden —
   it's already in the mobile drawer, and keeping it in the header pushes
   the toggle off-screen on phones. */
@media (max-width: 1023px) {
  .walb-site-header__actions > .walb-btn { display: none; }
}
/* Header phone is de-emphasized: smaller, muted color. Form / email
   are the primary contact paths; phone is for urgent issues only. */
.walb-site-header__phone {
  display: none;
  font-weight: 500;
  color: var(--walb-text-muted);
  text-decoration: none;
  font-size: var(--walb-fs-small);
}
.walb-site-header__phone:hover { color: var(--walb-text-strong); }
@media (min-width: 768px) { .walb-site-header__phone { display: inline-flex; align-items: center; gap: 0.375rem; } }

.walb-mobile-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--walb-border); border-radius: var(--walb-radius-md);
  background: var(--walb-surface); color: var(--walb-text-strong);
  cursor: pointer;
}
@media (min-width: 1024px) { .walb-mobile-toggle { display: none; } }


/* ---- 14. Footer ------------------------------------------------------- */
.walb-site-footer {
  background: var(--walb-slate-700);
  color: #CBD5E1;
  padding-block: var(--walb-space-8) var(--walb-space-5);
  border-top: 1px solid var(--walb-border);
}
.walb-site-footer a { color: #E2E8F0; text-decoration: none; }
.walb-site-footer a:hover { color: var(--walb-accent-400); text-decoration: underline; }
.walb-site-footer__grid {
  display: grid; gap: var(--walb-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .walb-site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .walb-site-footer__grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.walb-site-footer__col h6 {
  font-family: var(--walb-font-display);
  font-size: var(--walb-fs-caption); letter-spacing: var(--walb-ls-eyebrow);
  text-transform: uppercase; color: #94A3B8; margin-bottom: var(--walb-space-3);
}
.walb-site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.walb-site-footer__col li { margin-bottom: var(--walb-space-2); }
.walb-site-footer__bottom {
  margin-top: var(--walb-space-7); padding-top: var(--walb-space-5);
  border-top: 1px solid #3D4D66;
  display: flex; flex-wrap: wrap; gap: var(--walb-space-4);
  justify-content: space-between; align-items: center;
  font-size: var(--walb-fs-caption); color: #94A3B8;
}


/* ---- 15. Hero pattern ------------------------------------------------- */
.walb-hero { padding-block: var(--walb-space-8) var(--walb-space-8); }
@media (min-width: 768px) { .walb-hero { padding-block: var(--walb-space-9) var(--walb-space-9); } }
.walb-hero__eyebrow { margin-bottom: var(--walb-space-3); }
.walb-hero__title   { max-width: 22ch; }
.walb-hero__sub     { max-width: 60ch; color: var(--walb-slate-500); font-size: var(--walb-fs-lead); margin-bottom: var(--walb-space-6); }
.walb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--walb-space-3); }


/* ---- 16. Utility classes (minimal, only where reuse pays off) -------- */
.walb-text-center { text-align: center; }
.walb-text-muted  { color: var(--walb-text-muted); }
.walb-text-accent { color: var(--walb-accent-700); }   /* AA on white at body size */
.walb-text-strong { color: var(--walb-text-strong); }
.walb-bg-subtle   { background: var(--walb-bg-subtle); }

.walb-stack-1 > * + * { margin-top: var(--walb-space-1); }
.walb-stack-2 > * + * { margin-top: var(--walb-space-2); }
.walb-stack-3 > * + * { margin-top: var(--walb-space-3); }
.walb-stack-4 > * + * { margin-top: var(--walb-space-4); }
.walb-stack-5 > * + * { margin-top: var(--walb-space-5); }
.walb-stack-6 > * + * { margin-top: var(--walb-space-6); }

.walb-grid { display: grid; gap: var(--walb-space-5); }
.walb-grid--2 { grid-template-columns: repeat(1, 1fr); }
.walb-grid--3 { grid-template-columns: repeat(1, 1fr); }
.walb-grid--4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) {
  .walb-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .walb-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .walb-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .walb-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.walb-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.walb-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--walb-z-toast);
  background: var(--walb-slate-700); color: #FFFFFF;
  padding: 0.75rem 1rem; border-radius: var(--walb-radius-md);
  text-decoration: none; font-weight: 600;
}
.walb-skip-link:focus { left: 1rem; top: 1rem; }


/* ---- 17. Global focus & reduced motion ------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: var(--walb-shadow-focus);
  border-radius: var(--walb-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---- 18. Paige theme integration -------------------------------------
   Targets Paige's auto-generated list wrappers so our .walb-card list-items
   render as a responsive grid instead of stacked block-level anchors. */
#paige-page-sections,
#paige-page-pages,
#paige-page-collections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--walb-space-5);
  margin-block: var(--walb-space-7);
}

/* Hide Paige's auto-generated "Sections" / "Pages" h2 — our hub markdown
   provides its own framing copy, no need for a generic label above the cards. */
#paige-page-sections-header,
#paige-page-pages-header,
#paige-page-collections-header {
  display: none;
}

/* Push the Bootstrap col padding away so our header can sit edge-to-edge.
   Paige wraps everything in `.container > .row > .col.mt-3#paige-site`.
   We negate the col's margin-top so the sticky header lines up with the viewport top. */
#paige-site { margin-top: 0 !important; }

/* The container/row/col in Paige's baseof constrains overall width.
   Our walb-site-header__inner constrains its own contents to 1200px, so
   it visually behaves correctly inside Bootstrap's container without conflict. */


/* ---- 19. Mobile nav drawer link styles + help-card variants ----------
   Drawer container styles are in §23 (animation-aware). This block only
   holds the link/phone/button styling + body-scroll lock.
   No-JS fallback: drawer starts with [hidden] in HTML; the rule below
   keeps it hidden until walb.js removes the attribute. */
.walb-mobile-nav[hidden] { display: none; }

.walb-mobile-nav__link {
  display: block;
  padding: var(--walb-space-3) var(--walb-space-3);
  color: var(--walb-text-strong);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--walb-radius-md);
  font-size: var(--walb-fs-h5);
}

.walb-mobile-nav__link:hover,
.walb-mobile-nav__link[aria-current="page"] {
  background: var(--walb-bg-muted);
  color: var(--walb-accent-700);
}

.walb-mobile-nav__phone {
  margin-top: var(--walb-space-3);
  padding: var(--walb-space-3) var(--walb-space-3);
  color: var(--walb-text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--walb-fs-small);
  border-top: 1px solid var(--walb-border);
}
.walb-mobile-nav__phone::before {
  content: "Urgent: ";
  color: var(--walb-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--walb-fs-caption);
  margin-right: var(--walb-space-2);
}

.walb-mobile-nav .walb-btn {
  margin-top: var(--walb-space-3);
  align-self: stretch;
  text-align: center;
}

/* Body scroll lock when drawer is open */
:root.walb-nav-open { overflow: hidden; }

/* Help-card product label — small grey "(Zendesk)" / "(SimpleHelp)" annotation */
.walb-help-card__product {
  color: var(--walb-text-muted);
  font-weight: 500;
  font-size: var(--walb-fs-small);
  white-space: nowrap;
}


/* ---- 20. Forced dark theme (Phase 3 user decision 2026-05-18) ----------
   Overrides the light defaults from §2. To revert to light: comment this
   block out. To make the theme toggleable later: gate this block behind
   a `:root.walb-dark` class and add a toggle JS.
   2026-05-20: dark surface scale lifted two shades from slate-900 baseline.
   Whole stack (bg, surface, muted) moves together so card contrast is
   preserved. Original scale was slate-900 / slate-800 / #273548. */
:root {
  --walb-bg:            #1A2436;
  --walb-bg-subtle:     #232F44;
  --walb-bg-muted:      #2D3B52;
  --walb-surface:       #232F44;
  --walb-border:        #2C3A4F;
  --walb-border-strong: #3D4D66;

  --walb-text:          #CBD5E1;   /* slate-300 — body text */
  --walb-text-strong:   #F8FAFC;   /* near-white — headings, nav, strong */
  --walb-text-muted:    #94A3B8;   /* slate-400 — fine print, descriptors */
  --walb-text-on-accent: #FFFFFF;

  --walb-link:          var(--walb-accent-400);
  --walb-link-hover:    var(--walb-accent-500);

  /* Soften focus ring on dark surfaces */
  --walb-shadow-focus:  0 0 0 3px rgba(6, 182, 212, 0.55);
}

/* Body bg must explicitly override Paige's Bootstrap white bg. */
html, body { background: var(--walb-bg); color: var(--walb-text); }

/* Paige's Bootstrap col has white bg in places — neutralize it. */
#paige-site, .container, .row, .col, .col.mt-3 {
  background: transparent !important;
  color: var(--walb-text);
}

/* Headings get the strong color on dark */
h1, h2, h3, h4, h5, h6 { color: var(--walb-text-strong); }

/* Brighten accent-colored text on dark surfaces.
   `--walb-accent-700` (#0E7490 cyan-700) sits at ~3.4:1 against the dark
   card surface — fails WCAG AA at body size. The brighter `--walb-accent-400`
   (#06B6D4 cyan-500) reaches ~7:1 and passes AAA. */
.walb-text-accent,
.walb-eyebrow--accent,
.walb-required {
  color: var(--walb-accent-400);
}
.walb-tag--accent {
  background: rgba(6, 182, 212, 0.12);
  color: var(--walb-accent-400);
  border-color: var(--walb-accent-400);
}


/* ---- 21. Consultation form ------------------------------------------- */
.walb-consultation-form {
  max-width: 720px;
  margin-block: var(--walb-space-6);
}

/* Two-column grid for paired short inputs (name + business, email + phone).
   Collapses to single column on narrow screens. */
.walb-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--walb-space-4);
}
@media (min-width: 640px) {
  .walb-form-grid { grid-template-columns: 1fr 1fr; }
}

/* Required / optional inline hints next to labels. */
.walb-required { color: var(--walb-accent-700); margin-left: 2px; }
.walb-optional {
  font-weight: 400; color: var(--walb-text-muted);
  font-size: var(--walb-fs-caption); margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Fieldset wrapping a group of related checkboxes / radios. */
.walb-field--fieldset {
  border: 0; padding: 0; margin: 0 0 var(--walb-space-5);
}
.walb-field--fieldset > legend {
  padding: 0; margin-bottom: var(--walb-space-2);
}

/* Stacked group of checkboxes by default; inline modifier for radio groups. */
.walb-check-group {
  display: flex; flex-direction: column; gap: var(--walb-space-2);
}
.walb-check-group--inline {
  flex-direction: row; flex-wrap: wrap; gap: var(--walb-space-4);
}

/* Honeypot — visually hidden but still in the tab order off-screen so
   screen readers ignore it (aria-hidden on container) and bots fill it. */
.walb-honeypot {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* Collapsible "optional" section. */
.walb-form-details {
  margin: var(--walb-space-5) 0;
  border-top: 1px solid var(--walb-border);
  padding-top: var(--walb-space-5);
}
.walb-form-details > summary {
  cursor: pointer;
  font-size: var(--walb-fs-small);
  font-weight: 600;
  color: var(--walb-text-strong);
  margin-bottom: var(--walb-space-4);
  list-style: none;
  position: relative;
  padding-left: 1.25rem;
}
.walb-form-details > summary::-webkit-details-marker { display: none; }
.walb-form-details > summary::before {
  content: '+';
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--walb-accent-500);
}
.walb-form-details[open] > summary::before { content: '−'; }
.walb-form-details > summary:hover { color: var(--walb-accent-400); }

/* Submit button + post-submit reassurance copy. */
.walb-consultation-form__submit { margin-top: var(--walb-space-4); }
.walb-consultation-form__footnote {
  margin-top: var(--walb-space-3);
}

/* Turnstile widget spacing. */
.walb-field--turnstile { margin-block: var(--walb-space-4); }

/* Footer column titles — styled small but kept as proper h2 for heading hierarchy.
   Without this rule, the h2 default size would dominate the small footer columns. */
.walb-site-footer__col-title {
  font-size: var(--walb-fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--walb-space-3);
  color: #E2E8F0;
}

/* Icon box inside cards (used on /services/ hub for service-pillar cards) */
.walb-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--walb-radius-md);
  background: var(--walb-bg-muted);
  color: var(--walb-accent-500);
  margin-bottom: var(--walb-space-4);
}
.walb-card--interactive:hover .walb-card__icon {
  background: var(--walb-accent-500);
  color: #FFFFFF;
}

/* ---- 22. Breadcrumbs + 404 ----------------------------------------- */
.walb-breadcrumb {
  border-bottom: 1px solid var(--walb-border);
  padding-block: var(--walb-space-3);
  font-size: var(--walb-fs-small);
}
.walb-breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; padding: 0; margin: 0;
  gap: var(--walb-space-1);
  color: var(--walb-text-muted);
}
.walb-breadcrumb__item:not(:last-child)::after {
  content: '/';
  margin-left: var(--walb-space-2);
  color: var(--walb-text-muted);
}
.walb-breadcrumb__item a {
  color: var(--walb-text-muted);
  text-decoration: none;
}
.walb-breadcrumb__item a:hover {
  color: var(--walb-accent-400);
  text-decoration: underline;
}
.walb-breadcrumb__item[aria-current="page"] {
  color: var(--walb-text-strong);
  font-weight: 600;
}

/* 404 page extras (uses the walb-hero structure + a card grid) */
.walb-404__links { margin-block: var(--walb-space-8); }
.walb-404__heading {
  font-size: var(--walb-fs-h4);
  margin-bottom: var(--walb-space-5);
}
.walb-404__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--walb-space-5);
}

/* ---- 23. Mobile drawer transitions + backdrop -------------------------- */
/* Convert the drawer from instant show/hide to slide + fade with a backdrop.
   inert (set by JS) prevents focus when closed while still allowing CSS
   transitions to play. */

.walb-mobile-nav {
  position: fixed;
  top: 4.5rem;   /* matches .walb-site-header__inner height */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--walb-z-overlay);
  overflow-y: auto;
  transform: translateY(-1rem);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--walb-dur-base) var(--walb-ease),
              opacity var(--walb-dur-base) var(--walb-ease),
              visibility 0s linear var(--walb-dur-base);
}

.walb-mobile-nav--open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--walb-dur-base) var(--walb-ease),
              opacity var(--walb-dur-base) var(--walb-ease),
              visibility 0s linear 0s;
}

/* Hide drawer entirely on desktop (cancels the rules above) */
@media (min-width: 1024px) {
  .walb-mobile-nav { display: none !important; }
}

/* Backdrop scrim */
.walb-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: calc(var(--walb-z-overlay) - 1);
  opacity: 0;
  transition: opacity var(--walb-dur-base) var(--walb-ease);
  cursor: pointer;
}
.walb-mobile-backdrop--visible { opacity: 1; }

/* Animate the hamburger icon strokes when the toggle is in open state. */
.walb-mobile-toggle svg {
  transition: transform var(--walb-dur-fast) var(--walb-ease);
}
.walb-mobile-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

/* Explicit focus states for nav + buttons (above the global :focus-visible
   rule, which only handles default outline). Keyboard users see a clear
   indication on every interactive element. */
.walb-nav__link:focus-visible {
  outline: none;
  border-bottom-color: var(--walb-accent-500);
  border-radius: var(--walb-radius-sm);
}
.walb-mobile-nav__link:focus-visible {
  background: var(--walb-bg-muted);
  color: var(--walb-accent-400);
}
.walb-card--interactive:focus-visible {
  border-color: var(--walb-accent-500);
  box-shadow: var(--walb-shadow-focus);
  outline: none;
}

/* ---- 24. Cleanup from review (heading anchor, code, toggle icons) ----- */

/* Heading anchor — replaces Paige's inline `style=` that blocked CSP tightening.
   Renders the entire heading text as a click target to its own anchor. */
.walb-heading-anchor {
  color: inherit;
  text-decoration: none;
}
.walb-heading-anchor:hover { text-decoration: none; }

/* Cards are wrapped in <a>; default a:hover underline would underline
   the title h3 inside via inheritance. Cancel for card-as-anchor. */
.walb-card:hover { text-decoration: none; }

/* Dedicated tokens for code samples so they don't visually merge with
   card surfaces on dark theme. */
:root {
  --walb-code-bg: var(--walb-slate-100);
  --walb-code-fg: var(--walb-slate-700);
}
@media (prefers-color-scheme: dark) {
  :root:not(.walb-light) {
    --walb-code-bg: #1A2433;
    --walb-code-fg: #E2E8F0;
  }
}
/* Override for the forced-dark theme (§20) — uses a darker bg than the
   surrounding card to read as distinct. */
code, pre {
  background: var(--walb-code-bg, var(--walb-bg-muted));
  color: var(--walb-code-fg, var(--walb-text-strong));
}

/* Mobile-toggle icon swap — both icons in DOM, CSS controls which shows.
   Replaces the previous SVG.innerHTML mutation approach. */
.walb-mobile-toggle__icon { display: none; }
.walb-mobile-toggle__icon--menu { display: inline-block; }
.walb-mobile-toggle[aria-expanded="true"] .walb-mobile-toggle__icon--menu { display: none; }
.walb-mobile-toggle[aria-expanded="true"] .walb-mobile-toggle__icon--close { display: inline-block; }