/**
 * BOOK PUBLICATIONS & TAKE ACTIONS IMPROVEMENTS - Frontend Afrokwary
 * ===================================================================
 * Améliorations visuelles pour book-publications et take-actions pages
 * Respecte 100% la charte graphique (couleurs, typographie, backgrounds)
 * Focus sur l'espacement, la hiérarchie et la disposition
 */

/* ========================================================= */
/* BOOK PUBLICATIONS PAGE IMPROVEMENTS                      */
/* ========================================================= */

/* Enhanced intro section layout */
.publications-page .intro-section {
    padding: clamp(2rem, 4vw, 3rem) 0;
}

.publications-page .intro-section .intro-content {
    padding-right: clamp(1rem, 3vw, 2rem);
}

.publications-page .intro-section .intro-image {
    padding-left: clamp(1rem, 3vw, 2rem);
}

/* Enhanced highlight list with better spacing and visual accents */
.publications-page .highlight-list {
    list-style: none;
    padding-left: 0;
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

.publications-page .highlight-list li {
    position: relative;
    padding-left: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.7;
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    transition: transform 0.3s ease;
}

.publications-page .highlight-list li:before {
    content: "●";
    position: absolute;
    left: 0;
    color: var(--accent-green);
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    line-height: 1;
    top: 0.1em;
    font-weight: 700;
}

.publications-page .highlight-list li:hover {
    transform: translateX(4px);
}

/* Enhanced submission box with card style */
.publications-page .submission-box {
    background-color: rgba(69, 75, 27, 0.05);
    border: 2px solid var(--accent-green);
    border-radius: 6px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: clamp(1.5rem, 3vw, 2rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.publications-page .submission-box:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.publications-page .submission-box h3 {
    color: var(--accent-green);
    font-size: clamp(1.3rem, 2.8vw, 1.6rem);
    margin-bottom: clamp(1rem, 2vw, 1.2rem);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
}

.publications-page .submission-box p {
    margin-bottom: clamp(1.2rem, 2.5vw, 1.5rem);
    line-height: 1.7;
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
}

/* Enhanced separator title section */
.publications-page .separator-title-section {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}

.publications-page .separator-title-section h2 {
    position: relative;
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.publications-page .separator-title-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 15vw, 100px);
    height: 3px;
    background-color: var(--accent-green);
}

/* Call for contributors section enhancements */
.publications-page .call-for-contributors-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.publications-page .call-for-contributors-section .row {
    align-items: center;
}

.publications-page .call-for-contributors-section .contributor-image {
    padding-right: clamp(1rem, 3vw, 2rem);
}

.publications-page .call-for-contributors-section .contributor-content {
    padding-left: clamp(1rem, 3vw, 2rem);
}

/* Responsive improvements for book publications */
@media (max-width: 991px) {
    .publications-page .intro-section .intro-content,
    .publications-page .intro-section .intro-image,
    .publications-page .call-for-contributors-section .contributor-image,
    .publications-page .call-for-contributors-section .contributor-content {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: clamp(1.5rem, 3vw, 2rem);
    }

    .publications-page .submission-box {
        margin-top: clamp(2rem, 4vw, 2.5rem);
    }
}

/* ========================================================= */
/* TAKE ACTIONS PAGE IMPROVEMENTS                           */
/* ========================================================= */

/* Enhanced hero section */
.take-action-hero {
    position: relative;
    background-image: linear-gradient(to left, rgba(69, 75, 27, 0.3), rgba(0, 0, 0, 0.9)), url('../images/take-actions/Forms.jpg');
    background-size: cover;
    background-position: center center;
    color: var(--text-white, #ffffff);
    min-height: clamp(50vh, 80vh, 130vh);
    margin-bottom: 2rem;
    padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.take-action-hero .main-text {
    position: relative;
    z-index: 2;
    text-align: left;
}

.take-action-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    color: #ffffff !important;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    text-wrap: balance; /* Intelligent heading wrapping */
}

.take-action-hero p {
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    line-height: 1.6;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    text-align: left; /* Prevent justified spacing gaps */
    text-wrap: pretty; /* Intelligent paragraph wrapping */
}

/* Enhanced action sections with card style */
.action-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
    position: relative;
}

.action-section:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.action-section .row {
    align-items: center;
}

/* Action content enhancements */
.action-section .action-content {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
}

.action-section .action-content h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: var(--accent-green);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    position: relative;
    padding-left: clamp(1rem, 2vw, 1.5rem);
    text-wrap: balance; /* Intelligent heading wrapping */
}

.action-section .action-content h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--accent-green);
}

.action-section .action-content p {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    line-height: 1.8;
    margin-bottom: clamp(1.2rem, 2.5vw, 1.5rem);
    color: #e0e0e0;
    text-align: left; /* Prevent justified spacing gaps */
    text-wrap: pretty; /* Intelligent paragraph wrapping */
}

