/*
 * Public site — design tokens, base typography and global utilities.
 * Imported by the (site) layout and the root not-found page.
 *
 * Everything is scoped under `.site-root` (rendered by <SiteChrome>) so that the admin, which
 * shares the root layout, is never affected. Values were measured on the former WordPress
 * (Ohio theme + Elementor) site at 1440px and 390px.
 *
 * Breakpoints (same as the original theme):
 *   mobile  ≤ 768px   — slide-in menu, centered footer bottom bar; ≤767px: search icon in the
 *                       header instead of the fixed search button, one-column footer (768px: two)
 *   tablet  769–1180px — no theme switcher, static footer
 *   desktop ≥ 1181px  — vertical theme switcher, footer revealed under the content, fixed back link (≥1200px)
 *   laptop  1181–1512px: container = 86vw; ≥1513px: container = 1344px
 * Designed (ex-Elementor) pages use Elementor's own breakpoints: mobile ≤767px, tablet ≤1024px.
 */

.site-root {
  /* ---------- Colors ---------- */
  --color-brand: #10b981;
  --color-brand-alt: #16b17a; /* resting color of the big hero CTA (Elementor override) */
  --color-black: #111013;
  --color-white: #fff;
  --color-neutral: #888789;

  --color-bg: #fff;
  --color-text: #161518;
  --color-heading: #111013;
  --color-text-muted: #575658;
  --color-fill: rgb(136 135 137 / 0.08); /* cards, round icon buttons, hover fills */
  --color-fill-strong: rgb(136 135 137 / 0.12); /* pills, switcher track */
  --color-fill-hover: rgb(136 135 137 / 0.24);
  --color-field: rgb(136 135 137 / 0.1); /* search / form fields */
  --color-border: rgb(136 135 137 / 0.16);
  --color-line: #888789; /* accordion separators */
  --color-button: #161518; /* dark button background */
  --color-button-text: #fff;
  --color-surface-dark: #1e2327; /* dark full-bleed bands of the designed pages */
  --color-overlay: rgb(17 16 19 / 0.99); /* menu + search overlays */
  --color-mobile-menu: #191f23fa;
  --color-footer-bg: #eaeaea;
  --color-selection: rgb(16 185 129 / 0.2);
  /* Focus ring. The brand green is only 2.5:1 on white (WCAG 1.4.11 asks for 3:1): darker green
     (5.5:1 on white, 4.6:1 on the footer grey) on light backgrounds, the brand green on dark ones
     (dark scheme, [data-surface="dark"], white chrome, overlays). */
  --color-focus: #047857;
  /* Text color of the fixed chrome (header, side bar, search button, back link); see [data-tone].
     Resolved here, on .site-root, so it is the page text color even for an adaptive element
     nested in a [data-surface] section (the back link sits in the page headline). */
  --chrome-fg: var(--color-text);
  --chrome-focus: var(--color-focus); /* same idea: the page focus color */

  /* ---------- Typography ---------- */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* Theme titles: the original asked for "DM Sans" but never loaded it, so browsers rendered
     their default sans-serif (Helvetica on macOS, Arial on Windows) in semi-bold. */
  --font-heading: Helvetica, Arial, sans-serif;
  /* Brand face (logo, footer titles, headings of the designed pages, menu overlay). */
  --font-display: var(--font-aeonik), "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: menlo, monaco, consolas, "Lucida Console", monospace;

  --text-xs: 0.9rem; /* 14.4px — card meta, pills */
  --text-sm: 0.9225rem; /* 14.76px — breadcrumbs, footer bottom bar */
  --text-ui: 0.97375rem; /* 15.58px — buttons, footer links */
  --text-base: 1.025rem; /* 16.4px — body */
  --text-lead: 1.07625rem; /* 17.22px — page header subtitle */
  --leading: 1.6;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Ohio scale: h1 = 72px, each level × 0.68 (h5 × 1.24); minimum = max × 0.6 / .64 / .72 / .88 / .92.
     Keep the decimals: sub-pixel differences change line wraps. */
  --h1-size: clamp(2.7rem, 4.5vw + 0.25rem, 4.5rem); /* 43.2 → 72px */
  --h2-size: clamp(1.9584rem, 3.15vw + 0.25rem, 3.06rem); /* 31.3344 → 48.96px */
  --h3-size: clamp(1.49818rem, 2.25vw + 0.25rem, 2.0808rem); /* 23.9708 → 33.2928px */
  --h4-size: clamp(1.24515rem, 1.5vw + 0.25rem, 1.41494rem); /* 19.9224 → 22.6391px */
  --h5-size: clamp(1.09763rem, 1.25vw + 0.25rem, 1.19308rem); /* 17.5621 → 19.0893px */
  --h6-size: 1.025rem;
  --h1-leading: 1;
  --h2-leading: 1.05;
  --h3-leading: 1.15;
  --h4-leading: 1.2;
  --h5-leading: 1.3;
  --h6-leading: 1.4;

  /* ---------- Layout ---------- */
  --spacer: 1.5vw; /* outer gutter of the fixed chrome */
  --gutter: 1rem; /* grid gutter */
  --header-h: 12vh;
  --circle: 3.5rem; /* round icon buttons */
  --container-width: 1344px;
  --container-gutter: 1rem;
  --container-boxed: 1300px; /* Elementor "boxed" sections (20px column padding) */
  --section-space: 8vh;

  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 30px;
  --button-h: 2.75rem;
  --button-h-sm: 2.25rem;
  --button-h-lg: 3.25rem;

  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --duration: 0.35s;
  --duration-fast: 0.2s;

  /* ---------- Base ---------- */
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-text);
  /* No background here: the page background is on <html> (below); the content wrapper paints
     its own background over the reveal footer. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* contains the margin of the content wrapper (reveal footer) */
  display: flow-root;
  min-height: 100vh;
}

