/* ==========================================================================
   ods-pages.css — le pagine di contenuto (tariffe, regolamento, ADR Center,
   FAQ, DSA, privacy, account piattaforme, trusted flagger) nello stile del
   footer e della home rifatti: tipografia sobria, misura stretta, spazio
   bianco, niente doppioni.

   COME SI APPLICA: questo foglio NON e' incluso dall'header (intoccabile,
   altri agenti ci lavorano). Lo linkano i quattro template di pagina in
   pagine/ (standard, prezzi, piattaforme, trusted flagger). La "scopatura"
   e' per inclusione: i selettori valgono solo dove il file e' linkato.
   Palette presa da ods-mobile.css (footer rifatto 12/08):
   ink #0f1c33 · testo #3c4a63 · muto #6b7a95 · filo rgba(51,65,92,.14).
   ========================================================================== */

/* --- 1. Il fascione scuro: da insegna da 4rem a striscia di titolo -------
   La navbar e' un pillolone FISSO che copre i primi 83px (desktop) / 112px
   (mobile) della pagina, misurati con getBoundingClientRect: il padding-top
   serve prima di tutto a far uscire il titolo da sotto la navbar. */
.header-interno {
  padding-top: 120px;
  padding-bottom: 48px;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Il titolo sta gia' nel fascione: l'h1 ripetuto sotto il breadcrumb resta
   per la semantica ma sparisce dalla vista (niente doppione). */
.breadcrumb-custom + * h1.mb-5,
h1.mb-5 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.breadcrumb-custom {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(51, 65, 92, 0.14);
}

.breadcrumb-custom a {
  color: #6b7a95 !important;
  letter-spacing: 0.06em;
}

/* --- 2. La colonna del testo: misura da lettura, niente offset bootstrap - */
.innnerPage {
  padding-top: 2.6rem;
  padding-bottom: 3.5rem;
}

.innnerPage .container.page_modulo {
  max-width: 880px;
}

.innnerPage .contentoreTesti {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0 !important;
}

/* --- 3. Tipografia dei contenuti (il markup arriva dal CMS) -------------- */
.innnerPage .contentoreTesti p,
.innnerPage .contentoreTesti li {
  color: #3c4a63;
  font-size: 1rem;
  line-height: 1.75;
}

.innnerPage .contentoreTesti p {
  margin-bottom: 1.1rem;
}

.innnerPage .contentoreTesti strong,
.innnerPage .contentoreTesti b {
  color: #0f1c33;
  font-weight: 700;
}

.innnerPage .contentoreTesti h1,
.innnerPage .contentoreTesti h2 {
  margin: 2.4rem 0 1rem;
  color: #0f1c33;
  font-size: 1.55rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.innnerPage .contentoreTesti h3 {
  margin: 2.2rem 0 0.9rem;
  color: #0f1c33;
  font-size: 1.25rem;
  font-weight: 720;
  line-height: 1.35;
}

.innnerPage .contentoreTesti h4 {
  margin: 1.9rem 0 0.7rem;
  color: #33415c;
  font-size: 1.02rem;
  font-weight: 700;
}

/* Il primo titolo del primo modulo non deve staccarsi dal breadcrumb di
   mezzo schermo: il respiro glielo da' gia' .innnerPage. */
.innnerPage .page_modulo:first-child .contentoreTesti > h1:first-child,
.innnerPage .page_modulo:first-child .contentoreTesti > h2:first-child,
.innnerPage .page_modulo:first-child .contentoreTesti > h3:first-child {
  margin-top: 0;
}

.innnerPage .contentoreTesti a {
  color: #33415c;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.innnerPage .contentoreTesti a:hover {
  color: #0f1c33;
}

.innnerPage hr {
  max-width: 880px;
  margin: 1.6rem auto;
  border: 0;
  border-top: 1px solid rgba(51, 65, 92, 0.14);
  opacity: 1;
}

/* --- 4. Le tabelle (tariffe): fili sottili, testata muta, niente zebre --- */
.innnerPage .contentoreTesti table {
  width: 100%;
  margin: 1.4rem 0 1.8rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.innnerPage .contentoreTesti table th {
  padding: 0.65rem 0.9rem;
  border: 0;
  border-bottom: 2px solid rgba(51, 65, 92, 0.3);
  color: #33415c;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  background: transparent;
}

.innnerPage .contentoreTesti table td {
  padding: 0.75rem 0.9rem;
  border: 0;
  border-bottom: 1px solid rgba(51, 65, 92, 0.14);
  color: #3c4a63;
  line-height: 1.6;
  vertical-align: top;
  background: transparent;
}

.innnerPage .contentoreTesti table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  box-shadow: none;
}

/* Su schermi stretti la tabella scorre nel suo contenitore, la pagina no. */
@media (max-width: 767px) {
  .innnerPage .contentoreTesti {
    overflow-x: auto;
  }
}

/* --- 5. Il box del form (account piattaforme): carta, non grigiume ------- */
.question-box {
  padding: 2rem 1.6rem;
  border: 1px solid rgba(51, 65, 92, 0.14);
  border-radius: 16px;
  background-color: #fff;
}

.question-box h3 {
  color: #0f1c33;
  font-weight: 720;
}

/* --- 6. Gli accordion (trusted flagger): fili, non scatoloni ------------- */
.innnerPage .accordion-item {
  border: 1px solid rgba(51, 65, 92, 0.14);
}

.innnerPage .accordion-button {
  color: #0f1c33;
  font-weight: 650;
}

.innnerPage .accordion-body {
  color: #3c4a63;
  line-height: 1.7;
}

/* --- 7. Telefono: la striscia del titolo non mangia mezzo schermo --------
   768px e non 767: styles.css usa max-width:768px per rialzare il titolo a
   3rem, e questa regola deve coprire lo stesso intervallo per vincerci. */
@media (max-width: 768px) {
  .header-interno {
    padding-top: 140px;   /* la navbar mobile arriva a 112px */
    padding-bottom: 30px;
    font-size: 1.45rem;
  }

  .innnerPage {
    padding-top: 1.8rem;
    padding-bottom: 2.4rem;
  }

  .innnerPage .contentoreTesti h1,
  .innnerPage .contentoreTesti h2 {
    font-size: 1.3rem;
  }

  .innnerPage .contentoreTesti h3 {
    font-size: 1.12rem;
  }

  .question-box {
    padding: 1.4rem 1.1rem;
  }
}