/*
Theme Name: GeneratePress Child Salvador
Theme URI: https://salvador.ba
Description: Thème enfant GeneratePress pour salvador.ba - Style portail bahia.ba
Author: salvador.ba
Template: generatepress
Version: 2.1
*/

/* ═══════════════════════════════════════════════════════════════
   VARIABLES
   ═══════════════════════════════════════════════════════════════ */
:root {
    --c-purple:    #7B1FA2;
    --c-gold:      #FFB300;
    --c-orange:    #F57C00;
    --c-dark:      #1A0030;
    --c-white:     #FFFFFF;
    --c-gray:      #F5F5F5;
    --c-border:    #E0E0E0;
    --c-text:      #212121;
    --c-text-soft: #757575;
}

body {
    margin: 0; padding: 0;
    font-family: 'Arial', sans-serif;
    background: var(--c-gray);
    color: var(--c-text);
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — fond blanc, logo gauche, réseaux droite
   ═══════════════════════════════════════════════════════════════ */
.site-header {
    background: var(--c-white) !important;
    border-bottom: 1px solid var(--c-border) !important;
    padding: 0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.inside-header {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.site-branding-container { text-align: left; }
.site-logo img { max-height: 80px !important; width: auto !important; }
.main-title a, .site-title a {
    color: var(--c-purple) !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    letter-spacing: -1px;
}

/* Réseaux sociaux header */
#header-social { background: transparent; }
.header-social-inner {
    display: flex;
    gap: 10px;
    align-items: center;
}
#header-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    text-decoration: none !important;
    transition: transform .2s, opacity .2s;
}
#header-social a:hover { transform: scale(1.1); opacity: .9; }
#header-social .social-fb  { background: #1877F2; color: #fff !important; }
#header-social .social-ig  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff !important; }
#header-social .social-yt  { background: #FF0000; color: #fff !important; }
#header-social .social-wa  { background: #25D366; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION — fond blanc, texte foncé
   ═══════════════════════════════════════════════════════════════ */
.nav-primary, .main-navigation, #site-navigation {
    background: var(--c-white) !important;
    border-bottom: 3px solid var(--c-purple) !important;
    border-top: 1px solid var(--c-border) !important;
}
.nav-primary .inside-navigation, .main-navigation .inside-navigation {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}
.nav-primary .main-nav ul li a, .main-navigation ul li a {
    color: var(--c-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    padding: 12px 14px !important;
    transition: color .2s, background .2s !important;
    border-right: 1px solid var(--c-border);
}
.nav-primary .main-nav ul li a:hover,
.main-navigation ul li a:hover,
.nav-primary .main-nav ul li.current-menu-item > a {
    color: var(--c-purple) !important;
    background: rgba(123,31,162,.05) !important;
}
.nav-primary .main-nav ul ul, .main-navigation ul ul {
    background: var(--c-white) !important;
    border-top: 3px solid var(--c-purple) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
    min-width: 200px !important;
}
.nav-primary .main-nav ul ul li a, .main-navigation ul ul li a {
    font-size: 12px !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--c-border) !important;
    border-right: none !important;
}
.nav-primary .main-nav ul ul li a:hover, .main-navigation ul ul li a:hover {
    background: rgba(123,31,162,.05) !important;
    color: var(--c-purple) !important;
}

/* Menu mobile hamburger */
.menu-toggle {
    background: var(--c-purple) !important;
    color: var(--c-white) !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
}
.menu-toggle:hover { background: var(--c-orange) !important; }

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE PORTAIL
   ═══════════════════════════════════════════════════════════════ */
#homepage-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

/* Article vedette */
#featured-post {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 24px 0;
    width: 100%;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
#featured-post a { display: block; text-decoration: none !important; }
#featured-post img { width: 100%; height: 420px; object-fit: cover; display: block; }
.featured-no-img { width: 100%; height: 420px; background: linear-gradient(135deg, var(--c-purple), var(--c-orange)); }
.featured-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
    padding: 60px 24px 24px;
}
.featured-cat {
    background: var(--c-purple);
    color: #fff;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 3px 10px; border-radius: 3px;
    display: inline-block; margin-bottom: 10px;
}
.featured-cat a { color: #fff !important; text-decoration: none !important; }
.featured-overlay h2 { color: #fff !important; font-size: 26px; margin: 0 0 8px; line-height: 1.3; }
.featured-overlay p { color: rgba(255,255,255,.85); font-size: 14px; margin: 0; }

/* Grid homepage */
#homepage-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

/* Sections catégories */
.category-section {
    margin-bottom: 24px;
    background: var(--c-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--c-white);
    border-bottom: 3px solid var(--c-purple);
    border-left: 4px solid var(--c-purple);
}
.cat-header h3 { margin: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.cat-header h3 a { color: var(--c-purple) !important; text-decoration: none !important; }
.cat-more { color: var(--c-purple) !important; font-size: 12px; font-weight: 600; text-decoration: none !important; }
.cat-more:hover { color: var(--c-orange) !important; }

.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.cat-post { border-bottom: 1px solid var(--c-border); border-right: 1px solid var(--c-border); }
.cat-post:nth-child(2n) { border-right: none; }
.cat-post:nth-last-child(-n+2) { border-bottom: none; }
.cat-post a {
    display: flex; gap: 10px; padding: 12px;
    text-decoration: none !important; color: inherit !important;
    transition: background .2s;
}
.cat-post a:hover { background: rgba(123,31,162,.04); }
.cat-post-thumb { width: 80px; height: 65px; flex-shrink: 0; border-radius: 6px; overflow: hidden; }
.cat-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-post-thumb.no-thumb {
    background: linear-gradient(135deg, var(--c-purple), var(--c-orange));
    display: flex; align-items: center; justify-content: center;
}
.cat-post-thumb.no-thumb span { color: #fff; font-size: 24px; font-weight: 900; }
.cat-post-info { flex: 1; min-width: 0; }
.cat-post-info h4 {
    font-size: 13px; font-weight: 600; color: var(--c-text) !important;
    margin: 0 0 5px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-post a:hover h4 { color: var(--c-purple) !important; }
.post-date { font-size: 11px; color: var(--c-text-soft); }

/* Sidebar homepage */
#homepage-sidebar { position: sticky; top: 50px; }
#homepage-sidebar .widget {
    background: var(--c-white); border-radius: 8px; padding: 16px;
    margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
    border-top: 3px solid var(--c-purple);
}
#homepage-sidebar .widget-title {
    color: var(--c-purple); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border);
}

/* ═══════════════════════════════════════════════════════════════
   PAGES ARCHIVE
   ═══════════════════════════════════════════════════════════════ */
.archive-header {
    background: linear-gradient(135deg, var(--c-purple), var(--c-dark));
    padding: 24px; border-radius: 8px;
    margin-bottom: 24px; border-left: 5px solid var(--c-gold);
}
.archive-title { color: var(--c-white) !important; font-size: 26px !important; margin: 0 0 6px !important; }
.archive-desc { color: rgba(255,255,255,.8); font-size: 14px; margin: 0; }
.archive-featured-link { display: block; text-decoration: none !important; color: inherit !important; }
.archive-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; justify-content: center; }
.archive-pagination .page-numbers {
    padding: 6px 12px; border-radius: 4px; text-decoration: none !important;
    font-size: 13px; font-weight: 600; color: var(--c-purple) !important;
    background: var(--c-white); border: 1.5px solid var(--c-border); transition: all .2s;
}
.archive-pagination .page-numbers.current,
.archive-pagination .page-numbers:hover {
    background: var(--c-purple) !important; color: var(--c-white) !important;
    border-color: var(--c-purple) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES
   ═══════════════════════════════════════════════════════════════ */
.sidebar .widget {
    background: var(--c-white); border-radius: 8px; padding: 16px;
    margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
    border-top: 3px solid var(--c-purple);
}
.sidebar .widget-title {
    color: var(--c-purple); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border);
}
h1.entry-title a, h2.entry-title a {
    color: var(--c-text) !important; text-decoration: none !important; font-weight: 700;
}
h1.entry-title a:hover, h2.entry-title a:hover { color: var(--c-purple) !important; }

/* ═══════════════════════════════════════════════════════════════
   WIDGET RSS AVEC IMAGES
   ═══════════════════════════════════════════════════════════════ */
.widget-rss-images .widget-title {
    color: var(--c-purple); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border);
}
.rss-items-list { list-style: none; margin: 0; padding: 0; }
.rss-item { border-bottom: 1px solid var(--c-border); padding: 8px 0; }
.rss-item:last-child { border-bottom: none; }
.rss-item a { display: flex; gap: 10px; text-decoration: none !important; color: inherit !important; }
.rss-item a:hover .rss-title { color: var(--c-purple) !important; }
.rss-thumb { width: 70px; height: 55px; flex-shrink: 0; border-radius: 5px; overflow: hidden; }
.rss-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rss-info { flex: 1; min-width: 0; }
.rss-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12px; font-weight: 600; color: var(--c-text); line-height: 1.4; margin-bottom: 4px;
}
.rss-date { font-size: 10px; color: var(--c-text-soft); }
.rss-source {
    display: block; margin-top: 10px; font-size: 11px;
    color: var(--c-purple) !important; text-decoration: none !important;
    font-weight: 600; text-align: right;
}
.rss-source:hover { color: var(--c-orange) !important; }

