/*
Theme Name:     Astra Child
Theme URI:      https://wpastra.com
Description:    Thème enfant personnalisé pour modifier la mise en page des articles.
Author:         hamoumi
Author URI:     https://example.com
Template:       astra
Version:        1.0.0
Text Domain:    astra-child
*/

/* ==========================================================================
   Mise en page personnalisée de l'article (Style Magazine)
   ========================================================================== */

/* Style du bandeau d'image de l'article */
.custom-hero-article {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 60vh; /* L'en-tête prend 60% de la hauteur de l'écran */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    padding: 20px;
}

/* Conteneur du texte dans le bandeau */
.custom-hero-content {
    max-width: 800px;
}

/* Style de la catégorie au-dessus du titre */
.custom-hero-category a {
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    transition: background 0.3s ease;
}

.custom-hero-category a:hover {
    background: #00b5e6;
}

/* Style du grand titre blanc */
.custom-hero-title {
    color: #ffffff !important;
    font-size: 3.5rem;
    font-weight: 700;
    margin-top: 15px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    line-height: 1.2;
}

/* Centrage et rétrécissement de la zone de texte pour la lecture */
.custom-article-body {
    max-width: 750px; /* Aligne et resserre le texte au centre comme sur la capture */
    margin: 60px auto;
    padding: 0 20px;
    font-size: 1.15rem;
    line-height: 1.8;
}

/* Optimisation pour les écrans mobiles */
@media (max-width: 768px) {
    .custom-hero-article {
        height: 45vh; /* Réduit la hauteur du bandeau sur mobile */
    }
    .custom-hero-title {
        font-size: 2.2rem; /* Réduit la taille du titre sur mobile */
    }
}

/* ==========================================================================
   Navigation WordPress Native & Multilingue
   ========================================================================== */

.custom-post-navigation {
    width: 100%;
    max-width: 1200px;
    margin: 80px auto 40px auto;
    padding: 0 20px;
}

.nav-container {
    display: flex;
    gap: 20px;
}

.nav-box {
    flex: 1;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.nav-box:hover {
    transform: translateY(-5px);
}

.prev-box { justify-content: flex-start; text-align: left; }
.next-box { justify-content: flex-end; text-align: right; }

.nav-box-content {
    padding: 30px;
    width: 100%;
}

/* Style des liens générés par WordPress */
.nav-label, 
.nav-label a {
    color: #ffffff !important;
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Espace entre l'icône et le texte */
}

/* Alignement des icônes flèches */
.nav-label .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.empty-box {
    background: transparent;
    pointer-events: none;
}

@media (max-width: 768px) {
    .nav-container { flex-direction: column; }
    .nav-box { height: 120px; }
    .next-box { text-align: left; }
}





/* Style pour l'icône HTML à l'intérieur du menu WordPress */
.custom-menu-green-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background-color: #99c455 !important; /* Arrière-plan vert */
    color: #ffffff !important;            /* Icône blanche */
    border-radius: 50px;                   /* Coins arrondis (50% pour un cercle) */
    transition: all 0.3s ease;
    font-style: normal;                   /* Annule l'italique par défaut de la balise i */
}


/* 1. Appliquer la couleur et préparer le positionnement sur l'élément parent actif */
.main-navigation .menu-item.current-menu-item > a,
.main-navigation .menu-item.current-menu-ancestor > a {
    position: relative;
    color: #99c455 !important; /* Votre couleur verte exacte */
}

/* 2. Créer la ligne de soulignement uniquement sous le TEXTE du menu parent actif */
.main-navigation .menu-item.current-menu-item > a::after,
.main-navigation .menu-item.current-menu-ancestor > a::after {
    content: "";
    position: absolute;
    bottom: 0px; /* Positionne la ligne idéalement sous le texte */
    left: 0;
    
    /* Si Astra affiche une flèche, on réduit la largeur pour ne souligner que le texte */
    width: calc(100% - 15px); 
    
    height: 1px; /* Épaisseur du soulignement */
    background-color: #99c455; /* Votre couleur verte exacte */
    border-radius: 2px;
}

/* 3. Ajustement si l'élément n'a PAS de sous-menu (pas de flèche), la ligne prend 100% */
.main-navigation .menu-item.current-menu-item:not(.menu-item-has-children) > a::after {
    width: 100%;
}

