/*
  Component di base — Società Dante Alighieri, Comitato di Friburgo

  Convenzione: BEM-ish (.block, .block--modifier, .block__element) per i
  componenti veri (bottoni, card, dropdown); classi di utility solo per
  spaziatura/layout tra componenti, mai dentro un componente.

  Ogni pattern qui dentro è usato almeno 2 volte nel sito reale: se stai per
  scrivere un terzo bottone o una terza card con stile inline, è il segnale
  che va qui dentro invece che ripetuto nella pagina.

  Richiede tokens.css caricato prima di questo file. Solo CSS, nessun
  JavaScript — sicuro da linkare in ogni pagina senza rischio di conflitto
  col runtime support.js/image-slot.js.
*/

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--color-bg); scroll-behavior: smooth; }
a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent); }
::selection { background: var(--color-accent); color: var(--color-white); }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Marquee continuo (es. loghi partner): contenuto duplicato una volta nel
   markup, questa animazione scorre di esattamente metà della larghezza
   totale così il loop è impercettibile. Puro CSS, nessun JavaScript. */
@keyframes marquee-logos {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Eyebrow (es. "COMITATO DI FRIBURGO · DAL 1971") ---------- */
.eyebrow {
  font: var(--weight-medium) 11px/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ---------- Link di navigazione ---------- */
.nav-link {
  font: var(--weight-medium) 13px/1 var(--font-body);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  color: var(--color-text);
  min-width: 0;   /* dentro un contenitore flex, permette al testo di andare a capo invece di spingere fuori il layout (bug classico: min-width di un flex item è "auto" di default) */
  transition: border-color .2s ease, color .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link:hover,
.nav-link--active {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---------- Dropdown di navigazione ----------
   Hover gestito in puro CSS (:hover sul contenitore), senza dipendere da
   onMouseEnter/onMouseLeave o altro JS: niente "gap morto" che chiude il
   menu troppo presto (bug già capitato una volta su questo sito). */
.nav-item {
  position: relative;
}
.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  min-width: 240px;
  background: var(--color-bg-panel-dark);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-2) 0;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-soft);
  display: none;
}
.nav-item:hover .dropdown-panel,
.nav-item:focus-within .dropdown-panel {
  display: block;
}
.dropdown-panel a {
  display: block;
  padding: 13px 20px;
  color: var(--color-text-on-dark);
  font: var(--weight-body) 15px/1.35 var(--font-body);
}
.dropdown-panel a:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  font: var(--weight-strong) 15px/1 var(--font-body);
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: var(--transition-base);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:hover { transform: translateY(-3px); }

.btn--primary {
  background: var(--color-ink-900);
  color: var(--color-white);
}
.btn--primary:hover {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 18px 34px -14px rgba(165, 11, 24, .55);
}

.btn--outline {
  background: none;
  color: var(--color-text);
  border-color: var(--color-ink-900);
}
.btn--outline:hover {
  background: var(--color-ink-900);
  color: var(--color-white);
  box-shadow: 0 18px 34px -14px rgba(17, 17, 17, .35);
}

/* Link testuale sottolineato (es. "Scopri l'offerta") */
.link-arrow {
  font: var(--weight-strong) 14px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: var(--space-1);
  display: inline-block;
}

/* ---------- Card ---------- */
.card {
  background: var(--color-white);
  border: var(--border-hairline);
  padding: var(--space-5);
  min-width: 0;   /* idem: una card dentro una riga flex/grid deve poter restringersi senza spingere fuori le altre */
}
.card__eyebrow { margin-bottom: var(--space-2); }
.card__title {
  font: var(--weight-medium) 16px/1.4 var(--font-body);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.card__body {
  font: var(--weight-body) 15px/1.6 var(--font-body);
  color: var(--color-text-muted);
}

/* ---------- Utility (solo layout/spaziatura, mai dentro un componente) ---------- */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-items-center { align-items: center; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-4 { gap: var(--space-4); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-7 { margin-top: var(--space-7); }
.u-min-w-0 { min-width: 0; }   /* da aggiungere a qualsiasi figlio flex/grid con testo lungo che rischia di non andare a capo e tagliare il layout */

/* Carosello avvisi: nastro a tutto schermo (da bordo a bordo), card a larghezza fissa */
#avvisi-rail { --rail-gap: clamp(20px, 2.4vw, 32px); }
.avvisi-card { flex: 0 0 82vw; min-width: 0; }
@media (min-width: 700px) { .avvisi-card { flex-basis: 44vw; } }
@media (min-width: 1100px) { .avvisi-card { flex-basis: clamp(360px, 28vw, 440px); } }
/* Schermi così larghi da contenere tutte le card: niente copie duplicate, nastro fermo e centrato */
@media (min-width: 3310px) {
  .avvisi-card[aria-hidden="true"] { display: none !important; }
  #avvisi-rail { justify-content: center; }
}

/* Fascia di avviso in cima a tutte le pagine (sopra l'header, scorre via con la pagina) */
.site-notice {
  background: var(--color-bg-panel-dark);
  color: var(--color-text-on-dark);
  font: var(--weight-body) clamp(12px, 0.2vw + 0.7rem, 14px)/1.5 var(--font-body);
  text-align: center;
  padding: var(--space-2) var(--space-4);
}
.site-notice__label {
  color: var(--color-accent-soft);
  font-weight: var(--weight-strong);
  letter-spacing: .14em;
  margin-right: var(--space-2);
}
.site-notice a {
  color: inherit;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}


/* ===== Header responsive: barra + menu a scomparsa su schermi stretti (solo CSS, checkbox) ===== */
.site-header__bar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px clamp(20px, 4vw, 60px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.3vw, 20px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-toggle-btn { display: none; }

@media (max-width: 960px) {
  .site-header__bar { flex-wrap: wrap; padding: 12px var(--space-4); gap: 0; }
  .nav-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(17, 17, 17, .25);
    font: var(--weight-strong) 13px/1 var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
  }
  .nav-toggle-btn__icon,
  .nav-toggle-btn__icon::before,
  .nav-toggle-btn__icon::after {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle-btn__icon { position: relative; }
  .nav-toggle-btn__icon::before,
  .nav-toggle-btn__icon::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-btn__icon::before { top: -5px; }
  .nav-toggle-btn__icon::after { top: 5px; }
  .nav-toggle:checked + .nav-toggle-btn .nav-toggle-btn__icon { background: transparent; }
  .nav-toggle:checked + .nav-toggle-btn .nav-toggle-btn__icon::before { transform: translateY(5px) rotate(45deg); }
  .nav-toggle:checked + .nav-toggle-btn .nav-toggle-btn__icon::after { transform: translateY(-5px) rotate(-45deg); }
  .nav-toggle:focus-visible + .nav-toggle-btn { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: var(--space-3) 0 var(--space-1);
    border-top: 1px solid rgba(17, 17, 17, .14);
  }
  .nav-toggle:checked ~ .site-nav { display: flex; max-height: calc(100svh - 90px); overflow-y: auto; }
  .site-nav > .nav-link,
  .site-nav > .nav-item > .nav-link {
    display: flex;
    padding: 14px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(17, 17, 17, .1);
  }
  .site-nav .nav-link--active { border-bottom-color: rgba(17, 17, 17, .1); }
  .site-nav .nav-link span { display: none; }   /* il triangolino ▼ della tendina */
  .site-nav .dropdown-panel {
    display: block;
    position: static;
    transform: none;
    min-width: 0;
    background: transparent;
    border-top: none;
    box-shadow: none;
    padding: 0 0 var(--space-2) var(--space-4);
  }
  .site-nav .dropdown-panel a {
    color: var(--color-text-muted);
    padding: 10px 0;
    font-size: 15px;
  }
  .site-nav .dropdown-panel a:hover { background: transparent; color: var(--color-accent); }
}


/* ===== Logo nell'header ===== */
.site-logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; min-width: 0; }
.site-logo__img { height: clamp(46px, 5vw, 64px); width: auto; display: block; flex-shrink: 0; }
.site-logo__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.site-logo__name { font: var(--weight-strong) clamp(13px, 1.1vw, 16px)/1.15 var(--font-body); letter-spacing: .01em; color: var(--color-text); }
.site-notice__short { display: none; }

@media (max-width: 960px) {
  .site-logo { flex: 1 1 auto; gap: 10px; }
  .site-logo__img { height: 40px; }
  .site-logo__name { font-size: 13px; }
  .site-logo .eyebrow { font-size: 9.5px; letter-spacing: .1em; }
  .nav-toggle-btn { flex-shrink: 0; margin-left: var(--space-2); padding: 9px 11px; font-size: 12px; }
}
@media (max-width: 600px) {
  .site-notice { padding: 8px var(--space-3); font-size: 12px; }
  .site-notice__long { display: none; }
  .site-notice__short { display: inline; }
}
@media (max-width: 380px) {
  .nav-toggle-btn { padding: 12px 10px; }
  .nav-toggle-btn__text { display: none; }
}

/* ===== Card degli avvisi su telefono: più compatte ===== */
@media (max-width: 700px) {
  .avvisi-card { flex-basis: 78vw; }
  .avvisi-card > a:first-child,
  .avvisi-card > div:first-child { height: 170px !important; padding: 12px !important; }
  .avvisi-card > div:first-child > p:first-child { font-size: 30px !important; }
  .avvisi-card > div:first-child span { padding: 6px 9px !important; font-size: 11px !important; }
  .avvisi-card > div:last-child { padding: 16px !important; gap: 10px !important; }
  .avvisi-card h3 { font-size: 21px !important; }
  .avvisi-card h3 + p { display: none; }            /* frase d'invito: su telefono basta il titolo */
  .avvisi-card p, .avvisi-card span { font-size: 14px !important; line-height: 1.45 !important; }
  .avvisi-card > div:last-child > p:first-child { font-size: 11px !important; }   /* etichetta rossa */
  .avvisi-card [style*="space-between"] { flex-direction: column; gap: 2px !important; padding: 8px 0 !important; }
  .avvisi-card [style*="space-between"] > span:first-child { font-size: 11px !important; letter-spacing: .12em; color: var(--color-text-muted); }
  .avvisi-card [style*="space-between"] > span:last-child { text-align: left !important; max-width: none !important; }
  .avvisi-card a[download], .avvisi-card a[target="_blank"]:not(:first-child) { font-size: 12px !important; }
}

/* Bodoni Moda: limita la dimensione ottica. In automatico i titoli grandi usano opsz 96,
   con linee sottili quasi invisibili (soprattutto sul rosso); 16 le rende robuste. */
[style*="Bodoni"], h1, h2, h3 { font-variation-settings: "opsz" 16; }

/* Accessibilità: indicatore di focus ben visibile per chi naviga con la tastiera (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, label:focus-visible {
  outline: 3px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}
#avvisi a:focus-visible, #socio a:focus-visible, .site-notice a:focus-visible, footer a:focus-visible { outline-color: #F5F1EE !important; }


/* ===== Promemoria iscrizioni PLIDA (riquadro non bloccante, in basso a destra) ===== */
.plida-pop { display: none; }
html[data-plida-pop="on"] .plida-pop {
  display: block;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: min(380px, calc(100vw - 48px));
  background: var(--color-bg-panel-dark);
  color: var(--color-text-on-dark);
  border-top: 4px solid var(--color-accent);
  padding: 22px 24px 20px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55);
  animation: riseIn .6s cubic-bezier(.16, 1, .3, 1) both;
}
.plida-pop__eyebrow { margin: 0 0 8px; font: var(--weight-strong) 13px/1.3 var(--font-body); letter-spacing: .14em; color: var(--color-accent-soft); }
.plida-pop__title { margin: 0 0 8px; font: var(--weight-body) 26px/1.15 var(--font-display); }
.plida-pop__title b { font-weight: 800; }
.plida-pop__text { margin: 0 0 18px; font: var(--weight-body) 16px/1.5 var(--font-body); }
.plida-pop__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.plida-pop__cta, .plida-pop__close {
  min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 20px;
  font: var(--weight-strong) 15px/1 var(--font-body);
  letter-spacing: .04em;
  cursor: pointer;
}
.plida-pop__cta { background: var(--color-accent); color: var(--color-white); flex: 1 1 auto; }
.plida-pop__cta:hover { background: #8a0914; }
.plida-pop__close { background: transparent; color: var(--color-text-on-dark); border: 2px solid rgba(245, 241, 238, .6); }
.plida-pop__close:hover { border-color: var(--color-text-on-dark); }
.plida-pop a:focus-visible, .plida-pop button:focus-visible { outline: 3px solid #F5F1EE !important; outline-offset: 2px !important; }

@media (max-width: 600px) {
  html[data-plida-pop="on"] .plida-pop {
    left: 12px; right: 12px; bottom: 12px;
    width: auto;
    padding: 18px 18px 16px;
  }
  .plida-pop__title { font-size: 23px; }
  .plida-pop__text { font-size: 15px; margin-bottom: 14px; }
  .plida-pop__actions > * { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { html[data-plida-pop="on"] .plida-pop { animation: none; } }