/* Shared site foundation. Keep these tokens aligned with the approved Learn foundation. */
/* Layout matched stand-ins for Urbanist and Source Sans 3. Until the web fonts arrive, the system font Arial is scaled and spaced
   to the same average character width, ascent and descent, so text keeps its size and line breaks when the real fonts swap in.
   Values come from measuring the real fonts against Arial in Chrome on the site's own copy (English and French). */
@font-face { font-family: "Urbanist Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 90.84%; ascent-override: 104.57%; descent-override: 27.52%; line-gap-override: 0%; }
@font-face { font-family: "Urbanist Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 93.66%; ascent-override: 101.44%; descent-override: 26.69%; line-gap-override: 0%; }
@font-face { font-family: "Urbanist Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 800; size-adjust: 94.32%; ascent-override: 100.72%; descent-override: 26.51%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 92.99%; ascent-override: 110.12%; descent-override: 43.02%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 86.38%; ascent-override: 118.55%; descent-override: 46.31%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 84.71%; ascent-override: 120.88%; descent-override: 47.22%; line-gap-override: 0%; }

/* The home hero heading is sized in ch, the width of the digit 0 in the active font. Digits in Urbanist are wider than in the
   stand-in font, so the heading wrapped to four lines until Urbanist arrived. The same 16 character width, written in em
   (0 in Urbanist Bold is 0.6045em), keeps the final layout identical and the same in both phases. The theme's phone rule is untouched. */
@media (min-width: 641px) {
  html body .cpai-home-hero h1 { max-width: 9.672em; }
}

:root {
  /* Type */
  --font-head: 'Urbanist', 'Urbanist Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', 'Source Sans 3 Fallback', 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-note: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --font-heading: var(--font-head);
  --font-accent: var(--font-note);
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Canonical palette */
  --text: #1a1c1e;
  --background: #f4f5f6;
  --primary: #004e7c;
  --secondary: #636a73;
  --accent: #0c7a7b;
  --ink: var(--text);
  --ink-strong: #15171a;
  --muted: var(--secondary);
  --soft: #7b8790;
  --line: #e5e7eb;
  --line-strong: #c9d5dc;
  --border: var(--line);
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f6;
  --success: #0a6b3b;
  --warning: #b45309;
  --danger: #b42318;

  /* Learn aliases */
  --l-ink: var(--ink);
  --l-ink-strong: var(--ink-strong);
  --l-muted: var(--muted);
  --l-soft: var(--soft);
  --l-canvas: var(--background);
  --l-surface: var(--surface);
  --l-card: var(--surface-2);
  --l-tint: var(--surface-3);
  --l-line: var(--line);
  --l-line-strong: var(--line-strong);
  --l-blue: var(--primary);
  --l-blue-dark: #003759;
  --l-blue-tint: #e8f0f6;
  --l-blue-border: var(--line-strong);
  --l-teal: var(--accent);
  --l-teal-dark: #096a6b;
  --l-teal-tint: #e7f3f3;
  --l-teal-border: #b9dcdc;
  --l-amber: var(--warning);
  --l-amber-ink: #7a3a06;
  --l-amber-tint: #fdf3e7;
  --l-amber-border: #f2d3ad;
  --l-red: var(--danger);
  --l-red-ink: #8a1c13;
  --l-red-tint: #fdeeec;
  --l-red-border: #f3c4bf;
  --l-green: var(--success);
  --l-green-tint: #e8f3ec;
  --l-stage: #0d1a22;
  --l-stage-2: #16303d;

  /* Hairlines and translucent surfaces */
  --l-hair: rgba(21, 23, 26, .08);
  --l-hair-strong: rgba(21, 23, 26, .16);
  --l-glass: rgba(255, 255, 255, .74);
  --l-focus: var(--accent);

  /* Shared shape scale */
  --l-r-xs: 6px;
  --l-r-sm: 10px;
  --l-r: 16px;
  --l-r-lg: 24px;
  --l-pill: 999px;
  --radius: var(--l-r-sm);
  --cpai-box-radius: var(--l-r);
  --cpai-box-radius-inner: var(--l-r-sm);
  --cpai-box-radius-small: var(--l-r-xs);

  /* Elevation scale and theme aliases */
  --l-e1: 0 0 0 1px rgba(21, 23, 26, .07), 0 1px 2px rgba(21, 23, 26, .04);
  --l-e2: 0 0 0 1px rgba(21, 23, 26, .09), 0 2px 6px rgba(21, 23, 26, .05), 0 18px 36px -18px rgba(21, 23, 26, .24);
  --l-e3: 0 0 0 1px rgba(21, 23, 26, .06), 0 4px 10px rgba(10, 38, 58, .06), 0 32px 64px -24px rgba(10, 38, 58, .32);
  --l-bar-shadow: 0 -12px 32px -8px rgba(21, 23, 26, .18);
  --shadow-1: var(--l-e1);
  --shadow-2: var(--l-e2);
  --cpai-box-shadow: var(--l-e1);
  --cpai-box-shadow-hover: var(--l-e2);

  /* Motion */
  --l-spring: cubic-bezier(.16, 1, .3, 1);
  --l-ease: cubic-bezier(.4, 0, .2, 1);
  --l-d-press: .12s;
  --l-d-color: .2s;
  --l-d-move: .42s;
  --l-rise: -2px;
  --control-ring: var(--ink-strong);
  --control-label: var(--ink-strong);
  --control-fill: var(--ink-strong);
  --control-on-fill: #fff;
  --control-base: #fff;
  --control-shadow: 0 1px 2px rgba(21,23,26,.06), 0 10px 22px -14px rgba(21,23,26,.34);
  --control-shadow-hover: 0 2px 4px rgba(21,23,26,.08), 0 20px 32px -18px rgba(21,23,26,.5);

  /* Learn compatibility names */
  --l-font: var(--font-body);
  --l-font-head: var(--font-head);
  --l-font-note: var(--font-note);
  --l-mono: var(--font-mono);

  /* Layout tokens retain the approved page rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 72px;
  --maxw: 1120px;
  --gutter: var(--space-6);
  --section-y: var(--space-12);
  --l-max: 1320px;
  --l-gutter: var(--space-6);
  --l-sticky-top: calc(var(--header-h, 72px) + 28px);
  --l-tabs-top: calc(var(--header-h, 72px) + 14px);

  /* Existing theme aliases */
  --bg: var(--background);
}

@media (max-width: 640px) {
  :root { --l-gutter: var(--space-4); }
}

/* The existing site stacks share the foundation's approved spacing scale. */
html body .stack-sm > * + * { margin-top: var(--space-3); }
html body .stack-md > * + * { margin-top: var(--space-5); }
html body .stack-lg > * + * { margin-top: var(--space-7); }
html body .stack-xl > * + * { margin-top: var(--space-9); }
/* Empty native notice containers must not create a row in a component grid. */
html body .woocommerce-notices-wrapper:empty { display: none; }
/* Button groups on the existing pages share one gap, including when the buttons stack on small screens. */
html body main div.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

html { scroll-behavior: smooth; }

html body {
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
}

/* The blog has a local Inter declaration; keep its existing layout and colors while sharing site type. */
html body :is(.cpai-blog, .cpai-learn) {
  font-family: var(--font-body) !important;
}

html body .cpai-blog {
  --blog-ink: var(--l-ink);
  --blog-muted: var(--l-muted);
  --blog-soft-muted: var(--l-soft);
  --blog-canvas: var(--l-canvas);
  --blog-surface: var(--l-surface);
  --blog-card: var(--l-card);
  --blog-line: var(--l-line);
  --blog-strong-line: var(--l-line-strong);
  --blog-green: var(--l-teal);
  --blog-green-dark: var(--l-teal-dark);
  --blog-orange: var(--l-blue);
  --blog-orange-dark: var(--l-blue-dark);
  --blog-blue: var(--l-blue);
  --blog-blue-light: var(--l-teal);
  --blog-focus: var(--l-focus);
}

html body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-head) !important;
}

html body :is(
  button,
  .btn,
  .button,
  .wp-element-button,
  .wp-block-button__link,
  .cpai-learn-btn,
  .cpai-blog-cta-button,
  .gform_button,
  .gform_previous_button,
  .gform_next_button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .wc-block-components-button,
  .nav-menu a,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  a[class*="-button"],
  button[class*="-button"],
  a[class*="-btn"],
  button[class*="-btn"]
) {
  font-family: var(--font-head) !important;
}

html body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  select,
  textarea
) {
  font-family: var(--font-body) !important;
  border-radius: var(--l-r-sm);
}

