/* --- Webfonts: self-hosted. Declaring --primary-font-family does NOT make
   Bricks load it (Bricks only enqueues a family picked via a typography
   control, and font-family: var() there is a PHP fatal). Without these rules
   the whole site silently renders in the system sans. Variable font: one file
   covers 200-800, split by unicode-range. --- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/wp-content/uploads/li-fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/wp-content/uploads/li-fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --secondary-font-family (Inter) is a rebrand slot nothing references yet, so
   it is deliberately NOT loaded. Add its @font-face when something uses it. */

/* --- Base --- */
html {
  font-size: 1rem;
}

/* body carries type and colour so everything inherits: links, list items, table
   cells, labels. The previous rule targeted `p, div` - at once too broad (every
   div) and too narrow (body, a, li, td uncovered), so --text-color was defined
   and never actually applied. */
body {
  font-family: var(--primary-font-family);
  font-weight: var(--primary-font-weight);
  font-size: var(--text-s);
  line-height: var(--body-lh);
  letter-spacing: var(--ls-normal);
  color: var(--text-color);
}

/* Form controls are the one place inheritance does not happen by default. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--primary-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-lh);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

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

ul, li {
  margin: 0;
  padding: 0;
}

/* --- Bricks structural primitives --- */
section {
  padding: var(--section-vertical) var(--section-horizontal);
}

.brxe-container {
  padding: var(--container-vertical) var(--container-horizontal);
  gap: var(--container-gap);
  width: var(--mw-wide);
  /* Explicit on purpose: --mw-wide is 82rem, so without a cap the container is
     1312px on a 360px phone. It currently survives only because Bricks' own
     stylesheet happens to set max-width: 100%. State it here so it cannot
     regress on someone else's rule. */
  max-width: 100%;
}

.brxe-block {
  gap: var(--content-gap);
}

/* --- Buttons ---------------------------------------------------------------
   Bricks drives every native control off its OWN variables, so remapping those
   themes the whole surface at once - form submit, pagination, notices,
   WooCommerce - including the buttons no component can replace. This is why
   there is no custom button component: it could never cover them.

   Bricks ships --bricks-color-primary: #ffd64f and --bricks-color-secondary:
   #fc5778. Neither is an LI token, and before this remap the yellow is what the
   site actually rendered.
   -------------------------------------------------------------------------- */
:root {
  --bricks-color-primary: var(--button-bg);
  --bricks-color-secondary: var(--color-secondary-500);
  --bricks-bg-dark: var(--color-neutral-900);
  --bricks-bg-light: var(--surface-primary);
  --bricks-text-dark: var(--color-neutral-900);
  --bricks-text-medium: var(--text-color);
  --bricks-border-color: var(--border-color-light);
  --bricks-border-radius: var(--radius-normal);
}

.bricks-button {
  font-family: var(--primary-font-family);
  font-weight: var(--primary-font-weight);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-l);
  line-height: var(--body-lh);
  letter-spacing: var(--ls-normal);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Foreground cannot be derived from a background, so state it wherever contrast
   demands it. White on --button-bg is 4.96:1; on the secondary yellow white
   would be 1.71:1, so that variant takes dark text at 6.55:1. */
.bricks-button.bricks-background-primary { color: var(--color-white); }
.bricks-button.bricks-background-secondary { color: var(--text-color); }
.bricks-button.bricks-background-light { color: var(--text-color); }
.bricks-button.bricks-background-dark { color: var(--color-white); }

.bricks-button.outline {
  background-color: transparent;
  border: 1px solid currentColor;
}

/* --- Accessibility: two-tone focus ring. A single colour cannot satisfy
   WCAG 2.2 SC 1.4.11 (3:1 vs adjacent colours) across this palette - the brand
   blue is 3.36:1 on white but 2.36:1 on --surface-primary. Dark ring carries
   light backgrounds, white halo carries dark ones, one rule covers every
   section. --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-neutral-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--color-white);
}

:target {
  scroll-margin-block-start: var(--space-xl);
}

@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;
  }
}