/*!
 * CMS Web Builder — base theme.
 *
 * Design tokens arrive as custom properties from the site's settings; the
 * values here are only fallbacks so the stylesheet is valid on its own.
 * Everything is mobile-first, respects prefers-reduced-motion and
 * prefers-color-scheme, and targets WCAG 2.2 AA contrast out of the box.
 */

/* ------------------------------------------------------------ token floor */
:root {
  --wf-color-brand: #3b5bdb;
  --wf-color-brand-contrast: #fff;
  --wf-color-accent: #f76707;
  --wf-color-text: #1a1c20;
  --wf-color-text-muted: #5c6370;
  --wf-color-background: #fff;
  --wf-color-surface: #f8f9fb;
  --wf-color-border: #e3e6ec;

  --wf-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wf-font-heading: var(--wf-font-body);
  --wf-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --wf-text-xs: 0.79rem;  --wf-text-sm: 0.889rem; --wf-text-md: 1rem;
  --wf-text-lg: 1.125rem; --wf-text-xl: 1.5rem;   --wf-text-2xl: 2rem;
  --wf-text-3xl: 2.75rem; --wf-text-4xl: 3.5rem;

  --wf-space-0: 0;    --wf-space-1: 4px;  --wf-space-2: 8px;  --wf-space-3: 12px;
  --wf-space-4: 16px; --wf-space-5: 20px; --wf-space-6: 24px; --wf-space-8: 32px;
  --wf-space-10: 40px; --wf-space-12: 48px; --wf-space-16: 64px;
  --wf-space-20: 80px; --wf-space-24: 96px; --wf-space-32: 128px;

  --wf-radius-sm: 5px; --wf-radius: 10px; --wf-radius-lg: 16px; --wf-radius-xl: 24px;
  --wf-line-height: 1.6;
  --wf-container-width: 1140px;

  --wf-shadow-sm: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);
  --wf-shadow-md: 0 4px 8px -2px rgb(16 24 40 / 8%), 0 2px 4px -2px rgb(16 24 40 / 6%);
  --wf-shadow-lg: 0 12px 24px -6px rgb(16 24 40 / 12%), 0 4px 8px -4px rgb(16 24 40 / 6%);

  --wf-focus: 3px solid color-mix(in oklab, var(--wf-color-brand) 70%, #000);
  --wf-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Dark mode: only redefine what changes, so a brand token set once still works. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wf-color-text: #e8eaed;
    --wf-color-text-muted: #9aa2af;
    --wf-color-background: #0f1115;
    --wf-color-surface: #171a21;
    --wf-color-border: #2a2f3a;
    --wf-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --wf-shadow-md: 0 4px 10px rgb(0 0 0 / 45%);
    --wf-shadow-lg: 0 16px 32px rgb(0 0 0 / 50%);
  }
}
:root[data-theme="dark"] {
  --wf-color-text: #e8eaed;
  --wf-color-text-muted: #9aa2af;
  --wf-color-background: #0f1115;
  --wf-color-surface: #171a21;
  --wf-color-border: #2a2f3a;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute must always win, whatever display an element carries. */
[hidden] { display: none !important; }


html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored headings shouldn't land under a sticky header. */
  scroll-padding-top: var(--wf-space-16);
}

body {
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: var(--wf-text-md);
  line-height: var(--wf-line-height);
  color: var(--wf-color-text);
  background: var(--wf-color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--wf-space-4);
  font-family: var(--wf-font-heading);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.018em;
}
h1 { font-size: var(--wf-text-3xl); }
h2 { font-size: var(--wf-text-2xl); }
h3 { font-size: var(--wf-text-xl); }
h4, h5, h6 { font-size: var(--wf-text-lg); }

p, ul, ol, dl, pre, blockquote, figure, table { margin: 0 0 var(--wf-space-4); }
:is(p, li):last-child { margin-bottom: 0; }

a { color: var(--wf-color-brand); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--wf-color-border); margin: var(--wf-space-8) 0; }

code, kbd, samp, pre { font-family: var(--wf-font-mono); font-size: 0.92em; }

