/*
Theme Name: IT Biponi News Theme
Theme URI: #
Author: IT Biponi
Description: Professional Bangla News Portal Theme with modular layouts, dynamic section headers, and Redux Framework integration.
Version: 1.2.0
Text Domain: it-biponi-news
*/

/* =============================================
   SECTION HEADER DESIGNS — Each Truly Unique
   ============================================= */

/* --- Base Reset (remove old defaults) --- */
.center-unique-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: inline-block;
}

.center-unique-title i {
    margin-right: 8px;
}

.center-unique-title a {
    text-decoration: none;
    color: inherit;
}

/* ===========================================
   STYLE 1 — Section 2: Full-Width Gradient Bar
   =========================================== */
.s2-header-block {
    margin-bottom: 25px;
    text-align: center;
}

.center-unique-title.style-1 {
    display: block;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--primary-color) 15%, var(--primary-color) 85%, transparent 100%);
    color: #fff;
    padding: 10px 0 !important;
    font-size: 22px;
    text-align: center;
}

.center-unique-title.style-1 i {
    color: #fde68a;
}

/* ===========================================
   STYLE 2 — Section 3 (জাতীয়): Left Border Accent
   =========================================== */
.s3-main-header {
    margin-bottom: 25px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 10px;
}

.center-unique-title.style-2 {
    color: #1e293b;
    padding-left: 15px !important;
    border-left: 5px solid #f97316 !important;
    text-align: left;
}

.center-unique-title.style-2 i {
    color: #f97316;
}

/* ===========================================
   STYLE 3 — Section 4 (সারাদেশ): Teal BG + White Text
   =========================================== */
.s4-main-header {
    margin-bottom: 25px;
    background: #0d9488;
    padding: 12px 20px;
    border-radius: 6px;
}

.center-unique-title.style-3 {
    color: #fff;
    text-align: left;
}

.center-unique-title.style-3 i {
    color: #5eead4;
}

/* ===========================================
   STYLE 4 — Gallery (গ্যালারি): Center + Bottom Divider
   =========================================== */
.sg-main-header {
    text-align: center;
    margin-bottom: 30px;
}

.center-unique-title.style-4 {
    color: #1e3a5f;
    display: inline-block;
    position: relative;
    padding-bottom: 12px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 20px;
}

.center-unique-title.style-4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
}

.center-unique-title.style-4 i {
    color: #3b82f6;
}

/* ===========================================
   STYLE 5 — Layout 1: Purple Pill (Center)
   =========================================== */
.s5-main-header {
    margin-bottom: 25px;
    text-align: center;
}

.center-unique-title.style-5 {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    padding: 10px 30px !important;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

.center-unique-title.style-5 i {
    color: #fbbf24;
}

/* ===========================================
   STYLE 6 — Layout 2: Red Left Bar + Gray BG
   =========================================== */
.s6-main-header {
    margin-bottom: 25px;
    background: #f1f5f9;
    border-left: 5px solid #ef4444;
    padding: 12px 18px;
}

.center-unique-title.style-6 {
    color: #991b1b;
    text-align: left;
}

.center-unique-title.style-6 i {
    color: #ef4444;
}

/* ===========================================
   STYLE 7 — Layout 3: Center + Double Line Divider
   =========================================== */
.s7-main-header {
    margin-bottom: 25px;
    text-align: center;
    position: relative;
    padding: 0 0 15px 0;
}

.s7-main-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #d1d5db;
}

.s7-main-header::before {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 1px;
    background: #d1d5db;
}

.center-unique-title.style-7 {
    color: #78350f;
    position: relative;
    z-index: 1;
}

.center-unique-title.style-7 i {
    color: #f59e0b;
}

/* ===========================================
   STYLE 8 — Layout 4 (রাজনীতি/স্বাস্থ্য): Green Bottom Border
   =========================================== */
.s8-cat-header {
    margin-bottom: 20px;
    border-bottom: 3px solid #10b981;
    padding-bottom: 8px;
}

.center-unique-title.style-8 {
    color: #065f46;
    text-align: left;
    padding-left: 12px !important;
    border-left: 4px solid #10b981 !important;
}

.center-unique-title.style-8 i {
    color: #059669;
}

/* ===========================================
   STYLE 9 — Layout 5 (বিনোদন): Dark BG Badge (Center)
   =========================================== */
.s9-header {
    margin-bottom: 25px;
    text-align: center;
}

.center-unique-title.style-9 {
    color: #fff;
    background: #1e1b4b;
    padding: 10px 35px !important;
    border-radius: 4px;
    position: relative;
}

.center-unique-title.style-9::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 6px solid #1e1b4b;
}

.center-unique-title.style-9 i {
    color: #a78bfa;
}

/* ===========================================
   STYLE 10 — Layout 6 (অর্থনীতি/প্রবাস): Pink Top Line + Left Align
   =========================================== */
.s10-cat-header {
    margin-bottom: 20px;
    border-top: 4px solid #ec4899;
    padding-top: 10px;
    background: #fdf2f8;
    padding: 12px 15px 10px 15px;
}

.center-unique-title.style-10 {
    color: #831843;
    text-align: left;
}

.center-unique-title.style-10 i {
    color: #ec4899;
}

/* ===========================================
   STYLE 11 — Layout 7 (জবস/তথ্যপ্রযুক্তি): Cyan Skew Tag
   =========================================== */
.s11-cat-header {
    margin-bottom: 20px;
    text-align: left;
}

.center-unique-title.style-11 {
    color: #155e75;
    background: linear-gradient(135deg, #cffafe, #a5f3fc);
    padding: 8px 25px !important;
    transform: skewX(-5deg);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15);
    border-left: 4px solid #06b6d4 !important;
}

.center-unique-title.style-11 i {
    transform: skewX(5deg);
    display: inline-block;
    color: #0891b2;
}

/* ===========================================
   Responsive
   =========================================== */
@media (max-width: 768px) {
    .center-unique-title {
        font-size: 18px;
    }

    .center-unique-title.style-1 {
        font-size: 18px;
    }

    .center-unique-title.style-5 {
        padding: 8px 20px !important;
    }
}