/**
 * Pagina dei risultati di ricerca.
 *
 * Layout a elenco: data piccola sopra, titolo in evidenza, estratto di
 * poche righe, linea sottile fra un risultato e l'altro.
 * I colori seguono quelli del sito (verde scuro #172e2e dell'header
 * delle schede) invece dell'azzurro del tema.
 */

.ar-ricerca {
    --ar-ric-titolo: #172e2e;
    --ar-ric-titolo-hover: #2f7d4f;
    --ar-ric-testo: #4a5568;
    --ar-ric-data: #8a94a6;
    --ar-ric-linea: #e2e8f0;
}

/* ---- Intestazione "Risultati della ricerca per: ..." ---- */
.ar-ricerca .ast-archive-description {
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.ar-ricerca .ast-archive-description .ast-archive-title,
.ar-ricerca .ast-archive-description h1 {
    color: var(--ar-ric-titolo);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ---- Un risultato ---- */
.ar-ricerca .ast-article-post,
.ar-ricerca article.post {
    padding: 22px 0 24px;
    border-bottom: 1px solid var(--ar-ric-linea);
    background: transparent;
    box-shadow: none;
}
.ar-ricerca .ast-article-post:last-of-type {
    border-bottom: 0;
}

/* Il tema affianca un riquadro immagine vuoto: senza thumbnail toglie
   spazio al testo, quindi si nasconde e il contenuto va a piena larghezza. */
.ar-ricerca .ast-blog-featured-section.ast-no-thumb {
    display: none;
}
.ar-ricerca .post-content.ast-width-md-6 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
}

/* ---- Data (sopra il titolo, come nel modello) ---- */
.ar-ricerca .entry-meta,
.ar-ricerca .ast-blog-meta-container {
    order: -1;
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--ar-ric-data);
}
.ar-ricerca .entry-meta a,
.ar-ricerca .entry-meta span {
    color: var(--ar-ric-data);
    font-weight: 400;
    text-decoration: none;
}
/* Autore e commenti non hanno senso su una scheda aziendale */
.ar-ricerca .entry-meta .posted-by,
.ar-ricerca .entry-meta .comments-link,
.ar-ricerca .entry-meta .author,
.ar-ricerca .entry-meta .vcard {
    display: none;
}

