/*
Theme Name: Astra Child - Bassa Fedeltà
Template: astra
Description: Child theme per Astra - Bassa Fedeltà - Compatibile Astra Free
Version: 2.0.0
Author: Bassa Fedeltà
Text Domain: astra-child
*/

/* ========================================================================
   VARIABILI CSS
   ======================================================================== */

:root {
    --baf-red: #c92323;
    --baf-black: #333333;
    --baf-white: #ffffff;
    --baf-gray-medium: #888888;
    --baf-gray-light: #f5f5f5;
    
    --baf-font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --baf-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    --baf-font-size-body: 16px;
    --baf-font-size-h1: 36px;
    --baf-font-size-h2: 28px;
    --baf-font-size-h3: 22px;
    
    --baf-spacing-small: 10px;
    --baf-spacing-medium: 20px;
    --baf-spacing-large: 40px;
}

/* ========================================================================
   BASE STYLES
   ======================================================================== */

body {
    font-family: var(--baf-font-primary);
    font-size: var(--baf-font-size-body);
    color: var(--baf-black);
    line-height: 1.6;
}


/* nasconde il nome dell'autore */
.entry-meta {
	display: none;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
    font-family: var(--baf-font-heading);
    font-weight: 700;
    color: var(--baf-black);
}

h1 { font-size: var(--baf-font-size-h1); }
h2 { font-size: var(--baf-font-size-h2); }
h3 { font-size: var(--baf-font-size-h3); }

a {
    color: var(--baf-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--baf-red);
    opacity: 0.8;
}

/* ========================================================================
   HEADER - Struttura come bassafedelta.it
   ======================================================================== */

.site-header {
    border-bottom: 0px solid var(--baf-red);
}

.site-logo-img {
    max-height: 80px;
}

header.entry-header .entry-title {
    text-align: center;
    text-transform: capitalize;
}

/* ========================================================================
   MENU - Stile bassafedelta.it (senza forzare posizione)
   Usa Astra Customizer per posizionare il menu a destra
   ======================================================================== */

/* Stili menu principale */
.main-navigation a,
.main-header-menu a {
    font-family: var(--baf-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--baf-black);
    transition: color 0.3s ease;
}

.main-navigation a:hover,
.main-header-menu a:hover {
    color: var(--baf-red);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: var(--baf-red);
}


/* ========================================================================
   ABOVE HEADER - Carrello WooCommerce
   ======================================================================== */

.ast-above-header {
    background: var(--baf-white);
    padding: 8px 0;
}

/* Nascondi logo dall'Above Header */
.ast-above-header .site-branding,
.ast-above-header .site-logo-img {
    display: none;
}

/* Stili Above Header */
.ast-above-header a {
    font-family: var(--baf-font-primary);
    font-weight: 400;
    font-size: 12px;
    color: var(--baf-gray-medium);
    transition: color 0.3s ease;
}

.ast-above-header a:hover {
    color: var(--baf-red);
}

/* Widget carrello WooCommerce */
.ast-above-header .ast-header-woo-cart,
.ast-header-woo-cart {
    display: inline-flex;
    align-items: center;
}

.ast-header-woo-cart a {
    font-family: var(--baf-font-primary);
    font-size: 12px;
    color: var(--baf-gray-medium);
}

.ast-menu-cart-outline .ast-addon-cart-wrap {
	border-style: none;
}

.ast-header-woo-cart a:hover {
    color: var(--baf-red);
}

/* Badge contatore */
.ast-cart-menu-wrap .count {
    background: var(--baf-red);
    color: var(--baf-white);
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    margin-left: 5px;
}

/* ========================================================================
   ROSTER / ARTISTI - Replica bassafedelta.it
   ======================================================================== */

.artists-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px;
    margin: 60px 0;
    padding: 0;
    list-style: none;
}

.artist-card {
    text-align: center;
    transition: transform 0.3s ease;
}

.artist-card:hover {
    transform: translateY(-3px);
}

.artist-thumb {
    display: block;
    margin-bottom: 20px;
    overflow: hidden;
    line-height: 0;
}

.artist-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.artist-card:hover .artist-thumb img {
    opacity: 0.85;
}

.artist-name {
    font-family: var(--baf-font-primary);
    font-size: 16px;
    font-weight: 400;
    color: var(--baf-black);
    margin: 0 0 12px 0;
}

.artist-name a {
    color: var(--baf-black);
    text-transform: uppercase;
    font-weight: 500;
    transition: color 0.3s ease;
    text-decoration: none !important;
}

.artist-name a:hover {
    color: var(--baf-red);
}

.artist-readmore {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--baf-white);
    color: var(--baf-red);
    font-size: 10px;
    font-weight: 600;
    text-transform: lowercase;
    transition: all 0.3s ease;
}

.artist-readmore:hover {
    background-color: var(--baf-black);
    color: var(--baf-white);
    text-transform: uppercase;
}

/* Responsive artisti */
@media (max-width: 1024px) {
    .artists-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 25px;
    }
}

@media (max-width: 768px) {
    .artists-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }
    
    .artist-name { font-size: 14px; }
    .artist-readmore { font-size: 13px; padding: 6px 16px; }
}

