/**
 * Willis Consulting — Brand Tokens
 *
 * Single source of truth for color, typography, spacing, container widths.
 * Every section stylesheet should pull from these — no raw hex / px.
 *
 * Values verified against "Willis Consulting — Type & Color Guidelines"
 * (Brady Welch, 03/22/26). See ingest/ for the source PDF.
 */

:root {
  /* Color — brand
     - Burgundy: primary headline / pull-quote / link color
     - Primary Red: logo accent (the bullseye dart) + UI accents
     - Charcoal: dark UI surfaces (e.g. potential dark header bands)
     - Glacier Blue: soft fill, e.g. supporting backgrounds */
  --wc-color-brand: #731816;            /* Burgundy */
  --wc-color-brand-dark: #5a1311;
  --wc-color-brand-tint: #f5e7e6;
  --wc-color-accent: #e12203;            /* Primary Red */
  --wc-color-accent-dark: #b51a02;
  --wc-color-charcoal: #282828;
  --wc-color-glacier: #d2e1f0;

  /* Color — text */
  --wc-color-text: #282828;              /* Charcoal */
  --wc-color-text-muted: #6b6b6b;
  --wc-color-text-inverse: #ffffff;

  /* Color — surface */
  --wc-color-bg: #ffffff;
  --wc-color-bg-alt: #faf7f5;
  --wc-color-divider: #e5e5e5;

  /* Typography — Inter is the primary family for every text element
     EXCEPT the hero H1, which uses Source Serif 4 as a serif accent
     per the 2026-05-08 design call. Component CSS that wants the
     serif explicitly should use `--wc-font-serif`. */
  --wc-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --wc-font-serif: "Source Serif 4", "Source Serif Pro", Georgia,
    "Times New Roman", serif;

  /* Typography — scale (clamp keeps it responsive) */
  --wc-fs-xs: 0.75rem;
  --wc-fs-sm: 0.875rem;
  --wc-fs-base: 1rem;
  --wc-fs-md: 1.125rem;
  --wc-fs-lg: 1.25rem;
  --wc-fs-xl: clamp(1.25rem, 1.6vw, 1.5rem);
  --wc-fs-2xl: clamp(1.625rem, 2.4vw, 2rem);
  --wc-fs-3xl: clamp(2rem, 3.5vw, 2.75rem);
  --wc-fs-4xl: clamp(2.5rem, 5vw, 3.75rem);
  --wc-fs-5xl: clamp(3rem, 6vw, 4.5rem);

  /* Typography — weight (R7 uses Light for headlines and body, Semi Bold
     for emphasis, Bold for nav + accents). */
  --wc-fw-light: 300;
  --wc-fw-regular: 400;
  --wc-fw-medium: 500;
  --wc-fw-semibold: 600;
  --wc-fw-bold: 700;

  /* Tracking — headlines, names, and CTAs use this tight value
     (now ~-4% of em per design review 2026-05-11, was -25). Body
     copy stays at the default `normal` letter-spacing. */
  --wc-tracking-tight: -0.04em;

  /* Typography — line height */
  --wc-lh-tight: 1.15;
  --wc-lh-snug: 1.3;
  --wc-lh-normal: 1.5;
  --wc-lh-relaxed: 1.7;

  /* Spacing scale (8pt base) */
  --wc-space-xs: 0.5rem;
  --wc-space-sm: 0.75rem;
  --wc-space-md: 1rem;
  --wc-space-lg: 1.5rem;
  --wc-space-xl: 2.5rem;
  --wc-space-2xl: 4rem;
  --wc-space-3xl: 6rem;
  --wc-space-4xl: 8rem;

  /* Layout containers */
  --wc-container-narrow: 720px;
  --wc-container: 1100px;
  --wc-container-wide: 1320px;
  /* Default gutter (used by most sections). The header pulls in tighter
     so the logo + nav sit further left/right than the main copy below. */
  --wc-gutter: clamp(1.5rem, 6vw, 4.5rem);
  --wc-gutter-header: clamp(1rem, 2vw, 1.5rem);

  /* Radius */
  --wc-radius-sm: 4px;
  --wc-radius-md: 8px;
  --wc-radius-pill: 999px;
  --wc-radius-circle: 50%;

  /* Shadow */
  --wc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --wc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --wc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* Motion */
  --wc-transition-fast: 120ms ease;
  --wc-transition-base: 200ms ease;

  /* Z-index */
  --wc-z-header: 50;
  --wc-z-overlay: 80;
  --wc-z-modal: 100;
}

