/**
 * Articles de blog — Calepin Parentalité
 *
 * Styles pour les articles single (post) GeneratePress.
 * Chargé uniquement sur is_single('post').
 *
 * @package CalepiParentalite
 */

/* ── Breadcrumb Rank Math ────────────────────────────────────────────────────── */

.single-post .rank-math-breadcrumb {
    font-size:     13px;
    color:         var(--cp-muted);
    margin-bottom: 1.25rem;
}
.single-post .rank-math-breadcrumb a {
    color:           var(--cp-muted);
    text-decoration: none;
}
.single-post .rank-math-breadcrumb a:hover { color: var(--cp-teal); }

/* ── En-tête de l'article ────────────────────────────────────────────────────── */

.single-post .entry-header { margin-bottom: 2rem; }

/* Titre H1 : Caveat (déjà défini en reset global, on renforce la taille) */
.single-post .entry-title {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-style:  normal;
    font-size:   clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    color:       var(--cp-graphite);
    margin-bottom: 0.75rem;
}

/* Méta : catégorie, date, auteur */
.single-post .entry-meta {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.25rem 1.25rem;
    align-items: center;
    font-size:   13px;
    color:       var(--cp-muted);
}

.single-post .entry-meta a {
    color:           var(--cp-teal);
    text-decoration: none;
    font-weight:     700;
    font-size:       12px;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
}
.single-post .entry-meta a:hover { color: var(--cp-coral); }

/* ── Date de dernière modification ──────────────────────────────────────────── */

.single-post .cp-modified-meta {
    font-family: 'Lato', sans-serif;
    font-size:   12px;
    color:       var(--cp-muted);
    margin-top:  0.25rem;
    margin-bottom: 0;
}
.single-post .cp-modified-meta time {
    font-weight: 600;
    color:       var(--cp-graphite);
}

/* ── Corps de l'article ──────────────────────────────────────────────────────── */

.single-post .entry-content {
    font-family: 'Lato', sans-serif;
    font-size:   15px;
    line-height: 1.7;
    color:       var(--cp-graphite);
}

.single-post .entry-content h2,
.single-post .entry-content h3 {
    font-family:    'Lato', sans-serif;
    font-weight:    700;
    letter-spacing: -0.01em;
    color:          var(--cp-graphite);
    margin-top:     2.25rem;
}

/* Liens dans le contenu */
.single-post .entry-content a {
    color:                var(--cp-teal);
    text-decoration:      underline;
    text-decoration-color: rgba(91, 168, 160, 0.35);
}
.single-post .entry-content a:hover {
    color:                var(--cp-coral);
    text-decoration-color: var(--cp-coral);
}

/* Blockquote : bordure coral gauche + fond peach */
.single-post .entry-content blockquote {
    border-left:   3px solid var(--cp-coral);
    padding:       0.875rem 1.25rem;
    margin:        1.75rem 0;
    background:    var(--cp-peach);
    border-radius: 0 var(--cp-radius-btn) var(--cp-radius-btn) 0;
    font-style:    italic;
    color:         var(--cp-graphite);
}
.single-post .entry-content blockquote p:last-child { margin-bottom: 0; }

/* Image mise en avant */
.single-post .post-image {
    border-radius: var(--cp-radius-card);
    overflow:      hidden;
    margin-bottom: 2rem;
}

/* ── Sidebar article ─────────────────────────────────────────────────────────── */

/* Widget générique (fond peach, radius, bordure fine) */
.single-post .widget-area .widget {
    background:    var(--cp-peach);
    border-radius: var(--cp-radius-card);
    border:        var(--cp-border) rgba(44, 44, 42, 0.14);
    padding:       1.5rem;
    margin-bottom: 1.25rem;
}

/* Force Lato sur tous les titres/headings dans la sidebar,
   quel que soit le niveau utilisé dans le bloc Groupe */
.single-post .widget-area h1,
.single-post .widget-area h2,
.single-post .widget-area h3,
.single-post .widget-area .widget-title {
    font-family:    'Lato', sans-serif;
    font-weight:    700;
    font-size:      1rem;
    line-height:    1.3;
    letter-spacing: -0.01em;
    color:          var(--cp-graphite);
    margin-bottom:  0.75rem;
}

/* L'aside parent du CTA : on retire padding/fond pour que le coral remplisse toute la carte */
.single-post .widget-area .widget:has(.widget-cta) {
    padding:       0 !important;
    background:    transparent !important;
    border:        none !important;
    border-radius: var(--cp-radius-card);
    overflow:      hidden;
}

/* Widget CTA (class "widget-cta" à ajouter sur le bloc Groupe) */
.single-post .widget-area .widget-cta {
    background:    var(--cp-coral);
    border:        none;
    color:         #fff;
    padding:       1.5rem;
    border-radius: var(--cp-radius-card);
}

/* Titres et textes dans le CTA */
.single-post .widget-area .widget-cta h1,
.single-post .widget-area .widget-cta h2,
.single-post .widget-area .widget-cta h3,
.single-post .widget-area .widget-cta .widget-title {
    color:       #fff;
    font-size:   1.125rem;
    line-height: 1.25;
}

