/* ANAD — componenti.
   Tre elementi vengono dal marchio, scomposto nei suoi tratti:
     il segno   — le due barre e il punto, sopra i petali
     l'arco     — il profilo del petalo disegnato a filo
     la sagoma  — lo stesso profilo usato come maschera
   Tutto il resto è griglia, filetti e testo. */

/* IL SEGNO --------------------------------------------------------------- */
.segno {
  display: inline-grid;
  gap: 2px;
  justify-items: center;
  width: 0.95rem;
  flex: none;
}

.segno span {
  display: block;
  height: 2px;
  background: var(--anad-red);
  border-radius: 1px;
  transform-origin: left center;
}

/* Come nel logo 2024: due barre uguali e il punto centrato sotto. */
.segno span:nth-child(1),
.segno span:nth-child(2) { width: 100%; }
.segno span:nth-child(3) { width: 3px; height: 3px; border-radius: 50%; margin-top: 1px; }

/* LA SAGOMA -------------------------------------------------------------- */
/* Maschera a forma di petalo per le immagini: ritaglia la foto con la curva
   del marchio invece di incorniciarla in un rettangolo qualunque. */
.petalo-mask {
  clip-path: url(#anad-petalo);
  aspect-ratio: 386 / 635;
  object-fit: cover;
  width: 100%;
}

/* BOTTONI ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--anad-navy);
  background: var(--anad-navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-quart),
              border-color var(--duration-fast) var(--ease-out-quart),
              color var(--duration-fast) var(--ease-out-quart);
}

.btn:hover,
.btn:focus-visible {
  background: var(--anad-red);
  border-color: var(--anad-red);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--anad-navy);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--anad-navy);
  border-color: var(--anad-navy);
  color: #fff;
}

.btn--on-navy,
.section--navy .btn--on-navy {
  background: #fff;
  border-color: #fff;
  color: var(--anad-navy);
}

.btn--on-navy:hover,
.btn--on-navy:focus-visible,
.section--navy .btn--on-navy:hover,
.section--navy .btn--on-navy:focus-visible {
  background: var(--anad-red);
  border-color: var(--anad-red);
  color: #fff;
}

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* LINK DI SEZIONE -------------------------------------------------------- */
.link-mark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--anad-red);
  transition: color var(--duration-fast) var(--ease-out-quart);
}

.link-mark:hover,
.link-mark:focus-visible { color: var(--anad-red); }

/* STRISCIA ORIZZONTALE --------------------------------------------------- */
/* Le serie di schede scorrono in orizzontale con aggancio. Le schede sono
   separate da un filetto, non da un riquadro: la serie resta un elenco. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 19rem);
  column-gap: var(--grid-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: 0 var(--space-5);
  margin-inline: calc(var(--gutter) * -1);
  max-width: 100vw;
  scrollbar-width: thin;
  scrollbar-color: var(--anad-line-strong) transparent;
}

.rail > * { scroll-snap-align: start; }

.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-track { background: var(--color-border); }
.rail::-webkit-scrollbar-thumb { background: var(--anad-navy); }

.rail--narrow { grid-auto-columns: minmax(11rem, 13rem); }
.rail--wide { grid-auto-columns: minmax(17rem, 21rem); }

.rail:focus-visible { outline: 2px solid var(--anad-red); outline-offset: 4px; }

.rail-hint {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-soft);
}

.section--navy .rail-hint { color: var(--on-navy-soft); }

/* VOCE DI ELENCO --------------------------------------------------------- */
/* Usata per valori, convenzioni, persone: un numero, un titolo, una riga. */
.item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 2px solid var(--anad-navy);
}

.item__num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--anad-red);
}

.item__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0;
}

.item__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-soft);
}

.section--navy .item { border-top-color: var(--on-navy-mark); }
.section--navy .item__num { color: var(--on-navy-mark); }
.section--navy .item__text { color: var(--on-navy-soft); }
.section--navy .news-item__cat { color: var(--on-navy-mark); }
.section--navy .segno span { background: var(--on-navy-mark); }

/* ELENCO NOTIZIE --------------------------------------------------------- */
/* Negli archivi le notizie stanno in due colonne, non nelle celle da 1/12
   della griglia: un titolo lungo dentro una cella stretta esce dallo schermo. */
.news-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NOTIZIA ---------------------------------------------------------------- */
.news-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.news-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-soft);
}

.news-item__cat { color: var(--anad-red); }

.news-item__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: 0;
  text-wrap: pretty;
}

.news-item__title a { text-decoration: none; }
.news-item__title a:hover { text-decoration: underline; }

.news-item__excerpt {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-soft);
  max-width: var(--measure-tight);
}

