/* lean-css core: a small Automatic.css replacement for Bricks sites.
   Needs a tokens.css loaded before it (see README). Class and variable names follow ACSS,
   so existing Bricks styles and Frames components keep working. Breakpoints match Bricks
   defaults: xl 1280, l 992, m 768, s 480. */

/* ---------- Base ---------- */
html { font-size: var(--root-font-size, 62.5%); scroll-behavior: smooth; }
html:focus-within { scroll-behavior: auto; }
*, *::before, *::after { box-sizing: border-box; }
body {
  min-block-size: 100vh;
  font-size: var(--text-m);
  line-height: var(--text-line-height);
  color: var(--body-color, var(--text-color));
  background-color: var(--body-bg-color);
  text-wrap: pretty;
}
:where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin-block: 0; }
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  text-wrap: pretty;
}
h1 { font-size: var(--h1); line-height: var(--h1-line-height); }
h2 { font-size: var(--h2); line-height: var(--h2-line-height); }
h3 { font-size: var(--h3); line-height: var(--h3-line-height); }
h4 { font-size: var(--h4); line-height: var(--h4-line-height); }
h5 { font-size: var(--h5); line-height: var(--h5-line-height); }
h6 { font-size: var(--h6); line-height: var(--h6-line-height); }
body a:where(:not([class*="btn--"])) {
  color: var(--link-color);
  font-weight: var(--link-weight);
  text-decoration: var(--link-decoration);
  transition: color var(--transition-duration) var(--transition-timing);
}
body a:where(:not([class*="btn--"])):hover { color: var(--link-color-hover); }
/* Linked headings keep the heading's color. Must come after, and match, the link rule's
   specificity, or the link color wins. */
body :is(h1, h2, h3, h4, h5, h6) a, body a:has(> :is(h1, h2, h3, h4, h5, h6)),
body :is(h1, h2, h3, h4, h5, h6) a:hover { color: currentcolor; font-weight: inherit; text-decoration: inherit; }
:where(img), :where(video) { max-inline-size: 100%; block-size: auto; }
:where(img) { border-radius: var(--radius); }
[id] { scroll-margin-top: var(--header-height, 0); }

:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

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

/* ---------- Bricks layout defaults ---------- */
:where(section:not(section section)) {
  padding-block: var(--section-padding-block);
  padding-inline: var(--section-padding-x, var(--gutter));
}
section:where(:not(.bricks-shape-divider)) {
  display: flex; flex-direction: column; align-items: center; gap: var(--container-gap);
}
section > div:where(:not(.bricks-shape-divider)) {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap);
}
/* Bricks' own CSS sits in a cascade layer, so anything here beats it regardless of
   specificity. Keep the 100% cap or containers overflow small screens. */
:where(.brxe-section) > :where(.brxe-container) { max-inline-size: min(100%, var(--content-width)); }
:where(.brxe-block, .brxe-div) { gap: var(--content-gap); }

/* Rich text (Bricks Text element, post content) gets paragraph rhythm back. */
:where(.brxe-text, .brxe-post-content) > * + * { margin-block-start: var(--paragraph-spacing); }
:where(.brxe-text, .brxe-post-content) > * + :is(h2, h3, h4, h5, h6) { margin-block-start: var(--heading-spacing); }
:where(.brxe-text, .brxe-post-content) > :is(ul, ol) { padding-inline-start: 1.25em; }

.content-width { inline-size: 100%; max-inline-size: var(--content-width); margin-inline: auto; }
.content-width--safe {
  inline-size: 100%;
  max-inline-size: min(var(--content-width), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

/* ---------- Grids ---------- */
[class*="grid--"] { display: grid; gap: var(--grid-gap); }
.grid--1 { grid-template-columns: var(--grid-1); }
.grid--2 { grid-template-columns: var(--grid-2); }
.grid--3 { grid-template-columns: var(--grid-3); }
.grid--4 { grid-template-columns: var(--grid-4); }
.grid--5 { grid-template-columns: var(--grid-5); }
.grid--6 { grid-template-columns: var(--grid-6); }
.grid--1-2 { grid-template-columns: var(--grid-1-2); }
.grid--2-1 { grid-template-columns: var(--grid-2-1); }
.grid--1-3 { grid-template-columns: var(--grid-1-3); }
.grid--3-1 { grid-template-columns: var(--grid-3-1); }
/* Auto grids: as many columns as fit, never more than N, no breakpoints needed. */
[class*="grid--auto-"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--min, 22rem),
    (100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols))), 1fr));
}
.grid--auto-2 { --cols: 2; --min: 32rem; }
.grid--auto-3 { --cols: 3; --min: 26rem; }
.grid--auto-4 { --cols: 4; --min: 22rem; }
.grid--auto-5 { --cols: 5; --min: 18rem; }
.grid--auto-6 { --cols: 6; --min: 15rem; }

