/* ══════════════════════════════════════════════
   BLOG KURA — stile plugin (colori/font brand Kura)
   ══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* Le sezioni full-bleed (100vw + left:calc(-50vw + 50%)) possono generare
   uno scroll orizzontale di 1px sul body se la pagina ha una scrollbar
   verticale: blocchiamo lo scroll orizzontale solo sul body del template
   Canvas del plugin, senza toccare overflow-x delle singole sezioni
   (necessario per non rompere la sidebar "position: sticky"). */
body.kblog-plugin-canvas-body {
    overflow-x: hidden;
}

/* Difensivo: Elementor a volte lascia un piccolo margine/padding di
   default sul contenitore del widget o sulla sezione, che crea una
   sottile riga bianca visibile tra questo blocco e quello successivo
   (es. il footer). Lo azzeriamo qui, oltre al fix su wpautop piu' sotto.
   Selettore ":has(...)" senza ">" (discendente, non solo figlio diretto):
   Elementor a volte aggiunge un wrapper in piu' tra ".elementor-widget-
   container" e il markup del plugin, e il combinatore diretto non lo
   intercettava in quel caso. */
/* Senza un background-color qui, lo spazio sopra la navbar fissa (dove
   si intravede lo sfondo della pagina) e l'overscroll restano bianchi
   di default invece del crema del tema, a differenza delle altre pagine
   del sito che hanno gia' un colore di fondo impostato. */
html, body { margin: 0 !important; padding: 0 !important; background-color: var(--kb-cream) !important; }
.elementor-widget-container:has(.kblog-home-slider-wrapper),
.elementor-widget-container:has(.kblog-archive-wrapper),
.elementor-element:has(> .elementor-widget-container .kblog-home-slider-wrapper),
.elementor-element:has(> .elementor-widget-container .kblog-archive-wrapper) {
    padding: 0 !important;
    margin: 0 !important;
}
.kblog-home-slider-wrapper,
.kblog-archive-wrapper {
    margin: 0 !important;
    margin-bottom: 0 !important;
    display: block;
}

/*
 * Il font "All Round Gothic" ora installato sul sito e' il file completo
 * (non piu' la versione demo/trial): niente piu' bisogno del fallback
 * "Kura Glyph Fallback" per numeri/accenti (rimosso — con la versione
 * demo avrebbe continuato a rubare proprio quei caratteri, sostituendo
 * anche i glifi corretti del font vero con un font di sistema).
 */

:root {
    --kb-blue   : #24538e;
    --kb-cream  : #f0ebdd;
    --kb-orange : #cf5648;
    --kb-ocra   : #f5b349;
    --kb-dark   : #1a1a1a;
    --kb-font   : 'All Round Gothic', sans-serif;
    --kb-max    : 1200px;
}

.kblog-archive-wrapper, .kblog-home-slider-wrapper, .kblog-single-hero, .kblog-single-beige-bg {
    font-family: var(--kb-font);
}
.kblog-archive-wrapper *, .kblog-home-slider-wrapper *, .kblog-single-hero *, .kblog-single-beige-bg *,
.kblog-archive-wrapper *::before, .kblog-archive-wrapper *::after {
    box-sizing: border-box;
}

/* ══════════════════════════
   MASCHERA WAVY (coerente con Servizi/Lavori)
   ══════════════════════════ */
.kblog-wavy-mask img {
    /* Richiesta: immagine rettangolare classica al posto della maschera
       a zigzag, coerente con le altre immagini (card, feature) del sito. */
    border-radius: 32px;
}

/* ══════════════════════════════════════════════
   PAGINA ARCHIVIO — [kura_blog_archive]
   ══════════════════════════════════════════════ */
