/*
Theme Name: ExpertPulse
Theme URI: https://expertwp.io/downloads/expertpulse-premium-wordpress-theme/
Description: A fast, modular news & magazine WordPress theme with 23 one-click demos, 15 headers and 25 footers, light & dark mode, live blogging and a breaking news ticker.
Version: 4.3.21
Author: Expertsubmit
License: Split License (GPLv2 for PHP, Proprietary for Design/CSS/JS)
Text Domain: expertpulse

==========================================================================
   TABLE OF CONTENTS
==========================================================================
   1. CSS Variables & Theme Modes
   2. Base Reset & Typography
   3. Layout Utilities & Admin Bar Fixes
   4. Global Components (Buttons, Badges, Loaders)
   5. Headers, Navigation & Logos
   6. Section Headings (Styles 1-8)
   7. Grids, Cards & Pagination
   8. Single Article Styles
   9. Special Modules (Live Blogging, Reviews, Forms)
   10. Advertising & Monetization
   11. Footer Styles
========================================================================== */

/* ==========================================================================
   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;
    --ep-live-text: #dc2626; /* text on light backgrounds (4.8:1) */

    /* 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"] {
    --ep-live-text: #f87171;
    --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(--ep-header-stick, 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: var(--on-accent-fill, #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: var(--on-accent-fill, #fff); border-color: var(--accent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--accent-fill, #ff3366) 20%, transparent);
}

.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: var(--on-accent-fill, #fff); border-color: var(--accent);
    transform: translateY(-4px); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-fill, #ff3366) 25%, transparent);
}
.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-text, 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: minmax(0, 1fr) minmax(0, 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: minmax(0, 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: minmax(0, 1.5fr) minmax(0, 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: minmax(0, 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: var(--on-accent-fill, #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: color-mix(in srgb, var(--accent-fill, #ff3366) 10%, transparent); 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 20px; /* same side gutter as .container */
}
.ep-header-ad-wrapper .ep-ad-container { max-width: 100%; }
.ep-header-ad-wrapper img,
.ep-ad-container img { max-width: 100%; height: auto; }

/* 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(--footer-text, 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: var(--on-accent-fill, #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. Boxed layout only: the header keeps to the box. In the Wide and Fluid layouts it spans the
   screen like the shortcut bar, hero and footer, and only its content sits in the container. */
header.site-header {
    position: sticky !important;
    top: var(--ep-admin-bar, 0px) !important;
}
body.layout-boxed header.site-header {
    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 */
body.layout-boxed 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: none !important; /* flat, clean trending pages */
    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.layout-boxed {
        padding-top: 0 !important;
    }

    /* 2. Mobile Shortcut Nav: sticky right under the header in every layout */
    .shortcut-nav-container {
        background-color: var(--shortcut-nav-bg, var(--bg-body)) !important;
        box-sizing: border-box;
        border-left: none !important;
        border-right: none !important;
        position: sticky !important;
        top: var(--ep-header-stick, var(--header-height)) !important;
        z-index: 999;
    }
    /* Boxed layout only: keep it inside the box, like the header */
    body.layout-boxed .shortcut-nav-container {
        max-width: var(--container, 1200px) !important;
        margin: 0 auto !important;
        box-shadow: 0 0 50px rgba(0,0,0,0.1) !important;
    }
}

/* ==========================================================================
   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(--ep-header-stick, 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 SAFETY NET
   Handles o

/* ==========================================================================
   RESPONSIVE GUARDS
   One offset system: the fixed header's real height is measured in header.php
   (--ep-header-offset / --ep-header-stick), so sections never add their own
   header compensation. Media and long words can never push the page sideways.
   ========================================================================== */
.container { width: 100%; box-sizing: border-box; }
.site-main img, .site-footer img, .ep-ad-container img { max-width: 100%; }
.site-main video, .site-main iframe, .site-main embed, .site-main object { max-width: 100%; }
.site-main h1, .site-main h2, .site-main h3, .site-main h4, .archive-title, .article-title { overflow-wrap: break-word; }
.ep-ad-container { max-width: 100%; } /* no overflow:hidden — the ad's close button sits above it */
.ep-ad-container > * { max-width: 100%; }
@media (max-width: 480px) {
    .ep-ad-container iframe, .ep-ad-container ins { max-width: 100% !important; }
}
/* Load More, finished state ("No more stories"): same button in every demo, just quieter. */
.load-more-btn.is-done, .load-more-btn.is-done:hover, .load-more-btn.is-done:focus {
    opacity: .5; cursor: default; pointer-events: none; box-shadow: none !important; filter: grayscale(.35);
}
.load-more-btn.is-done i { display: none; }

