/*
Theme Name: Astra-Child 
Description: Aquest és un tema fill basat en 'Astra' per 
personalitzacions pròpies. 
Author: Lourdes Doliu 
Template: astra 
Version: 1.0.0 

*/

/* ============================================================
   ESTIL PER AL SHORTCODE QUE FILTRA LES NOTÍCIES A CADA POBLE
   ============================================================ */

/* BOTONS DE FILTRE */
.mossets-filtres a {
    background: #f5f1e8 !important;
    color: #6d5c47 !important;
    padding: 10px 22px !important;
    border-radius: 25px !important;
    border: 2px solid #e8dfd0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mossets-filtres a:hover {
    background: #8b7355 !important;
    color: white !important;
    border-color: #8b7355 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(139, 115, 85, 0.25) !important;
}

/* Botó actiu */
.mossets-filtres a.active {
    background: #8b7355 !important;
    color: white !important;
    border-color: #8b7355 !important;
    box-shadow: 0 5px 15px rgba(139, 115, 85, 0.2) !important;
}

/* CONTENIDOR DE NOTÍCIES */
.mossets-noticies-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
}

/* CADA NOTÍCIA */
.mossets-noticia {
    background: #f9f7f3 !important;
    border-radius: 14px !important;
    padding: 30px !important;
    border-left: 5px solid #8b7355 !important;
    transition: all 0.4s ease !important;
    border: 1px solid rgba(139, 115, 85, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.mossets-noticia:hover {
    background: white !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(139, 115, 85, 0.12) !important;
    border-left-width: 8px !important;
    border-left-color: #d4b483 !important;
}

/* Línia decorativa sota cada notícia */
.mossets-noticia:not(:last-child):after {
    content: "" !important;
    position: absolute !important;
    bottom: -15px !important;
    left: 10% !important;
    right: 10% !important;
    height: 1px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(139, 115, 85, 0.2) 50%, 
        transparent 100%) !important;
}

/* TÍTOL DE LA NOTÍCIA */
.mossets-noticia h4 {
    font-size: 22px !important;
    color: #2c2416 !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.4 !important;
}

.mossets-noticia h4 a {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    padding-bottom: 5px !important;
    transition: all 0.3s ease !important;
    display: inline !important;
}

.mossets-noticia:hover h4 a {
    color: #8b7355 !important;
    border-bottom-color: #d4b483 !important;
}

/* DATA */
.mossets-data .post-date {
    background: white !important;
    color: #6d5c47 !important;
    padding: 6px 15px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
    border: 1px solid #e8dfd0 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03) !important;
}

.mossets-data .post-date:before {
    content: "📅 " !important;
    margin-right: 5px !important;
    opacity: 0.8 !important;
}

/* EXTRACTE */
.mossets-noticia .excerpt {
    color: #4a4235 !important;
    line-height: 1.8 !important;
    font-size: 16px !important;
    margin-bottom: 20px !important;
    font-family: 'Merriweather', 'Georgia', serif !important;
}

/* BOTÓ "Llegeix més" */
.mossets-noticia .read-more {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    color: #8b7355 !important;
    padding: 10px 24px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 2px solid #8b7355 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
}

.mossets-noticia:hover .read-more {
    background: #8b7355 !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(139, 115, 85, 0.2) !important;
}

.mossets-noticia .read-more:after {
    content: "→" !important;
    font-size: 18px !important;
    transition: transform 0.3s ease !important;
}

.mossets-noticia:hover .read-more:after {
    transform: translateX(5px) !important;
}

/* IMATGE */
.mossets-imatge {
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    border: 2px solid #f0ebe1 !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
}

.mossets-imatge img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    filter: sepia(0.2) contrast(1.05) !important;
    transition: transform 0.6s ease !important;
}

.mossets-noticia:hover .mossets-imatge img {
    transform: scale(1.05) !important;
    filter: sepia(0.1) contrast(1.1) !important;
}

