/* ==========================================================================
   Pagina Supporto, piano v3 (P5): ex Contatti + FAQ, impaginata come
   rideradian.com/support. Cornice a 2 colonne in tutta la pagina: titolo nel
   25% a sinistra, contenuto a destra (sotto i 992px una colonna sola).
   - .t4sp-ch    canali (5 riquadri) e .t4sp-more, la riga dei recapiti
   - .t4sp-side  colonna FAQ: titolo, ricerca a pillola, indice con il pallino
                 (da 992px fissata con t4fx.pin; sotto, striscia di chip .t4sp-chips)
   - .t4sp-cat / .t4sp-q  categorie e domande (tendina .t4-acc di t4-sections.css)
   - .t4sp-ask   fascia "Non hai trovato risposta?"
   Token, .t4-pill e .t4fx-mark da t4-fx.css; JS in t4-support.js.
   Misure in px con clamp(): la root del tema cambia valore con la larghezza.
   Con "riduci movimento" niente transizioni: aperture e pallino istantanei.
   ========================================================================== */
.t4sp { --t4sp-line: rgba(14, 20, 48, .16); background: var(--t4-page); color: var(--t4-navy); position: relative; }
.t4sp *, .t4sp *::before, .t4sp *::after { box-sizing: border-box; }
.t4sp--canali { padding: clamp(56px, 6vw, 112px) 0 clamp(40px, 4vw, 72px); }
.t4sp--faq { padding: clamp(32px, 4vw, 72px) 0 clamp(64px, 7vw, 128px); }
/* stessa colonna di .t4h__inner e di .u-0469 del tema */
.t4sp__wrap { margin: 0 auto; width: 89.23%; }
.t4sp__frame { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
  .t4sp__wrap { max-width: 108.375rem; width: 90.94%; }
  /* colonna sinistra mai sotto i 288px: tra 992 e 1300 il 25% stringeva la
     ricerca a 160px e il testo segnaposto restava tagliato */
  .t4sp__frame { column-gap: clamp(32px, 3.4vw, 72px); grid-template-columns: minmax(288px, 1fr) minmax(0, 3fr); }
}
.t4sp__main { min-width: 0; }

/* titoli della colonna sinistra */
.t4sp .t4sp__k { font-family: var(--t4-mono); font-size: 12px; letter-spacing: .1em; line-height: 1.3; margin: 0 0 14px; opacity: .75; text-transform: uppercase; }
.t4sp .t4sp__h2 {
  color: inherit;
  font-family: var(--t4-head);
  font-size: var(--t4-h2);
  font-weight: 500;
  letter-spacing: var(--t4-h2-track);
  line-height: 1.02;
  margin: 0;
}
.t4sp .t4sp__lead { font-family: var(--t4-head); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; margin: 16px 0 0; max-width: 34ch; opacity: .72; }

/* --------------------------------------------------------------------------
   Canali
   -------------------------------------------------------------------------- */