@media (max-width: 480px) {
    .artists-gallery {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ========================================================================
   WOOCOMMERCE PRODOTTI
   ======================================================================== */

/* Astra azzera il padding di #primary per questo template
   (.ast-page-builder-template .site .site-content #primary {padding:0}), quindi
   sia i testi (titolo, breadcrumb, ordinamento) sia la griglia prodotti restano
   attaccati al bordo pagina: corretto qui a monte cosi' ricevono lo stesso margine. */
.woocommerce-shop #primary {
    padding: 40px !important;
}

.woocommerce ul.products {
    display: grid;
    /* !important: batte la regola di Astra (.woocommerce ul.products:not(.elementor-grid)),
       piu' specifica della nostra e non superabile dal pannello Astra (richiede licenza Pro) */
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--baf-spacing-large);
    /* Blocco griglia stretto e centrato: 3 x 220px + 2 gap = 740px, molto piu'
       stretto del contenitore pagina, cosi' restano ampi margini bianchi ai lati
       (richiesta cliente: immagini a 220px centrate con spazio ampio a dx/sx). */
    max-width: 740px;
    margin: 0 auto;
}

.woocommerce ul.products li.product {
    text-align: center;
}

.woocommerce ul.products li.product img {
    width: 220px;
    height: 220px;
    object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--baf-font-primary);
    font-size: 16px;
    font-weight: 500;
    color: var(--baf-black);
    text-transform: uppercase;
    margin: 15px 0 10px;
}

.woocommerce ul.products li.product .price {
    color: var(--baf-red);
    font-weight: 600;
}

