/* =========================================================================
   Discount Searcher — Reset, tipografia, primitive di layout
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Le ancore non finiscono sotto l'header fisso */
  scroll-padding-top: calc(var(--ds-header-h) + var(--ds-5));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Blocca lo scroll del documento quando il menu mobile è aperto */
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--ds-font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ds-text);
  text-wrap: balance;
}

h1 { font-size: var(--ds-fs-h1); }
h2 { font-size: var(--ds-fs-h2); }
h3 { font-size: var(--ds-fs-h3); letter-spacing: -0.01em; }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--ds-accent-text);
  text-decoration-color: color-mix(in srgb, var(--ds-accent-text) 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--ds-t-fast) var(--ds-ease);
}
a:hover { color: var(--ds-text); }

ul, ol, figure, dl, dd { margin: 0; padding: 0; }

/* L'attributo hidden deve vincere sempre: senza !important, qualsiasi classe
   con un proprio display (es. .ds-notice { display:flex }) lo annullerebbe e
   un avviso "nascosto" resterebbe visibile. */
[hidden] { display: none !important; }
li { list-style: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

hr {
  border: 0;
  border-top: 1px solid var(--ds-line);
  margin: 0;
}

code, kbd, samp {
  font-family: var(--ds-font-mono);
  font-size: 0.92em;
}

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

/* -------------------------------------------------------------------------
   Accessibilità
   ------------------------------------------------------------------------- */

/* Un solo anello di focus per tutto il sito, visibile solo da tastiera.
   :focus-visible evita l'anello al click del mouse ma lo mantiene al Tab. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-accent-text);
  outline-offset: 3px;
  border-radius: var(--ds-r-sm);
}

/* Testo leggibile solo dagli screen reader */
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link "salta al contenuto": nascosto finché non riceve il focus da tastiera */
.ds-skip {
  position: absolute;
  top: var(--ds-3);
  left: var(--ds-3);
  z-index: calc(var(--ds-z-header) + 10);
  transform: translateY(-200%);
  padding: var(--ds-3) var(--ds-5);
  background: var(--ds-accent);
  color: var(--ds-on-accent);
  border-radius: var(--ds-r-md);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--ds-t-base) var(--ds-ease-out);
}
/* :focus e non :focus-visible: questo link riceve il focus solo da tastiera
   o da tecnologie assistive, e deve comparire in ogni caso. */
.ds-skip:focus {
  transform: translateY(0);
  color: var(--ds-on-accent);
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */

.ds-container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}
.ds-container--wide { max-width: var(--ds-container-wide); }
.ds-container--text { max-width: var(--ds-container-text); }

.ds-section {
  position: relative;
  padding-block: var(--ds-section-y);
}
.ds-section--soft { background: var(--ds-bg-soft); }
.ds-section--tight { padding-block: clamp(48px, 5vw, 80px); }

/* Linea di separazione a tutta larghezza fra le sezioni */
.ds-section--ruled { border-top: 1px solid var(--ds-line); }

.ds-stack        { display: flex; flex-direction: column; }
.ds-stack--2     { gap: var(--ds-2); }
.ds-stack--3     { gap: var(--ds-3); }
.ds-stack--4     { gap: var(--ds-4); }
.ds-stack--5     { gap: var(--ds-5); }
.ds-stack--6     { gap: var(--ds-6); }
.ds-stack--7     { gap: var(--ds-7); }

.ds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-3);
}

.ds-grid { display: grid; gap: var(--ds-4); }

/* Griglie che si adattano senza media query: le colonne si riducono da sole
   quando non c'è più spazio per la larghezza minima indicata. */
.ds-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ds-grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.ds-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }

/* -------------------------------------------------------------------------
   Testo di servizio
   ------------------------------------------------------------------------- */

.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-accent-text);
}
.ds-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--ds-line-accent);
}
.ds-eyebrow--plain::before { display: none; }

.ds-lead {
  font-size: var(--ds-fs-lead);
  line-height: 1.6;
  color: var(--ds-text-muted);
  max-width: 62ch;
}

.ds-muted  { color: var(--ds-text-muted); }
.ds-faint  { color: var(--ds-text-faint); }
.ds-mono   { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }
.ds-nowrap { white-space: nowrap; }

.ds-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--ds-4);
  max-width: 68ch;
  margin-bottom: var(--ds-7);
}
.ds-section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Rivelazione allo scroll (attivata da js/components/reveal.js)
   Senza JS, o con reduced-motion, il contenuto resta semplicemente visibile.
   ------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--ds-t-slow) var(--ds-ease-out),
    transform var(--ds-t-slow) var(--ds-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}