/* ==========================================================================
   PRELOADER DESIGNS (General → Preloader Style; each demo picks one)
   ========================================================================== */
#ep-preloader.ep-ld { flex-direction: column; gap: 18px; }
#ep-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.ep-ld i { display: block; }
/* Brand: the site logo with a rule that fills in the accent colour */
.ep-ld__brand { display: flex; flex-direction: column; align-items: center; gap: 16px; animation: ep-ld-in .5s ease both; }
.ep-ld__logo { display: flex; align-items: center; max-width: 70vw; }
.ep-ld__logo img, .ep-ld__logo svg { max-height: 54px; width: auto; max-width: 100%; }
.ep-ld__logo a { pointer-events: none; }
.ep-ld__name { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; color: var(--text-main); }
.ep-ld__rule { position: relative; width: 160px; height: 3px; overflow: hidden; border-radius: 3px; background: var(--border); }
.ep-ld__rule::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: var(--accent); animation: ep-ld-rule 1.1s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes ep-ld-rule { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes ep-ld-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Pulse: the logo's heartbeat line traced like a monitor (pure SVG + CSS) */
.ep-ld__pulse { width: 120px; height: 44px; overflow: visible; animation: ep-ld-in .4s ease both; }
.ep-ld__pulse polyline { stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ep-ld__pulse-track { stroke: color-mix(in srgb, var(--accent) 14%, transparent); }
.ep-ld__pulse-line { stroke: var(--accent); stroke-dasharray: 34 66; animation: ep-ld-trace 1.3s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes ep-ld-trace { from { stroke-dashoffset: 34; } to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .ep-ld__pulse-line { animation: none; stroke-dasharray: none; } }
/* Ring: two counter-rotating arcs */
.ep-ld__ring { position: relative; width: 58px; height: 58px; }
.ep-ld__ring i { position: absolute; inset: 0; border: 3px solid transparent; border-top-color: var(--accent); border-radius: 50%; animation: ep-spin .9s linear infinite; }
.ep-ld__ring i + i { inset: 9px; border-top-color: transparent; border-bottom-color: color-mix(in srgb, var(--accent) 55%, var(--text-main)); animation-duration: 1.3s; animation-direction: reverse; }
/* Bars: an equaliser */
.ep-ld__bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.ep-ld__bars i { width: 7px; height: 100%; border-radius: 4px; background: var(--accent); transform-origin: bottom; animation: ep-ld-eq 1s ease-in-out infinite; }
.ep-ld__bars i:nth-child(2) { animation-delay: -.8s; } .ep-ld__bars i:nth-child(3) { animation-delay: -.6s; }
.ep-ld__bars i:nth-child(4) { animation-delay: -.4s; } .ep-ld__bars i:nth-child(5) { animation-delay: -.2s; }
@keyframes ep-ld-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
/* Dots: three soft bouncing dots */
.ep-ld__dots { display: flex; gap: 10px; }
.ep-ld__dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); animation: ep-ld-dot .9s ease-in-out infinite; }
.ep-ld__dots i:nth-child(2) { animation-delay: .15s; opacity: .8; } .ep-ld__dots i:nth-child(3) { animation-delay: .3s; opacity: .6; }
@keyframes ep-ld-dot { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
/* Stripes: three slanted sport bars sweeping */
.ep-ld__stripes { display: flex; gap: 8px; transform: skewX(-18deg); }
.ep-ld__stripes i { width: 14px; height: 46px; background: var(--accent); animation: ep-ld-stripe .9s ease-in-out infinite; }
.ep-ld__stripes i:nth-child(2) { animation-delay: .12s; } .ep-ld__stripes i:nth-child(3) { animation-delay: .24s; }
@keyframes ep-ld-stripe { 0%, 100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
    .ep-ld *, .ep-ld *::after { animation-duration: 2.4s !important; }
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }