/**
 * Single Post CSS - Version optimisée
 * Styles pour les articles individuels - Structure WordPress standard
 * Version: 4.0.0 - Structure simplifiée sans double conteneur
 */

/* ==========================================================================
   SINGLE POST LAYOUT - Structure WordPress standard
   ========================================================================== */

/* Main layout - Direct dans <main> */
#single_primary {
    max-width: var(--tk-max-width);
    margin: 0 auto;
    padding: 0 var(--tk-space-4);
    line-height: var(--tk-line-height-relaxed);
    color: var(--tk-color-black);
    font-size: var(--tk-font-size-base);
}

/* WordPress Article structure */
article {
    margin-bottom: var(--tk-space-8);
}

/* Entry header */
.entry-header {
    margin-bottom: var(--tk-space-6);
}

/* Article meta information */
.entry-meta {
    margin-bottom: var(--tk-space-4);
    font-size: var(--tk-font-size-sm);
}

.entry-meta .orange {
    color: var(--tk-color-orange);
    font-weight: var(--tk-font-weight-medium);
    font-size: var(--tk-font-size-sm);
}

/* Entry content - WordPress standards */
.entry-content {
    line-height: var(--tk-line-height-relaxed);
    color: var(--tk-color-black);
    font-size: var(--tk-font-size-base);
    max-width: 900px;
    margin: var(--tk-space-6) auto var(--tk-space-8) auto;
    padding: 0 var(--tk-space-4);
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--tk-color-black);
    margin-top: var(--tk-space-8);
    margin-bottom: var(--tk-space-4);
    font-family: var(--tk-font-family-primary);
}

.entry-content h2 {
    font-size: var(--tk-font-size-2xl);
    font-weight: var(--tk-font-weight-bold);
    border-bottom: var(--tk-border-width-2) solid var(--tk-color-orange);
    padding-bottom: var(--tk-space-2);
}

.entry-content h3 {
    font-size: var(--tk-font-size-xl);
    font-weight: var(--tk-font-weight-semibold);
    color: var(--tk-color-orange);
}

.entry-content h4 {
    font-size: var(--tk-font-size-lg);
    font-weight: var(--tk-font-weight-medium);
}

.entry-content h5 {
    font-size: var(--tk-font-size-md);
    font-weight: var(--tk-font-weight-medium);
}

.entry-content h6 {
    font-size: var(--tk-font-size-base);
    font-weight: var(--tk-font-weight-semibold);
}

.entry-content p {
    margin-bottom: var(--tk-space-4);
    text-align: justify;
    line-height: var(--tk-line-height-relaxed);
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tk-radius-sd);
    margin: var(--tk-space-6) 0;
    box-shadow: var(--tk-shadow-md);
}

.entry-content blockquote {
    border-left: var(--tk-border-width-4) solid var(--tk-color-orange);
    padding-left: var(--tk-space-4);
    margin: var(--tk-space-6) 0;
    font-style: italic;
    background: var(--tk-color-gray-50);
    padding: var(--tk-space-4);
    border-radius: var(--tk-radius-sd);
    color: var(--tk-color-gray-700);
}

.entry-content ul,
.entry-content ol {
    margin: var(--tk-space-4) 0;
    padding-left: var(--tk-space-6);
}

.entry-content li {
    margin-bottom: var(--tk-space-2);
    line-height: var(--tk-line-height-relaxed);
}

.entry-content a {
    color: var(--tk-color-orange);
    text-decoration: underline;
    transition: color var(--tk-transition-base);
}

.entry-content a:hover {
    color: var(--tk-color-orange-dark);
}

/* Page links for multi-page posts */
.page-links {
    margin: var(--tk-space-6) 0;
    text-align: center;
}

.page-links a {
    display: inline-block;
    padding: var(--tk-space-2) var(--tk-space-3);
    margin: 0 var(--tk-space-1);
    background: var(--tk-color-orange);
    color: var(--tk-color-white);
    text-decoration: none;
    border-radius: var(--tk-radius-sd);
    transition: background-color var(--tk-transition-base);
}

.page-links a:hover {
    background: var(--tk-color-orange-dark);
}

/* ==========================================================================
   SINGLE POST THUMBNAIL - Classes utilisées
   ========================================================================== */
#single_thumbnail {
    height: 350px;
    overflow: clip;
}

#single_thumbnail-container {
    width: 100%;
}

#single_thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   POST NAVIGATION - Classes utilisées
   ========================================================================== */

.post-navigation {
    margin: var(--tk-space-8) 0;
    padding: var(--tk-space-3);
    background: var(--tk-color-gray-50);
    border-radius: var(--tk-radius-sd);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--tk-space-4);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
}

.post-navigation .nav-previous {
    text-align: left;
}

.post-navigation .nav-next {
    text-align: right;
}

.nav-subtitle.bouton_arrondi.background_orange {
    display: inline-block;
    padding: var(--tk-space-2) var(--tk-space-3);
    background: var(--tk-color-orange);
    color: var(--tk-color-white);
    font-size: var(--tk-font-size-sm);
    font-weight: var(--tk-font-weight-medium);
    border-radius: var(--tk-radius-sd);
}

.nav-title {
    font-weight: var(--tk-font-weight-medium);
    color: var(--tk-color-black);
}

/* ==========================================================================
   RELATED POSTS - Classes utilisées
   ========================================================================== */

.related-posts {
    margin-top: var(--tk-space-8);
}

.related-posts-title {
    font-size: var(--tk-font-size-2xl);
    font-weight: var(--tk-font-weight-bold);
    text-align: center;
    margin-bottom: var(--tk-space-6);
    color: var(--tk-color-black);
}

.card_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--tk-space-6);
}

/* ==========================================================================
   SIDEBAR - Classes utilisées
   ========================================================================== */

.aside_bar {
    max-width: 30%;
    position: relative;
    margin-right: var(--tk-space-4);
}

.aside-filter-menu {
    left: 0;
}

/* ==========================================================================
   COMMENTS SECTION - WordPress par défaut
   ========================================================================== */

.comments-area {
    margin-top: var(--tk-space-8);
    padding-top: var(--tk-space-8);
    border-top: var(--tk-border-width-2) solid var(--tk-color-gray-200);
}

.comments-title {
    font-size: var(--tk-font-size-xl);
    font-weight: var(--tk-font-weight-bold);
    margin-bottom: var(--tk-space-6);
    color: var(--tk-color-black);
}

/* ==========================================================================
   RESPONSIVE DESIGN - Mobile First
   ========================================================================== */

@media (max-width: 768px) {
    #single_primary {
        grid-template-columns: 1fr;
        gap: var(--tk-space-6);
        flex-direction: column;
    }

    #single_content {
        margin: 0;
    }

    .aside_bar {
        margin-top: var(--tk-space-6);
    }

    .aside-filter-toggle {
        left: unset;
    }

    .nav-links {
        flex-direction: row;
    }

    span.nav-title {
        display: none;
        justify-content: space-between;
    }

    .card_grid {
        gap: var(--tk-space-4);
    }

    .entry-content h2 {
        font-size: var(--tk-font-size-xl);
    }

    .entry-content h3 {
        font-size: var(--tk-font-size-lg);
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {

    .shadow_box.aside_bar,
    .post-navigation,
    .related-posts {
        display: none;
    }

    #single_primary {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.entry-content:focus-within {
    outline: var(--tk-border-width-2) solid var(--tk-color-orange);
    outline-offset: var(--tk-space-1);
}

@media (prefers-reduced-motion: reduce) {

    .post-navigation a,
    .entry-content a {
        transition: none;
    }
}