.action-section .action-content ul {
    list-style: none;
    padding-left: 0;
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

.action-section .action-content ul li {
    position: relative;
    padding-left: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.7;
    color: #e0e0e0;
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
}

.action-section .action-content ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent-green);
    font-size: clamp(1.2rem, 2.5vw, 1.4rem);
    font-weight: 700;
    top: 0;
}

/* Action illustration enhancements */
.action-section .action-illustration {
    padding: clamp(1rem, 2vw, 1.5rem);
}

.action-section .action-illustration img {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    width: 100%;
    height: auto;
}

.action-section .action-illustration img:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Enhanced network growth section */
.network-growth-section {
    padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem);
    background-color: #000000;
    text-align: center;
}

.network-growth-section h2 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    color: var(--accent-green);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    text-wrap: balance;
}

.network-growth-section p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.7;
    color: #e0e0e0;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: pretty;
}

/* Enhanced social icons */
.network-growth-section .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    flex-wrap: wrap;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.network-growth-section .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    background: transparent;
    border: none;
    width: auto;
    height: auto;
}

.network-growth-section .social-icons a img {
    width: clamp(60px, 20vw, 250px);
    height: clamp(60px, 20vw, 250px);
    object-fit: cover;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.network-growth-section .social-icons a:hover {
    transform: translateY(-5px);
}

.network-growth-section .social-icons a:hover img {
    box-shadow: 0 8px 16px rgba(69, 75, 27, 0.4);
    filter: brightness(1.1);
}

/* Responsive improvements for take actions */
@media (max-width: 991px) {
    /* Hero section mobile */
    .take-action-hero {
        min-height: clamp(350px, 50vh, 450px);
        padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 3vw, 2rem);
    }

    /* Action sections mobile */
    .action-section .action-content,
    .action-section .action-illustration {
        padding: clamp(1rem, 2vw, 1.5rem) 0;
    }

    .action-section .action-illustration {
        margin-top: clamp(1.5rem, 3vw, 2rem);
    }

    /* Reverse order for mobile (image first) */
    .action-section .row {
        display: flex;
        flex-direction: column;
    }

    .action-section .action-illustration {
        order: 1;
    }

    .action-section .action-content {
        order: 2;
    }

    /* Social icons mobile */
    .network-growth-section .social-icons {
        gap: clamp(1rem, 2vw, 1.5rem);
    }
}

@media (min-width: 992px) {
    /* Ensure proper spacing on desktop */
    .action-section .action-content {
        padding-right: clamp(2rem, 4vw, 3rem);
    }

    .action-section .row.flex-row-reverse .action-content {
        padding-right: 0;
        padding-left: clamp(2rem, 4vw, 3rem);
    }
}

/* ========================================================= */
/* ANIMATIONS AND TRANSITIONS                                */
/* ========================================================= */

/* Fade in animation for content sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.action-section .action-content,
.publications-page .submission-box {
    animation: fadeInUp 0.6s ease-out;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .action-section .action-content,
    .publications-page .submission-box,
    .action-section .action-illustration img,
    .network-growth-section .social-icons a,
    .publications-page .highlight-list li {
        animation: none;
        transition: none;
    }
}

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

/* Focus states for interactive elements */
.network-growth-section .social-icons a:focus,
.publications-page .submission-box:focus-within {
    outline: 3px solid var(--accent-green);
    outline-offset: 4px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .action-section .action-content h2::before,
    .publications-page .highlight-list li:before {
        background-color: var(--accent-green);
        color: var(--accent-green);
    }

    .network-growth-section .social-icons a {
        border-width: 3px;
    }
}

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

@media print {
    .take-action-hero::before {
        display: none;
    }

    .action-section,
    .publications-page .intro-section,
    .network-growth-section {
        page-break-inside: avoid;
    }

    .network-growth-section .social-icons a,
    .action-section .action-illustration img {
        box-shadow: none;
    }

    .action-section .action-content h2::before {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ========================================================= */
/* NOTES                                                     */
/* ========================================================= */

/*
AMÉLIORATIONS APPLIQUÉES :

BOOK PUBLICATIONS :
1. Highlight list avec bullets verts et espacement amélioré
2. Submission box en carte avec border verte et shadow
3. Separator title avec ligne verte centrée
4. Hover effects subtils
5. Espacement responsive optimisé

TAKE ACTIONS :
1. Hero section avec gradient overlay amélioré
2. Action sections en alternance avec cartes visuelles
3. Titres H2 avec barre verticale verte à gauche
4. Listes avec checkmarks verts
5. Images avec border-radius et shadow
6. Network growth section avec social icons circulaires
7. Hover effects sur tous les éléments interactifs
8. Layout responsive (image first sur mobile)

COULEURS, TYPOGRAPHIE, BACKGROUNDS : 100% INCHANGÉS
- Vert accent : #454b1b (var(--accent-green))
- Noir : #000000
- Blanc : #ffffff
- Gris texte : #e0e0e0
- Fonts : Poppins, Roboto Condensed

Seuls la disposition, l'espacement et les accents visuels ont été améliorés.
*/