/*
Theme Name: VoxNaija
Theme URI: https://voxnaija.com/
Author: VoxNaija Team
Author URI: https://voxnaija.com/
Description: A modern, high-performance entertainment, news, and digital music magazine WordPress theme with dark mode, audio streaming embeds, digital store links, lyrics support, trending charts with flame view badges, ajax load more, saved articles bookmarks, and customizer theme options.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: voxnaija
Tags: news, entertainment, music, afrobeats, blog, grid-layout, two-columns, dark-mode, custom-colors, custom-menu, featured-images, theme-options
*/


:root {
    --font-heading: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --size-body: 16px;
    --size-h1: 40px;
    --size-h2: 32px;
    --size-h3: 24px;
    --logo-width: 150px;
    --grid-headline-size: 28px;
    --grid-headline-weight: 800;
    --grid-headline-transform: none;
    --container: 1280px;
    --header-height: 80px;
    --border-radius: 8px;
    --bg-body: #ffffff;
    --accent: #ff3366;
    --accent-hover: #d61c4e;
    --secondary: #64748b;
    --link-color: #ff3366;
    --social-link-color: #1a1a1a;
    --text-main: #1a1a1a;
    --text-muted: #64748b;
    --tag-color: #64748b;
    --tag-hover-text: #1a1a1a;
    --newsletter-btn-bg: #ff3366;
    --newsletter-btn-text: #ffffff;
    --nav-card-text: #1a1a1a;
    --nav-card-label: #1a1a1a;
    --btn-bg: #ff3366;
    --btn-text: #ffffff;
    --format-icon-hover-bg: #ff3366;
    --back-to-top-bg: #ff3366;
    --back-to-top-text: #ffffff;
    --menu-text: #64748b;
    --desk-menu-size: 15px;
    --desk-menu-weight: 700;
    --desk-menu-transform: none;
    --desk-icon-color: #1a1a1a;
    --nav-padding: 15px;
    --footer-bg: #000000;
    --footer-text: #a0a0a0;
    --header-bg-desk: #ffffff;
    --header-bg-mob: #ffffff;
    --border: #eaeaea;
    --bg-card: #ffffff;
    --bg-section-alt: #f8f9fa;
    --shadow: 0 10px 40px rgba(0,0,0,0.08);
    --shadow-hover: 0 20px 40px rgba(0,0,0,0.12);
    --radius: 12px;
}

[data-theme="dark"] {
    --bg-body: #0f0f12;
    --bg-card: #1c1c22;
    --bg-section-alt: #16161a;
    --accent: #ff3366;
    --secondary: #a0a0a0;
    --social-link-color: #ffffff;
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --tag-color: #a0a0a0;
    --tag-hover-text: #ffffff;
    --newsletter-btn-bg: #ff3366;
    --newsletter-btn-text: #ffffff;
    --nav-card-bg: #1a1a1a;
    --nav-card-text: #ffffff;
    --nav-card-label: #ffffff;
    --menu-text: #a0a0a0;
    --desk-icon-color: #ffffff;
    --btn-bg: #ff3366;
    --btn-text: #ffffff;
    --format-icon-hover-bg: #ff3366;
    --back-to-top-bg: #ff3366;
    --back-to-top-text: #ffffff;
    --header-bg-desk: #0f0f12;
    --header-bg-mob: #0f0f12;
    --border: #2d2d35;
    --shadow: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-hover: 0 10px 30px rgba(0,0,0,0.6);
}
/* ==========================================================================
   1. CSS VARIABLES & THEME MODES
   ========================================================================== */
:root {
    /* Core Colors */
    --bg-body: #ffffff;
    --bg-card: #ffffff;
    --bg-section-alt: #f8f9fa;
    --text-main: #1a1a1a;
    --border: #eaeaea;
    
    /* Dynamic Accent (Set via PHP) */
    --accent: #ff3366; 
    --accent-hover: #d61c4e;

    /* News Demo Specific Mappings */
    --brand-color: var(--accent);
    --brand-hover: var(--accent-hover);
    --brand-accent: #1E3A8A;
    --border-light: #E2E8F0;
    --border-heavy: #0F172A;

    /* Live Blogging specific */
    --ep-live-color: #ef4444;

    /* Shadows & Radius */
    --shadow: 0 10px 40px rgba(0,0,0,0.08);
    --shadow-hover: 0 20px 40px rgba(0,0,0,0.12);
    --radius: 16px;
    
    /* Layout & Sizing */
    --container: 1280px;
    --header-height: 80px;
    
    /* Dynamic Admin Bar Handling */
    --ep-admin-bar: 0px;
}