/* QUAN NO HI HA RESULTATS */
.mossets-noticies-container:empty:before {
    content: "No hi ha entrades amb aquest filtre." !important;
    display: block !important;
    text-align: center !important;
    padding: 50px 20px !important;
    background: #f9f7f3 !important;
    border-radius: 12px !important;
    border: 2px dashed #d8cebc !important;
    color: #6d5c47 !important;
    font-style: italic !important;
    font-size: 18px !important;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .mossets-filtres-container {
        padding: 25px !important;
        margin: 30px 0 !important;
    }
    
    .mossets-filtres {
        gap: 10px !important;
    }
    
    .mossets-filtres a {
        padding: 8px 18px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 768px) {
    .mossets-filtres-container {
        padding: 20px !important;
        border-radius: 12px !important;
    }
    
    .mossets-filtres-container > h3:first-child {
        font-size: 22px !important;
        padding-left: 35px !important;
        margin-bottom: 25px !important;
    }
    
    .mossets-filtres-container > h3:first-child:before {
        font-size: 24px !important;
    }
    
    .mossets-noticia {
        padding: 20px !important;
    }
    
    .mossets-noticia h4 {
        font-size: 19px !important;
    }
    
    .mossets-imatge img {
        height: 160px !important;
    }
}

/* ANIMACIÓ D'ENTRADA */
@keyframes entradaNoticia {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mossets-noticia {
    animation: entradaNoticia 0.5s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.1s);
    opacity: 0;
}


/* ====== MAIN SENSE VORES ==== */

/* Eliminar fons i bordes de la pàgina Qui Som */

.post-104,
article#post-104,
body.page-id-104 article {
    border: none !important;
    box-shadow: none !important;
}




/* ============================================
   VERSIÓ DISCRETA - ASTRA RELATED POSTS
   Elegant, integrat, sense cridar l'atenció
   ============================================ */

/* Contenidor suau i integrat */
.ast-related-posts-container {
    background: transparent !important;
    border: none !important;
    padding: 30px 0 !important;
    margin: 50px 0 !important;
    position: relative !important;
    box-shadow: none !important;
}

/* Línia subtil de separació abans de la secció */
.ast-related-posts-container:before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(125, 107, 82, 0.15) 50%, 
        transparent 100%) !important;
}

/* Títol discret */
.ast-related-posts-title {
    color: #666 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 30px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(125, 107, 82, 0.1) !important;
    text-align: left !important;
    font-family: inherit !important;
}

/* Entrades - estil minimalista */
.ast-related-post {
    background: white !important;
    border-radius: 6px !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-left: 3px solid rgba(125, 107, 82, 0.3) !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Hover molt subtil */
.ast-related-post:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    border-left-color: rgba(125, 107, 82, 0.6) !important;
}