/*
 * Base typography. Apply tokens to body so every section inherits cleanly,
 * scoped under .wc-page so we only override Divi where the redesign owns
 * the layout. Divi's existing CSS keeps its grip on inner pages.
 */

.wc-page {
  font-family: var(--wc-font-sans);
  font-size: var(--wc-fs-base);
  line-height: var(--wc-lh-normal);
  color: var(--wc-color-text);
  background: var(--wc-color-bg);
}

/* Paint the root burgundy so the footer's full-bleed legal bar reads
   as continuing to the bottom of the viewport — any whitespace below
   the footer (e.g. on short pages or rubber-band scroll) inherits the
   bar's color instead of the body's white. */
html {
  background: var(--wc-color-brand);
}

/* Sticky header is ~80px tall — offset anchor jumps so the section
   heading isn't tucked under it. (Smooth-scroll was removed
   2026-05-11 — applied globally it slowed mousewheel scrolling.) */
#about,
#team,
#contact {
  scroll-margin-top: 96px;
}

.wc-page h1,
.wc-page h2,
.wc-page h3,
.wc-page h4 {
  /* Per Figma R7: headings render in Inter Light (300) with tight
     tracking. Color defaults to burgundy for section heads ("Meet Our
     Recruiters", H1); component-specific selectors override to black
     where applicable (founder/recruiter names). */
  font-family: var(--wc-font-sans);
  font-weight: var(--wc-fw-light);
  line-height: var(--wc-lh-tight);
  letter-spacing: var(--wc-tracking-tight);
  color: var(--wc-color-brand);
  margin: 0 0 var(--wc-space-md);
}

.wc-page h1 {
  font-size: var(--wc-fs-5xl);
}

.wc-page h2 {
  font-size: var(--wc-fs-4xl);
}

.wc-page h3 {
  font-size: var(--wc-fs-2xl);
}

.wc-page h4 {
  font-size: var(--wc-fs-xl);
}

.wc-page p {
  margin: 0 0 var(--wc-space-md);
}

.wc-page a {
  color: var(--wc-color-brand);
  text-decoration: none;
  transition: color var(--wc-transition-fast);
}

.wc-page a:hover,
.wc-page a:focus-visible {
  color: var(--wc-color-brand-dark);
  text-decoration: none;
}

.wc-page :focus-visible {
  outline: 2px solid var(--wc-color-brand);
  outline-offset: 2px;
}

.wc-container {
  max-width: var(--wc-container);
  margin-inline: auto;
  /* Wider main-page gutter per 2026-05-11 so body copy and assets sit
     comfortably inset from the viewport edges — header overrides this
     to a tighter --wc-gutter-header so logo + nav extend further out. */
  padding-inline: var(--wc-gutter);
}

.wc-container--narrow {
  max-width: var(--wc-container-narrow);
}

.wc-container--wide {
  max-width: var(--wc-container-wide);
}

/* Visually hidden — for accessible labels.
   .screen-reader-text is the WP/Divi convention; .wc-sr-only is the
   project-prefixed variant. Both produce the same effect. */
.wc-sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honor reduced motion preference everywhere on the redesigned page. */
@media (prefers-reduced-motion: reduce) {
  .wc-page *,
  .wc-page *::before,
  .wc-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}