/* Base – reset, fonts and default styles on tags.
   In Bricks this becomes the Theme Style (typography, links, buttons, section
   padding, container width) plus a small layer of tag CSS, so rich text and
   post content look right without classes. */

/* ---- Fonts (self-hosted, become Bricks custom fonts) ---------------------- */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-700-opsz.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; }
img, svg, video, iframe { display: block; max-width: 100%; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } /* lists that are layout (query loops, card rows) */
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---- Body ------------------------------------------------------------------ */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Headings (Newsreader Bold, -3% tracking, green) ------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-optical-sizing: auto;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}
h5 { font-size: var(--text-m); }
h6 { font-size: var(--text-base); }

/* ---- Text ------------------------------------------------------------------ */
strong, b { font-weight: var(--weight-semibold); }
p, ul, ol { text-wrap: pretty; }
a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition-property: color;
  transition-duration: var(--duration);
}
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--green); color: var(--white); }

/* ---- Rich text (post content, JetEngine text fields): .prose ----------------- */
.prose { max-width: var(--text-width); }
.prose > * + * { margin-top: var(--space-m); }
.prose h2 { font-size: var(--text-h2); margin-top: var(--space-xl); }
.prose h3 { font-size: var(--text-h3); margin-top: var(--space-l); }
.prose h4 { margin-top: var(--space-l); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: var(--space-s); }
.prose ul, .prose ol { padding-left: 2.4rem; }
.prose li + li { margin-top: var(--space-2xs); }
.prose ul li::marker { color: var(--green); }
.prose ol li::marker { color: var(--green); font-weight: var(--weight-semibold); }
.prose figure img { border-radius: 0 var(--radius-m) 0 var(--radius-m); }
.prose figcaption { margin-top: var(--space-xs); font-size: var(--text-s); color: var(--color-text-light); }
.prose blockquote {
  padding-left: var(--space-m);
  border-left: 3px solid var(--red);
  font-size: var(--text-m);
}

/* ---- Accessibility helpers ------------------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -10rem;
  z-index: 100;
  padding: var(--space-xs) var(--space-s);
  background: var(--white);
  color: var(--green);
  font-weight: var(--weight-semibold);
}
.skip-link:focus { top: var(--space-s); }

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