/*
 * Stili aggiunti dopo la conversione Astro → WP.
 * main.css è una build Tailwind già purgata: le utility che non comparivano nel
 * markup originale (es. md:grid-cols-2, gap-6) NON esistono. Per i componenti
 * nuovi si scrive CSS qui, con classi ump-* dedicate.
 */

/* ─── FOOTER ──────────────────────────────────────────────────────────────── */
/* --ump-logo-box: altezza della fascia logo, uguale nei 3 blocchi (UMP, Unipol, UniSalute), così testo e link
   sotto i loghi partono tutti alla stessa altezza. --ump-block-gap: spazio tra fascia logo e contenuto. */
.ump-footer { --ump-logo-box: 80px; --ump-block-gap: 16px; background: #F3F3F3; width: 100%; color: #000; }
.ump-footer__inner { padding: 32px 20px; display: flex; flex-direction: column; gap: 32px; }
.ump-footer__top { display: flex; flex-direction: column; gap: 32px; }
.ump-footer__partners { display: flex; flex-direction: column; gap: 32px; }
.ump-footer__block { display: flex; flex-direction: column; gap: var(--ump-block-gap); font-size: .875rem; line-height: 1.5; color: rgba(0,0,0,.8); }
.ump-footer__logo-box { height: var(--ump-logo-box); display: flex; align-items: center; }
/* Loghi Unipol/UniSalute a 48px; il logo UMP ha un disegno più sottile e a parità di altezza sembrava più piccolo,
   quindi occupa tutta la fascia (feedback cliente). */
.ump-footer__logo { height: 48px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; }
.ump-footer__ump .ump-footer__logo { height: var(--ump-logo-box); max-width: 260px; }
.ump-footer__logo-text { font-size: 1.25rem; font-weight: 700; color: #000; line-height: 48px; }
.ump-footer__block .ump-richtext p { margin-bottom: .5em; }
.ump-footer__link { font-weight: 600; color: #000; text-decoration: underline; width: fit-content; }
.ump-footer__link:hover { opacity: .75; }
/* Documenti: elenco in colonna, a destra del blocco UMP */
.ump-footer__docs { display: flex; flex-direction: column; gap: 12px; }
.ump-footer__docs a { font-size: .875rem; line-height: 1.3; color: #000; text-decoration: underline; }
.ump-footer__docs a:hover { opacity: .75; }
.ump-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,.1); }
.ump-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.ump-footer__top-btn { width: 56px; height: 56px; border-radius: 9999px; background: #1A1A1A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; cursor: pointer; transition: background-color .3s; }
.ump-footer__top-btn:hover { background: #000; }

.ump-footer__left { display: flex; flex-direction: column; gap: 32px; }

/* Da tablet in su: [UMP | Documenti] a sinistra, spazio libero, [Unipol | UniSalute] a destra.
   Se lo spazio non basta (tablet stretti), il gruppo Unipol/UniSalute va a capo sotto, allineato a sinistra. */
@media (min-width: 768px) {
  .ump-footer__inner { padding: 64px; }
  .ump-footer__top { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 48px 64px; }
  .ump-footer__left { flex-direction: row; gap: 48px; }
  .ump-footer__ump { flex: 0 1 340px; }
  /* Il primo documento parte alla stessa altezza del testo sotto i loghi (fascia logo + spazio).
     +.0875rem: compensa l'interlinea più stretta dei documenti (1.3 vs 1.5 a 14px) */
  .ump-footer__docs { flex: 0 1 300px; padding-top: calc(var(--ump-logo-box) + var(--ump-block-gap) + .0875rem); }
  .ump-footer__partners { flex-direction: row; gap: 48px; }
}

/* ─── HEADER: logo ────────────────────────────────────────────────────────── */
/* Più grande dei 40px originali (h-[40px] nel markup) su richiesta del cliente. L'id vince sulla utility Tailwind. */
#navbar-logo { height: 48px; }
@media (min-width: 768px) { #navbar-logo { height: 56px; } }

/* ─── CONTATTI: logo nel box info ─────────────────────────────────────────── */
.ump-contact-logo { height: 56px; width: auto; max-width: 260px; object-fit: contain; object-position: left center; }

/* ─── CONTATTI: banner reclami ────────────────────────────────────────────── */
.ump-reclamo-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ump-reclamo-aas { max-width: 640px; color: rgba(255,255,255,.85); line-height: 1.6; }

/* ─── PRODOTTI: disclaimer ────────────────────────────────────────────────── */
.ump-disclaimer { padding: 0 20px 32px; font-size: .75rem; line-height: 1.5; color: rgba(0,0,0,.6); }
@media (min-width: 768px) { .ump-disclaimer { padding: 0 64px 64px; } }

/* ─── PAGINE GENERICHE / LEGALI (page.php) ────────────────────────────────── */
.ump-page { margin-top: 80px; padding: 32px 20px 64px; }
.ump-page__inner { max-width: 960px; margin: 0 auto; }
.ump-page__title { margin-bottom: 32px; color: #000; }
.ump-legal { color: #000; font-size: 1rem; line-height: 1.6; }
.ump-legal h1 { font-size: 2rem; line-height: 1.2; margin: 1.5em 0 .5em; }
.ump-legal h2 { font-size: 1.625rem; line-height: 1.25; margin: 1.5em 0 .5em; }
.ump-legal h3 { font-size: 1.25rem; line-height: 1.3; margin: 1.25em 0 .5em; font-weight: 700; }
.ump-legal h4, .ump-legal h5, .ump-legal h6 { font-size: 1rem; margin: 1.25em 0 .5em; font-weight: 700; }
.ump-legal > :first-child { margin-top: 0; }
/* Link interni (indice → sezioni): l'header è fixed (80px), senza margine il titolo finirebbe sotto */
.ump-legal [id] { scroll-margin-top: 100px; }
.ump-legal p { margin-bottom: 1em; }
.ump-legal ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; }
.ump-legal ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1em; }
.ump-legal li { margin-bottom: .35em; }
.ump-legal a { color: #0050B4; text-decoration: underline; word-break: break-word; }
.ump-legal a:hover { opacity: .75; }
.ump-legal strong, .ump-legal b { font-weight: 700; }
.ump-legal em, .ump-legal i { font-style: italic; }
.ump-legal hr { border: 0; border-top: 1px solid rgba(0,0,0,.15); margin: 2em 0; }
/* Tabelle (es. elenco cookie): scorrono in orizzontale su mobile invece di rompere il layout */
.ump-legal table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1em 0 1.5em; font-size: .875rem; }
.ump-legal th, .ump-legal td { border: 1px solid rgba(0,0,0,.2); padding: 8px 12px; text-align: left; vertical-align: top; min-width: 120px; }
.ump-legal th, .ump-legal thead td { background: #F3F3F3; font-weight: 700; }
@media (min-width: 768px) { .ump-page { padding: 64px; } }