@media (min-width: 1181px) and (max-width: 1512px) {
  .site-root {
    --container-width: 86vw;
  }
}

@media (max-width: 1180px) {
  .site-root {
    --spacer: 1rem;
    --section-space: 5vh;
  }
}

@media (max-width: 768px) {
  .site-root {
    --h1-leading: 1.05;
    --h2-leading: 1.15;
    --h3-leading: 1.25;
    --h4-leading: 1.3;
  }
}

/* ---------- Dark scheme (left "Dark / Light" switcher) ---------- */
html[data-theme="dark"] .site-root {
  --color-bg: #111013;
  --color-text: rgb(255 255 255 / 0.75);
  --color-heading: #fff;
  --color-text-muted: rgb(255 255 255 / 0.55);
  --color-button: #4d4c4e;
  --color-footer-bg: #18171a;
  --color-line: rgb(255 255 255 / 0.35);
  --color-focus: var(--color-brand);
  color-scheme: dark;
}

/* Sections with a dark background: mark them with data-surface="dark".
   Text tokens flip to white inside, and the fixed chrome turns white while over them. */
.site-root [data-surface="dark"] {
  --color-text: #fff;
  --color-heading: #fff;
  --color-text-muted: rgb(255 255 255 / 0.65);
  --color-line: rgb(255 255 255 / 0.5);
  --color-focus: var(--color-brand);
  color: var(--color-text);
}

/* Sections that stay light whatever the color scheme (light photo with black text): mark them
   with data-surface="light". The section styles its own text; the fixed chrome turns dark while
   over them, in the dark scheme too. */
.site-root [data-surface="light"] {
  --color-focus: #047857;
}

/* Adaptive tone of the fixed chrome. Elements with [data-adaptive] (header, side bar, search
   button, back link) get from <ChromeEffects>, according to the section under their center:
   data-tone="light" (white) over a [data-surface="dark"] section, data-tone="dark" (#161518,
   whatever the scheme) over a [data-surface="light"] one, and data-tone="auto" elsewhere (page
   text color, inherited from .site-root). */