/* 4. Optionnel : Appliquer également la couleur verte sur l'élément du sous-menu actuellement survolé */
.main-navigation .sub-menu .menu-item.current-menu-item > a {
    background-color: transparent !important;
    color: #99c455 !important;
}
.main-navigation .sub-menu .menu-item.current-menu-item > a::after {
    display: none !important; /* Pas de barre de soulignement à l'intérieur du bloc déroulant */
}


/* Force toutes les images de la grille du Blog à être coupées à la même taille */
.blog .ast-post-format- .post-thumb img, 
.archive .ast-post-format- .post-thumb img {
    width: 100% !important;
    height: 220px !important;    /* Ajustez cette hauteur (ex: 200px ou 250px) selon vos goûts */
    object-fit: cover !important; /* Coupe l'image proprement pour remplir le rectangle */
    object-position: center !important; /* Centre le recadrage pour ne pas louper le sujet de l'image */
}



/* 1. Force chaque colonne de la grille à s'étirer sur toute la hauteur de la ligne */
.ast-row {
    display: flex;
    flex-wrap: wrap;
}

/* 2. Indique à l'article de prendre 100% de la hauteur de sa colonne */
.ast-row .ast-article-post {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 3. Force le conteneur blanc (qui a la bordure ou l'ombre) à occuper tout l'espace vertical */
.ast-row .ast-article-post .ast-article-inner {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff; /* Ou la couleur de votre choix */
}


/* 1. Créer le conteneur parent pour l'image et le titre */
.page .ast-single-entry-banner,
.page .site-content .ast-container {
    position: relative;
}

/* 2. Forcer la section contenant l'image à devenir le fond du titre */
.page .ast-single-post-featured-section,
.page .post-thumb {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    overflow: hidden;
}

/* Style de l'image (Bannière arrière-plan) avec un filtre sombre pour rendre le texte lisible */
.page .ast-single-post-featured-section img,
.page .post-thumb img {
    width: 100% !important;
    height: 450px !important; /* Hauteur de votre choix */
    object-fit: cover !important;
    filter: brightness(65%); /* Assombrit légèrement la photo pour faire ressortir le texte blanc */
    
    /* Animation Image */
    opacity: 0;
    animation: fadeUpImage 0.8s ease-out forwards;
}

/* 3. SUPERPOSER ET CENTRER LE TITRE SUR L'IMAGE */
/* Style et centrage du titre sur l'image */
.page .entry-title,
.page .ast-single-post-title {
    position: absolute !important;
    top: 225px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 800px !important;
    text-align: center !important;
    margin: 0 !important;
    z-index: 20 !important;
    font-size: 2.5rem !important;
    font-weight: bold;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    
    /* TECHNIQUE DU MASQUE : Initialisation du texte transparent/caché */
    color: transparent !important;
    background: linear-gradient(to right, #ffffff 50%, rgba(255, 255, 255, 0.2) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;

    /* Lancement de l'animation de lecture */
    animation: readWordByWord 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.5s; /* Attend que la bannière s'affiche */
}

/* ÉPAISSEUR DU TRAIT DE LECTURE : Animation qui déplace le dégradé de droite à gauche */
@keyframes readWordByWord {
    to {
        background-position: 0% 0;
    }
}


/* Éviter que le contenu de la page remonte trop haut sous la structure absolue */
.page .entry-content {
    position: relative;
    z-index: 10;
}

/* --- KEYFRAMES DES ANIMATIONS --- */
@keyframes fadeUpImage {
    to { opacity: 1; }
}



/* 1. Définir l'animation de réduction */
@keyframes shrinkBanner {
    from {
        height: 450px; /* Hauteur de départ */
    }
    to {
        height: 200px; /* Hauteur minimale une fois scrollé */
    }
}

/* 2. L'appliquer directement sur le conteneur de l'image Astra */
.page .ast-single-post-featured-section,
.page .post-thumb {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    overflow: hidden;

    /* LIEN DIRECT AVEC LE SCROLL (SANS JAVASCRIPT) */
    animation: shrinkBanner linear both;
    animation-timeline: scroll(root); /* Dit au CSS de suivre le défilement global de la page */
    animation-range: 0px 300px;       /* L'animation se produit entre 0px et 300px de scroll */
}

/* 3. Ajustement de l'image interne */
.page .ast-single-post-featured-section img,
.page .post-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    filter: brightness(65%);
}