.woocommerce ul.products li.product .button {
    background-color: var(--baf-white);
    color: var(--baf-red);
    border: 1px solid var(--baf-red);
    padding: 8px 20px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product .button:hover {
    background-color: var(--baf-red);
    color: var(--baf-white);
}

/* Responsive prodotti */
/* Soglia 544px: e' il breakpoint mobile reale di Astra (verificato nel CSS generato),
   sotto il quale Astra forza 2 colonne a prescindere dalla classe mobile-columns-*
   presente sul body, quindi serve !important per vincere anche li'. */
@media (max-width: 544px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        max-width: 220px;
        margin: 0 auto;
    }

    .woocommerce ul.products li.product img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* ========================================================================
   FOOTER
   ======================================================================== */

.site-footer {
    background-color: var(--baf-white);
    color: var(--baf-black);
    border-top: 2px solid var(--baf-red);
    padding: var(--baf-spacing-large) 0;
}

.site-footer p,
.site-footer .widget {
    color: var(--baf-black);
}

.site-footer a {
    color: var(--baf-red);
}

.site-footer a:hover {
    opacity: 0.8;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.footer-widget-area h2 {
    color: var(--baf-black);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========================================================================
   MOBILE MENU
   ======================================================================== */

@media (max-width: 768px) {
    /* Nascondi Above Header su mobile */
    .ast-mobile-header .ast-above-header {
        display: none;
    }
    
    /* Mostra carrello in mobile header */
    .ast-mobile-header .ast-header-woo-cart {
        display: inline-flex;
    }
    
    /* Stili menu mobile */
    .ast-mobile-popup-drawer {
        background: var(--baf-white);
    }
    
    .ast-mobile-popup-drawer .main-navigation a {
        font-family: var(--baf-font-heading);
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--baf-black);
    }
    
    .ast-mobile-popup-drawer .main-navigation a:hover,
    .ast-mobile-popup-drawer .current-menu-item > a {
        color: var(--baf-red);
    }
}

/* ========================================================================
   CHECKOUT
   ======================================================================== */

.bassafedelta-terms {
    background: var(--baf-gray-light);
    padding: 15px 20px;
    border-left: 3px solid var(--baf-red);
    margin: 20px 0;
}

.bassafedelta-terms a {
    color: var(--baf-red);
    text-decoration: underline;
    font-weight: 600;
}

/* ========================================================================
   UTILITIES
   ======================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-small { margin-top: var(--baf-spacing-small); }
.mb-small { margin-bottom: var(--baf-spacing-small); }
.mt-medium { margin-top: var(--baf-spacing-medium); }
.mb-medium { margin-bottom: var(--baf-spacing-medium); }
.mt-large { margin-top: var(--baf-spacing-large); }
.mb-large { margin-bottom: var(--baf-spacing-large); }

/* ========================================================================
   LAYOUT PAGINA ARTISTA - 2 COLONNE (Sidebar Sinistra + Contenuto)
   Replica bassafedelta.it
   ======================================================================== */

/* === CONTAINER PRINCIPALE 2 COLONNE === */

.single-artists .ast-container,
.single-artists #primary {
    display: grid;
    grid-template-columns: 380px 1fr; /* Sidebar 380px + contenuto resto */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* === SIDEBAR SINISTRA === */

.single-artists .artist-sidebar {
    grid-column: 1;
}

/* Immagine artista in sidebar */
.single-artists .artist-sidebar .post-thumbnail,
.single-artists .artist-sidebar .artist-image {
    margin-bottom: 30px;
}

.single-artists .artist-sidebar .post-thumbnail img,
.single-artists .artist-sidebar .artist-image img {
    width: 100%;
    max-width: 438px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* === FOTO ARTISTA - MINIATURA 220x220 CLICCABILE === */

.single-artists .artist-sidebar .post-thumbnail img,
.single-artists .artist-sidebar .artist-image img {
    width: 220px !important;
    height: 220px !important;
    max-width: 220px;
    object-fit: cover;
    cursor: zoom-in;
    transition: opacity 0.3s ease;
}

.single-artists .artist-sidebar .post-thumbnail a:hover img,
.single-artists .artist-sidebar .artist-image a:hover img {
    opacity: 0.85;
}

/* === TITOLO "PRODOTTI" - SPAZIATURA CORRETTA === */

.single-artists .artist-sidebar h3 {
    font-family: var(--baf-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--baf-black);
    text-transform: uppercase;
    margin: 40px 0 25px; /* MODIFICATO: 40px sopra, 25px sotto */
}

/* === LISTA PRODOTTI - LAYOUT VERTICALE === */

/* Lista verticale invece di griglia */
.single-artists .artist-sidebar .woocommerce ul.products {
    display: block !important; /* CAMBIATO da grid a block */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Ogni prodotto = riga orizzontale (immagine + testo) */
.single-artists .artist-sidebar .woocommerce ul.products li.product {
    display: flex !important; /* AGGIUNTO */
    flex-direction: row !important; /* AGGIUNTO */
    align-items: flex-start;
    gap: 15px;
    margin: 0 0 20px 0; /* MODIFICATO */
    padding-bottom: 20px; /* AGGIUNTO */
    border-bottom: 1px solid #e5e5e5; /* AGGIUNTO */
    text-align: left; /* CAMBIATO da center */
    width: 100% !important; /* AGGIUNTO */
}

.single-artists .artist-sidebar .woocommerce ul.products li.product:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Immagine prodotto - piccola 80x80 */
.single-artists .artist-sidebar .woocommerce ul.products li.product img {
    width: 80px !important; /* CAMBIATO */
    height: 80px !important; /* CAMBIATO */
    min-width: 80px; /* AGGIUNTO */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    flex-shrink: 0; /* AGGIUNTO - impedisce rimpicciolimento */
}

/* Titolo prodotto - allineato a sinistra */
.single-artists .artist-sidebar .woocommerce ul.products .woocommerce-loop-product__title {
    font-size: 14px; /* AUMENTATO da 12px */
    margin: 0 0 5px 0; /* MODIFICATO */
    text-align: left; /* AGGIUNTO */
    line-height: 1.4; /* AGGIUNTO */
}

.single-artists .artist-sidebar .woocommerce ul.products .woocommerce-loop-product__title:hover {
    color: var(--baf-red);
}

/* Prezzo prodotto */
.single-artists .artist-sidebar .woocommerce ul.products .price {
    font-size: 16px; /* AUMENTATO da 14px */
    color: var(--baf-red);
    font-weight: 600;
    margin: 0; /* AGGIUNTO */
}

/* Nascondi pulsante "Aggiungi al carrello" in sidebar */
.single-artists .artist-sidebar .woocommerce ul.products li.product .button,
.single-artists .artist-sidebar .woocommerce ul.products li.product .add_to_cart_button {
    display: none !important; /* AGGIUNTO */
}

/* === CONTENUTO PRINCIPALE DESTRA === */

.single-artists .entry-content,
.single-artists .artist-content {
    grid-column: 2;
}

/* Titolo artista */
.single-artists .entry-title {
    font-family: var(--baf-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--baf-black);
    margin: 0 0 20px;
}

/* Bio testo */
.single-artists .entry-content p {
    font-family: var(--baf-font-primary);
    font-size: 16px;
    line-height: 1.8;
    color: var(--baf-black);
    margin-bottom: 20px;
}

.single-artists .entry-content a {
    color: var(--baf-red);
    font-weight: 600;
}

/* === RESPONSIVE === */

@media (max-width: 1024px) {
    .single-artists .ast-container,
    .single-artists #primary {
        grid-template-columns: 300px 1fr;
        gap: 30px;
    }
    
    .single-artists .artist-sidebar .woocommerce ul.products {
        grid-template-columns: 1fr; /* 1 colonna su tablet */
    }
}

@media (max-width: 768px) {
    .single-artists .ast-container,
    .single-artists #primary {
        grid-template-columns: 1fr; /* 1 colonna su mobile */
        gap: 30px;
    }
    
    /* Sidebar diventa sopra il contenuto */
    .single-artists .artist-sidebar {
        grid-column: 1;
        order: 1;
    }
    
    .single-artists .entry-content,
    .single-artists .artist-content {
        grid-column: 1;
        order: 2;
    }
    
    .single-artists .artist-sidebar .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr); /* 2 colonne su mobile */
    }
}

/* ========================================================================
   ALTERNATIVA: Se Astra non supporta questo layout automaticamente
   Usa una classe personalizzata per wrapper manuale
   ======================================================================== */

/* Se crei manualmente la struttura HTML con classi custom */
.artist-page-wrapper {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}