.single-post .widget-area .widget-cta p {
    color:       rgba(255, 255, 255, 0.88);
    font-size:   14px;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Bouton CTA : pleine largeur, fond blanc, texte coral */

/* Neutralise tout fond Gutenberg sur les wrappers du bouton */
.single-post .widget-area .widget-cta .wp-block-buttons,
.single-post .widget-area .widget-cta .wp-block-button {
    width:      100% !important;
    background: transparent !important;
    box-shadow: none !important;
}

.single-post .widget-area .widget-cta a.button,
.single-post .widget-area .widget-cta .wp-block-button__link {
    display:         flex !important;
    justify-content: center;
    align-items:     center;
    width:           100% !important;
    box-sizing:      border-box;
    background:      #fff !important;
    color:           var(--cp-coral) !important;
    border-radius:   50px !important;
    border:          none !important;
    box-shadow:      none !important;
    outline:         none !important;
    font-family:     'Lato', sans-serif;
    font-weight:     700;
    font-size:       15px;
    text-decoration: none !important;
    min-height:      44px;
    padding:         0.5rem 1.25rem !important;
    margin-top:      1rem;
    transition:      opacity 0.15s ease;
}
.single-post .widget-area .widget-cta .wp-block-button__link:hover {
    opacity: 0.88;
    color:   var(--cp-coral) !important;
}

/* ── Cartes "À lire aussi" (shortcode [cp_a_lire_aussi]) ─────────────────────── */

.cp-a-lire-aussi {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.cp-article-card {
    display:         flex;
    flex-direction:  column;
    gap:             0.25rem;
    background:      #fff;
    border-radius:   var(--cp-radius-btn);
    border:          var(--cp-border) rgba(44, 44, 42, 0.12);
    padding:         0.875rem;
    text-decoration: none !important;
    transition:      border-color 0.15s ease;
}
.cp-article-card:hover {
    border-color: var(--cp-teal);
}

.cp-article-cat {
    font-family:    'Lato', sans-serif;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--cp-teal);
}

.cp-article-title {
    font-family: 'Lato', sans-serif;
    font-size:   14px;
    font-weight: 700;
    color:       var(--cp-graphite);
    line-height: 1.3;
}

.cp-article-time {
    font-family: 'Lato', sans-serif;
    font-size:   12px;
    color:       var(--cp-muted);
    margin-top:  0.125rem;
}

/* ── Widget Kozman Copy for AI ───────────────────────────────────────────────── */

.single-post .kozman-copy-widget,
.single-post .kc4ai-widget {
    border-left:   3px solid var(--cp-teal);
    background:    var(--cp-peach);
    border-radius: 0 var(--cp-radius-btn) var(--cp-radius-btn) 0;
    padding:       0.875rem 1.25rem;
    margin:        2rem 0;
    font-family:   'Lato', sans-serif;
    font-size:     13px;
    color:         var(--cp-muted);
}

.single-post .kozman-copy-widget p,
.single-post .kc4ai-widget p {
    margin: 0 0 0.5rem;
    color:  var(--cp-muted);
}

.single-post .kozman-copy-widget button,
.single-post .kc4ai-widget button,
.single-post .kozman-copy-widget .kc4ai-btn {
    background:    var(--cp-teal);
    color:         #fff;
    border:        none;
    border-radius: var(--cp-radius-btn);
    font-family:   'Lato', sans-serif;
    font-weight:   700;
    font-size:     13px;
    padding:       0.5rem 1rem;
    min-height:    36px;
    cursor:        pointer;
    transition:    background 0.15s ease;
}

.single-post .kozman-copy-widget button:hover,
.single-post .kc4ai-widget button:hover,
.single-post .kozman-copy-widget .kc4ai-btn:hover {
    background: var(--cp-coral);
}

/* ── Boîte auteur ────────────────────────────────────────────────────────────── */

.cp-author-box {
    display:       flex;
    gap:           1rem;
    align-items:   flex-start;
    background:    var(--cp-peach);
    border-radius: var(--cp-radius-card);
    border:        var(--cp-border) rgba(44, 44, 42, 0.12);
    padding:       1.25rem;
    margin-top:    2.5rem;
}

.cp-author-box__avatar .cp-author-avatar {
    border-radius: 50%;
    width:         56px;
    height:        56px;
    object-fit:    cover;
    display:       block;
    flex-shrink:   0;
}

.cp-author-box__content { flex: 1; }

.cp-author-box__name {
    font-family:     'Lato', sans-serif;
    font-weight:     700;
    font-size:       15px;
    color:           var(--cp-graphite);
    text-decoration: none;
    display:         block;
    margin-bottom:   0.25rem;
}
.cp-author-box__name:hover { color: var(--cp-teal); }

.cp-author-box__bio {
    font-family: 'Lato', sans-serif;
    font-size:   13px;
    color:       var(--cp-muted);
    line-height: 1.5;
    margin:      0;
}

/* ── Navigation entre articles ───────────────────────────────────────────────── */

.post-navigation {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1rem;
    margin-top:            3rem;
    padding-top:           2rem;
    border-top:            0.5px solid rgba(44, 44, 42, 0.12);
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    font-size:       14px;
    color:           var(--cp-teal);
    text-decoration: none;
    font-weight:     600;
}
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
    color: var(--cp-coral);
}
.post-navigation .nav-next { text-align: right; }