/* Imatge elegant */
.ast-related-post-image {
    margin-bottom: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.ast-related-post-image img {
    height: 160px !important;
    filter: grayscale(0.1) brightness(0.98) !important;
    transition: transform 0.4s ease !important;
}

.ast-related-post:hover .ast-related-post-image img {
    transform: scale(1.03) !important;
    filter: grayscale(0) brightness(1) !important;
}

/* Contingut textual discret */
.ast-related-post-content {
    padding: 20px !important;
}

.ast-related-post-title {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
}

.ast-related-post-title a {
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.ast-related-post-title a:hover {
    color: #5d4c3a !important;
}

/* 15. EXTRACTE DE LES NOTÍCIES */
.mossets-extracte {
    color: #4a4235 !important;
    line-height: 1.7 !important;
    font-size: 15px !important;
    margin: 15px 0 !important;
    padding: 15px 0 !important;
    border-top: 1px solid rgba(139, 115, 85, 0.1) !important;
    border-bottom: 1px solid rgba(139, 115, 85, 0.1) !important;
    font-family: 'Merriweather', 'Georgia', serif !important;
}

/* 16. BOTÓ "Llegeix més" */
.mossets-llegir-mes {
    display: inline-block !important;
    background: transparent !important;
    color: #8b7355 !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 2px solid #8b7355 !important;
    margin-top: 10px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.mossets-llegir-mes:hover {
    background: #8b7355 !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(139, 115, 85, 0.2) !important;
}

/* Data molt discreta */
.ast-related-post-date {
    color: #888 !important;
    font-size: 12px !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}

/* Sense botó "Llegir més" (o molt discret) */
.ast-related-post-readmore {
    display: none !important; 
}

/* ======== Botó Cardó =========== */

/* Botó Cardó - Versió Compacta */
.menu-item a[href*="cardo"] {
    background: linear-gradient(135deg, #8b7355, #6d5c47) !important;
    color: white !important;
    padding: 6px 18px !important;          /* Menys padding = més compacte */
    border-radius: 20px !important;        /* Radius més petit */
    font-weight: 700 !important;
    font-size: 14px !important;            /* Mida de lletra controlada */
    margin: 0 8px !important;              /* Menys marge */
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    line-height: 1.4 !important;           /* Control alçada línia */
    height: auto !important;               /* No forçar alçada */
    min-height: unset !important;          /* Eliminar mínims */
    text-align: center !important;
}

.menu-item a[href*="cardo"]:hover {
    background: linear-gradient(135deg, #6d5c47, #5d4c3a) !important;
    transform: translateY(-2px) !important; /* Moviment més subtil */
    box-shadow: 0 5px 15px rgba(139, 115, 85, 0.25) !important;
    border-color: #d4b483 !important;
}

/* Versió mòbil - encara més compacte */
@media (max-width: 768px) {
    .menu-item a[href*="cardo"] {
        padding: 5px 14px !important;      /* Encara més petit a mòbil */
        font-size: 13px !important;
        margin: 0 5px !important;
        border-radius: 18px !important;
        display: inline-flex !important;   /* Millor control */
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;    /* Evita salt de línia */
        max-width: 120px !important;       /* Amplada màxima */
    }
}

/* Si és massa ample al mòbil, prova això: */
@media (max-width: 480px) {
    .menu-item a[href*="cardo"] {
        padding: 4px 12px !important;
        font-size: 12px !important;
        max-width: 100px !important;
        letter-spacing: 0.5px !important;  /* Lletra més compacta */
    }
}

/* ============================================
   MILLORA LLISTES D'ENTRADES - ASTRA BLOG (CORREGIT)
   ============================================ */

/* 1. RESET - Elimina el grid que causava problemes */
.ast-row {
    display: block !important; /* Força el comportament original */
    grid-template-columns: none !important;
    gap: normal !important;
}

/* 2. CADA ENTRADA A LA LLISTA (sense trencar layout) */
article.post,
article.page {
    background: white !important;
    border-radius: 16px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    border: 2px solid rgba(139, 115, 85, 0.1) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important; /* Assegura ample complet */
    float: none !important; /* Evita problemes de float */
    clear: both !important;
}

article.post:hover,
article.page:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(139, 115, 85, 0.1) !important;
    border-color: rgba(139, 115, 85, 0.3) !important;
}

/* 3. TÍTOL DE L'ENTRADA - MÉS MODERN */
.entry-title,
h2.entry-title {
    font-family: 'Georgia', 'Times New Roman', serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #2c2416 !important;
    margin-bottom: 15px !important;
    line-height: 1.3 !important;
    border-bottom: none !important;
    font-style: normal !important;
    text-decoration: none !important;
}

.entry-title a {
    color: inherit !important;
    text-decoration: none !important;
    background: linear-gradient(120deg, transparent 0%, transparent 100%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    transition: background-size 0.3s ease !important;
    padding-bottom: 5px !important;
    display: inline !important;
}

.entry-title a:hover {
    color: #8b7355 !important;
    background-size: 100% 3px;
    background-image: linear-gradient(120deg, #d4b483 0%, #d4b483 100%) !important;
}

/* 4. META-INFORMACIÓ */
.entry-meta {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(139, 115, 85, 0.1) !important;
}

.posted-on {
    background: #f5f1e8 !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    border: 1px solid #e8dfd0 !important;
    font-weight: 500 !important;
    color: #6d5c47 !important;
    display: inline-block !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
}

.posted-on:before {
    content: "📅 " !important;
    margin-right: 5px !important;
}

/* 5. IMATGE DESTACADA */
.post-thumbnail {
    margin: 25px 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 2px solid #f0ebe1 !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
}

.post-thumbnail img {
    width: 100% !important;
    height: auto !important;
    transition: transform 0.5s ease !important;
    filter: sepia(0.1) contrast(1.05) !important;
}

article:hover .post-thumbnail img {
    transform: scale(1.03) !important;
    filter: sepia(0) contrast(1.1) !important;
}

/* 6. EXTRACTE */
.entry-content,
.entry-summary {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #4a4235 !important;
    margin-bottom: 25px !important;
}

/* 7. BOTÓ "CONTINUA LLEGINT" */
.read-more {
    display: inline-block !important;
    background: transparent !important;
    color: #8b7355 !important;
    padding: 10px 22px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 2px solid #8b7355 !important;
    transition: all 0.3s ease !important;
    margin-top: 10px !important;
}

.read-more:hover {
    background: #8b7355 !important;
    color: white !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(139, 115, 85, 0.2) !important;
}

.read-more:after {
    content: " →" !important;
    margin-left: 5px !important;
    transition: transform 0.3s ease !important;
}

.read-more:hover:after {
    transform: translateX(5px) !important;
}

/* 8. VERSIÓ MÒBIL */
@media (max-width: 768px) {
    article.post {
        padding: 20px !important;
        margin-bottom: 20px !important;
        border-radius: 12px !important;
    }
    
    .entry-title {
        font-size: 22px !important;
    }
    
    .post-thumbnail {
        margin: 15px 0 !important;
    }
}

/* 9. ESTIL PER ENTRADES STICKY */
.sticky {
    border-left: 5px solid #d4b483 !important;
    background: linear-gradient(135deg, #ffffff, #fdfbf8) !important;
}

.sticky:before {
    content: "⭐ Destacat" !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: #d4b483 !important;
    color: white !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: bold !important;
}