/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Masquer les métadonnées sous le titre de l'article (Auteur, Date) */
.single-post .entry-meta {
    display: none;
}

/* Masquer la date et l'auteur (métadonnées) sur la page d'accueil */
.blog .entry-meta {
    display: none !important;
}

/* Masquer la navigation entre les articles (Article précédent / suivant) au bas de la page */
.single-post .post-navigation {
    display: none;
}

/* Masquer les catégories et étiquettes en bas de l'article */
.single-post .cat-links,
.single-post .tags-links {
    display: none;
}

/* Supprimer l'effet de boîte de l'article pour un rendu plus "flat" */
.inside-article {
    background-color: transparent;
    padding: 0;
    box-shadow: none;
}

/* Rapprocher le titre H1 du haut de la page 
.entry-header {
    margin-bottom: 2rem;
} */

/* Ajuster l'espacement des listes (souvent utilisées dans les documentations) */
.entry-content ul, 
.entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

/* ==========================================================================
   1. IMPORTATION DES POLICES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   2. DESIGN TOKENS (Variables)
   ========================================================================== */
:root {
  /* Polices */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Couleurs Primaires (Bleu Nuit) */
  --color-primary: #113589;
  --color-primary-light: #1A4EC9;
  --color-primary-dark: #081D4C;
  --color-primary-contrast: #FFFFFF;

  /* Couleurs Secondaires (Teal / Turquoise) */
  --color-secondary: #25B6B2;
  --color-secondary-light: #8CEBE9;
  --color-secondary-dark: #20A19D;

  /* Fonds & Surfaces */
  --bg-body: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-neutral: #F1F5F9;

  /* Textes */
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  /* Bordures */
  --border-divider: rgba(148, 163, 184, 0.2);
  --border-input: rgba(148, 163, 184, 0.24);

  /* Rayons de bordure */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Ombres */
  --shadow-card: 0 0 2px 0 rgba(148, 163, 184, 0.08), 0 12px 24px -4px rgba(148, 163, 184, 0.08);
  --shadow-card-hover: 0px 7px 8px -4px rgba(148,163,184,0.2), 0px 12px 17px 2px rgba(148,163,184,0.14), 0px 5px 22px 4px rgba(148,163,184,0.12);
  --shadow-btn: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
  --shadow-btn-hover: 0 12px 32px 0 rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   3. MAPPING DES COMPOSANTS (Surcharge de GeneratePress)
   ========================================================================== */

/* Typographie globale et fond du site */
body {
    background-color: var(--bg-body);
    font-family: var(--font-body);
    color: var(--text-secondary);
    -webkit-font-smoothing: antialiased;
}

/* Structure et Hiérarchie des Titres */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
}

h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; }
h2 { font-size: 1.75rem; font-weight: 600; margin-bottom: 1.25rem; }
h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }

/* Conteneurs (Cards) : Transformer les articles en éléments d'interface UI */
.inside-article {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-divider);
    padding: 3rem; /* Crée une belle respiration autour du texte */
    margin-bottom: 1rem;
}

/* Boutons principaux */
button, 
.button, 
input[type="button"], 
input[type="submit"] {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
    font-family: var(--font-heading);
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: 12px 24px;
    border: none;
    box-shadow: var(--shadow-btn);
    transition: all 0.3s ease;
    cursor: pointer;
}

button:hover, 
.button:hover, 
input[type="submit"]:hover {
    background-color: var(--color-primary-light);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-2px);
    color: var(--color-primary-contrast);
}