.kblog-archive-wrapper {
    background: var(--kb-cream);
    /* Padding-top maggiorato: la navbar Kura e' fixed e sta sopra questa
       sezione, serve piu' distanza per non far toccare il titolo alla
       pillola della navbar. */
    padding: 140px 64px 110px;
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
    overflow-x: hidden;
    margin: 0 !important;
    display: block;
}
/* WordPress a volte incapsula l'output di uno shortcode dentro un <p>
   con margine di default (wpautop): quel margine crea una sottile
   riga bianca visibile tra questa sezione e quella successiva
   (es. il footer). Lo azzeriamo se il wrapper si trova dentro un <p>. */
p:has(> .kblog-archive-wrapper),
p:has(> .kblog-home-slider-wrapper) {
    margin: 0 !important;
    padding: 0 !important;
}

.kblog-archive-title {
    max-width: var(--kb-max);
    margin: 0 auto 56px;
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-align: left;
    color: var(--kb-blue);
}

/* ── Articolo in evidenza ── */
.kblog-feature {
    max-width: var(--kb-max);
    margin: 0 auto 100px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: stretch;
}
.kblog-feature-image {
    overflow: hidden;
    border-radius: 32px;
    min-height: 420px;
}
.kblog-feature-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.kblog-feature-circle {
    background: var(--kb-blue);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12%;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.kblog-feature-circle:hover { transform: scale(1.015); }
.kblog-feature-eyebrow {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(240,235,221,0.75);
    margin: 0 0 18px;
}
.kblog-feature-title {
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--kb-cream);
    margin: 0 0 16px;
}
.kblog-feature-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(240,235,221,0.80);
    margin: 0;
}

/* ── Titolo "Articoli precedenti" ── */
.kblog-older-title {
    max-width: var(--kb-max);
    margin: 0 auto 40px;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--kb-blue);
    text-align: center;
}

/* ── Filtri ── */
.kblog-filters-wrap {
    max-width: var(--kb-max);
    margin: 0 auto 52px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.kblog-filters-wrap::-webkit-scrollbar { display: none; }
.kblog-filters {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    justify-content: flex-start;
    list-style: none; margin: 0; padding: 0;
}
.kblog-filters li { display: flex; align-items: center; }
.kblog-sep { color: var(--kb-blue); font-size: 1.1rem; opacity: 0.4; }
/* !important su ogni stato: <button> senza queste regole lascia passare
   lo stile rosso di default del tema su hover/focus/active (stesso
   problema gia' risolto sul burger della navbar e sulle frecce slider). */
.kblog-filter-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(36,83,142,0.55) !important;
    cursor: pointer; padding: 6px 4px;
    transition: color 0.22s;
}
.kblog-filter-btn:hover,
.kblog-filter-btn:focus,
.kblog-filter-btn:focus-visible,
.kblog-filter-btn:active,
.kblog-filter-btn.kblog-active {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--kb-orange) !important;
}

/* ── Griglia (desktop/laptop) ── */
.kblog-grid {
    max-width: var(--kb-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start; /* evita che la griglia "stiri" le card alla riga piu' alta, creando vuoti */
    gap: 40px 32px;
}
@media (max-width: 1100px) {
    .kblog-grid { grid-template-columns: repeat(2, 1fr); }
}

.kblog-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    /* .kblog-card e' un tag <a>: molti temi/Elementor applicano stili globali
       tipo "a { display:flex; justify-content:space-between }" per i bottoni.
       Se non dichiariamo qui justify-content/align-items esplicitamente,
       quella regola globale vince e distribuisce lo spazio tra il primo
       figlio (immagine) e l'ultimo (testo): e' la causa del vuoto. */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    /* Card crema con angoli molto arrotondati e bordo sottile, stile
       riferimento fornito: immagine "inset" (con margine tutt'intorno)
       invece di full-bleed, testo con generoso respiro sotto. */
    background: var(--kb-cream);
    border-radius: 28px;
    padding: 20px 20px 28px;
    border: 1.5px solid var(--kb-dark);
    transition: box-shadow 0.26s, transform 0.26s;
}