/* ---- Titolo ---- */
.ar-ricerca .entry-title {
    order: 0;
    margin: 0 0 8px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.ar-ricerca .entry-title a {
    color: var(--ar-ric-titolo);
    text-decoration: none;
    transition: color .15s ease;
}
.ar-ricerca .entry-title a:hover,
.ar-ricerca .entry-title a:focus {
    color: var(--ar-ric-titolo-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Estratto ---- */
.ar-ricerca .ast-excerpt-container,
.ar-ricerca .entry-content {
    order: 1;
    margin: 0;
    color: var(--ar-ric-testo);
    font-size: 16px;
    line-height: 1.6;
}
.ar-ricerca .ast-excerpt-container p,
.ar-ricerca .entry-content p {
    margin: 0;
}

/* L'ordine visivo (data, titolo, estratto) è imposto con flex perché il
   tema stampa il titolo prima della meta nel markup. */
.ar-ricerca .post-content {
    display: flex;
    flex-direction: column;
}

/* ---- "Leggi l'articolo »": fuori luogo per una scheda ---- */
.ar-ricerca .ast-read-more-container {
    display: none;
}

/* ---- Nessun risultato ---- */
.ar-ricerca .no-results .entry-title {
    color: var(--ar-ric-titolo);
}
.ar-ricerca .no-results .page-content {
    color: var(--ar-ric-testo);
    font-size: 16px;
    line-height: 1.7;
}

/* ---- Campo di ricerca nella pagina dei risultati ---- */
.ar-ricerca .search-form input[type="search"],
.ar-ricerca .search-field {
    min-height: 50px;
    line-height: 1.5;
    padding: 13px 16px;
    border-radius: 8px;
}

@media (max-width: 720px) {
    .ar-ricerca .entry-title {
        font-size: 21px;
    }
    .ar-ricerca .ast-excerpt-container,
    .ar-ricerca .entry-content {
        font-size: 15px;
    }
}

/* -------------------------------------------------------------------
   HEADER: voci di menu leggibili sopra la foto di sfondo.

   Nella pagina di ricerca il tema non applica l'header trasparente
   (la tratta come un archivio), quindi le voci del menu principale
   usano --ast-global-color-7 (#183030, verde scuro) e restano
   illeggibili sopra l'immagine chiara. L'header trasparente non e' la
   soluzione: azzererebbe lo sfondo (.main-header-bar{background:none})
   e la foto sparirebbe. Si imposta quindi solo il colore del testo,
   allineandolo a quello delle altre pagine.
   ------------------------------------------------------------------- */
/* Solo da tablet in su: sotto i 922px il menu diventa il pannello a
   panino, che ha sfondo bianco e vuole quindi testo scuro. Senza questo
   limite le voci del menu mobile sarebbero bianche su bianco. */
@media (min-width: 922px) {
    .ar-ricerca .main-header-bar .main-header-menu > .menu-item > .menu-link,
    .ar-ricerca .main-header-bar .ast-nav-menu > .menu-item > .menu-link,
    .ar-ricerca #ast-hf-menu-1 > .menu-item > .menu-link {
        color: var(--ast-global-color-5, #ffffff);
    }
    .ar-ricerca .main-header-bar .main-header-menu > .menu-item > .menu-link:hover,
    .ar-ricerca #ast-hf-menu-1 > .menu-item > .menu-link:hover {
        color: var(--ast-global-color-5, #ffffff);
        opacity: .85;
    }

    /* Ombra leggera: la foto ha zone chiare e zone scure, il testo bianco
       deve restare leggibile su entrambe. */
    .ar-ricerca .main-header-bar .main-header-menu .menu-link,
    .ar-ricerca #ast-hf-menu-1 .menu-link {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    /* Sottomenu a tendina: hanno sfondo proprio, il testo resta scuro */
    .ar-ricerca .main-header-menu .sub-menu .menu-link,
    .ar-ricerca #ast-hf-menu-1 .sub-menu .menu-link {
        color: var(--ast-global-color-7, #183030);
        text-shadow: none;
    }
}

/* Menu a panino (tablet e telefono): pannello chiaro, voci scure.
   Ribadito qui perche' la pagina di ricerca non ha l'header trasparente
   e il mu-plugin del menu mobile agisce su #ast-mobile-header. */
@media (max-width: 921px) {
    .ar-ricerca #ast-mobile-header .main-header-menu .menu-item > .menu-link,
    .ar-ricerca #ast-mobile-header .sub-menu .menu-item > .menu-link {
        color: #1a1a1a;
        text-shadow: none;
    }
}

/* -------------------------------------------------------------------
   Titolo "Le news" coerente con gli altri titoli del sito.

   Il banner degli archivi impone 32px
   (.ast-archive-entry-banner[data-post-type="post"] .ast-container h1),
   mentre gli H1 delle pagine come /il-progetto/ usano la scala
   tipografica globale: 74px desktop, 48px tablet, 36px mobile, font
   Bricolage Grotesque. Qui si riallinea a quella scala.
   ------------------------------------------------------------------- */
.ar-news .ast-archive-entry-banner[data-post-type="post"] .ast-container h1,
.ar-news .ast-archive-entry-banner .ast-container h1 {
    font-size: 60px;
    font-weight: 600;
    font-family: 'Bricolage Grotesque', sans-serif;
    line-height: 1.1em;
    letter-spacing: -2px;
}

@media (max-width: 921px) {
    .ar-news .ast-archive-entry-banner[data-post-type="post"] .ast-container h1,
    .ar-news .ast-archive-entry-banner .ast-container h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }
}

@media (max-width: 544px) {
    .ar-news .ast-archive-entry-banner[data-post-type="post"] .ast-container h1,
    .ar-news .ast-archive-entry-banner .ast-container h1 {
        font-size: 32px;
        letter-spacing: -1px;
    }
}

/* Titolo un po' piu' in basso dentro la fascia: la fascia centra il
   contenuto verticalmente (justify-content:center), quindi si aggiunge
   spazio sopra invece di cambiare l'allineamento. */
.ar-news .ast-archive-entry-banner[data-post-type="post"] {
    padding-top: 7em;
}

@media (max-width: 921px) {
    .ar-news .ast-archive-entry-banner[data-post-type="post"] {
        padding-top: 5em;
    }
}

@media (max-width: 544px) {
    .ar-news .ast-archive-entry-banner[data-post-type="post"] {
        padding-top: 4em;
    }
}