/* ══════════════════════════════════════════════════════════════
   MODERN — restyling estetico (2026-11-05)
   Caricato DOPO light.css (layout.php). Solo aspetto: nessun markup cambia.
   Rollback: togliere la riga mag-modern-css in templates/layout.php.
   - titoli in DM Sans bold (il DM Serif ha font-display:optional e non è precaricato:
     alla prima visita usciva spesso Georgia/Times)
   - card bianche con ombra morbida, chip a pillola, pulsanti più decisi
   - home e landing più larghe (griglia a 3-4 colonne su desktop)
══════════════════════════════════════════════════════════════ */
:root {
    --mx-ink: #101828;
    --mx-text: #344054;
    --mx-muted: #5d6676;
    --mx-line: #e7eaf0;
    --mx-soft: #f6f7f9;
    --mx-radius: 16px;
    --mx-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .04);
    --mx-shadow-hover: 0 12px 32px -8px rgba(16, 24, 40, .16), 0 4px 10px -4px rgba(16, 24, 40, .06);
    --mx-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wp--preset--font-family--dm-serif: var(--mx-font);
    --vas-serif: var(--mx-font);
}

/* ── Tipografia ─────────────────────────────────────────────── */
body.va-body h1, body.va-body h2, body.va-body h3, body.va-body h4,
.arx-title, .arx-empty h2, .arx-cta strong, .mag-regalo-title, .ma-pass b, .mcr-amt-big b,
.mmag-art-nav a, .mmag-cta-txt strong, .mmag-related-head h2, .va-lm-brand, .va-modal-panel h3,
.has-dm-serif-font-family, .vas-title, .mmag-single-title {
    font-family: var(--mx-font) !important;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--mx-ink);
}
body.va-body h1, .arx-title, .mmag-single-title, .vas-title { line-height: 1.12; letter-spacing: -.032em; }
body.va-body h2 { line-height: 1.2; }
body.va-body h3, body.va-body h4 { letter-spacing: -.015em; line-height: 1.3; }
.mmag-single-title { font-size: clamp(30px, 4.2vw, 48px) !important; }
.mag-lp h2, .mmag-single-content h2 { font-size: clamp(22px, 2.6vw, 28px) !important; }
.mag-lp .mag-lead { font-size: clamp(17px, 1.6vw, 19px) !important; color: var(--mx-text) !important; line-height: 1.65; }

/* parola in evidenza negli H1 ("a <em>Milano</em>"): niente corsivo, evidenziatore giallo */
.arx-title em, .mmag-single-title em, .vas-title em {
    font-style: normal;
    color: inherit;
    background: linear-gradient(transparent 64%, rgba(232, 255, 71, .9) 64%, rgba(232, 255, 71, .9) 92%, transparent 92%);
    padding: 0 .06em;
}