.site-root [data-adaptive] {
  --color-focus: var(--chrome-focus);
  color: var(--chrome-fg);
  transition: color var(--duration-fast) var(--ease);
}

.site-root [data-adaptive][data-tone="light"] {
  --chrome-fg: #fff;
  --color-focus: var(--color-brand);
}

.site-root [data-adaptive][data-tone="dark"] {
  --chrome-fg: #161518;
  --color-focus: #047857;
}

/* First paint, before <ChromeEffects> runs: pages starting with a dark hero render <HeaderTone tone="light" />. */
html:has([data-header-tone="light"]) .site-root [data-adaptive]:not([data-tone]) {
  --chrome-fg: #fff;
  --color-focus: var(--color-brand);
}

/* Page background (canvas). The reveal footer (fixed, z-index 0) sits under the content wrapper
   (position: relative, z-index 1, own background) like the theme's .site-content, so it is
   hidden by the content and still receives the pointer once uncovered. */
html:has(.site-root) {
  background-color: #fff;
}

html:has(.site-root) body {
  background-color: transparent;
}

html[data-theme="dark"]:has(.site-root) {
  background-color: #111013;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.site-root) {
    scroll-behavior: smooth;
  }
}

/* Scroll lock while an overlay (menu / search) is open */
html[data-scroll-lock] {
  overflow: hidden;
}

.site-root ::selection {
  background-color: var(--color-selection);
}

/* ---------- Typography ---------- */
.site-root :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.site-root :where(h1, .h1) {
  font-size: var(--h1-size);
  line-height: var(--h1-leading);
  letter-spacing: -0.045em;
}

.site-root :where(h2, .h2) {
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  letter-spacing: -0.04em;
}

.site-root :where(h3, .h3) {
  font-size: var(--h3-size);
  line-height: var(--h3-leading);
  letter-spacing: -0.035em;
}

.site-root :where(h4, .h4) {
  font-size: var(--h4-size);
  line-height: var(--h4-leading);
  letter-spacing: -0.03em;
}

.site-root :where(h5, .h5) {
  font-size: var(--h5-size);
  line-height: var(--h5-leading);
  letter-spacing: -0.025em;
}

.site-root :where(h6, .h6) {
  font-size: var(--h6-size);
  line-height: var(--h6-leading);
  letter-spacing: -0.02em;
}

.site-root :where(p) {
  margin: 1em 0;
}

.site-root :where(strong, b) {
  font-weight: 700;
}

.site-root :where(a) {
  color: inherit;
  text-decoration: none;
}

.site-root :where(button) {
  font: inherit;
  color: inherit;
}

.site-root :where(img, video) {
  max-width: 100%;
  height: auto;
}

.site-root :where(hr) {
  height: 1px;
  margin: 0.5rem auto;
  border: 0;
  background-color: rgb(136 135 137 / 0.6);
}

/* Brand / heading font helpers */
.font-display {
  font-family: var(--font-display);
}

.font-heading {
  font-family: var(--font-heading);
}

.text-muted {
  color: var(--color-text-muted);
}

/* ---------- Links ---------- */
/* Animated underline of the original theme ("links-underline" + @keyframes underline): a .18em
   line at 0 110% (it shows just under the glyphs of an inline link), swept out to the right and
   back in from the left over .4s. The color eases in on hover and snaps back on leave (the
   theme declares its transition on :hover only). */
@keyframes site-underline {
  0% {
    background-size: 100% 0.18em;
    background-position: 0 110%;
  }
  50% {
    background-size: 0 0.18em;
    background-position: 0 110%;
  }
  50.01% {
    background-size: 0 0.18em;
    background-position: right 0 top 110%;
  }
  100% {
    background-size: 100% 0.18em;
    background-position: right 0 top 110%;
  }
}

.link,
:where(.site-root a:not([class])) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 110%;
  background-size: 0 0.18em;
}