/* Keep WooCommerce block and classic fields on the shared type and shape tokens. */
html body :is(
  .wc-block-components-text-input :is(input[type], label),
  .wc-blocks-components-select__label,
  .wc-blocks-components-select__select,
  .woocommerce input.input-text,
  .woocommerce textarea,
  .woocommerce select
) {
  font-family: var(--font-body) !important;
}

html body :is(
  .wc-block-components-text-input input[type],
  .wc-blocks-components-select__select,
  .woocommerce input.input-text,
  .woocommerce textarea,
  .woocommerce select
) {
  border-radius: var(--l-r-sm) !important;
}

/* Gravity Forms keeps its own field sizing, with shared type and corner shapes. */
html body .gform_wrapper.gravity-theme .gfield :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
) {
  font-family: var(--font-body) !important;
  border-radius: var(--l-r-sm);
}

html body :is(
  .btn,
  .button,
  .wp-element-button,
  .wp-block-button__link,
  .cpai-learn-btn,
  .cpai-blog-cta-button,
  .gform_button,
  .gform_previous_button,
  .gform_next_button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .wc-block-components-button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  a[class*="-button"],
  button[class*="-button"],
  a[class*="-btn"],
  button[class*="-btn"]
) {
  border-radius: var(--l-pill);
  transition-duration: var(--l-d-color), var(--l-d-color), var(--l-d-color), var(--l-d-press);
  transition-timing-function: var(--l-ease), var(--l-ease), var(--l-ease), var(--l-spring);
}