.t4sp-ch { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 600px) { .t4sp-ch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* quattro canali: 2 + 2 (in fila sarebbero troppo stretti per il bottone) */
@media (min-width: 1200px) {
  .t4sp-ch[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* cinque canali: 3 + 2, senza un riquadro orfano */
  .t4sp-ch[data-n="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .t4sp-ch[data-n="5"] > li { grid-column: span 2; }
  .t4sp-ch[data-n="5"] > li:nth-child(n + 4) { grid-column: span 3; }
  /* sei canali (con la community WhatsApp): 3 + 3 */
  .t4sp-ch[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.t4sp-ch > li { display: flex; min-width: 0; }
.t4sp-ch__card {
  background: #fff;
  border: 1px solid rgba(14, 20, 48, .06);
  border-radius: 16px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: clamp(20px, 1.7vw, 28px);
}
.t4sp-ch__i { align-items: center; background: rgba(36, 72, 216, .08); border-radius: 50%; color: var(--t4-blue); display: grid; height: 40px; justify-items: center; margin-bottom: 6px; width: 40px; }
.t4sp-ch__i svg { height: 20px; width: 20px; }
.t4sp .t4sp-ch__t { color: inherit; font-family: var(--t4-head); font-size: clamp(19px, 1.35vw, 24px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin: 0; text-transform: none; }
.t4sp .t4sp-ch__v { font-family: var(--t4-head); font-size: 15px; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.t4sp-ch__v a { color: inherit; font-family: inherit; text-decoration: underline; text-decoration-color: rgba(14, 20, 48, .3); text-underline-offset: 3px; }
.t4sp-ch__v a:hover { color: var(--t4-blue); text-decoration-color: currentColor; }
.t4sp .t4sp-ch__when { font-family: var(--t4-mono); font-size: 11px; letter-spacing: .06em; line-height: 1.5; margin: 0; opacity: .72; text-transform: uppercase; }
.t4sp-ch__rt { color: var(--t4-blue); white-space: nowrap; }
.t4sp-ch__go { margin-top: auto; padding-top: 10px; }
.t4sp-ch__go .t4-pill { max-width: 100%; }
.t4sp-ch__go .t4-pill__label { overflow: hidden; text-overflow: ellipsis; }
/* da telefono i canali sono bottoni a tutta larghezza */
@media (max-width: 599px) {
  .t4sp-ch__card { gap: 8px; }
  .t4sp-ch__i { display: none; }
  .t4sp-ch__go .t4-pill { justify-content: space-between; width: 100%; }
}

/* seconda riga, più discreta: segreteria, MP Kart Shop, dati societari, social */
.t4sp-more { display: grid; gap: 24px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin: clamp(32px, 3.4vw, 56px) 0 0; }
.t4sp-more__b { border-top: 1px solid var(--t4sp-line); min-width: 0; padding-top: 14px; }
.t4sp-more__b[hidden] { display: none; }
.t4sp .t4sp-more__b .t4sp-more__k { font-family: var(--t4-mono); font-size: 11px; letter-spacing: .08em; margin: 0 0 8px; opacity: .6; text-transform: uppercase; }
.t4sp .t4sp-more__b p, .t4sp .t4sp-more__b li { font-family: var(--t4-head); font-size: 15px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.t4sp-more__b ul { list-style: none; margin: 0; padding: 0; }
.t4sp-more__b a { color: inherit; font-family: inherit; text-decoration: none; }
.t4sp-more__b a:hover { color: var(--t4-blue); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   FAQ: colonna sinistra
   -------------------------------------------------------------------------- */
.t4sp-side__in { padding-bottom: 8px; }
.t4sp-search {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(14, 20, 48, .12);
  border-radius: 999px;
  color: var(--t4-navy);
  display: flex;
  gap: 10px;
  height: 52px;
  margin: 28px 0 0;
  max-width: 420px;
  padding: 0 6px 0 18px;
  transition: border-color var(--t4-dur) var(--t4-ease), box-shadow var(--t4-dur) var(--t4-ease);
}
.t4sp-search[hidden] { display: none; }
.t4sp-search:focus-within { border-color: var(--t4-blue); box-shadow: 0 0 0 3px rgba(36, 72, 216, .14); }
.t4sp-search > svg { flex: 0 0 auto; height: 18px; opacity: .55; width: 18px; }
.t4sp .t4sp-search__in {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  flex: 1;
  font-family: var(--t4-head);
  font-size: 16px;            /* 16px: da iPhone niente zoom al tocco */
  height: 100%;
  margin: 0;
  min-width: 0;
  outline: none;
  padding: 0;
}
.t4sp-search__in::placeholder { color: rgba(14, 20, 48, .45); }
.t4sp-search__in::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.t4sp-search__x { align-items: center; background: rgba(14, 20, 48, .06); border: 0; border-radius: 50%; color: inherit; cursor: pointer; display: grid; flex: 0 0 auto; height: 40px; justify-items: center; padding: 0; width: 40px; }
.t4sp-search__x[hidden] { display: none; }
.t4sp-search__x:hover { background: var(--t4-navy); color: #fff; }
.t4sp-search__x:focus-visible { outline: 2px solid var(--t4-blue); outline-offset: 2px; }
.t4sp-search__x svg { height: 14px; width: 14px; }
.t4sp .t4sp-count { font-family: var(--t4-mono); font-size: 11px; letter-spacing: .08em; margin: 12px 0 0 18px; min-height: 1.5em; opacity: .7; text-transform: uppercase; }

/* indice delle categorie: lo stesso pallino del menu (entra con scala e fa scivolare l'etichetta) */
.t4sp-idx { margin-top: 22px; }
.t4sp-idx ul { list-style: none; margin: 0; padding: 0; }
.t4sp-idx li[hidden] { display: none; }
/* voci non attive in colore pieno al 72% (6.7:1 sul grigio), non con
   l'opacità: a .55 erano 3.85:1, sotto la soglia AA */
.t4sp-idx__b {
  background: none;
  border: 0;
  color: rgba(14, 20, 48, .72);
  cursor: pointer;
  display: block;
  font-family: var(--t4-head);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.3;
  padding: 6px 0;
  position: relative;
  text-align: left;
  transition: color var(--t4-dur) var(--t4-ease);
  width: 100%;
}
.t4sp-idx__b::before {
  background: var(--t4-blue);
  border-radius: 50%;
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  top: calc(50% - 3px);
  transform: scale(0);
  transition: transform var(--t4-dur) var(--t4-ease);
  width: 6px;
}
.t4sp-idx__b > span { display: inline-block; transition: transform var(--t4-dur) var(--t4-ease); }
.t4sp-idx__b:hover { color: rgba(14, 20, 48, .9); }
.t4sp-idx__b[aria-current="true"] { color: var(--t4-navy); }
.t4sp-idx__b[aria-current="true"]::before { transform: scale(1); }
.t4sp-idx__b[aria-current="true"] > span { transform: translateX(14px); }
.t4sp-idx__b:focus-visible { outline: 2px solid var(--t4-blue); outline-offset: 2px; }
@media (max-width: 991px) { .t4sp-idx { display: none; } }

/* striscia di chip da telefono: ferma sotto la pillola dell'header (sempre in vista da P1);
   --t4sp-chips-top lo misura t4-support.js */
.t4sp-chips { display: none; }
.t4sp-chips[hidden] { display: none !important; }
@media (max-width: 991px) {
  .t4sp-chips {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    background: rgba(235, 235, 235, .82);
    border-bottom: 1px solid var(--t4sp-line);
    display: block;
    margin: 0 -5.385vw;
    position: sticky;
    top: var(--t4sp-chips-top, 84px);
    z-index: 6;
  }
  .t4sp-chips__scroll {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5.385vw, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5.385vw, #000 calc(100% - 32px), transparent 100%);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .t4sp-chips__scroll::-webkit-scrollbar { display: none; }
  .t4sp-chips ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 10px 5.385vw; width: max-content; }
  .t4sp-chips li[hidden] { display: none; }
  .t4sp-chips__b {
    background: #fff;
    border: 1px solid rgba(14, 20, 48, .14);
    border-radius: 999px;
    color: var(--t4-navy);
    cursor: pointer;
    font-family: var(--t4-head);
    font-size: 14px;
    height: 38px;
    padding: 0 16px;
    transition: background-color var(--t4-dur) var(--t4-ease), color var(--t4-dur) var(--t4-ease), border-color var(--t4-dur) var(--t4-ease);
    white-space: nowrap;
  }
  .t4sp-chips__b[aria-current="true"] { background: var(--t4-blue); border-color: var(--t4-blue); color: #fff; }
  .t4sp-chips__b:focus-visible { outline: 2px solid var(--t4-blue); outline-offset: 2px; }
  /* la linea sotto la striscia fa da bordo alla prima categoria */
  .t4sp-chips:not([hidden]) + .t4sp-faq > .t4sp-cat:first-child { border-top: 0; }
  .t4sp--faq .t4sp__frame { gap: 12px; }
}

/* --------------------------------------------------------------------------
   FAQ: categorie e domande
   -------------------------------------------------------------------------- */
.t4sp-cat { border-top: 1px solid var(--t4sp-line); display: grid; gap: 4px 24px; grid-template-columns: minmax(0, 1fr); padding: clamp(18px, 2vw, 32px) 0 clamp(28px, 3vw, 52px); }
.t4sp-cat[hidden] { display: none; }
/* nome su 2 colonne e domande su 8 da 1200px: sotto, con la colonna sinistra
   a 288px, le 2 colonne erano 97px e "Campionato" o "Manutenzione" sbordavano
   sulle domande; lì il nome sta sopra le domande */
@media (min-width: 1200px) {
  .t4sp-cat { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .t4sp-cat__h { grid-column: span 2; }
  .t4sp-cat__list { grid-column: span 8; }
}
/* da telefono il titolo della categoria non finisce sotto la striscia di chip */
.t4sp-cat { scroll-margin-top: 152px; }   /* pillola dell'header (~81px) + striscia (59px) + aria */
/* il titolo prende il fuoco solo da un link #faq-cat-<slug> (tabindex -1) */
.t4sp-cat__h:focus { outline: none; }
.t4sp-cat__h:focus-visible { border-radius: 4px; outline: 2px solid var(--t4-blue); outline-offset: 4px; }
.t4sp .t4sp-cat__h { color: inherit; font-family: var(--t4-head); font-size: clamp(22px, 1.75vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin: 0; padding: 14px 0 6px; text-transform: none; }
.t4sp-q { border-bottom: 1px solid var(--t4sp-line); scroll-margin-top: 152px; }
.t4sp-q[hidden] { display: none; }
.t4sp .t4sp-q__h { font: inherit; margin: 0; }
.t4sp-q__btn {
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-family: var(--t4-head);
  font-size: clamp(17px, 1.3vw, 22px);
  font-weight: 500;
  gap: 20px;
  justify-content: space-between;
  letter-spacing: -.015em;
  line-height: 1.3;
  padding: 18px 0;
  text-align: left;
  width: 100%;
}
/* anello del fuoco dentro i 18px di spazio del bottone (in alto e in basso):
   con l'outline a 4px di distanza copriva la prima riga della risposta aperta */
.t4sp-q__btn { position: relative; }
.t4sp-q__btn:focus-visible { outline: none; }
.t4sp-q__btn:focus-visible::after { border: 2px solid var(--t4-blue); border-radius: 8px; bottom: 6px; content: ""; left: -8px; pointer-events: none; position: absolute; right: -8px; top: 6px; }
.t4sp-q__ico {
  align-items: center;
  border: 1px solid rgba(14, 20, 48, .45);
  border-radius: 50%;
  display: grid;
  flex: 0 0 28px;
  height: 28px;
  justify-items: center;
  transition: background-color var(--t4-dur) var(--t4-ease), border-color var(--t4-dur) var(--t4-ease), color var(--t4-dur) var(--t4-ease);
  width: 28px;
}
.t4sp-q__ico svg { height: 12px; transition: transform var(--t4-dur) var(--t4-ease); width: 12px; }
.t4sp-q__btn:hover .t4sp-q__ico { border-color: var(--t4-navy); }
.t4sp-q__btn[aria-expanded="true"] .t4sp-q__ico { background: var(--t4-blue); border-color: var(--t4-blue); color: #fff; }
.t4sp-q__btn[aria-expanded="true"] .t4sp-q__ico svg { transform: rotate(180deg); }
.t4sp-q__body { font-family: var(--t4-head); font-size: clamp(15px, 1.1vw, 18px); line-height: 1.6; padding: 0 0 22px; }
@media (min-width: 992px) { .t4sp-q__body { padding-right: clamp(48px, 8vw, 120px); } }
.t4sp .t4sp-q__body p, .t4sp .t4sp-q__body ul, .t4sp .t4sp-q__body ol, .t4sp .t4sp-q__body blockquote { font: inherit; margin: 0 0 .7em; max-width: 68ch; }
.t4sp-q__body ul, .t4sp-q__body ol { padding-left: 1.2em; }
.t4sp-q__body > :last-child { margin-bottom: 0; }
.t4sp-q__body .t4sp-q__text a { color: var(--t4-blue); font-family: inherit; text-decoration: underline; text-underline-offset: 3px; }
.t4sp-q__foot { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; }
.t4sp-q__copy {
  align-items: center;
  background: none;
  border: 0;
  color: rgba(14, 20, 48, .6);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--t4-mono);
  font-size: 11px;
  gap: 6px;
  letter-spacing: .08em;
  min-height: 40px;
  padding: 0;
  text-transform: uppercase;
}
.t4sp-q__copy svg { height: 14px; width: 14px; }
.t4sp-q__copy:hover { color: var(--t4-blue); }
.t4sp-q__copy:focus-visible { outline: 2px solid var(--t4-blue); outline-offset: 2px; }
.t4sp-q__copy.is-done { color: var(--t4-blue); }

/* nessun risultato */
.t4sp-none { border-top: 1px solid var(--t4sp-line); padding: clamp(24px, 2.4vw, 40px) 0; }
.t4sp-none[hidden] { display: none; }
.t4sp .t4sp-none__t { color: inherit; font-family: var(--t4-head); font-size: clamp(22px, 1.75vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.t4sp .t4sp-none__p { font-family: var(--t4-head); font-size: 16px; line-height: 1.5; margin: 10px 0 0; opacity: .72; }
.t4sp-none__go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* --------------------------------------------------------------------------
   Fascia finale "Non hai trovato risposta?"
   -------------------------------------------------------------------------- */
.t4sp-ask { background: var(--t4-grad); color: #fff; padding: clamp(56px, 6vw, 112px) 0; }
.t4sp-ask .t4sp__k { opacity: .8; }
.t4sp .t4sp-ask__p { font-family: var(--t4-head); font-size: clamp(17px, 1.4vw, 24px); letter-spacing: -.01em; line-height: 1.4; margin: 0; max-width: 40ch; }
.t4sp-ask__go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* riduci movimento: tutto subito (anche la tendina di t4-sections.css) */
@media (prefers-reduced-motion: reduce) {
  .t4sp *, .t4sp *::before, .t4sp *::after { transition: none !important; }
  .t4sp .t4-acc, .t4sp .t4-acc__in, .t4sp .t4-acc__in > * { transition: none !important; }
}