/* ==========================================================================
   Footer a onde (variante A, 2026-11-03) — caricato su tutte le pagine.
   Fasce: azzurra (In Evidenza + newsletter), gialla (quattro colonne), riga finale.
   Le onde sono ::before delle fasce e sconfinano di 2px nella propria fascia:
   così non esiste un confine tra due elementi dello stesso colore e non compare
   nessuna riga, a qualunque larghezza o zoom.
   ========================================================================== */

.tl-footer {
    --tlf-azzurro: #5290a7;
    --tlf-giallo: #ffd67f;
    --tlf-petrolio: #236368;
    --tlf-prugna: #9d6381;
    --tlf-testo: #3c3c3b;
    --tlf-bordo: #ece4cc;
    --tlf-onda: 48px;
    position: relative;
    padding-top: var(--tlf-onda);
    background: #fdf8e9; /* fondo di #main nelle pagine interne */
    color: var(--tlf-testo);
    font-family: Inter, system-ui, sans-serif;
    text-align: left;
}
body.home .tl-footer { background: #f8f8f8; } /* fondo di #main in home */

.tl-footer ::selection { background: var(--tlf-giallo); color: var(--tlf-petrolio); }
.tl-footer a:focus-visible,
.tl-footer button:focus-visible,
.tl-footer input:focus-visible { outline: 3px solid var(--tlf-azzurro); outline-offset: 2px; }

/* --- Fasce e onde --- */
.tl-footer__blu,
.tl-footer__giallo { position: relative; }
.tl-footer__blu::before,
.tl-footer__giallo::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 2px);
    height: calc(var(--tlf-onda) + 2px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.tl-footer__blu {
    background: var(--tlf-azzurro);
    padding: 22px 40px calc(var(--tlf-onda) + 34px);
}
.tl-footer__blu::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 200 0, 400 48, 600 24 S 1000 0, 1200 26 V48 H0Z' fill='%235290a7'/%3E%3C/svg%3E");
}
.tl-footer__giallo {
    background: var(--tlf-giallo);
    padding: 26px 40px 34px;
}
.tl-footer__giallo::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C 200 48, 400 4, 600 26 S 1000 46, 1200 18 V48 H0Z' fill='%23ffd67f'/%3E%3C/svg%3E");
}
.tl-footer__evidenza,
.tl-footer__newsletter,
.tl-footer__colonne { max-width: 1180px; margin-left: auto; margin-right: auto; }

