/* ==========================================================================
   core-classes.css

   Global CSS that CANNOT live in Bricks Global Classes. On production it
   ships as one stylesheet (child theme or plugin), pasted by hand, never
   through the converter. Empty on purpose: this is the starter for Zinergo.

   What belongs here:
     - @font-face for the icon font and any brand fonts
     - icon base class and glyphs (.icon, .icon-name:before)
     - @keyframes
     - the base layer: :where(...) resets for headings, paragraphs, lists
     - styling for markup Bricks does not own (Fluent Forms, WooCommerce)
     - body-level rules (scroll lock when the offcanvas menu is open)

   What does NOT belong here: any BEM component class. If a rule starts with
   a class you put on an element in the HTML, it goes to bricks-classes.css.
   One rule, one file. Duplicating it in both is how the two drift apart.
   ========================================================================== */

/* --- Fonts: Saira (display, labels) and Archivo (body), variable, self-hosted.
   Polish needs the latin-ext files (ą ę ł ń ó ś ź ż). ------------------------ */
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
  src: url("../fonts/saira-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
  src: url("../fonts/saira-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: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-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;
}

/* --- Base layer ---------------------------------------------------------- */
html {
  scrollbar-color: var(--color-amber) var(--color-ink);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--text-font-family);
  font-size: var(--text-base);
  line-height: var(--text-line-height);
  font-weight: var(--text-font-weight);
  caret-color: var(--color-amber);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(img) { display: block; max-width: 100%; height: auto; }
:where(a) { color: inherit; text-decoration: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }

::selection { background: var(--color-amber); color: var(--color-on-amber); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--border-terminal) solid var(--color-amber);
  outline-offset: 3px;
}

/* Body scroll lock while the mobile menu is open (set by shared.js). */
body.is-menu-open { overflow: hidden; }

/* The offcanvas menu must not trap the reader if they prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}