/* --- Dark Mode Variables --- */
[data-theme="dark"] {
    --bg-body: #0f0f12;
    --bg-card: #1c1c22;
    --bg-section-alt: #16161a;
    --text-main: #ffffff;
    --border: #2d2d35;
    --border-light: #334155;
    --border-heavy: #F8FAFC;
    --shadow: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-hover: 0 10px 30px rgba(0,0,0,0.6);
}

/* ==========================================================================
   2. BASE RESET & TYPOGRAPHY
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body, 'Inter', sans-serif);
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    transition: background 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

ul {
    list-style: none;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

i {
    vertical-align: middle;
    line-height: 1;
}

/* ==========================================================================
   3. LAYOUT UTILITIES & ADMIN BAR FIXES
   ========================================================================== */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Dynamic Admin Bar Handling --- */
body.admin-bar { --ep-admin-bar: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar { --ep-admin-bar: 46px; }
}

/* Prevent WP double-spacing and enforce sticky boundaries */
body.admin-bar header.site-header { margin-top: 0 !important; }

header.site-header.is-sticky,
header.site-header.header-style-3 {
    top: var(--ep-admin-bar) !important;
}

body.admin-bar .shortcut-nav-container {
    top: calc(var(--header-height) + var(--ep-admin-bar)) !important;
}

/* Boxed Layout Magic Fix */
body.boxed-layout header.site-header.is-sticky {
    position: sticky !important; 
    top: var(--ep-admin-bar) !important;
    width: 100% !important;
    max-width: 100% !important; 
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Scroll Progress Utility */
#scroll-progress-container {
    position: fixed;
    top: var(--ep-admin-bar);
    left: 0;
    width: 100%;
    height: 4px;
    background-color: transparent;
    z-index: 999999;
}
#scroll-progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--accent);
    transition: width 0.1s ease-out;
}

/* ==========================================================================
   4. GLOBAL COMPONENTS
   ========================================================================== */
/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}
.btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    color: #fff;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--border);
    color: var(--text-main);
    box-shadow: none;
}
.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
}

/* --- Badges --- */
.badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 30px;
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.badge-custom-tax {
    background: #000;
    color: #fff;
    font-size: 0.6rem;
}

/* --- Loaders & Preloaders --- */
#ep-preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-body);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.ep-spinner {
    width: 50px; height: 50px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ep-spin 1s linear infinite;
}
.ri-spin {
    animation: ep-spin 1s linear infinite;
    display: inline-block;
}
@keyframes ep-spin { 100% { transform: rotate(360deg); } }

/* Ajax loading mask */
.ajax-loading {
    position: relative;
    pointer-events: none;
    min-height: 300px;
    transition: opacity 0.3s ease;
}
.ajax-loading::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10;
    border-radius: var(--radius);
    transition: all 0.3s ease;
}
[data-theme="dark"] .ajax-loading::after { background: rgba(15, 15, 18, 0.6); }