/* ═══════════════════════════════════════════════════════════════
   WIDGET ARTICLES RÉCENTS AVEC IMAGES
   ═══════════════════════════════════════════════════════════════ */
.widget-recent-images .widget-title {
    color: var(--c-purple); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border);
}
.recent-posts-list { list-style: none; margin: 0; padding: 0; }
.recent-post-item { border-bottom: 1px solid var(--c-border); padding: 8px 0; }
.recent-post-item:last-child { border-bottom: none; }
.recent-post-item a { display: flex; gap: 10px; text-decoration: none !important; color: inherit !important; }
.recent-post-item a:hover .recent-title { color: var(--c-purple) !important; }
.recent-thumb { width: 70px; height: 55px; flex-shrink: 0; border-radius: 5px; overflow: hidden; }
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-thumb.no-thumb {
    background: linear-gradient(135deg, var(--c-purple), var(--c-orange));
    display: flex; align-items: center; justify-content: center;
}
.recent-thumb.no-thumb span { color: #fff; font-size: 20px; font-weight: 900; }
.recent-info { flex: 1; min-width: 0; }
.recent-cat {
    display: inline-block; font-size: 10px; font-weight: 700;
    color: var(--c-orange); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px;
}
.recent-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12px; font-weight: 600; color: var(--c-text); line-height: 1.4; margin-bottom: 3px;
}
.recent-date { font-size: 10px; color: var(--c-text-soft); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
    background: var(--c-dark) !important;
    color: rgba(255,255,255,.7) !important;
    border-top: 3px solid var(--c-purple) !important;
    margin-top: 40px;
}
.site-footer a { color: var(--c-gold) !important; text-decoration: none !important; }
.site-footer a:hover { color: var(--c-orange) !important; }