.cpai-handwritten,
.cpai-learn-note {
  font-family: var(--font-note) !important;
}

/* One control family across the theme, forms, WooCommerce and Learn. Component
   variants provide their palette while the shared motion and geometry stay fixed. */
html body :is(.btn, .button, .wp-element-button, .wp-block-button__link,
  .cpai-blog-cta-button, .gform_button, .gform_previous_button, .gform_next_button,
  .wc-block-components-button, .woocommerce input.button) {
  --control-ring: var(--ink-strong);
  --control-label: var(--ink-strong);
  --control-fill: var(--ink-strong);
  --control-on-fill: #fff;
  --control-base: #fff;
  border:0;
  border-radius:var(--l-pill);
  color:var(--control-label);
  background-color:var(--control-base);
  background-image:linear-gradient(var(--control-fill),var(--control-fill));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 0;
  box-shadow:inset 0 0 0 1px var(--control-ring),var(--control-shadow);
  transition:background-size var(--l-d-move) var(--l-spring),transform var(--l-d-move) var(--l-spring),box-shadow var(--l-d-move) var(--l-spring),color var(--l-d-color) var(--l-ease);
}
html body :is(.btn.secondary,.gform_previous_button) {
  --control-ring:rgba(21,23,26,.3);
  --control-label:var(--ink);
  --control-shadow:0 0 transparent;
}
html body :is(.cpai-contact-form-card,.cpai-newsletter-form) .gform_wrapper .gform_button {
  border-radius:var(--l-pill);
  border:0;
  color:var(--control-label);
  background-color:var(--control-base);
  background-image:linear-gradient(var(--control-fill),var(--control-fill));
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:100% 0;
  box-shadow:inset 0 0 0 1px var(--control-ring),var(--control-shadow);
}
html body :is(.cpai-contact-form-card,.cpai-newsletter-form) .gform_wrapper .gform_button:is(:hover,:focus-visible) {
  color:var(--control-on-fill);
  background-size:100% 100%;
}
/* Gravity Forms' framework has stronger per-control selectors than theme CSS. */
html body .gform_wrapper :is(.gform_button,.gform_previous_button,.gform_next_button),
html body .woocommerce :is(a.button,button.button,input.button).alt {
  border:0 !important;
  border-radius:var(--l-pill) !important;
  color:var(--control-label) !important;
  background-color:var(--control-base) !important;
  background-image:linear-gradient(var(--control-fill),var(--control-fill)) !important;
  background-size:100% 0 !important;
}
html body .gform_wrapper :is(.gform_button,.gform_previous_button,.gform_next_button):is(:hover,:focus-visible):not(:disabled),
html body .woocommerce :is(a.button,button.button,input.button).alt:is(:hover,:focus-visible):not(:disabled) {
  color:var(--control-on-fill) !important;
  background-size:100% 100% !important;
}
html body .gform_wrapper :is(.gform_button,.gform_previous_button,.gform_next_button):is(:disabled,[aria-disabled="true"]),
html body .woocommerce :is(a.button,button.button,input.button).alt:is(:disabled,[aria-disabled="true"]) {
  color:var(--l-muted) !important;
  background-color:var(--l-tint) !important;
  background-size:100% 0 !important;
}
html body .gform_wrapper .gfield :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea) {
  border-radius:var(--l-r-sm) !important;
}
html body :is(.btn.light,.btn--light,.btn.white) {
  --control-ring:#fff;
  --control-label:#fff;
  --control-fill:#fff;
  --control-on-fill:var(--ink-strong);
  --control-base:rgba(255,255,255,.1);
}
html body :is(.btn,.button,.wp-element-button,.wp-block-button__link,
  .cpai-blog-cta-button,.gform_button,.gform_previous_button,.gform_next_button,
  .wc-block-components-button,.woocommerce input.button):is(:hover,:focus-visible):not(:disabled):not([aria-disabled="true"]) {
  color:var(--control-on-fill);
  background-color:var(--control-base);
  /* Theme hover shorthands must not erase or reposition the shared fill. */
  background-image:linear-gradient(var(--control-fill),var(--control-fill));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 100%;
  transform:translateY(var(--l-rise));
  box-shadow:inset 0 0 0 1px var(--control-ring),var(--control-shadow-hover);
}
html body :is(.btn,.button,.wp-element-button,.wp-block-button__link,
  .cpai-blog-cta-button,.gform_button,.gform_previous_button,.gform_next_button,
  .wc-block-components-button):active {
  transform:scale(.98);
  transition-duration:var(--l-d-press);
}
html body :is(.btn,.button,.wp-element-button,.wp-block-button__link,
  .cpai-blog-cta-button,.gform_button,.gform_previous_button,.gform_next_button,
  .wc-block-components-button):is(:disabled,[aria-disabled="true"]) {
  color:var(--l-muted);
  background-color:var(--l-tint);
  background-size:100% 0;
  box-shadow:inset 0 0 0 1px var(--l-hair);
  transform:none;
}

body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--l-focus);
  outline-offset: 3px;
}

body :is(.btn, .button, .wp-element-button, .wp-block-button__link):focus-visible {
  outline-width: 3px;
  outline-offset: 3px;
}

html body :is(
  .wc-block-components-text-input input:focus-visible,
  .wc-blocks-components-select__select:focus-visible,
  .woocommerce input.input-text:focus-visible,
  .woocommerce textarea:focus-visible,
  .woocommerce select:focus-visible
) {
  outline: 3px solid var(--l-focus) !important;
  outline-offset: 3px !important;
}

html body .gform_wrapper :is(.gform_button,.gform_previous_button,.gform_next_button):focus-visible {
  outline: 3px solid var(--l-focus) !important;
  outline-offset: 3px !important;
}

/* French trust copy must wrap within the same responsive content width. */
html body #trust-heading {
  white-space: normal;
  overflow-wrap: break-word;
}

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