/* Liens hypertexte dans le contenu */
.entry-content a {
    color: var(--color-secondary-dark);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.entry-content a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* Conteneur global du logo texte (remplace les classes MuiBox) */
.custom-brand-logo {
    font-family: var(--font-heading);
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none; /* Supprime le soulignement natif des liens */
}

/* On s'assure qu'au survol, la couleur ne change pas */
.custom-brand-logo:hover,
.custom-brand-logo:visited {
    text-decoration: none;
}

/* "Invest" en Turquoise (gras) */
.brand-invest {
    color: var(--color-secondary);
    font-weight: 800;
}

/* "minder" en Bleu Nuit (normal) */
.brand-minder {
    color: var(--color-primary);
    font-weight: 400;
}

/* Ajustement pour mobile (optionnel mais recommandé) */
@media (max-width: 768px) {
    .custom-brand-logo {
        font-size: 28px; /* Évite que le logo ne prenne trop de place sur petit écran */
    }
}

/* Appliquer la police de l'application au menu principal */
.main-navigation {
    font-family: var(--font-heading);
    font-weight: 500;
    background-color: var(--bg-card);
}

/* Transformation du lien en bouton icône (Uniquement sur Bureau) */
@media (min-width: 769px) {
    .main-navigation .main-nav ul li.nav-button-app a {
        background-color: var(--color-primary);
        color: var(--color-primary-contrast);
        border-radius: var(--radius-md);
        
        /* Ajustements pour l'icône */
        padding: 10px 12px; /* On réduit l'espace horizontal pour faire un quasi-carré */
        display: flex;
        align-items: center;
        justify-content: center;
        
        margin-top: 10px; 
        margin-left: 15px;
        box-shadow: var(--shadow-btn);
        transition: all 0.3s ease;
    }

    /* Effet au survol du bouton */
    .main-navigation .main-nav ul li.nav-button-app a:hover {
        background-color: var(--color-primary-light);
        color: var(--color-primary-contrast);
        transform: translateY(-2px);
        box-shadow: var(--shadow-btn-hover);
    }
}

/* ==========================================================================
   4. PAGES DE CATÉGORIES (Sommaire du Centre d'Aide)
   ========================================================================== */

/* 1. Cacher le résumé, la date, l'auteur et l'image sur les pages de listes */
.archive .entry-summary,
.archive .entry-content,
.archive .entry-meta,
.archive .post-image {
    display: none !important;
}

/* 2. Réduire l'espacement des "cartes" pour en faire une liste très compacte */
.archive .inside-article {
    padding: 0.75rem 1.25rem; /* Beaucoup plus fin (avant: 1.2rem 2rem) */
    display: flex;
    align-items: center;
    height: 100%;  /* Assure que les cartes d'une même ligne font la même taille */
    transition: all 0.2s ease;
}

/* 3. Ajouter une icône "Document" turquoise devant chaque titre */
.archive .inside-article::before {
    content: "";
    display: block;
    min-width: 20px;
    height: 20px;
    margin-right: 15px;
    /* Icône SVG encodée utilisant votre couleur secondaire Teal (#25B6B2) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325B6B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* 4. Ajuster le titre de l'article pour qu'il ressemble à un lien de liste */
.archive .entry-title {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 500;
}

.archive .entry-title a {
    color: var(--text-primary);
    text-decoration: none;
}

/* 5. Effet d'interaction au survol de la carte (UX moderne) */
.archive .inside-article:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
    transform: translateX(4px); /* Petit décalage vers la droite très élégant */
    cursor: pointer;
}

.archive .inside-article:hover .entry-title a {
    color: var(--color-primary);
}

/* Espacement classique pour mobile (1 colonne) */
@media (max-width: 768px) {
    .archive article {
        margin-bottom: 0.75rem;
    }
}

/* 6. Grille sur 2 colonnes pour les écrans PC et Tablettes */
@media (min-width: 769px) {
    .archive main#main {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Crée 2 colonnes de largeur identique */
        gap: 15px 20px; /* Espacement : 15px en vertical, 20px en horizontal */
    }

    /* Forcer le titre de la catégorie et la pagination à prendre toute la largeur */
    .archive main#main > header.page-header,
    .archive main#main > nav.paging-navigation {
        grid-column: 1 / -1;
        margin-bottom: 1.5rem; /* Espace sous le titre de la catégorie */
    }
    
    /* Retire les marges par défaut de GeneratePress car la grille (gap) gère déjà l'espacement */
    .archive main#main > article {
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   5. PAGE D'ACCUEIL : Mise en page Texte / Image (Affichage horizontal)
   ========================================================================== */

@media (min-width: 769px) {
    /* Transformer la carte de l'article en grille */
    .blog .inside-article {
        display: grid;
        
        /* Crée 2 colonnes : le texte prend 3 parts (3/4), l'image prend 1 part (1/4) */
        grid-template-columns: 3fr 1fr; 
        
        /* Assigne les emplacements : le texte à gauche, l'image à droite */
        grid-template-areas: 
            "header image"
            "summary image"
            "footer image";
        
        column-gap: 2.5rem; /* Espace de respiration entre le texte et l'image */
        align-items: center; /* Centre le contenu verticalement */
    }

    /* Si vous préférez l'Image à GAUCHE et le Texte à DROITE, 
       remplacez les deux propriétés 'grid-template' ci-dessus par :
       grid-template-columns: 1fr 3fr;
       grid-template-areas: "image header" "image summary" "image footer"; 
    */

    /* Placer chaque élément dans sa zone définie par la grille */
    .blog .inside-article .post-image {
        grid-area: image;
        margin: 0 !important; /* Annule les marges natives de GeneratePress */
    }

    .blog .inside-article .entry-header {
        grid-area: header;
    }

    .blog .inside-article .entry-summary,
    .blog .inside-article .entry-content {
        grid-area: summary;
    }

    .blog .inside-article .entry-meta {
        grid-area: footer;
    }
    
    /* Styliser l'image pour qu'elle s'intègre parfaitement (arrondis de votre app) */
    .blog .inside-article .post-image img {
        border-radius: var(--radius-md);
        width: 100%;
        height: auto;
        object-fit: cover;
        box-shadow: 0 4px 12px rgba(148, 163, 184, 0.1); /* Ombre douce optionnelle */
    }
}

/* Nettoyer l'affichage de l'extrait sur la page d'accueil */
.blog .inside-article .entry-summary {
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   6. PIED DE PAGE : CTA vers Investminder et Related Posts
   ========================================================================== */
.investminder-cta-block {
    margin-top: 40px;
    padding: 2rem;
    background-color: var(--bg-neutral);
    border: 1px solid var(--border-divider);
    border-radius: var(--radius-lg);
    text-align: center;
}

.investminder-cta-block .investminder-cta-title {
    margin-bottom: 0.5rem;
}

.investminder-cta-block .investminder-cta-text {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.investminder-cta-button,
.investminder-cta-button:visited {
    display: inline-block;
    padding: 0.875rem 2rem;
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
    font-family: var(--font-heading);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-btn);
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.investminder-cta-button:hover,
.investminder-cta-button:focus {
    background-color: var(--color-primary-light);
    color: var(--color-primary-contrast);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .investminder-cta-block { padding: 1.5rem; }
    .investminder-cta-button { display: block; }
}

.related-posts-block {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #e5e7eb; /* Ligne de séparation discrète (optionnelle) */
}