hr {
    border: none; height: 2px;
    background: linear-gradient(90deg, var(--c-purple), var(--c-gold), var(--c-orange));
    border-radius: 2px; margin: 20px 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    #homepage-grid { grid-template-columns: 1fr; }
    #homepage-sidebar { position: static; }
}



@media (max-width: 600px) {
    .cat-grid { grid-template-columns: 1fr; }
    .cat-post { border-right: none !important; }
    .cat-post:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-border); }
    .cat-post:last-child { border-bottom: none; }
}

.site-header button.menu-toggle,
.site-header .menu-toggle {
    background: transparent !important;
    color: #7B1FA2 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Logo centré sur mobile */
    .inside-header {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 12px 16px !important;
    }
    .site-branding-container {
        text-align: center !important;
        flex: 1 !important;
    }
    .site-logo img { max-height: 60px !important; }

    /* Cacher réseaux sociaux sur mobile */
    #header-social { display: none; }

    /* Featured */
    #featured-post img, .featured-no-img { height: 220px; }
    .featured-overlay h2 { font-size: 18px; }
    #homepage-wrap { padding: 12px; }
.nav-primary .menu-toggle,
    .main-navigation .menu-toggle {
        background: transparent !important;
        color: var(--c-purple) !important;
        border: none !important;
        width: auto !important;
        display: inline-flex !important;
    }
    .nav-primary,
    .main-navigation {
        text-align: left !important;
    }
.nav-primary .inside-navigation {
        padding: 4px 12px !important;
        min-height: unset !important;
    }
    .nav-primary .menu-toggle {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
.site-header .inside-header {
        padding: 8px 16px !important;
        min-height: unset !important;
    }
    .site-logo img {
        max-height: 45px !important;
    }
    .nav-primary .inside-navigation {
        padding: 4px 12px !important;
        min-height: unset !important;
    }
    .menu-toggle {
        padding: 6px 12px !important;
        line-height: 1 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE ARTICLE (single.php)
   ═══════════════════════════════════════════════════════════════ */
#single-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

#single-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

/* Article */
.single-article {
    background: var(--c-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Header */
.single-header { padding: 24px 24px 0; }

.single-cats { margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.single-cat-badge {
    background: var(--c-purple);
    color: #fff !important;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    padding: 3px 10px; border-radius: 3px;
    text-decoration: none !important;
    transition: background .2s;
}
.single-cat-badge:hover { background: var(--c-orange) !important; }

.single-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: var(--c-text) !important;
    margin: 0 0 12px !important;
}

.single-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--c-text-soft);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 0;
}
.single-meta a { color: var(--c-purple) !important; text-decoration: none !important; }

/* Image vedette */
.single-featured-img {
    margin: 0;
    overflow: hidden;
}
.single-img {
    width: 100% !important;
    height: 400px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Contenu */
.single-content {
    padding: 24px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--c-text);
}
.single-content h2, .single-content h3 { color: var(--c-purple); }
.single-content a { color: var(--c-purple) !important; }
.single-content img { max-width: 100%; border-radius: 6px; }
.single-content blockquote {
    border-left: 4px solid var(--c-purple);
    margin: 20px 0;
    padding: 12px 20px;
    background: rgba(123,31,162,.05);
    border-radius: 0 6px 6px 0;
    font-style: italic;
}

/* Navigation précédent/suivant */
.single-nav {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}
.single-nav-link {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    background: var(--c-gray);
    text-decoration: none !important;
    color: var(--c-text) !important;
    transition: background .2s;
}
.single-nav-link:hover { background: rgba(123,31,162,.08); }
.single-nav-next { text-align: right; }
.nav-label { display: block; font-size: 11px; color: var(--c-purple); font-weight: 700; margin-bottom: 4px; }
.nav-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; font-weight: 600; line-height: 1.4;
}

/* Articles liés */
.single-related { margin-top: 0; }

/* Commentaires */
.single-comments { padding: 24px; border-top: 1px solid var(--c-border); }

/* Responsive single */
@media (max-width: 900px) {
    #single-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    #single-wrap { padding: 12px; }
    .single-title { font-size: 20px !important; }
    .single-img { height: 220px !important; }
    .single-nav { flex-direction: column; }
    .single-nav-next { text-align: left; }
}

.site-logo img {
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

.site-branding-container {
    width: 100% !important;
}

.inside-header {
    justify-content: center !important;
}