/*
 * Design tokens ported from the WordPress `grabber` theme.
 *
 * Source: old/wp-content/themes/grabber/theme.json (settings.color.palette,
 * settings.typography, settings.spacing.spacingSizes, settings.layout).
 * This file is the ONLY part of the old theme that survives migration —
 * everything else (23 block templates, 18 parts, swiper-bundle.js) is
 * WordPress/Gutenberg plumbing with no equivalent here.
 *
 * Values are copied verbatim so returning visitors see a familiar site.
 * Anything marked ADDED did not exist in theme.json and is a deliberate
 * addition (dark mode, focus rings, semantic aliases).
 */

:root {
  /* ---- Palette (verbatim from theme.json) ---- */
  --color-base: #f0f0f0;
  --color-contrast: #1e1e1e;
  --color-primary: #00a0d2;
  --color-secondary: #0073aa;
  --color-black: #000;

  /* ADDED — semantic aliases so templates never hardcode a hex. */
  --color-bg: var(--color-base);
  --color-surface: #fff;
  --color-text: var(--color-contrast);
  --color-text-muted: #555;
  --color-border: #d8d8d8;
  --color-link: var(--color-secondary);
  --color-link-hover: var(--color-primary);
  --color-danger: #b32d2e; /* matches WP admin's error red */
  --color-success: #007017;

  /* ---- Typography (verbatim) ---- */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-display: Lora, "Times New Roman", "New York", Times, "Noto Serif",
    serif;
  --font-mono: Consolas, Menlo, Monaco, "SF Mono", "DejaVu Sans Mono",
    "Roboto Mono", "Courier New", Courier, monospace;

  --size-xs: 1rem; /* theme.json: extra-small */
  --size-s: 1.125rem; /* small */
  --size-m: 1.25rem; /* medium */
  --size-l: 2rem; /* large */
  --size-xl: 2.75rem; /* x-large */
  --size-xxl: 3.75rem; /* xx-large */

  /* ---- Spacing scale (verbatim, incl. the fluid clamps) ---- */
  --space-20: 0.44rem;
  --space-30: 0.67rem;
  --space-40: 1rem;
  --space-50: 1.5rem;
  --space-60: 2.25rem;
  --space-70: clamp(2.25rem, 10vw, 3.38rem);
  --space-80: clamp(3.38rem, 10vw, 5.06rem);

  /* ---- Layout (verbatim) ---- */
  --content-width: 1179px;

  /* ADDED */
  --radius: 4px;
  --shadow-1: 0 1px 3px rgb(0 0 0 / 12%);
  --shadow-2: 0 4px 16px rgb(0 0 0 / 14%);
  --focus-ring: 2px solid var(--color-primary);
}

/*
 * Lora is the single webfont in the design. Self-hosted rather than pulled
 * from Google Fonts: the Artifact/Worker CSP blocks external hosts, it costs
 * an extra connection, and it leaks visitor IPs to a third party.
 * `swap` so text paints immediately in the fallback serif.
 */
@font-face {
  font-family: Lora;
  src: url("/assets/fonts/lora-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------- */
/* Base                                                                   */
/* --------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-xs);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0 0 var(--space-40);
  text-wrap: balance;
}

h1 {
  font-size: var(--size-xl);
}
h2 {
  font-size: var(--size-l);
}
h3 {
  font-size: var(--size-m);
}

p,
ul,
ol {
  margin: 0 0 var(--space-40);
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--color-link-hover);
}

/* Visible focus for keyboard users only — never remove the outline outright. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Images must never overflow their container or cause layout shift. */
img,
video {
  max-width: 100%;
  height: auto;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Wide content (tables, code) scrolls inside itself; the page body never
   scrolls horizontally. */
pre,
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: var(--space-30) var(--space-40);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

/* --------------------------------------------------------------------- */
/* Layout primitives                                                      */
/* --------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-40);
}

.stack > * + * {
  margin-block-start: var(--space-40);
}

.grid {
  display: grid;
  gap: var(--space-50);
}

/* --------------------------------------------------------------------- */
/* Shortcodes Ultimate replacements                                       */
/*                                                                        */
/* The [su_row] / [su_column] shortcodes in legacy post content are        */
/* converted to these classes at ETL time (plan §5 step 2). This is the    */
/* minimal CSS needed to keep a decade of posts laid out correctly —       */
/* the plugin itself is not carried across.                               */
/* --------------------------------------------------------------------- */

.su-row {
  display: grid;
  gap: var(--space-50);
  grid-template-columns: 1fr;
  margin-block: var(--space-50);
}

@media (min-width: 48rem) {
  .su-row {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .su-col-1-2 {
    grid-column: span 3;
  }
  .su-col-1-3 {
    grid-column: span 2;
  }
  .su-col-2-3 {
    grid-column: span 4;
  }
  .su-col-1-4 {
    grid-column: span 1;
  }
  .su-col-3-4 {
    grid-column: span 3;
  }
  /* Explicit 6-track base so the spans above divide evenly into halves,
     thirds and quarters without a separate rule per combination. */
  .su-row:has(> [class*="su-col-"]) {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
  }
}

/* --------------------------------------------------------------------- */
/* Dark mode (ADDED — the WP theme was light-only)                        */
/* --------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #16191d;
    --color-surface: #1e2227;
    --color-text: #e8e8e8;
    --color-text-muted: #a5a5a5;
    --color-border: #333a42;
    /* Lighten the link blue: #0073aa on a dark bg fails WCAG AA. */
    --color-link: #4db8e0;
    --color-link-hover: #7fd0ee;
  }
}

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