/* !important necessario: senza, questa regola perde comunque contro
   ".kblog-card { display: flex !important }" qui sopra, anche se ha
   specificita' maggiore (un !important vince sempre su uno senza,
   indipendentemente dalla specificita') — causa reale per cui il filtro
   non nascondeva mai le card anche dopo aver corretto il JS. */
.kblog-card[data-hidden="true"] { display: none !important; }
.kblog-card-image {
    overflow: hidden;
    border-radius: 20px;
    flex-shrink: 0;
    margin-bottom: 24px;
    aspect-ratio: 4 / 3;
}
.kblog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
    display: block;
}

.kblog-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0 6px;
}
.kblog-card-eyebrow {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--kb-orange);
    margin: 0 0 12px;
}
.kblog-card-title {
    font-size: 21px; font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--kb-blue);
    margin: 0;
    /* Altezza riservata per 3 righe: senza questa, titoli piu' corti
       (1-2 righe) lasciano la card piu' bassa di quelle con titolo lungo,
       creando il dislivello tra le card affiancate nella griglia/slider. */
    min-height: calc(21px * 1.25 * 3);
}
.kblog-card-author {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(36,83,142,0.55);
    /* margin-top:auto la spinge sempre in fondo alla card: cosi', quando
       lo slider allinea tutte le slide alla stessa altezza (align-items:
       stretch), lo spazio in eccesso finisce qui invece di lasciare un
       vuoto "sospeso" subito sotto il titolo. */
    margin: auto 0 0;
    padding-top: 14px;
}

/* ── Slider (tablet/mobile) ── */
.kblog-slider-wrap { display: none; position: relative; max-width: 100%; overflow: hidden; }
.kblog-slider-track {
    display: flex; gap: 20px;
    align-items: flex-start; /* niente stretch: ogni card resta alta quanto il suo contenuto */
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 8px 4px 16px;
}
.kblog-slider-track::-webkit-scrollbar { display: none; }
.kblog-slider-track .kblog-card {
    min-width: 300px; width: 300px; max-width: 300px;
    flex-shrink: 0; scroll-snap-align: start;
}

.kblog-slider-arrows { display: flex; justify-content: center; gap: 14px; margin-top: 20px; }
.kblog-arrow {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1.5px solid rgba(36,83,142,0.30);
    background: var(--kb-cream); color: var(--kb-blue);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.22s, color 0.22s, border-color 0.22s, opacity 0.22s;
    flex-shrink: 0;
}
.kblog-arrow:hover { background: var(--kb-blue); border-color: var(--kb-blue); color: var(--kb-cream); }
.kblog-arrow:disabled { opacity: 0.35; cursor: default; }

.kblog-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.kblog-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(36,83,142,0.20); border: none; cursor: pointer; padding: 0;
    transition: background 0.2s, width 0.2s;
}
.kblog-dot.kblog-active { background: var(--kb-blue); width: 24px; border-radius: 4px; }