/* ── Header ─────────────────────────────────────────────────── */
.va-navbar { background: rgba(255, 255, 255, .86) !important; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); }
.va-nav-brand-name { font-family: var(--mx-font) !important; font-weight: 800; font-size: 19px; letter-spacing: -.035em; color: var(--mx-ink); }
.va-nav-brand-name em { font-style: normal; color: #1f4f99; }
.va-nav-type { font-weight: 600; color: var(--mx-text); }

/* ── Pulsanti ───────────────────────────────────────────────── */
.mag-lp .mag-cta {
    border-radius: 12px !important;
    padding: 14px 24px !important;
    font-weight: 700 !important;
    letter-spacing: -.005em;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), inset 0 -2px 0 rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mag-lp .mag-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(16, 24, 40, .18); background-color: #dcf53a; }
.mag-lp .mag-cta.sec { background: #fff !important; color: var(--mx-ink) !important; border: 1px solid #d0d5dd !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.mag-lp .mag-cta.sec:hover { background: var(--mx-soft) !important; border-color: #b9c0cb !important; }

/* ── Home e landing: più larghe, testo comunque leggibile ──── */
body.page-id-2399 .mmag-single, body.page-id-35226 .mmag-single, body.page-id-35227 .mmag-single, body.page-id-35228 .mmag-single { max-width: 1100px !important; }
body.page-id-2399 .mmag-single-title, body.page-id-35226 .mmag-single-title, body.page-id-35227 .mmag-single-title, body.page-id-35228 .mmag-single-title,
.mag-lp > p, .mag-lp > h2, .mag-lp > h3, .mag-lp > ul:not(.mag-xlinks), .mag-lp > .mag-faq, .mag-lp > ol { max-width: 780px; }
.mag-lp > h2 { margin-top: 52px !important; }

/* ── Card annunci (home, landing) ───────────────────────────── */
.mag-regalo-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 20px !important; }
.mag-regalo-card {
    background: #fff !important;
    border: 1px solid var(--mx-line) !important;
    border-radius: var(--mx-radius) !important;
    box-shadow: var(--mx-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.mag-regalo-card:hover { transform: translateY(-3px) !important; box-shadow: var(--mx-shadow-hover) !important; border-color: #d9dde5 !important; }
.mag-regalo-imgwrap { background: var(--mx-soft) !important; }
.mag-regalo-body { padding: 14px 16px 16px !important; }
.mag-regalo-title { font-size: 16.5px !important; margin-bottom: 2px !important; }
.mag-regalo-sub { font-size: 13px !important; color: var(--mx-muted) !important; margin-bottom: 10px !important; }
.mag-regalo-chip { background: var(--mx-soft) !important; border: 0 !important; border-radius: 999px !important; padding: 4px 10px !important; color: var(--mx-text) !important; font-weight: 600 !important; }
.mag-regalo-chip:first-child { background: rgba(232, 255, 71, .55) !important; color: var(--mx-ink) !important; }
.mag-regalo-foot { border-top-color: var(--mx-line) !important; }
.mag-regalo-loc { color: var(--mx-muted) !important; font-size: 12.5px !important; }
.mag-regalo-cta { font-size: 13px !important; }

/* elenco città: pillole */
.mag-regalo-citta a { background: #fff !important; border: 1px solid var(--mx-line) !important; font-weight: 600; color: var(--mx-text) !important; transition: border-color .15s, background-color .15s; }
.mag-regalo-citta a:hover { border-color: #1f4f99 !important; background: #f4f7fc !important; }
.mag-regalo-citta a span { color: var(--mx-muted); font-weight: 500; }

/* ── Archivio ───────────────────────────────────────────────── */
.arx-card { box-shadow: var(--mx-shadow) !important; border-color: var(--mx-line) !important; transition: transform .2s ease, box-shadow .2s ease !important; }
.arx-card:hover { transform: translateY(-3px); box-shadow: var(--mx-shadow-hover) !important; }
.arx-card-title { font-weight: 700; letter-spacing: -.015em; }
.arx-card-price { font-weight: 800; letter-spacing: -.02em; }

/* ── Scheda annuncio ────────────────────────────────────────── */
.vas-title { font-size: clamp(28px, 3.4vw, 42px) !important; }
.vas-price { letter-spacing: -.03em !important; }

/* ── Footer ─────────────────────────────────────────────────── */
.mag-col-hd { font-weight: 700; letter-spacing: -.01em; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .mag-regalo-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .mag-regalo-body { padding: 10px 11px 12px !important; }
    .mag-regalo-title { font-size: 15px !important; }
    .mag-regalo-chip { padding: 3px 8px !important; font-size: 11px !important; }
    .mag-regalo-card:hover, .arx-card:hover { transform: none !important; }
    .mag-lp .mag-cta { display: block !important; text-align: center; margin: 8px 0 !important; }
    .mag-lp > h2 { margin-top: 40px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .mag-regalo-card, .arx-card, .mag-lp .mag-cta { transition: none !important; }
    .mag-regalo-card:hover, .arx-card:hover, .mag-lp .mag-cta:hover { transform: none !important; }
}