@media (max-width: 1280px) {
  .grid--xl-1 { grid-template-columns: var(--grid-1); }
  .grid--xl-2 { grid-template-columns: var(--grid-2); }
  .grid--xl-3 { grid-template-columns: var(--grid-3); }
  .grid--xl-4 { grid-template-columns: var(--grid-4); }
}
@media (max-width: 992px) {
  .grid--l-1 { grid-template-columns: var(--grid-1); }
  .grid--l-2 { grid-template-columns: var(--grid-2); }
  .grid--l-3 { grid-template-columns: var(--grid-3); }
}
@media (max-width: 768px) {
  .grid--m-1 { grid-template-columns: var(--grid-1); }
  .grid--m-2 { grid-template-columns: var(--grid-2); }
}
@media (max-width: 480px) {
  .grid--s-1 { grid-template-columns: var(--grid-1); }
  .grid--s-2 { grid-template-columns: var(--grid-2); }
}

/* ---------- Text sizes ---------- */
.text--xs { font-size: var(--text-xs); }
.text--s { font-size: var(--text-s); }
.text--m { font-size: var(--text-m); }
.text--l { font-size: var(--text-l); }
.text--xl { font-size: var(--text-xl); }
.text--xxl { font-size: var(--text-xxl); }
.h--1 { font-size: var(--h1); line-height: var(--h1-line-height); }
.h--2 { font-size: var(--h2); line-height: var(--h2-line-height); }
.h--3 { font-size: var(--h3); line-height: var(--h3-line-height); }
.h--4 { font-size: var(--h4); line-height: var(--h4-line-height); }

/* ---------- Colors (main shade of each, plus light/dark surfaces) ---------- */
.text--primary { color: var(--primary); }
.text--secondary { color: var(--secondary); }
.text--tertiary { color: var(--tertiary); }
.text--accent { color: var(--accent); }
.text--base { color: var(--base); }
.text--white { color: var(--white); }
.text--black { color: var(--black); }
.text--light { color: var(--text-light); }
.text--dark { color: var(--text-dark); }
.bg--primary { background-color: var(--primary); }
.bg--secondary { background-color: var(--secondary); }
.bg--tertiary { background-color: var(--tertiary); }
.bg--accent { background-color: var(--accent); }
.bg--base { background-color: var(--base); }
.bg--white { background-color: var(--white); }
.bg--black { background-color: var(--black); }
.bg--light { background-color: var(--bg-light); }
.bg--dark { background-color: var(--bg-dark); }

/* ---------- Buttons ---------- */
[class*="btn--"] {
  --btn-bg: var(--primary); --btn-bg-hover: var(--primary-hover); --btn-text: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: var(--btn-min-width);
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  text-decoration: none;
  text-align: center;
  color: var(--btn-text);
  background-color: var(--btn-bg);
  border: var(--btn-border-width) solid var(--btn-bg);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  transition: background-color var(--transition-duration) var(--transition-timing),
    border-color var(--transition-duration) var(--transition-timing),
    color var(--transition-duration) var(--transition-timing);
}
[class*="btn--"]:hover { background-color: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn--secondary { --btn-bg: var(--secondary); --btn-bg-hover: var(--secondary-hover); }
.btn--tertiary { --btn-bg: var(--tertiary); --btn-bg-hover: var(--tertiary-hover); --btn-text: var(--black); }
.btn--accent { --btn-bg: var(--accent); --btn-bg-hover: var(--accent-hover); }
.btn--base { --btn-bg: var(--base); --btn-bg-hover: var(--base-hover); }
.btn--white { --btn-bg: var(--white); --btn-bg-hover: var(--neutral-ultra-light); --btn-text: var(--black); }
.btn--black { --btn-bg: var(--black); --btn-bg-hover: var(--neutral-semi-dark); }
.btn--outline { color: var(--btn-bg); background-color: transparent; }
.btn--outline:hover { color: var(--btn-text); background-color: var(--btn-bg); }

/* ---------- Accessibility ---------- */
.hidden-accessible, .screen-reader-text {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; inset-block-start: -10rem; inset-inline-start: 1rem; z-index: 9999; }
.skip-link:focus { inset-block-start: 1rem; }

/* ---------- Frames helpers (header/footer components built with Frames) ---------- */
.fr-lede { max-inline-size: var(--fr-lede-width); }
.fr-hero-padding { padding-block: var(--fr-hero-padding); }
.fr-text--light { color: var(--fr-text-light); }
.fr-text--dark { color: var(--fr-text-dark); }
.fr-bg--light { background-color: var(--fr-bg-light); }
.fr-bg--dark { background-color: var(--fr-bg-dark); }