/*
Theme Name: Astra Child Inspired
Description: Thème enfant inspiré d'un blog voyage, avec modifications légères.
Template: astra
Version: 1.0
*/

/* Import des styles parent Astra */
@import url("../astra/style.css");

/* Chargement des Polices Google Fonts (ressemblantes mais modifiées) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500&display=swap');

/* Réinitialisation et Variables CSS pour Facilité */
:root {
    --primary-color: #008080; /* Teal inspiré du bleu, pour liens et accents */
    --header-bg: #f5f7fa; /* Gris plus doux que #f8f9fa */
    --text-color: #333333;
    --border-color: #e9ecef;
    --shadow-light: 0 2px 10px rgba(0,0,0,0.08); /* Ombre plus subtile */
}

/* Polices Globales (Modifiées : Roboto au lieu d'Open Sans, Playfair pour titres) */
body, .ast-container {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6, .entry-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.3;
}

h1 { font-size: 2.5em; } /* Légèrement plus grand pour impact */
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }

/* Header et Navigation (Inspiré : Logo centré, sticky, mais padding réduit de 10px) */
.ast-primary-header-bar {
    background-color: var(--header-bg);
    padding: 15px 0; /* Réduit de ~20px pour plus de compacité */
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-light);
}

.site-logo {
    max-width: 220px; /* Légèrement plus large que ~200px */
    margin: 0 auto;
}

.ast-primary-header-bar .main-header-menu > a {
    color: var(--text-color);
    transition: color 0.3s ease; /* Transition plus douce */
}

.ast-primary-header-bar .main-header-menu > a:hover {
    color: var(--primary-color); /* Teal au hover au lieu de bleu */
}

/* Contenu Principal et Sidebar (Inspiré : Sidebar gauche, allégée) */
.ast-separate-container .ast-article-inner {
    padding: 20px; /* Padding standard */
}

.ast-right-sidebar #primary,
.ast-left-sidebar #primary {
    margin-left: 18px; /* Réduit de 20px pour plus d'espace contenu */
}

.ast-left-sidebar .widget-area {
    background: #fafbfc; /* Fond sidebar légèrement crème */
    padding: 18px; /* Padding réduit pour légèreté */
    border-left: 1px solid var(--border-color);
}

.widget-title {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color); /* Accent teal au lieu de vert */
    padding-bottom: 5px;
}

/* Posts et Grille Articles (Inspiré : Grille voyage, images avec ombres) */
.post-thumbnail {
    border-radius: 10px; /* Arrondi augmenté de 8px à 10px */
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-thumbnail:hover {
    transform: scale(1.03); /* Scale plus subtil que 1.05 */
    box-shadow: 0 4px 20px rgba(0,128,128,0.15); /* Ombre teal */
}

.entry-title a {
    color: var(--text-color);
    transition: color 0.3s ease;
}

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

.posts-archive .ast-article-post {
    margin-bottom: 35px; /* Augmenté de 30px pour plus d'air entre posts */
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}

/* Boutons et Accents (Inspiré : Vert/bleu pour CTA, changé en teal) */
button, .button, .wp-block-button__link, .read-more a {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 12px 24px;
    transition: background-color 0.3s ease;
}

button:hover, .button:hover, .wp-block-button__link:hover {
    background-color: #006666; /* Teal foncé au hover */
}

/* Footer (Inspiré : Simple, avec sociaux) */
.site-footer {
    background-color: #f5f7fa; /* Même que header pour cohérence */
    padding: 30px 0;
    border-top: 1px solid var(--border-color);
}

.site-footer a {
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: #006666;
}

/* Responsive (Améliorations Légères : Sidebar cachée plus tôt sur mobile) */
@media (max-width: 768px) {
    .ast-left-sidebar .widget-area {
        display: none; /* Cacher sidebar sur mobile pour focus contenu */
    }
    
    .ast-primary-header-bar {
        padding: 10px 0; /* Plus compact sur mobile */
    }
    
    .post-thumbnail {
        border-radius: 8px; /* Réduire arrondi sur petit écran */
    }
}

/* Autres Ajustements Généraux */
a { color: var(--primary-color); } /* Liens teal par défaut */
img { max-width: 100%; height: auto; }
.entry-content p { margin-bottom: 1.2em; } /* Espacement texte plus aéré */