/* ACCORDION -------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--color-border); }
.accordion__item { border-bottom: 1px solid var(--color-border); }

.accordion__trigger {
  width: 100%;
  min-height: 3.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
  transition: color var(--duration-fast) var(--ease-out-quart);
}

.accordion__trigger:hover { color: var(--anad-red); }

.accordion__icon {
  position: relative;
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  align-self: center;
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--anad-red);
  transition: transform var(--duration-normal) var(--ease-out-quart);
}

.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded='true'] .accordion__icon::after { transform: rotate(0deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-normal) var(--ease-out-quart);
}

.accordion__panel[data-open='true'] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }

.accordion__body {
  padding-bottom: var(--space-5);
  max-width: var(--measure);
  color: var(--color-text-soft);
}

/* FORM ------------------------------------------------------------------- */
.field { display: grid; gap: 0.35rem; margin-bottom: var(--space-4); }

.field label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: var(--text-base);
  color: inherit;
  background: #fff;
  border: 1px solid var(--anad-line-strong);
  border-radius: 0;
  transition: border-color var(--duration-fast) var(--ease-out-quart);
}

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--anad-navy); }

.field textarea { min-height: 8rem; resize: vertical; }

/* Campo file: il bottone del browser prende l'aspetto di .btn--ghost. */
.field input[type='file'] { padding: 0.4rem; cursor: pointer; }

.field input[type='file']::file-selector-button {
  margin-right: var(--space-3);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--anad-navy);
  border-radius: 0;
  background: transparent;
  color: var(--anad-navy);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-quart),
              color var(--duration-fast) var(--ease-out-quart);
}

.field input[type='file']:hover::file-selector-button,
.field input[type='file']:focus-visible::file-selector-button {
  background: var(--anad-navy);
  color: #fff;
}

/* ACCESSO ASSOCIATI ------------------------------------------------------ */
/* wp_login_form() stampa il suo markup: qui prende l'aspetto del tema. */
.login-username,
.login-password { display: grid; gap: 0.35rem; margin: 0 0 var(--space-4); }

.login-username label,
.login-password label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-soft);
}

.login-username input,
.login-password input {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: var(--text-base);
  color: inherit;
  background: #fff;
  border: 1px solid var(--anad-line-strong);
  border-radius: 0;
  transition: border-color var(--duration-fast) var(--ease-out-quart);
}

.login-username input:focus,
.login-password input:focus { border-color: var(--anad-navy); }

.login-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

.login-remember input { width: 1rem; height: 1rem; accent-color: var(--anad-navy); }
.login-remember label { display: flex; align-items: center; gap: 0.5rem; }

.login-submit { margin: 0; }

.login-submit input[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--anad-navy);
  background: var(--anad-navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--duration-fast) var(--ease-out-quart),
              border-color var(--duration-fast) var(--ease-out-quart);
}

.login-submit input[type='submit']:hover,
.login-submit input[type='submit']:focus-visible {
  background: var(--anad-red);
  border-color: var(--anad-red);
}

/* TABELLA ---------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.data-table th,
.data-table td {
  padding: 0.8rem 1rem 0.8rem 0;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
}

/* MODULO DI ISCRIZIONE --------------------------------------------------- */
/* Due colonne da 640px: i campi brevi si affiancano, scelte e invio a riga intera. */
.modulo {
  display: grid;
  column-gap: var(--grid-gap);
}

@media (min-width: 640px) {
  .modulo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modulo__pieno { grid-column: 1 / -1; }
}

.modulo__trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field--scelte {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.field--scelte legend {
  width: 100%;
  margin-bottom: var(--space-2);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-soft);
}

.field .scelta,
.field--scelte .scelta {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding-block: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
  cursor: pointer;
}

.field .scelta input {
  flex: none;
  width: 1.125rem;
  min-height: 0;
  height: 1.125rem;
  margin: 0.2rem 0 0;
  padding: 0;
  accent-color: var(--anad-navy);
}

.field__hint,
.field__errore { margin: 0; font-size: var(--text-sm); }

.field__hint { color: var(--color-text-soft); }

.field__errore { width: 100%; color: var(--anad-red-text); }

.field.has-error input:not([type='checkbox']) { border-color: var(--anad-red-text); }

.form-esito {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border-left: 3px solid var(--anad-navy);
  background: var(--anad-mist-2);
}

.form-esito > * + * { margin-top: var(--space-2); }

.form-esito--errore { border-left-color: var(--anad-red-text); }

/* VIDEO SU RICHIESTA ----------------------------------------------------- */
/* Al posto dell'iframe di YouTube finché chi legge non preme il bottone. */
.video-richiesta,
.video-richiesta__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-block: var(--space-5);
  border: 0;
}

.video-richiesta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--anad-navy);
  color: var(--on-navy);
}

.video-richiesta p { margin: 0; max-width: 42ch; }
.video-richiesta__titolo { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-snug); }
.video-richiesta__nota { font-size: var(--text-sm); color: var(--on-navy-soft); }
.video-richiesta a { color: var(--on-navy); }

.video-richiesta__bottone {
  background: #fff;
  border-color: #fff;
  color: var(--anad-navy);
}

@media (max-width: 639px) {
  .video-richiesta { aspect-ratio: auto; padding: var(--space-5); }
}