/* Pagina "documento" — landing certificazione e sottopagina tecnica.
   Caricato solo da templates/certificazione.html.twig.
   Tutto sotto .cert-* per non collidere con Spectre o con il tema.

   I colori e le misure vengono da theme://css/ogigia-tokens.css, caricato
   prima con priorita' 20. Qui non si ridichiara nessun valore che sia gia'
   un token. */

.cert {
  color: var(--og-dark);
  background: var(--og-white);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* La colonna di lettura. E' la ragione principale di questo file: il
   contenitore del tema e' largo 976px e su testo lungo produce righe da ~122
   caratteri, quasi il doppio del comodo. Qui si scende a --og-measure. */
.cert-wrap {
  max-width: var(--og-measure);
  margin: 0 auto;
  padding: 0 var(--og-gutter);
}

/* ---------- apertura ---------- */

/* padding-top generoso: l'header del tema e' fisso (4rem) e questa pagina,
   sovrascrivendo `block body`, non ha il #body-wrapper che lo compensa. */
.cert-hero {
  background: var(--og-cream);
  padding: calc(4rem + 40px) 0 40px;
}

.cert-eyebrow {
  font-size: var(--og-size-eyebrow);
  font-weight: var(--og-weight-bold);
  letter-spacing: var(--og-track-eyebrow);
  text-transform: uppercase;
  color: var(--og-blue-dark);
  margin: 0 0 14px;
}

/* Il tema con `title-h1h2` porterebbe l'h1 a weight 100: su un titolo di
   pagina lungo si sfilaccia. Selettore piu' lungo, niente !important. */
.cert .cert-title {
  font-size: 38px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: var(--og-track-display);
  color: var(--og-dark);
  margin: 0 0 16px;
}

.cert-lead {
  font-size: 17px;
  line-height: var(--og-leading-body);
  color: var(--og-muted);
  margin: 0;
}

/* ---------- sezioni ---------- */

.cert-section { padding: var(--og-section-y) 0; }
.cert-tinted  { background: var(--og-cream); }

.cert h2 {
  font-size: 22px;
  font-weight: var(--og-weight-bold);
  margin: 0 0 8px;
  color: var(--og-dark);
}

.cert h3 {
  font-size: 16.5px;
  font-weight: var(--og-weight-bold);
  margin: 0 0 6px;
  color: var(--og-dark);
}

.cert-section-lead,
.cert-proc-lead {
  font-size: 14.5px;
  color: var(--og-muted);
  margin: 0 0 24px;
  line-height: var(--og-leading-body);
}

/* Il testo di chiusura di una sezione, dopo il componente cura */
.cert-section-text {
  font-size: 15px;
  line-height: var(--og-leading-body);
  color: var(--og-dark);
  margin: 24px 0 0;
}

.cert-section-figure { margin: 20px 0 0; }

.cert-section-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ---------- corpo markdown ---------- */

.cert-prose h2 { margin-top: 34px; }
.cert-prose h2:first-child { margin-top: 0; }
.cert-prose h3 { margin-top: 24px; }

.cert-prose p {
  font-size: 15.5px;
  line-height: var(--og-leading-body);
  color: var(--og-dark);
  margin: 0 0 16px;
}

.cert-prose a { color: var(--og-blue-dark); }

.cert-prose ol,
.cert-prose ul { margin: 0 0 16px; padding-left: 22px; }

.cert-prose li {
  font-size: 15.5px;
  line-height: var(--og-leading-tight);
  margin-bottom: 8px;
}

/* Le righe orizzontali del markdown originale: qui le fasce fanno gia' il
   lavoro di separare, quindi l'hr diventa un respiro e non una linea. */
.cert-prose hr {
  border: 0;
  height: 1px;
  background: var(--og-line);
  margin: 32px 0;
}

/* ---------- procedure numerate ---------- */

.cert-proc + .cert-proc { margin-top: 34px; }

.cert-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cert-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
}

.cert-num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--og-blue);
  color: var(--og-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: var(--og-weight-bold);
}

.cert-step-body {
  font-size: 14.5px;
  line-height: var(--og-leading-tight);
  color: var(--og-dark);
  padding-top: 3px;
}

/* I sotto-passi (iPhone / Android dentro "Scarica Tonkeeper") */
.cert-substeps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.cert-substeps li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  color: var(--og-muted);
  margin-bottom: 4px;
}

.cert-substeps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--og-blue);
}

/* ---------- domande frequenti ---------- */

.cert-faq { margin: 0; }

.cert-faq-q {
  font-size: 15px;
  font-weight: var(--og-weight-bold);
  color: var(--og-dark);
  margin: 0 0 4px;
}

/* Domanda e risposta su righe distinte, sempre: nel markdown originale
   finivano nello stesso paragrafo e si leggevano di seguito. */
.cert-faq-a {
  font-size: 14.5px;
  line-height: var(--og-leading-body);
  color: var(--og-muted);
  margin: 0 0 20px;
}

.cert-faq-a:last-child { margin-bottom: 0; }
.cert-faq-a a { color: var(--og-blue-dark); }

/* ---------- immagini ---------- */

.cert-figure {
  margin: 0 auto;
  max-width: var(--og-measure);
  padding: 0 var(--og-gutter);
}

.cert-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Le foto larghe (apertura) escono dalla colonna di lettura */
.cert-figure--wide { max-width: 900px; }

/* Gli screenshot di telefono non vanno stirati a tutta colonna */
.cert-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 8px 0 20px;
}

.cert-prose img[src*="wallet-"],
.cert-prose img[src*="pagina-"] {
  max-width: 300px;
  border: 1px solid var(--og-line);
}

/* ---------- invito finale ---------- */

.cert-cta {
  background: var(--og-dark);
  padding: 48px 0 44px;
  text-align: center;
}

.cert-cta h2 { color: var(--og-white); font-size: 21px; margin: 0 0 10px; }
.cert-cta p  { color: var(--og-on-dark-lead); font-size: 14.5px; margin: 0 0 24px; }

.cert-button {
  display: inline-block;
  background: var(--og-blue);
  color: var(--og-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: var(--og-weight-bold);
  padding: 12px 26px;
  border-radius: 8px;
}

.cert-button:hover,
.cert-button:focus {
  background: var(--og-blue-dark);
  color: var(--og-white);
  text-decoration: none;
}

.cert-cta-note {
  margin-top: 22px !important;
  font-size: 12.5px;
  color: var(--og-on-dark-lead);
}

.cert-cta-note a { color: var(--og-on-dark-eyebrow); }

/* ---------- mobile ----------
   640px scritto a mano: le custom property non sono ammesse dentro @media,
   vedi la nota in ogigia-tokens.css. */

@media (max-width: 640px) {
  .cert .cert-title { font-size: 29px; }
  .cert-lead { font-size: 15.5px; }
  .cert-hero { padding: calc(4rem + 28px) 0 32px; }
  .cert-prose p, .cert-prose li { font-size: 15px; }
  .cert-figure--wide { max-width: 100%; }
}