@media (max-width: 767px) {
    .kblog-archive-wrapper { padding: 110px 20px 80px; }
    /* Su mobile niente slider con bordi laterali: le card dell'archivio
       (SOLO l'archivio, non lo slider home) vengono impilate una sotto
       l'altra a piena larghezza, piu' grandi, riusando la stessa griglia
       del desktop forzata a 1 colonna. */
    .kblog-grid { grid-template-columns: 1fr; gap: 32px; }
    .kblog-slider-wrap { display: none !important; }
    .kblog-feature { grid-template-columns: 1fr; }
    .kblog-feature-circle { aspect-ratio: auto; border-radius: 40px; padding: 44px 28px; }
    .kblog-feature-image { min-height: 280px; }
    .kblog-filters-wrap { overflow-x: visible; }
    .kblog-filters { justify-content: flex-start; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .kblog-archive-wrapper { padding: 120px 40px 80px; }
    .kblog-grid { grid-template-columns: 1fr; gap: 36px; }
    .kblog-slider-wrap { display: none !important; }
}

/* ══════════════════════════════════════════════
   SLIDER HOMEPAGE — [kura_blog_slider]
   ══════════════════════════════════════════════ */
.kblog-home-slider-wrapper {
    background: var(--kb-cream);
    padding: 0 64px 80px;
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
    overflow-x: hidden;
}
.kblog-home-title {
    max-width: var(--kb-max);
    margin: 0 auto 44px;
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    color: var(--kb-blue);
}
.kblog-home-slider-container { max-width: var(--kb-max); margin: 0 auto; position: relative; }
.kblog-home-swiper {
    overflow: hidden;
    /* La larghezza delle slide e' gestita da Swiper (slidesPerView + breakpoints):
       qui basta impedire che lo slide collassi/si deformi in altezza. */
}
/* Swiper stira di default ogni .swiper-slide all'altezza dello slide piu'
   alto tramite align-items:stretch sul .swiper-wrapper (il contenitore
   flex VERO, non lo slide stesso): impostare height/align-items sullo
   slide non basta a evitarlo, va corretto qui, sul wrapper. */
.kblog-home-swiper .swiper-wrapper {
    align-items: stretch;
}
.kblog-home-swiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: stretch;
}
.kblog-home-swiper .swiper-slide .kblog-card {
    width: 100%;
}
@media (max-width: 767px) {
    /* Solo lo slider deve arrivare a filo schermo: il padding orizzontale
       resta sul titolo, tolto dal wrapper (e quindi dal contenitore dello
       slider) cosi' le card non hanno piu' padding a destra/sinistra. */
    .kblog-home-slider-wrapper { padding: 0 0 60px; }
    .kblog-home-title { padding: 0 24px; }
}

/* ══════════════════════════════════════════════
   ARTICOLO SINGOLO — templates/single-articolo.php
   ══════════════════════════════════════════════ */
.kblog-single-hero {
    background-color: var(--kb-orange);
    width: 100vw;
    position: relative;
    left: calc(-50vw + 50%);
    overflow-x: hidden;
    padding: 140px 20px 60px;
    box-sizing: border-box;
}
.kblog-single-inner { max-width: var(--kb-max); margin: 0 auto; width: 100%; }
.kblog-top-bar { margin-bottom: 40px; }
/* Vedi commento su .kblog-content: titolo/eyebrow/autore ricevono qui il
   font-family esplicito perche' l'ereditarieta' da un antenato non basta se
   tema/Elementor applicano un font-family diretto su h1/p/span a livello globale. */
.kblog-btn-back, .kblog-single-eyebrow, .kblog-single-title,
.kblog-author-name, .kblog-author-role {
    font-family: var(--kb-font) !important;
}
.kblog-btn-back {
    color: var(--kb-cream); text-decoration: none;
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    border-bottom: 1px solid var(--kb-cream);
    padding-bottom: 2px; text-transform: uppercase;
    transition: opacity 0.3s ease;
}
.kblog-btn-back:hover { opacity: 0.7; }
.kblog-single-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(240,235,221,0.75);
    margin: 0 0 18px;
}
.kblog-single-title {
    font-size: clamp(30px, 5vw, 58px);
    font-weight: 700; line-height: 1.08;
    letter-spacing: -0.025em; text-transform: uppercase;
    color: var(--kb-cream);
    margin: 0 0 32px;
    max-width: 900px;
}
.kblog-single-author { display: flex; align-items: center; gap: 14px; padding-bottom: 60px; }
.kblog-author-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 2px solid rgba(240,235,221,0.5);
}
.kblog-author-info { display: flex; flex-direction: column; }
.kblog-author-name { font-size: 13px; font-weight: 700; color: var(--kb-cream); }
.kblog-author-role { font-size: 11px; color: rgba(240,235,221,0.70); }

.kblog-hero-image-wrapper {
    max-width: var(--kb-max);
    margin: 40px auto 0;
    height: 420px;
    overflow: hidden;
}
.kblog-hero-image { width: 100%; height: 100%; object-fit: cover; display: block; }