/* --- Back to Top --- */
.back-to-top {
    position: fixed; bottom: 30px; right: 30px;
    width: 45px; height: 45px;
    background: var(--back-to-top-bg, var(--accent)); color: var(--back-to-top-text, #fff);
    border: none; border-radius: 50%;
    font-size: 1.5rem; cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 990;
    display: flex; align-items: center; justify-content: center;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--secondary); color: var(--back-to-top-text, #fff); transform: translateY(-5px); }

/* ==========================================================================
   5. HEADERS, NAVIGATION & LOGOS
   ========================================================================== */
.header-left-wrap {
    position: absolute;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    z-index: 10;
}
.header-socials-group { display: flex; gap: 8px; }
.header-socials-group.left-socials { position: static; }
.header-date {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
    display: flex;
    align-items: center;
}
.header-date-style-7 {
    order: 1;
    margin-right: auto;
    padding-left: 20px;
}

/* --- Dynamic Logos --- */
.ep-logo-link { display: block; }
.ep-logo-img { width: 100%; height: auto; }
.ep-logo-text {
    font-weight: 900;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    color: var(--logo-text-color, #1a1a1a);
}
[data-theme="dark"] .ep-logo-text {
    color: var(--logo-text-color, #ffffff);
}
.ep-logo-accent { color: var(--logo-accent-color, var(--accent)); }
.logo-no-margin { margin-right: 0; }

.ep-logo-light svg, 
.ep-logo-dark svg,
.footer-custom-logo svg {
    width: 100%;
    height: auto;
    display: block;
}
.ep-logo-dark { display: none !important; }
[data-theme="dark"] .ep-logo-light { display: none !important; }
[data-theme="dark"] .ep-logo-dark { display: block !important; }

/* Search State */
.ep-search-spinner { display: none; color: var(--accent); }
.ep-search-view-all { display: none; }

/* ==========================================================================
   6. SECTION HEADINGS
   ========================================================================== */
.ep-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
    width: 100%;
}
.ep-section-heading .title-text {
    font-size: var(--grid-headline-size, 1.75rem);
    font-weight: var(--grid-headline-weight, 800);
    text-transform: var(--grid-headline-transform, none);
    font-family: var(--grid-headline-font, var(--font-heading, 'Manrope', sans-serif));
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}
.ep-section-heading .view-all {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.ep-section-heading .view-all:hover { color: var(--accent); }

/* Specific Heading Styles */
.ep-heading-style_1 .title-text { position: relative; padding-right: 20px; z-index: 2; background: var(--bg-body); }
.ep-heading-style_1::after { content: ''; flex-grow: 1; height: 2px; background: var(--border); opacity: 0.6; border-radius: 2px; }

.ep-heading-style_2 { border-bottom: 1px solid var(--border); padding-bottom: 15px; align-items: flex-end; }

.ep-heading-style_3 .title-text::before { content: ''; display: block; width: 6px; height: 1.1em; background-color: var(--accent); border-radius: 10px; margin-right: 12px; }

.ep-heading-style_4 { border-top: 2px solid var(--text-main); padding-top: 15px; }
.ep-heading-style_4 .title-text { text-transform: var(--grid-headline-transform, uppercase); font-size: var(--grid-headline-size, 1.5rem); font-weight: var(--grid-headline-weight, 800); letter-spacing: 0.5px; }
.ep-heading-style_4 .title-text::after { content: '\EA6A'; font-family: 'remixicon'; margin-left: 8px; font-size: 1.3rem; font-weight: normal; }

.ep-heading-style_5 { border-bottom: 4px double var(--text-main); padding-bottom: 10px; align-items: flex-end; }
[data-theme="dark"] .ep-heading-style_5 { border-bottom-color: var(--text-main); }

.ep-heading-style_6 { justify-content: center; text-align: center; position: relative; padding-bottom: 0; }
.ep-heading-style_6::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--border); z-index: 1; }
.ep-heading-style_6 .title-text { position: relative; padding-bottom: 15px; padding: 0 5px; z-index: 2; }
.ep-heading-style_6 .title-text::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--accent); }
.ep-heading-style_6 .view-all { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; }

.ep-heading-style_7 { border-top: 4px solid var(--border-heavy); border-bottom: 1px solid var(--border-heavy); padding: 0.75rem 0; align-items: center; }
.ep-heading-style_7 .title-text { text-transform: var(--grid-headline-transform, uppercase); font-size: var(--grid-headline-size, 1.5rem); font-weight: var(--grid-headline-weight, 800); letter-spacing: 0.5px; }
[data-theme="dark"] .ep-heading-style_7 { border-color: var(--border-heavy); }

.ep-heading-style_8 { border: none; padding-bottom: 0; }

/* ==========================================================================
   7. GRIDS, CARDS & PAGINATION
   ========================================================================== */
.card-thumb-placeholder { width: 100%; height: 100%; background: var(--bg-section-alt); }
.card-excerpt { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 15px; }
.card-meta-info { display: flex; align-items: center; gap: 10px; }

.no-posts-message {
    padding: 20px; text-align: center; background: var(--bg-section-alt);
    border-radius: var(--radius); color: var(--text-muted); grid-column: 1 / -1;
}
.no-posts-icon { font-size: 2rem; margin-bottom: 10px; display: block; }