.tl-footer .tl-footer__titolo {
    margin: 0 0 14px;
    font-family: Bitter, Georgia, serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--tlf-petrolio);
    text-transform: none;
    text-align: left;
}
.tl-footer__blu .tl-footer__titolo { color: #fff; }

/* --- In Evidenza: tre card affiancate --- */
.tl-footer__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.tl-footer .article-card {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 3px 10px rgba(20, 60, 70, .18);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.tl-footer .article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(20, 60, 70, .24);
    z-index: 50;
}
.tl-footer .article-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}
.tl-footer .article-thumbnail {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
}
.tl-footer .article-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tl-footer .article-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tl-footer .article-title {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tlf-petrolio);
    text-align: left;
}
.tl-footer .article-date {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: .75rem;
    color: #6b6457;
}
.tl-footer .article-excerpt-wrapper { position: relative; }
.tl-footer .article-excerpt {
    margin: 0;
    font-size: .8rem;
    line-height: 1.5;
    color: #5b5650;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fumetto con l'estratto lungo, al passaggio del mouse (colori diversi per le tre card) */
.tl-footer .comic-bubble {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    width: 280px;
    max-width: 80vw;
    padding: 14px;
    border: 2px solid rgba(255, 215, 0, .4);
    border-radius: 12px;
    background: #fff3b0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .22);
    color: var(--tlf-testo);
    font-size: .82rem;
    line-height: 1.6;
    text-align: left;
    transform: translateX(-50%);
    z-index: 1000;
}
.tl-footer .comic-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #fff3b0;
}
.tl-footer .article-card:hover .comic-bubble { display: block; animation: tlf-fumetto .3s cubic-bezier(.2, .8, .2, 1); }
.tl-footer .article-card:nth-child(2) .comic-bubble { background: #ffdaeb; border-color: rgba(255, 105, 180, .4); }
.tl-footer .article-card:nth-child(2) .comic-bubble::after { border-top-color: #ffdaeb; }
.tl-footer .article-card:nth-child(3) .comic-bubble { background: #e0f2ff; border-color: rgba(135, 206, 235, .5); }
.tl-footer .article-card:nth-child(3) .comic-bubble::after { border-top-color: #e0f2ff; }
@keyframes tlf-fumetto {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --- Newsletter in una striscia (widget MailPoet dell'area Footer 3) --- */
.tl-footer__newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 24px;
}
.tl-footer .tl-footer__news-titolo {
    margin: 0;
    font-family: Bitter, Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
}
/* Il wrapper del widget eredita card, bordo e hover delle vecchie regole di style.css e responsive.css */
.tl-footer .tl-footer__newsletter .footer-widget-area {
    flex: 1 1 420px;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    transform: none !important; /* style.css sotto 768px la sposta e la ingrandisce al passaggio */
    display: block;
}
.tl-footer .tl-footer__newsletter .widget { margin: 0; padding: 0; background: none; }
.tl-footer .tl-footer__newsletter .widget-title { display: none; }
.tl-footer .tl-footer__newsletter form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    padding: 0 !important;
    background: none !important;
}
/* Stili propri di MailPoet (#mailpoet_form_1): bordo e padding del modulo, colonne del pulsante */
#colophon .tl-footer__newsletter .mailpoet_form,
#colophon .tl-footer__newsletter form.mailpoet_form { border: 0 !important; padding: 0 !important; background: none !important; }
#colophon .tl-footer__newsletter .mailpoet_form_columns_container,
#colophon .tl-footer__newsletter .mailpoet_form_columns,
#colophon .tl-footer__newsletter .mailpoet_form_column { display: contents; }
#colophon .tl-footer__newsletter fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
#colophon .tl-footer__newsletter .mailpoet_paragraph { margin: 0 !important; }
.tl-footer .tl-footer__newsletter input[type="email"],
.tl-footer .tl-footer__newsletter input.mailpoet_text {
    width: 300px !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 10px 16px !important;
    border: 1px solid var(--tlf-bordo) !important;
    border-radius: 999px !important;
    background: #fff !important;
    font: inherit;
    font-size: .95rem;
    color: var(--tlf-testo);
}
.tl-footer .tl-footer__newsletter input[type="submit"],
.tl-footer .tl-footer__newsletter button,
.tl-footer .tl-footer__newsletter .mailpoet_submit {
    width: auto !important;
    margin: 0 !important;
    padding: 10px 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--tlf-petrolio) !important;
    color: #fff !important;
    font: 600 .9rem Poppins, Inter, sans-serif !important;
    cursor: pointer;
    transition: background-color .2s ease;
}
.tl-footer .tl-footer__newsletter input[type="submit"]:hover,
.tl-footer .tl-footer__newsletter .mailpoet_submit:hover { background: var(--tlf-prugna) !important; }
.tl-footer .tl-footer__newsletter label,
.tl-footer .tl-footer__newsletter .mailpoet_checkbox_label { color: #fff; font-size: .8rem; }
.tl-footer .tl-footer__newsletter a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.tl-footer .tl-footer__newsletter .mailpoet_message { flex-basis: 100%; color: #fff; }

/* --- Fascia gialla: quattro colonne --- */
.tl-footer__colonne {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr 1fr;
    gap: 28px;
    font-size: .9rem;
    line-height: 1.6;
}
.tl-footer__colonne p { margin: 0; }
.tl-footer img.ri { display: block; width: 100%; max-width: 230px; height: auto; border-radius: 10px; }
.tl-footer__colonna--contatti ul { margin: 0; padding: 0; list-style: none; }
.tl-footer__colonna--contatti li { margin: 0 0 4px; }
.tl-footer__colonna--contatti li img { display: inline-block; height: 1.1em; width: auto; vertical-align: -.15em; }
.tl-footer__colonne a { color: var(--tlf-petrolio); text-underline-offset: 2px; }

/* Orari (dal modulo Impostazioni → Orari della libreria) */
.tl-orari__lista { margin: 0; }
.tl-orari__lista dt { font-weight: 600; }
.tl-orari__lista dd { margin: 0 0 6px; }
.tl-orari__avviso {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    color: var(--tlf-petrolio);
    font-weight: 600;
    line-height: 1.4;
}

/* Recensioni Google (Rich Showcase): allineate al resto della colonna */
.tl-footer .wp-gr { height: auto !important; overflow-y: visible !important; text-align: left !important; }
.tl-footer .wp-gr .wp-google-place { padding: 0 !important; }
.tl-footer .wp-gr .wp-google-name a,
.tl-footer .wp-gr .wp-google-name { color: var(--tlf-petrolio) !important; font-family: Inter, system-ui, sans-serif; }

/* --- Icone SVG (inc/icone.php) --- */
.tl-icona { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.25em; }
.tl-footer .site-info .tl-icona { width: 1.4em; height: 1.4em; vertical-align: -.35em; }

/* --- Riga finale --- */
.tl-footer .site-info { margin-top: 20px; margin-bottom: 0; }
.tl-footer > .site-info:last-of-type { margin-bottom: 20px; }
@media (max-width: 741px) and (orientation: portrait) {
    /* stesso spazio di style.css sotto la riga finale, per gli elementi fissi del telefono */
    .tl-footer > .site-info:last-of-type { margin-bottom: 60px; }
}

/* --- Schermi stretti --- */
@media (max-width: 1024px) {
    .tl-footer__colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .tl-footer__blu { padding-left: 16px; padding-right: 16px; }
    .tl-footer__giallo { padding-left: 16px; padding-right: 16px; }
    .tl-footer__cards { grid-template-columns: 1fr; gap: 12px; }
    .tl-footer .comic-bubble { display: none !important; }
}
@media (max-width: 600px) {
    .tl-footer__colonne { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 480px) {
    .tl-footer { --tlf-onda: 24px; }
    .tl-footer .tl-footer__newsletter input[type="email"],
    .tl-footer .tl-footer__newsletter input.mailpoet_text { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
    .tl-footer .article-card,
    .tl-footer .article-card:hover .comic-bubble { transition: none; animation: none; }
}

/* Libri dal Comò: #main cambia sfondo (js/cambiobackground.js); il footer lo segue, così sopra l'onda non resta una fascia di altro colore */
body.category-libridalcomo .tl-footer { transition: background-color 10s ease-in-out; }
body.category-libridalcomo .tl-footer.sfondo-colore-1 { background-color: #fdf8e9; }
body.category-libridalcomo .tl-footer.sfondo-colore-2 { background-color: #eef5f6; }
body.category-libridalcomo .tl-footer.sfondo-colore-3 { background-color: #f8eff3; }
body.category-libridalcomo .tl-footer.sfondo-colore-4 { background-color: #fff4da; }
@media (prefers-reduced-motion: reduce) {
    body.category-libridalcomo .tl-footer { transition: none; }
}