/* =====================================================================
 * Meteopatico, tema chiaro
 * Fondo #F4F7FC, schede bianche, blu del marchio #1D4ED8, sole #FBBF24.
 * Caratteri: Sora (titoli e numeri), Figtree (testo).
 * ===================================================================== */
:root {
    color-scheme: light;
    --fondo: #F4F7FC;
    --scheda: #FFFFFF;
    --bordo: #E3E9F4;
    --bordo-forte: #D3DCEB;
    --velo: #F4F7FC;
    --ink: #0F172A;
    --ink-2: #334155;
    --ink-3: #5B6B85;
    --blu: #1D4ED8;
    --blu-scuro: #1E40AF;
    --blu-chiaro: #E8F0FE;
    --sole: #FBBF24;
    --tabbar-h: 64px;
}
body {
    font-family: 'Figtree', 'Noto Sans', system-ui, sans-serif;
    background-color: var(--fondo);
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--blu); color: #ffffff; }
.num { font-variant-numeric: tabular-nums; }
.font-display { font-family: 'Sora', 'Figtree', system-ui, sans-serif; }

/* Schede e pastiglie */
.glass-card {
    background: var(--scheda);
    border: 1px solid var(--bordo);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.glass-pill {
    background: var(--velo);
    border: 1px solid #E8EDF5;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Pulsante principale */
.btn-blu { background: var(--blu); color: #ffffff !important; transition: background-color .15s; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-blu:hover { background: var(--blu-scuro); }
.btn-blu.hidden { display: none; }

/* Campo di ricerca e pulsanti accanto */
.campo {
    background: var(--scheda); border: 1px solid var(--bordo-forte);
    transition: border-color .15s, box-shadow .15s;
}
input.campo { color: var(--ink); }
.campo::placeholder { color: #8A98B0; }
.campo:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); }
button.campo:hover { border-color: #B9C6DE; }

/* Navigazione */
.topnav { color: var(--ink-3); padding: .45rem .8rem; border-radius: 9999px; transition: color .15s, background-color .15s; }
.topnav:hover { color: var(--ink); background: #E8EDF5; }
.topnav.attiva { color: var(--blu); background: var(--blu-chiaro); }
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--bordo);
    padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .tab {
    height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 12px; font-weight: 700; color: #4B5A73;   /* contrasto almeno 4,5:1 */
}
.tabbar .tab i { font-size: 22px; }
.tabbar .tab.attiva { color: var(--blu); }
@media (max-width: 639px) {
    #sticky-ad { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}
@media (min-width: 640px) {
    #sticky-ad { bottom: 0; }
}

/* Schede di collegamento (Dettagli, Mappe) */
.link-card {
    display: block; padding: 1rem; border-radius: 1.25rem; background: var(--scheda); border: 1px solid var(--bordo);
    transition: border-color .15s, box-shadow .15s;
}
.link-card-colore { box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .45); }
.link-card-colore:hover { filter: brightness(1.07); }
.link-card:hover { border-color: #B9C6DE; box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .12); }
.link-card-icon { width: 2.5rem; height: 2.5rem; border-radius: .9rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }

/* Viste della home: Oggi / Dettagli */
main.in-dettagli > :not(#vista-dettagli) { display: none !important; }
#vista-dettagli:not(.hidden) { display: flex; }

/* Barra del giorno scelto (Dettagli) */
.day-bar-card { background: rgba(255, 255, 255, .97); border: 1px solid #C9D8FB; box-shadow: 0 8px 20px -12px rgba(15, 23, 42, .25); }

/* Scelte "dove sei" / "cosa fai" */
.chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.85rem; border-radius: 9999px; font-size: 0.85rem; font-weight: 600;
    background: var(--scheda); border: 1px solid var(--bordo-forte); color: var(--ink-2);
    transition: background-color .15s, border-color .15s, color .15s; white-space: nowrap;
}
.chip:hover { border-color: #93B0F0; color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--blu); border-color: var(--blu); color: #fff; }
.chip:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid var(--blu); outline-offset: 2px;
}

/* Approfondimenti richiudibili */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .caret { transform: rotate(180deg); }

/* Striscia oraria */
.hour-col { width: 58px; flex: 0 0 58px; }

#map { height: 340px; width: 100%; background: #e2e8f0; border-radius: 1rem; }
.ping-marker {
    width: 18px; height: 18px; background-color: var(--blu); border-radius: 50%;
    border: 3px solid #ffffff; box-shadow: 0 0 0 4px rgba(29, 78, 216, .25);
}
.leaflet-control-layers {
    background: rgba(255, 255, 255, 0.96) !important; border-radius: 0.75rem !important;
    border: 1px solid var(--bordo) !important; color: var(--ink) !important;
    font-size: 12px !important; padding: 6px 10px !important;
}

.loading-bar { height: 3px; background: linear-gradient(90deg, #1D4ED8, #FBBF24, #1D4ED8); background-size: 300% 100%; animation: loadingMove 1.2s linear infinite; }
@keyframes loadingMove { from { background-position: 0% 0; } to { background-position: 300% 0; } }

.ad-slot-leaderboard { min-height: 90px; width: 100%; max-width: 728px; border-radius: 1rem; overflow: hidden; }
.ad-slot-sticky { min-height: 50px; width: 100%; max-width: 728px; }
@media (min-width: 768px) { .ad-slot-sticky { min-height: 90px; } }
/* Riquadri pubblicitari nascosti finché CONFIG.ADS_ENABLED è false */
.ads-off .ad-slot-wrap, .ads-off #sticky-ad { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Cartina dell'Italia */
.italy-map {
    position: relative; width: 100%; max-width: 640px; margin: 0 auto; border-radius: 1.5rem; overflow: hidden;
    background: #E6EEFA;
    border: 1px solid var(--bordo);
}
.italy-map img { display: block; width: 100%; height: auto; }
/* L'icona è centrata sul punto della città; la temperatura sta sotto (o sopra con label-up) */
.map-pin {
    position: absolute; transform: translate(-50%, -10px); display: flex; flex-direction: column; align-items: center;
    text-decoration: none; line-height: 1; z-index: 1;
}
.map-pin i { font-size: 20px; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.35)); transition: transform .15s; }
.map-temp {
    margin-top: 1px; font-size: 10px; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--bordo); border-radius: 9999px; padding: 1px 4px;
}
.map-pin:hover i, .map-pin:focus-visible i { transform: scale(1.18); }
.map-pin:hover, .map-pin:focus-visible { z-index: 2; }
.map-pin.label-up { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 10px)); }
.label-up .map-temp { margin-top: 0; margin-bottom: 1px; }
.map-pin-extra { display: none; }
@media (max-width: 639px) { .italy-map { border-radius: 1rem; } }
@media (min-width: 640px) {
    .map-pin i { font-size: 28px; }
    .map-pin { transform: translate(-50%, -14px); }
    .map-pin.label-up { transform: translate(-50%, calc(-100% + 14px)); }
    .map-temp { font-size: 11px; }
    .map-pin-extra { display: flex; }
}
.map-slot { color: var(--ink-3); transition: background-color .15s, color .15s; }
.map-slot:hover { color: var(--ink); }
.map-slot[aria-pressed="true"] { background: var(--blu); color: #fff; }

/* Testo degli articoli */
.articolo { color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; }
.articolo > * + * { margin-top: 1rem; }
.articolo h2 { font-family: 'Sora', 'Figtree', sans-serif; color: var(--ink); font-size: 1.2rem; font-weight: 700; line-height: 1.35; margin-top: 2rem; }
.articolo strong { color: var(--ink); }
.articolo a { color: var(--blu); text-decoration: underline; text-underline-offset: 2px; }
.articolo a:hover { color: var(--blu-scuro); }
.articolo ul { list-style: disc; padding-left: 1.25rem; }
.articolo li + li { margin-top: 0.5rem; }
.articolo table { width: 100%; border-collapse: collapse; font-size: 0.9rem; display: block; overflow-x: auto; }
.articolo th { text-align: left; color: var(--ink-3); font-weight: 600; padding: 0.5rem 0.75rem 0.5rem 0; white-space: nowrap; }
.articolo td { border-top: 1px solid var(--bordo); padding: 0.5rem 0.75rem 0.5rem 0; font-variant-numeric: tabular-nums; }

/* Guida "Come funziona" */
.guide-tab { color: var(--ink-3); background: var(--velo); border: 1px solid var(--bordo); }
.guide-tab[aria-selected="true"] { color: #fff; background: var(--blu); border-color: var(--blu); }
.guide-card { display: flex; gap: .75rem; align-items: flex-start; text-align: left; padding: .9rem 1rem; border-radius: 1rem; background: var(--velo); border: 1px solid var(--bordo); transition: border-color .15s, background .15s; }
.guide-card:hover { border-color: #93B0F0; background: #EEF3FD; }
.guide-card > i { font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem; }
.guide-card strong { display: block; color: var(--ink); font-size: .875rem; margin-bottom: .15rem; }
.guide-card span { font-size: .78rem; color: var(--ink-3); line-height: 1.45; }
.guide-card[hidden] { display: none; }
.guide-h { font-family: 'Sora', 'Figtree', sans-serif; color: var(--ink); font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
.guide-feature { display: flex; gap: .85rem; padding: .9rem 1rem; border-radius: 1rem; background: var(--velo); border: 1px solid var(--bordo); }
.guide-feature > i { font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem; }
.guide-feature strong { color: var(--ink); font-size: .9rem; }
.guide-feature p { font-size: .8rem; color: var(--ink-3); margin-top: .2rem; line-height: 1.5; }

/* Condivisione */
.share-target { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .8rem .4rem; border-radius: 1rem; background: var(--velo); border: 1px solid var(--bordo); color: var(--ink-2); font-size: .75rem; font-weight: 700; text-align: center; cursor: pointer; }
.share-target:hover { border-color: #93B0F0; background: #EEF3FD; }
.share-target > i { font-size: 1.6rem; }
.share-target.col-span-3 { flex-direction: row; }

/* Etichetta del giorno selezionato nei titoli delle sezioni */
.day-chip { font-family: 'Figtree', sans-serif; display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; color: #1E3A8A; background: var(--blu-chiaro); border: 1px solid #C9D8FB; border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.day-chip:empty { display: none; }
#vista-dettagli > section, #vista-dettagli details, #vista-dettagli .scroll-mt-4 { scroll-margin-top: 6.5rem; }
/* Pagina Mappe */
.mappe-strato { image-rendering: auto; transition: opacity .25s; }
#mappe-map .leaflet-control-attribution { background: rgba(255,255,255,.85); color: var(--ink-3); font-size: 10px; }
#mappe-map .leaflet-control-attribution a { color: var(--blu); }
/* Titoli nel carattere del marchio */
h1, h2 { font-family: 'Sora', 'Figtree', system-ui, sans-serif; letter-spacing: -0.01em; }
@media (min-width: 640px) {
    .tabbar, .btn-blu.sm\:hidden { display: none; }
}

/* Località salvate: scorciatoie sopra la ricerca e stella nella scheda */
.luogo-chip {
    display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0;
    padding: .45rem .8rem; border-radius: 9999px; font-size: .85rem; font-weight: 700; white-space: nowrap;
    background: var(--scheda); border: 1px solid var(--bordo-forte); color: var(--ink-2);
    transition: border-color .15s, background-color .15s, color .15s;
}
.luogo-chip i { color: var(--sole); font-size: .95rem; }
.luogo-chip:hover { border-color: #93B0F0; color: var(--ink); }
.luogo-chip.attiva { background: var(--blu); border-color: var(--blu); color: #fff; }
.luogo-chip.attiva i { color: #FDE68A; }
.luogo-chip-gest i { color: var(--ink-3); }
#save-btn[aria-pressed="true"] { color: #F59E0B; background: #FFF7E6; border-color: #F8DDA0; }
.toast {
    position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
    z-index: 80; max-width: calc(100% - 32px); padding: .7rem 1rem; border-radius: 14px;
    background: #0F172A; color: #fff; font-size: .875rem; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(15,23,42,.5);
    opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.toast.vis { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 640px) { .toast { bottom: 24px; } }
.area-row { display: flex; align-items: center; gap: .25rem; padding: .7rem 0; }
.area-btn { width: 2rem; height: 2.25rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; color: var(--ink-3); flex-shrink: 0; }
.area-btn:hover { background: #EEF2F8; color: var(--ink); }
.area-btn:disabled { opacity: .3; pointer-events: none; }
/* Illustrazioni negli articoli */
.articolo figure { margin: 1.75rem 0; }
.articolo figure img { display: block; width: 100%; height: auto; border-radius: 1rem; border: 1px solid var(--bordo); background: #fff; }
.articolo figcaption { font-size: .82rem; line-height: 1.5; color: var(--ink-3); margin-top: .6rem; }
.articolo td, .articolo th { vertical-align: top; }

/* Logo sopra le mappe (resta negli screenshot) */
.mappa-logo { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 1px 6px rgba(15,23,42,.18); font: 800 13px/1 Sora, Figtree, sans-serif; color: #1D4ED8; pointer-events: none; user-select: none; }
.mappa-logo img { width: 26px; height: 26px; display: block; }
.leaflet-bottom.leaflet-left .mappa-logo { margin-left: 8px; margin-bottom: 8px; }
.con-logo .leaflet-bottom.leaflet-right { max-width: calc(100% - 172px); }
.con-logo .leaflet-bottom.leaflet-right .leaflet-control-attribution { white-space: normal; }
.mappa-radar-btn { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid #D5DEEC; background: #fff; color: #0F172A; font: 700 13px/1 Figtree, sans-serif; box-shadow: 0 1px 6px rgba(15,23,42,.18); cursor: pointer; }
.mappa-radar-btn i { font-size: 16px; color: #1D4ED8; }
.mappa-radar-btn[aria-pressed="true"] { background: #1D4ED8; border-color: #1D4ED8; color: #fff; }
.mappa-radar-btn[aria-pressed="true"] i { color: #fff; }
.mappa-radar-ora:empty { display: none; }
.mappa-radar-ora { font-weight: 600; opacity: .85; }
.art-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #1D4ED8; text-decoration: none; }
.art-link:hover span { text-decoration: underline; }
.art-link i { font-size: 15px; }
.art-link.hidden { display: none; }
/* Icona "variabile": nuvola grigio chiaro con il sole dietro */
.icona-variabile { position: relative; display: inline-block; width: 1.15em; height: 1em; line-height: 1; }
.icona-variabile i { position: absolute; line-height: 1; }
.icona-variabile .ph-sun { color: #F5A524; font-size: .78em; right: 0; top: -.06em; }
.icona-variabile .ph-cloud { color: #A9B6CA; font-size: .92em; left: 0; bottom: -.04em; text-shadow: 0 0 .04em #fff, .03em -.03em 0 #fff, -.03em -.03em 0 #fff; }

/* Caricamento: finché non arrivano i dati, al posto di "--°" e della giacca blocchi grigi (non sembrano dati veri) */
.in-attesa #now-temp, .in-attesa #now-desc, .in-attesa #now-minmax, .in-attesa #now-feel-label, .in-attesa #now-feel-temp,
.in-attesa #now-summary, .in-attesa #now-rain, .in-attesa #now-wind, .in-attesa #now-rh {
    color: transparent !important; background: linear-gradient(90deg, #E3E9F4, #EEF2F8, #E3E9F4); background-size: 200% 100%;
    border-radius: .5rem; animation: attesa 1.4s ease-in-out infinite; }
.in-attesa #now-feel-emoji, .in-attesa #now-icon { opacity: 0; }
.in-attesa #now-feel { border-color: #E3E9F4 !important; background: transparent !important; }
@keyframes attesa { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .in-attesa * { animation: none !important; } }

/* Nell'app installata niente testi di presentazione per Google né promozioni: chi la usa ogni giorno vuole il meteo */
@media (display-mode: standalone) {
    .solo-web { display: none !important; }
}

/* Schermi grandi: pagine meteo più larghe e vista Oggi su due colonne
   (a sinistra le previsioni della località, a destra Italia, app e il resto); i Dettagli restano in una colonna */
@media (min-width: 1024px) {
    .pagina-larga { max-width: 72rem; }
    #vista-oggi:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
    #vista-dettagli { width: 100%; max-width: 48rem; margin-left: auto; margin-right: auto; }
    /* sotto le due viste (home): presentazione e articoli affiancati */
    .pagina-larga #contenuto { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
    .pagina-larga #contenuto > #vista-oggi, .pagina-larga #contenuto > #vista-dettagli { grid-column: 1 / -1; }
}