/**
 * Site stylesheet - loaded LAST on every page (officina-core, module foundation).
 * Site online: copy to site-next.css, edit there, publish by renaming (skill sito-design-system).
 *
 * 1. Fonts      @font-face, self-hosted, one loader only
 * 2. Tokens     the ONLY place with raw values (fonts, colors, radii, shadows, motion, grid)
 * 3. Base       accessibility and global defaults
 * 4. Layout     grid helpers shared by every page
 * 5. Components this site's components ({prefix}-block__element--modifier)
 *
 * Values live in ONE panel (theme palette or Elementor kit, as the scheda says): tokens READ them.
 * Rules: components use tokens only (no hex, font names, radii or shadows written by hand);
 * low specificity (:where()); Elementor container layout via its variables (--width, --gap,
 * --padding-*, --flex-*, --border-radius) with selectors that include .e-con; no !important,
 * except to beat a plugin that uses it (say which in a comment), never on animated properties.
 */

/* 1. Fonts ------------------------------------------------------------------------ */
/* One variable WOFF2 per family, latin subset. The heading file is preloaded (config 'fonts'). */
@font-face {
	font-family: "Heading";
	src: url("../fonts/heading-latin-var.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Body";
	src: url("../fonts/body-latin-var.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
/* Tuned fallbacks (one set per web font): system fonts resized to take exactly the space of the web
   font, so nothing moves when it arrives (CLS from fonts = 0). Generate them with
   scripts/font-fallback.py (skill sito-design-system) and paste the output here, e.g.
   @font-face { font-family: "Heading Fallback Arial"; src: local("Arial"), ...; font-weight: 100 549;
     size-adjust: 101.78%; ascent-override: 98.74%; descent-override: 28.98%; line-gap-override: 0%; }
   then list the families right after the web font in the tokens below. */

/* 2. Tokens --------------------------------------------------------------------------- */
/* Declared on :root AND body: Elementor v3 defines the kit variables (--e-global-*) on body
   (.elementor-kit-N), so tokens that read them must be computed there, not only on <html>:
   on :root alone var(--e-global-color-primary, #fallback) always resolves to the fallback. */
:root, body {
	/* Typography */
	/* After the web font: its tuned fallbacks ("Heading Fallback Arial", "... Roboto", "... DejaVu"). */
	--ow-font-heading: "Heading", system-ui, sans-serif;
	--ow-font-body: "Body", system-ui, sans-serif;
	--ow-font-mono: ui-monospace, monospace;
	--ow-weight-heading: 700;
	--ow-weight-subheading: 600;

	/* Colors: read the single source written in the scheda. Astra palette (Customizer -> Global
	   colors, also shown among Elementor's global colors): var(--ast-global-color-N). Elementor kit:
	   var(--e-global-color-…). Never both for the same colour. The value after the comma is a fallback. */
	--ow-color-primary: var(--e-global-color-primary);
	--ow-color-accent: var(--e-global-color-accent);
	--ow-color-text: var(--e-global-color-text);
	--ow-color-muted: #5b6470;      /* extra tone: not in the kit */
	--ow-color-surface: #ffffff;
	--ow-color-line: #d0d5da;

	/* Shape */
	--ow-radius: 6px;               /* buttons, fields, chips */
	--ow-radius-l: 16px;            /* cards, photos, boxes */
	--ow-shadow-1: 0 1px 3px rgb(0 0 0 / .08);
	--ow-shadow-2: 0 10px 30px rgb(0 0 0 / .12);
	--ow-shadow-action: 0 6px 16px rgb(0 0 0 / .16);

	/* Motion */
	--ow-ease: cubic-bezier(.2, .7, .2, 1);
	--ow-duration: .3s;

	/* Grid (same values as Elementor boxed width + theme content width) */
	--ow-content: 1280px;                  /* standard of all the sites (header included) */
	--ow-gutter: 64px;                     /* 64 / 32 / 20 */
}
@media (max-width: 1024px) { :root, body { --ow-gutter: 32px; } }
@media (max-width: 767px)  { :root, body { --ow-gutter: 20px; } }

/* 3. Base --------------------------------------------------------------------------------- */
/* Visually hidden, still read by screen readers (used by ow-count.js; most themes define it too). */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* Links inside text are underlined: color alone is not enough (WCAG 1.4.1). */
:is(.elementor-widget-text-editor, .elementor-widget-theme-post-content) a { text-decoration: underline; text-underline-offset: .15em; }
.elementor-widget-button .elementor-button {
	transition: background-color var(--ow-duration) var(--ow-ease), color var(--ow-duration) var(--ow-ease), box-shadow var(--ow-duration) var(--ow-ease), transform .2s var(--ow-ease);
}
@media (hover: hover) {
	.elementor-widget-button .elementor-button:hover { transform: translateY(-2px); box-shadow: var(--ow-shadow-action); }
}
.elementor-widget-button .elementor-button:active { transform: translateY(0) scale(.98); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* user setting must win */
}

/* 4. Layout ------------------------------------------------------------------------------- */
/* Full-width band (background edge to edge), content aligned to the grid. */
.ow-band.e-con { --padding-left: max(var(--ow-gutter), calc((100% - var(--ow-content)) / 2)); --padding-right: var(--padding-left); }
/* Readable text column. */
:where(.ow-prose) { max-width: 72ch; }

/* 5. Components ---------------------------------------------------------------------------- */
/* One block per component, a comment saying where it is used. Example:
.site-card.e-con { --border-radius: var(--ow-radius-l); --padding-top: 24px; box-shadow: var(--ow-shadow-1); }
.site-card__title { font-family: var(--ow-font-heading); font-weight: var(--ow-weight-subheading); }
*/