.kblog-single-beige-bg {
    background-color: var(--kb-cream) !important;
    width: 100vw;
    position: relative;
    left: calc(-50vw + 50%);
    padding: 100px 20px 100px;
    box-sizing: border-box;
}
.kblog-content-grid {
    display: grid;
    grid-template-columns: 1fr 64px;
    gap: 40px;
    align-items: start;
}
.kblog-content {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(36,83,142,0.85);
}
/* Il contenuto dell'articolo arriva da the_content(): tema/Elementor spesso
   applicano un font-family E un font-weight DIRETTAMENTE su h1-h6/p/li a
   livello globale. Una regola diretta sull'elemento vince sempre
   sull'ereditarieta', anche se meno specifica: per questo qui font e peso
   vanno dichiarati esplicitamente (con !important) invece di contare
   sull'eredita' da .kblog-single-beige-bg. Senza questo, il tema forzava
   tutto il testo (anche i paragrafi normali) al peso bold del tema. */
.kblog-content,
.kblog-content p, .kblog-content li, .kblog-content a, .kblog-content span {
    font-family: var(--kb-font) !important;
    font-weight: 400 !important;
}
.kblog-content h1, .kblog-content h2, .kblog-content h3, .kblog-content h4,
.kblog-content blockquote, .kblog-content strong, .kblog-content em {
    font-family: var(--kb-font) !important;
}
.kblog-content h2 {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700 !important;
    color: var(--kb-blue);
    letter-spacing: -0.015em;
    margin: 48px 0 20px;
}
.kblog-content h3 {
    font-size: 20px; font-weight: 700 !important; color: var(--kb-blue);
    margin: 36px 0 16px;
}
.kblog-content strong { font-weight: 700 !important; }
.kblog-content em { font-style: italic; }
.kblog-content p { margin: 0 0 22px; }
.kblog-content a { color: var(--kb-orange); text-decoration: underline; }
.kblog-content img {
    width: 100%; height: auto;
    border-radius: 20px;
    margin: 12px 0 32px;
    display: block;
}
.kblog-content blockquote {
    border-left: 3px solid var(--kb-orange);
    padding-left: 20px;
    margin: 32px 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--kb-blue);
}
.kblog-content ul, .kblog-content ol { margin: 0 0 22px; padding-left: 22px; }

/* ── Articoli correlati (fine pagina articolo) ── */
.kblog-related {
    max-width: var(--kb-max);
    margin: 40px auto 0;
    padding-top: 60px;
    border-top: 1px solid rgba(36,83,142,0.12);
}
.kblog-related-title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--kb-blue);
    margin: 0 0 32px;
}
.kblog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
    align-items: start;
}
@media (max-width: 900px) {
    .kblog-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .kblog-related-grid { grid-template-columns: 1fr; }
}

.kblog-share {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.kblog-share-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(36,83,142,0.45);
    margin-bottom: 6px;
}
.kblog-share-btn {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid rgba(36,83,142,0.25);
    background: transparent;
    color: var(--kb-blue);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none;
    transition: background 0.22s, color 0.22s, border-color 0.22s;
}
.kblog-share-btn:hover { background: var(--kb-blue); border-color: var(--kb-blue); color: var(--kb-cream); }

@media (max-width: 900px) {
    .kblog-content-grid { grid-template-columns: 1fr; }
    .kblog-share {
        position: static;
        flex-direction: row;
        justify-content: center;
        margin-top: 48px;
        padding-top: 32px;
        border-top: 1px solid rgba(36,83,142,0.12);
    }
    .kblog-share-label { display: none; }
}
@media (max-width: 640px) {
    .kblog-single-hero { padding: 110px 20px 32px; }
    .kblog-single-beige-bg { padding: 60px 20px 72px; }
    .kblog-hero-image-wrapper { margin-top: 24px; height: 220px; }
}