/* --- Pagination Elements --- */
.ep-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.ep-pagination.numeric-pagination a, 
.ep-pagination.numeric-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 8px;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-main); font-weight: 700; transition: 0.2s;
}
.ep-pagination.numeric-pagination a:hover {
    background: var(--bg-section-alt); border-color: var(--accent);
    color: var(--accent); transform: translateY(-2px);
}
.ep-pagination.numeric-pagination span.current {
    background: var(--accent); color: #fff; border-color: var(--accent);
    box-shadow: 0 4px 10px rgba(255, 51, 102, 0.2);
}

.load-more-container { text-align: center; margin-top: 50px; }

.ep-pagination.prev-next-pagination { justify-content: center; gap: 15px; }
.btn-prev-next {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 14px 32px; background: #f4f5f7; color: var(--text-main);
    border: none; border-radius: 4px; font-size: 0.95rem; font-weight: 700;
    cursor: pointer; transition: all 0.25s ease;
}
[data-theme="dark"] .btn-prev-next { background: #1f2024; }
.btn-prev-next:hover:not(:disabled) { background: #e5e7eb; color: var(--accent); }
[data-theme="dark"] .btn-prev-next:hover:not(:disabled) { background: #2a2b30; }
.btn-prev-next:disabled { opacity: 0.4; cursor: not-allowed; }

/* ==========================================================================
   8. SINGLE ARTICLE STYLES
   ========================================================================== */
.ep-main-content { min-height: 100%; }
.single-content-block { margin-bottom: 3rem; }

.content-narrow { margin: 0 auto; min-height: 100%; }
.content-narrow-style-1 { max-width: 1000px; }
.content-narrow-default { max-width: 800px; }

.article-body-wrapper { display: flex; gap: 40px; }
.article-body { flex-grow: 1; min-width: 0; }
.ep-author-role {
    display: inline-block; font-size: 0.8rem; font-weight: 700;
    color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px;
    margin-top: 3px;
}

/* Author Archives Layout */
.author-socials { display: flex; gap: 15px !important; margin-top: 10px; }
.author-socials .share-btn {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; background: var(--bg-card); color: var(--text-muted);
    border: 1px solid var(--border); transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.author-socials .share-btn:hover {
    background: var(--accent); color: #fff; border-color: var(--accent);
    transform: translateY(-4px); box-shadow: 0 8px 20px rgba(255, 51, 102, 0.25);
}
.author-socials .share-btn.tw:hover { background: #000; border-color: #000; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
.author-socials .share-btn.fb:hover { background: #1877F2; border-color: #1877F2; box-shadow: 0 8px 20px rgba(24, 119, 242, 0.3); }

/* ==========================================================================
   9. SPECIAL MODULES
   ========================================================================== */

/* --- Live Blogging Pulse --- */
.like-btn.liked { background-color: rgba(239, 68, 68, 0.1) !important; color: var(--ep-live-color) !important; border-color: var(--ep-live-color) !important; }
.ep-live-badge { display: inline-flex; align-items: center; gap: 7px; line-height: 1; font-weight: 800; color: var(--ep-live-color); }
.single-live-badge { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.grid-live-badge { margin-left: 10px; margin-right: 8px; transform: translateY(-2px); }

.ep-live-dot {
    position: relative; display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--ep-live-color); background-color: var(--ep-live-color);
    background-clip: content-box; padding: 2px; border-radius: 50%;
    transform-origin: center; flex-shrink: 0; box-sizing: border-box;
}
.ep-live-dot::after {
    content: ''; position: absolute; top: -2px; left: -2px; width: 14px; height: 14px;
    border: 2px solid var(--ep-live-color); border-radius: 50%; box-sizing: border-box;
    animation: ep-live-pulse-anim 1.5s cubic-bezier(0.21, 0.53, 0.56, 0.8) infinite;
}
@keyframes ep-live-pulse-anim {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.5); }
}
.grid-live-badge .ep-live-dot::after { display: none !important; animation: none !important; }

/* --- Review System --- */
.ep-review-box {
    background: var(--bg-section-alt); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 40px; margin: 4rem 0; box-shadow: var(--shadow); clear: both;
}
.ep-review-header { display: flex; gap: 35px; align-items: center; border-bottom: 2px solid var(--border); padding-bottom: 30px; margin-bottom: 30px; }
.ep-review-score-wrap { flex-shrink: 0; }
.ep-review-score-circle {
    width: 120px; height: 120px; border-radius: 50%; border: 8px solid var(--text-main);
    display: flex; align-items: center; justify-content: center; font-size: 3.2rem;
    font-weight: 900; font-family: var(--font-heading); color: var(--text-main); box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.ep-review-score-circle.excellent { border-color: #10B981; color: #10B981; }
.ep-review-score-circle.good { border-color: var(--accent); color: var(--accent); }
.ep-review-score-circle.average { border-color: #F59E0B; color: #F59E0B; }
.ep-review-score-circle.poor { border-color: #EF4444; color: #EF4444; }

.ep-review-info { display: flex; flex-direction: column; justify-content: center; }
.ep-review-overline { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 8px; display: block; }
.ep-review-info h3 { font-size: 2rem !important; font-weight: 900 !important; margin: 0 0 12px !important; line-height: 1.2 !important; color: var(--text-main) !important; font-family: var(--font-heading) !important; }
.ep-review-info p { font-size: 1.05rem !important; color: var(--text-muted) !important; margin: 0 !important; }

.ep-review-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ep-review-list h4 { font-size: 1.1rem !important; font-weight: 800 !important; text-transform: uppercase !important; margin-bottom: 20px !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.ep-review-list.pros h4 { color: #10B981 !important; }
.ep-review-list.cons h4 { color: #EF4444 !important; }
.ep-review-list ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ep-review-list li { position: relative !important; padding-left: 32px !important; margin-bottom: 14px !important; font-size: 0.95rem !important; font-weight: 500 !important; }
.ep-review-list li::before { display: none !important; }
.ep-review-list li i { position: absolute; left: 0; top: 2px; font-size: 1.3rem; }
.ep-review-list.pros li i { color: #10B981; }
.ep-review-list.cons li i { color: #EF4444; }

@media (max-width: 768px) {
    .ep-review-box { padding: 30px 20px; }
    .ep-review-header { flex-direction: column; text-align: center; gap: 20px; }
    .ep-review-pros-cons { grid-template-columns: 1fr; gap: 25px; }
}

/* Star Rating Mode */
.ep-review-stars-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 120px; padding: 10px; }
.ep-review-stars { display: flex; gap: 4px; font-size: 1.9rem; line-height: 1; }
.ep-review-stars.excellent { color: #10B981; }
.ep-review-stars.good { color: var(--accent); }
.ep-review-stars.average { color: #F59E0B; }
.ep-review-stars.poor { color: #EF4444; }
.ep-review-stars-text { font-size: 1.25rem; font-weight: 900; font-family: var(--font-heading); }

/* --- Digital Stores --- */
.ep-store-btn { display: flex; align-items: center; gap: 12px; padding: 10px 25px; border-radius: 50px; min-width: 170px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.ep-store-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.ep-apple-btn { background-color: #000; color: #fff !important; }
[data-theme="dark"] .ep-apple-btn { background-color: #fff; color: #000 !important; }
.ep-store-btn .store-icon svg { width: 24px; height: 24px; fill: currentColor; }
.ep-store-btn .store-text { display: flex; flex-direction: column; text-align: left; }
.ep-store-btn .store-text small { font-size: 10px; font-weight: 500; text-transform: uppercase; }
.ep-store-btn .store-text strong { font-size: 15px; font-weight: 800; font-family: var(--font-heading); }

.ep-digital-embed-youtube { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow); }
.ep-digital-embed-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* --- Contact & Forms --- */
.contact-layout.style-1 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; }
.contact-layout.style-2 { display: block; max-width: 700px; margin: 0 auto; }
@media (max-width: 992px) { .contact-layout.style-1 { grid-template-columns: 1fr; gap: 50px; } }

.ep-premium-form input[type="text"], .ep-premium-form input[type="email"], .ep-premium-form input[type="tel"], .ep-premium-form textarea {
    width: 100%; padding: 16px 20px; background: var(--bg-section-alt); border: 1px solid transparent; border-radius: 8px; color: var(--text-main); margin-bottom: 20px; transition: all 0.3s ease;
}
.ep-premium-form input:focus, .ep-premium-form textarea:focus { outline: none; border-color: var(--accent); background: var(--bg-card); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.ep-premium-form label { font-weight: 700; display: block; margin-bottom: 8px; font-size: 0.95rem; }
.ep-premium-form button[type="submit"], .ep-premium-form input[type="submit"] {
    background: var(--accent); color: #fff; font-weight: 800; padding: 16px 40px; border: none; border-radius: 4px; cursor: pointer; text-transform: uppercase; transition: all 0.3s ease;
}
.ep-premium-form button[type="submit"]:hover { background: var(--text-main); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.contact-social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 20px; text-align: center; }
.contact-social-item { display: flex; flex-direction: column; align-items: center; transition: transform 0.3s ease; color: var(--social-link-color); text-decoration: none; }
.contact-social-item:hover { transform: translateY(-5px); }
.social-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.8rem; margin-bottom: 12px; }
.social-name { font-weight: 800; font-size: 0.9rem; margin-bottom: 2px; color: var(--social-link-color); }
.social-action { font-size: 0.8rem; color: var(--text-muted); }

.contact-directory-list { display: flex; flex-direction: column; gap: 25px; }
.contact-directory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.directory-card { background: var(--bg-card); border: 1px solid var(--border); padding: 25px; border-radius: var(--radius); border-left: 4px solid var(--accent); transition: transform 0.3s ease; }
.directory-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.directory-card.centered { text-align: center; border-left: 1px solid var(--border); border-top: 4px solid var(--accent); }
.dept-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.directory-card.centered .dept-title { justify-content: center; }
.dept-role { font-size: 0.75rem; background: rgba(255, 51, 102, 0.1); color: var(--accent); padding: 4px 10px; border-radius: 20px; text-transform: uppercase; font-weight: 800; }
.dept-details { display: flex; flex-direction: column; gap: 12px; }
.detail-row { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 600; }
.directory-card.centered .detail-row { justify-content: center; }
.detail-row i { color: var(--accent); font-size: 1.2rem; }
.detail-row a:hover { color: var(--accent); }
.address-row { align-items: flex-start; color: var(--text-muted); font-weight: normal; }

/* ==========================================================================
   10. ADVERTISING & MONETIZATION
   ========================================================================== */

/* Header & In-Content Ad Wrapper */
.ep-header-ad-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Prevents overflow from hardcoded ad iframes */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

/* Force fixed-width Ad Iframes to scale responsively */
.ep-ad-container iframe {
    max-width: 100% !important;
    display: block;
    margin: 0 auto;
}

/* Sticky Bottom Ad */
.ep-ad-footer {
    position: fixed !important;
    bottom: 0; left: 0; right: 0; width: 100%;
    margin: 0 !important;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
    z-index: 9999;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.ep-ad-footer button {
    top: -12px !important;
    right: 15px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

body:has(.ep-ad-footer) {
    padding-bottom: 90px;
}

/* ==========================================================================
   11. FOOTER STYLES
   ========================================================================== */
.site-footer {
    margin-top: 0 !important;
    border-top: 80px solid transparent; /* Footer margin collapse fix */
}

.footer-custom-logo { display: block; line-height: 0; }
.footer-text-logo { font-weight: 900; font-size: 1.8rem; display: flex; align-items: center; gap: 5px; }
.footer-brand-logo { margin-bottom: 20px; }

/* Footer Newsletter */
.footer-subscribe-text { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.footer-subscribe-form {
    display: flex; flex-wrap: nowrap; width: 100%;
    background: var(--bg-card); border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
}
.footer-subscribe-input {
    flex-grow: 1; flex-shrink: 1; min-width: 0; background: transparent; border: none;
    padding: 12px 15px; color: var(--text-main); outline: none; box-shadow: none;
}
.footer-subscribe-btn {
    flex-basis: 54px; flex-shrink: 0; flex-grow: 0; width: 54px; height: auto;
    background: var(--accent); color: #fff; border: none; cursor: pointer; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center; padding: 0; margin: 0;
}

/* ==========================================================================
   EXPERT PULSE: BOXED LAYOUT & AD GAP FIX
   ========================================================================== */

/* 1. Prevent global body settings from breaking sticky elements */
body {
    overflow-x: clip !important; 
}

/* 2. Force the header to respect the boxed boundaries natively */
header.site-header {
    position: sticky !important;
    top: var(--ep-admin-bar, 0px) !important;
    width: 100% !important;
    max-width: var(--container, 1200px) !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
}

/* 3. FIX THE GAP: Apply Boxed styling to the Ad Wrapper */
/* This connects the header to the main content so the box isn't split in half */
.ep-header-ad-wrapper {
    max-width: var(--container, 1200px) !important;
    margin: 0 auto !important;
    background-color: var(--bg-body) !important;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

/* 4. Fix inner container width on the header to stop horizontal overflow */
header.site-header .container.header-inner {
    max-width: 100% !important;
}

/* ==========================================================================
   TRENDING PAGE: BOXED LAYOUT FIX
   ========================================================================== */

/* Force the Trending Page wrapper to act like the standard .site-main box */
.ep-trending-page-wrapper {
    max-width: var(--container, 1200px) !important;
    margin: 0 auto !important;
    background-color: var(--bg-body) !important;
    box-shadow: 0 0 50px rgba(0,0,0,0.1) !important;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}


/* ==========================================================================
   ARCHIVE & VISUAL TAG PAGES: BOXED LAYOUT FIX
   ========================================================================== */

/* 1. Force the archive header to act as part of the Boxed Layout */
.archive-header {
    max-width: var(--container, 1200px) !important;
    
    /* This centers the box AND overrides the inline margin-bottom: 50px */
    margin: 0 auto !important; 
    
    box-shadow: 0 0 50px rgba(0,0,0,0.1) !important;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

/* 2. Restore the visual spacing INSIDE the white box */
/* By using padding instead of margin, the white background remains continuous */
body:has(.archive-header) .site-main {
    padding-top: 50px !important;
}

/* ==========================================================================
   FOOTER GAP: BOXED LAYOUT FIX
   ========================================================================== */

/* Override the inline margin-bottom that splits the box above the footer */
main.site-main {
    margin-bottom: 0 !important; 
    
    /* Convert the lost space into padding so the background stays continuous */
    padding-bottom: 5rem !important; 
}

/* ==========================================================================
   MOBILE HEADER: BOXED LAYOUT FIX (STRONG OVERRIDE)
   ========================================================================== */

@media (max-width: 992px) {
    /* 1. Use a stronger selector (html body) to OVERRIDE the inline dynamic CSS */
    html body.wp-theme-expertpulse {
        padding-top: 0 !important;
    }

    /* 2. Apply Boxed Layout styling to the Mobile Shortcut Nav */
    .shortcut-nav-container {
        max-width: var(--container, 1200px) !important;
        margin: 0 auto !important;
        background-color: var(--shortcut-nav-bg, var(--bg-body)) !important;
        box-shadow: 0 0 50px rgba(0,0,0,0.1) !important;
        box-sizing: border-box;
        border-left: none !important;
        border-right: none !important;
        
        /* Ensure it behaves correctly in the sticky flow alongside the header */
        position: sticky !important;
        top: var(--header-height) !important;
        z-index: 999;
    }
}

/* ==========================================================================
   TRANSPARENT HEADER (STYLE 3): AD OVERLAP FIX
   ========================================================================== */

/* Forces the ad wrapper to push the ad down below the floating transparent 
   header, while keeping the white background seamlessly connected.
*/
body:has(header.header-style-3) .ep-header-ad-wrapper {
    padding-top: calc(var(--header-height) + 20px) !important;
}

/* Ensure the ad itself stays centered vertically in its new space */
body:has(header.header-style-3) .ep-ad-header {
    margin-top: 0 !important;
}

.store-text {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1;
}

.store-text small {
    line-height: 1;
    margin-bottom: 1px;
}

.store-text strong {
    line-height: 1;
    margin-top: -1px;
}

/* ==========================================================================
   GLOBAL RESPONSIVE — CROSS-DEVICE MOBILE OPTIMIZATION
   ========================================================================== */

/* 1. Prevent background scrolling when modals or mobile drawers are open */
body.no-scroll {
    overflow: hidden !important;
    touch-action: none;
}

/* 2. Universal media constraints */
img, video, iframe, audio, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* 3. Typography & Word Breaking (Prevents horizontal layout blowouts) */
body, p, h1, h2, h3, h4, h5, h6, .card-title, .headline, .article-title, .ep-article-tagline, .abstract {
    overflow-wrap: break-word;
    word-break: break-word;
}

.comment-author-email-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 1rem;
}

/* 4. Touch Targets (Minimum tap targets for mobile usability) */
@media (max-width: 768px) {
    .btn,
    .icon-btn,
    .action-btn,
    .save-btn,
    .mobile-menu-trigger,
    .mobile-nav-close,
    .search-close,
    .share-btn {
        min-width: 40px;
        min-height: 40px;
        touch-action: manipulation;
    }

    /* Container fluid padding on tablet & mobile */
    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Header adjustments */
    header.site-header {
        height: 70px;
    }

    /* Headings fluid scaling */
    h1, .hero-title, .article-title {
        font-size: clamp(1.6rem, 5.5vw, 2.5rem);
    }
    h2, .ep-section-heading .title-text {
        font-size: clamp(1.3rem, 4vw, 1.8rem);
    }
}

/* 5. Mobile Phones (<= 576px) */
@media (max-width: 576px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Header height & spacing */
    header.site-header {
        height: 64px;
    }
    .header-actions {
        gap: 8px;
    }

    /* Hero section padding */
    .grid-hero-section {
        padding: 20px 0;
    }
    .grid-hero-layout {
        gap: 16px;
        min-height: auto;
        margin-bottom: 24px;
    }
    .feat-card {
        min-height: 280px;
    }
    .feat-overlay {
        padding: 20px 14px 14px;
        padding-top: 50px;
    }
    .feat-title {
        font-size: 1.25rem !important;
        line-height: 1.35;
        margin-bottom: 10px;
    }
    .feat-meta {
        font-size: 0.78rem;
        gap: 10px;
        margin-bottom: 6px;
    }

    /* Standard magazine grid */
    .grid-standard-section {
        padding: 16px 0;
    }
    .magazine-grid {
        gap: 16px;
    }
    .card-body {
        padding: 15px;
    }
    .card-title {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    /* Zebra grid */
    .grid-zebra-section {
        padding: 30px 0;
    }
    .zebra-layout {
        gap: 20px;
    }
    .zebra-main-post {
        height: 340px;
    }
    .zebra-item {
        padding: 12px;
        gap: 12px;
    }
    .zebra-thumb-link .zebra-thumb {
        width: 68px;
        height: 68px;
    }
    .zebra-info h4 {
        font-size: 0.95rem;
    }

    /* Trending list */
    .list-trending-section {
        padding: 20px 0;
    }
    .chart-item {
        padding: 12px;
        gap: 12px;
    }
    .chart-thumb {
        width: 64px;
        height: 64px;
    }
    .chart-title {
        font-size: 0.95rem;
    }
    .chart-rank {
        font-size: 1.1rem;
        min-width: 24px;
    }

    /* Digital Store Buttons - Stack Cleanly Full Width */
    .digital-store-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .ep-store-btn {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 12px 20px !important;
    }

    /* Native Audio Player */
    .native-audio-player {
        padding: 15px;
        border-radius: 12px;
    }

    /* Lyrics Section */
    .ep-lyrics-section {
        padding: 18px 14px;
        border-radius: 12px;
    }
    #songLyricsText {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Single bottom share and tags */
    .single-bottom-share-block {
        margin: 20px auto;
    }
    .bottom-share-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 15px 0;
    }
    .bottom-share-wrapper .share-icons {
        flex-wrap: wrap;
        gap: 8px;
    }
    .share-btn {
        width: 38px;
        height: 38px;
    }

    /* Next / Previous Read Next */
    .ep-post-navigation .ep-nav-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Comments form & list */
    .comment-respond {
        padding: 20px 14px;
        border-radius: 12px;
    }
    .comment-author-email-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"],
    .comment-form textarea {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
    .comment-form .form-submit input[type="submit"] {
        width: 100%;
        padding: 14px;
    }

    /* Footer */
    .site-footer {
        margin-top: 40px;
        padding-top: 40px;
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
        text-align: left;
    }
    .footer-col {
        min-width: 0;
    }
    .footer-subscribe {
        flex-direction: column;
        border-radius: 8px;
    }
    .footer-subscribe input {
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .footer-subscribe button {
        width: 100%;
        height: 44px;
        border-radius: 0 0 8px 8px;
    }
    .footer-socials {
        justify-content: flex-start;
    }
    .footer-bottom {
        padding: 20px 0;
        font-size: 0.85rem;
    }

    /* Back to top */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }
}

/* 6. Very Small Screens (<= 380px) */
@media (max-width: 380px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .logo a.ep-logo-link {
        max-width: 110px !important;
    }
    .header-actions {
        gap: 4px;
    }
    .site-header .header-actions .icon-btn,
    .mobile-menu-trigger {
        width: 34px !important;
        height: 34px !important;
        font-size: 1.05rem !important;
    }
    .card-footer {
        font-size: 0.75rem;
    }
    .card-meta-info {
        gap: 6px;
    }
}