.link:hover,
:where(.site-root a:not([class])):hover {
  color: var(--color-brand);
  background-size: 100% 0.18em;
  transition: color var(--duration) var(--ease);
  animation: site-underline 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
}

/* ---------- Focus ---------- */
.site-root :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.site-root :focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Layout utilities ---------- */
/* Theme container: page titles, breadcrumbs, archives, footer (1206px content at 1440px). */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* Elementor "boxed" container of the designed pages (content starts at 90px at 1440px). */
.container-boxed {
  width: 100%;
  max-width: var(--container-boxed);
  margin-inline: auto;
  padding-inline: 20px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- WordPress post content ---------- */
.prose {
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-text);
  overflow-wrap: break-word;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose p {
  margin: 1em 0;
}

.prose :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.prose :is(h2, h3, h4, h5, h6) strong {
  font-weight: 800;
}

.prose h2 {
  margin: 3.5rem 0 0;
}

.prose h3 {
  margin: 3rem 0 0;
}

.prose :is(h4, h5, h6) {
  margin: 2.5rem 0 0;
}

.prose :is(h2, h3) + * {
  margin-top: 1rem;
}

.prose :is(h4, h5, h6) + * {
  margin-top: 0.75rem;
}

.prose :is(ul, ol) {
  margin: 1em 0 1.35em;
  padding-left: 2rem;
}

.prose li {
  margin: 0.25rem 0;
}

.prose li > :is(ul, ol) {
  margin-bottom: 0;
}

.prose a {
  color: inherit;
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition:
    color var(--duration) var(--ease),
    text-decoration-color var(--duration) var(--ease);
}

.prose a:hover {
  color: var(--color-brand);
  text-decoration-color: currentColor;
}

/* post links use a real underline instead of the animated one */
.prose a,
.prose a:hover {
  background-image: none;
  animation: none;
}

.prose :is(figure, .wp-block-image) {
  margin: 1.55em 0;
}

.prose figure img,
.prose .wp-block-image img,
.prose > img {
  display: block;
  width: 100%;
  height: auto;
}

.prose :is(.aligncenter, .has-text-align-center) {
  text-align: center;
}

.prose figure.aligncenter img,
.prose img.aligncenter {
  margin-inline: auto;
  width: auto;
}

.prose figcaption,
.prose .wp-element-caption {
  margin-top: 0.6em;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-text-muted);
  text-align: center;
}

.prose blockquote {
  position: relative;
  margin: 1.5em 0;
  padding: 0 0 0 1.5rem;
  border-left: 0.25rem solid var(--color-neutral);
}

.prose blockquote p {
  margin: 0.5em 0;
  font-style: normal;
}

.prose blockquote cite {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95em;
  font-style: normal;
  font-weight: var(--weight-semibold);
}

.prose table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95em;
}

.prose .wp-block-table {
  margin: 1.5em 0;
  overflow-x: auto;
}

.prose .wp-block-table table {
  margin: 0;
}

.prose :is(th, td) {
  padding: 0.7rem 0.7rem 0.7rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: inherit;
  vertical-align: top;
}

.prose th {
  font-size: 0.9rem;
  font-weight: var(--weight-semibold);
}

.prose iframe {
  display: block;
  max-width: 100%;
  border: 0;
}

/* YouTube / Vimeo embeds: responsive 16:9 */
.prose :is(.wp-block-embed, .wp-block-embed__wrapper) iframe,
.prose iframe[src*="youtube"],
.prose iframe[src*="vimeo"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.prose .wp-block-embed {
  margin: 1.55em 0;
}

.prose hr {
  margin: 2em 0;
}

.prose code {
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--color-text-muted);
  background-color: var(--color-fill);
  border-radius: var(--radius-sm);
}

.prose pre {
  max-width: 100%;
  margin: 0 0 1.6em;
  padding: 1rem;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-fill);
  border-radius: var(--radius);
}

.prose pre code {
  padding: 0;
  background: none;
}