/* A visible, high-contrast focus ring is not optional. */
:focus-visible { outline: var(--wf-focus); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

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

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

.wf-skip-link {
  position: absolute; left: var(--wf-space-2); top: -100px; z-index: 999;
  padding: var(--wf-space-3) var(--wf-space-5);
  background: var(--wf-color-brand); color: var(--wf-color-brand-contrast);
  border-radius: var(--wf-radius); text-decoration: none; font-weight: 600;
  transition: top 0.15s var(--wf-ease);
}
.wf-skip-link:focus { top: var(--wf-space-2); }

.wf-container { width: 100%; margin-inline: auto; padding-inline: var(--wf-space-5); }
.wf-container--full   { max-width: none; padding-inline: 0; }
.wf-container--wide   { max-width: 1440px; }
.wf-container--normal { max-width: var(--wf-container-width); }
.wf-container--narrow { max-width: 860px; }
.wf-container--text   { max-width: 680px; }

/* The default article chrome for posts that bring no layout of their own. */
.wf-article { padding-block: var(--wf-space-16); }
.wf-article__head { margin-bottom: var(--wf-space-10); }
.wf-article__head h1 { margin-bottom: var(--wf-space-2); }
.wf-post__date { color: var(--wf-color-text-muted); font-size: 0.9375rem; }

/* Inverted sections: light text on a dark band. Fixes every element whose
   default colour assumes a light background. */
.wf-section--invert { color: #ffffff; }
.wf-section--invert .wf-stat__value { color: currentColor; }
.wf-section--invert .wf-stat__label { color: rgba(255, 255, 255, 0.75); }
.wf-section--invert .wf-btn--outline { color: #ffffff; border-color: rgba(255, 255, 255, 0.65); background: transparent; }
.wf-section--invert .wf-btn--outline:hover { background: rgba(255, 255, 255, 0.14); border-color: #ffffff; }
.wf-section--invert .wf-field__help, .wf-section--invert .wf-meta { color: rgba(255, 255, 255, 0.75); }
.wf-section--invert a:not(.wf-btn) { color: #ffffff; }
.wf-section--invert .wf-nav__link { color: #ffffff; }
.wf-section--invert .wf-nav__link:hover { background: rgba(255, 255, 255, 0.12); }
.wf-section--invert .wf-nav__link[aria-current="page"] { color: #ffffff; }
/* Blocks that bring their own light panel go transparent on a dark band —
   the band is the panel. */
.wf-section--invert .wf-cta { background: transparent; border-color: rgba(255, 255, 255, 0.25); }
.wf-section--invert .wf-input { background: rgba(255, 255, 255, 0.95); }

/* Page tabs: a segmented control that switches the sections below it. */
.wf-sectiontabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  background: var(--wf-color-surface); border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius); padding: 3px;
}
.wf-sectiontabs__tab {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--wf-space-2); padding: var(--wf-space-2) var(--wf-space-4); min-height: 40px;
  border: 0; border-radius: calc(var(--wf-radius) - 2px); background: transparent;
  color: var(--wf-color-text-muted); font: inherit; font-size: 0.9375rem; cursor: pointer;
}
.wf-sectiontabs__tab[aria-pressed="true"] {
  background: var(--wf-color-background); color: var(--wf-color-text);
  box-shadow: var(--wf-shadow-sm); font-weight: 600;
}

/* Mailchimp signup: heading, line of text, then input and button inline. */
.wf-mailchimp { text-align: center; }
.wf-mailchimp__form { display: flex; gap: var(--wf-space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--wf-space-6); position: relative; }
.wf-mailchimp__form .wf-input { max-width: 340px; }
.wf-mailchimp__text { color: inherit; opacity: 0.85; }

.wf-align-left   { text-align: left; }
.wf-align-center { text-align: center; margin-inline: auto; }
.wf-align-right  { text-align: right; }

/* `text-wrap: balance` where supported; harmless where not. */
.wf-balance { text-wrap: balance; }

.wf-measure-narrow { max-width: 45ch; }
.wf-measure-normal { max-width: 65ch; }
.wf-measure-wide   { max-width: 80ch; }

.wf-round-none { border-radius: 0; }
.wf-round-sm   { border-radius: var(--wf-radius-sm); }
.wf-round-md   { border-radius: var(--wf-radius); }
.wf-round-lg   { border-radius: var(--wf-radius-lg); }
.wf-round-full { border-radius: 999px; overflow: hidden; }

.wf-empty { color: var(--wf-color-text-muted); font-style: italic; }

/* Shown only inside the builder, never on a published page. */
.wf-placeholder {
  display: grid; place-items: center; min-height: 120px; padding: var(--wf-space-6);
  border: 2px dashed var(--wf-color-border); border-radius: var(--wf-radius);
  color: var(--wf-color-text-muted); background: var(--wf-color-surface);
  text-align: center; font-size: var(--wf-text-sm);
}
.wf-placeholder--warn { border-color: #f59f00; color: #a1670a; }
.wf-missing {
  padding: var(--wf-space-3); border-radius: var(--wf-radius-sm);
  background: #fff4e6; color: #a1670a; font-size: var(--wf-text-sm);
}

/* --------------------------------------------------------------- buttons */
.wf-btn {
  --wf-btn-bg: var(--wf-color-brand);
  --wf-btn-fg: var(--wf-color-brand-contrast);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--wf-space-2);
  padding: 0.7em 1.4em;
  border: 1px solid transparent; border-radius: var(--wf-radius);
  background: var(--wf-btn-bg); color: var(--wf-btn-fg);
  font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none;
  /* Never smaller than the 24x24 minimum target size in WCAG 2.2. */
  min-height: 44px;
  transition: background-color 0.15s var(--wf-ease), transform 0.15s var(--wf-ease),
              box-shadow 0.15s var(--wf-ease);
}
.wf-btn:hover { background: color-mix(in oklab, var(--wf-btn-bg) 88%, #000); text-decoration: none; }
.wf-btn:active { transform: translateY(1px); }
.wf-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.wf-btn--sm { padding: 0.45em 1em; font-size: var(--wf-text-sm); min-height: 36px; }
.wf-btn--lg { padding: 0.85em 1.8em; font-size: var(--wf-text-lg); min-height: 52px; }
.wf-btn--block { width: 100%; }

.wf-btn--secondary { --wf-btn-bg: var(--wf-color-accent); }
.wf-btn--outline {
  --wf-btn-bg: transparent; --wf-btn-fg: var(--wf-color-text);
  border-color: var(--wf-color-border);
}
.wf-btn--outline:hover { background: var(--wf-color-surface); border-color: var(--wf-color-text-muted); }
.wf-btn--ghost { --wf-btn-bg: transparent; --wf-btn-fg: var(--wf-color-brand); }
.wf-btn--ghost:hover { background: color-mix(in oklab, var(--wf-color-brand) 10%, transparent); }
.wf-btn--link {
  --wf-btn-bg: transparent; --wf-btn-fg: var(--wf-color-brand);
  padding: 0; min-height: 0; text-decoration: underline;
}
.wf-btn--link:hover { background: transparent; }

.wf-btn .wf-icon { flex: none; }
.wf-cta-row { display: flex; flex-wrap: wrap; gap: var(--wf-space-3); }

/* ----------------------------------------------------------------- forms */
.wf-field { margin-bottom: var(--wf-space-5); }
.wf-field__label { display: block; margin-bottom: var(--wf-space-2); font-weight: 600; font-size: var(--wf-text-sm); }
.wf-field__req { color: #e03131; margin-left: 2px; }

.wf-field__input {
  display: block; width: 100%;
  padding: 0.65em 0.85em; min-height: 44px;
  border: 1px solid var(--wf-color-border); border-radius: var(--wf-radius-sm);
  background: var(--wf-color-background); color: var(--wf-color-text);
  transition: border-color 0.15s var(--wf-ease), box-shadow 0.15s var(--wf-ease);
}
.wf-field__input:focus {
  border-color: var(--wf-color-brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wf-color-brand) 25%, transparent);
  outline: none;
}
.wf-field__input[aria-invalid="true"] { border-color: #e03131; }
textarea.wf-field__input { min-height: 120px; resize: vertical; }

.wf-field__help { margin: var(--wf-space-2) 0 0; font-size: var(--wf-text-sm); color: var(--wf-color-text-muted); }
.wf-field__error { margin: var(--wf-space-2) 0 0; font-size: var(--wf-text-sm); color: #e03131; font-weight: 500; }
.wf-field__inline { display: flex; align-items: flex-start; gap: var(--wf-space-2); font-weight: 400; cursor: pointer; }
.wf-field__inline input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--wf-color-brand); }

.wf-field--radio { border: 0; padding: 0; margin-bottom: var(--wf-space-5); }
.wf-field--radio legend { padding: 0; margin-bottom: var(--wf-space-2); }

/* The honeypot must be unreachable for humans but not display:none, which
   some bots detect. Off-screen and aria-hidden is the usual compromise. */
.wf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wf-form__status:not(:empty) {
  padding: var(--wf-space-3) var(--wf-space-4); margin-bottom: var(--wf-space-4);
  border-radius: var(--wf-radius-sm); font-size: var(--wf-text-sm);
  background: var(--wf-color-surface); border: 1px solid var(--wf-color-border);
}
.wf-form__status[data-state="error"] { background: #fff5f5; border-color: #ffc9c9; color: #c92a2a; }
.wf-form__status[data-state="ok"] { background: #ebfbee; border-color: #b2f2bb; color: #2b8a3e; }

.wf-form--inline { display: flex; flex-wrap: wrap; gap: var(--wf-space-3); align-items: flex-end; }
.wf-form--inline .wf-field { flex: 1 1 200px; margin-bottom: 0; }

/* ---------------------------------------------------------------- search */
.wf-search { display: flex; gap: var(--wf-space-2); }
.wf-search__input {
  flex: 1; padding: 0.6em 0.9em; min-height: 44px;
  border: 1px solid var(--wf-color-border); border-radius: var(--wf-radius-sm);
  background: var(--wf-color-background); color: var(--wf-color-text);
}
.wf-search__btn {
  display: inline-flex; align-items: center; gap: var(--wf-space-2);
  padding: 0 var(--wf-space-4); min-height: 44px;
  border: 0; border-radius: var(--wf-radius-sm);
  background: var(--wf-color-brand); color: var(--wf-color-brand-contrast); font-weight: 600;
}

/* ------------------------------------------------------------ system page */
.wf-system { padding-block: var(--wf-space-24); text-align: center; }
.wf-system h1 { font-size: var(--wf-text-3xl); }
.wf-system p { color: var(--wf-color-text-muted); font-size: var(--wf-text-lg); }

/* ------------------------------------------------------------- animation */
[data-animate] { opacity: 0; transform: translateY(16px); }
[data-animate].wf-in { opacity: 1; transform: none; transition: opacity 0.6s var(--wf-ease), transform 0.6s var(--wf-ease); }
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .wf-skip-link, .wf-nav__toggle, .wf-share, video, iframe { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .wf-section { padding-block: 12pt !important; }
}