/*
Theme Name: Blog Over
Theme URI: https://awplife.com/wordpress-themes/blog-over/
Author: AwordPressLife
Author URI: http://awplife.com/
Description: Blog Over is a clean, minimal, and modern WordPress blog theme.
Version: 0.0.3
Tested up to: 6.9
Requires PHP: 7.4
Tags: blog, news, custom-background, custom-colors, custom-header, custom-menu, featured-images, footer-widgets, full-width-template, theme-options, translation-ready, block-styles, block-patterns
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl.html
Text Domain: blog-over
*/

/* =========================================
   Reset & Base
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--blog-over-text-body);
    background-color: var(--blog-over-bg-body);
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--blog-over-heading-color);
    margin: 0 0 1rem;
}

a {
    color: var(--blog-over-text-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--blog-over-text-link-hover);
}

/* =========================================
   Content Area Links — Must Be Underlined
   (Theme Review Requirement)
   Applies to: post content, excerpts, comments,
   text widgets, and page content
   ========================================= */
.blog-over-single-content a,
.entry-content a,
.entry-summary a,
.comment-content a,
.comment-text a,
.widget_text a,
.textwidget a,
.wp-block-latest-posts__post-excerpt a,
.blog-over-page-content a {
    text-decoration: underline;
}

.blog-over-single-content a:hover,
.entry-content a:hover,
.entry-summary a:hover,
.comment-content a:hover,
.comment-text a:hover,
.widget_text a:hover,
.textwidget a:hover,
.wp-block-latest-posts__post-excerpt a:hover,
.blog-over-page-content a:hover {
    text-decoration: underline;
}

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

/* =========================================
   Layout
   ========================================= */
.blog-over-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Full Width Container - for Blog Section Width = Full Width */
.blog-over-container.blog-over-container-wide {
    max-width: 100%;
    padding: 0 40px;
}

/* Page Content Width Options (Full-width layout only) */
.blog-over-container.content-width-narrow {
    max-width: 800px;
}

.blog-over-container.content-width-default {
    max-width: 1200px;
}

.blog-over-container.content-width-wide {
    max-width: 1400px;
}

.blog-over-container.content-width-full {
    max-width: 100%;
}

/* Container Style Options */
/* Default: Uses existing theme styling (boxed/card look) */
/* Unboxed: Removes background, shadows, borders, padding for clean transparent look */
.blog-over-container.container-style-unboxed .blog-over-content-wrapper,
.blog-over-container.container-style-unboxed .blog-over-main-content,
.blog-over-container.container-style-unboxed .blog-over-page-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Boxed: Keeps default boxed styling (same as Default since theme is already boxed) */

.blog-over-main-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    margin: 40px auto;
}

@media (max-width: 992px) {
    .blog-over-main-layout {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Content & Posts
   ========================================= */
.site-main {
    min-width: 0;
}

.blog-over-post-card {
    background: var(--blog-over-bg-card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--blog-over-shadow-sm);
    margin-bottom: var(--blog-over-space-8);
    transition: transform 0.2s, box-shadow 0.2s;
}

.blog-over-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--blog-over-shadow-lg);
}

.blog-over-post-thumbnail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-over-post-content {
    padding: var(--blog-over-space-5);
}

.entry-title {
    font-size: var(--blog-over-font-2xl);
    margin-bottom: var(--blog-over-space-3);
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.entry-title a {
    color: var(--blog-over-card-title);
}

.entry-title a:hover {
    color: var(--blog-over-card-title-hover);
}

.entry-summary {
    color: var(--blog-over-card-excerpt);
    font-size: var(--blog-over-font-md);
}

/* =========================================
   Sidebar
   ========================================= */
.blog-over-sidebar {
    min-width: 0;
    flex-basis: 30%;
    flex-shrink: 0;
}

/* Sticky Sidebar */
.blog-over-sticky-sidebar,
.blog-over-sidebar.blog-over-sticky-sidebar {
    position: sticky;
    /*top: 100px;*/
    align-self: flex-start;
}

/* Widget Base Styles */
.blog-over-sidebar .widget {
    width: 100%;
    background: var(--blog-over-widget-bg);
    padding: var(--blog-over-space-5);
    border-radius: 8px;
    margin-bottom: var(--blog-over-space-6);
    box-sizing: border-box;
}

/* Widget Style: Bordered */
.blog-over-widget-style-bordered .blog-over-sidebar .widget {
    border: 1px solid var(--blog-over-widget-border);
    box-shadow: none;
}

/* Widget Style: Shadowed */
.blog-over-widget-style-shadowed .blog-over-sidebar .widget {
    box-shadow: var(--blog-over-shadow-card);
}

.blog-over-widget-style-shadowed .blog-over-sidebar .widget:hover {
    box-shadow: var(--blog-over-shadow-lg);
}

/* Widget Style: Modern */
.blog-over-widget-style-modern .blog-over-sidebar .widget {
    border-left: 4px solid var(--blog-over-secondary, #3b82f6);
    border-radius: 0 8px 8px 0;
    box-shadow: var(--blog-over-shadow-md);
}

/* Widget Title Base */
.blog-over-sidebar .widget-title {
    font-size: var(--blog-over-font-xl);
    margin-bottom: var(--blog-over-space-4);
    padding-bottom: var(--blog-over-space-3);
    color: var(--blog-over-widget-title-color);
}

/* Widget Title Style: Default (with underline) */
.blog-over-widget-title-default .blog-over-sidebar .widget-title {
    border-bottom: 2px solid var(--blog-over-primary, #3b82f6);
}

/* Widget Title Style: Underline */
.blog-over-widget-title-underline .blog-over-sidebar .widget-title {
    border-bottom: 1px solid var(--blog-over-border-color);
    position: relative;
}

.blog-over-widget-title-underline .blog-over-sidebar .widget-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--blog-over-primary, #3b82f6);
}

/* Widget Title Style: Accent Bar */
.blog-over-widget-title-accent-bar .blog-over-sidebar .widget-title {
    border-bottom: none;
    padding-left: 15px;
    padding-bottom: 0;
    position: relative;
}

.blog-over-widget-title-accent-bar .blog-over-sidebar .widget-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--blog-over-primary, #3b82f6);
    border-radius: 2px;
}

/* Widget Title Style: Background Filled */
.blog-over-widget-title-background .blog-over-sidebar .widget-title {
    background: var(--blog-over-primary, #3b82f6);
    color: var(--blog-over-text-inverse);
    padding: var(--blog-over-space-3) var(--blog-over-space-4);
    margin: -20px -20px 20px;
    border-radius: 8px 8px 0 0;
    border-bottom: none;
}

/* Widget Title Style: Bordered Bottom */
.blog-over-widget-title-bordered .blog-over-sidebar .widget-title {
    border: 1px solid var(--blog-over-border-color);
    border-width: 0 0 2px 0;
    padding-bottom: 15px;
}

/* Widget Lists */
.blog-over-sidebar .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-over-sidebar .widget ul li {
    padding: var(--blog-over-space-3) 0;
    border-bottom: 1px solid var(--blog-over-border-light);
}

.blog-over-sidebar .widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.blog-over-sidebar .widget ul li a {
    color: var(--blog-over-widget-link);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: var(--blog-over-space-2);
}

.blog-over-sidebar .widget ul li a::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--blog-over-primary, #3b82f6);
    margin-right: 8px;
    transition: transform 0.2s;
}

/* Exclude social icons and pagination from before icons */
.blog-over-sidebar .widget ul.wp-block-social-links li a::before,
.blog-over-sidebar .widget ul.social-icons li a::before,
.blog-over-sidebar .widget .nav-links a::before,
.blog-over-sidebar .widget .page-numbers::before,
.blog-over-sidebar .widget ul li a[href*="facebook"]::before,
.blog-over-sidebar .widget ul li a[href*="twitter"]::before,
.blog-over-sidebar .widget ul li a[href*="instagram"]::before,
.blog-over-sidebar .widget ul li a[href*="linkedin"]::before,
.blog-over-sidebar .widget ul li a[href*="youtube"]::before {
    display: none;
}

.blog-over-sidebar .widget ul.wp-block-social-links li a,
.blog-over-sidebar .widget ul.social-icons li a {
    display: inline-flex;
    gap: 0;
}

.blog-over-sidebar .widget ul li a:hover {
    color: var(--blog-over-primary, #3b82f6);
}

.blog-over-sidebar .widget ul li a:hover::before {
    transform: translateX(3px);
}

/* Widget Tag Cloud - Pills with variable sizing (popular tags bigger) */
.blog-over-sidebar .widget .tagcloud,
.blog-over-sidebar .widget.widget_tag_cloud .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--blog-over-space-3);
    align-items: baseline;
}

.blog-over-sidebar .widget .tagcloud a,
.blog-over-sidebar .widget.widget_tag_cloud a {
    display: inline-flex;
    align-items: center;
    padding: 0.1em 0.5em;
    background: var(--blog-over-tag-bg);
    color: var(--blog-over-tag-text);
    border-radius: 20px;
    transition: all 0.2s;
    text-decoration: none;
    border: 1px solid var(--blog-over-border-color);
    line-height: 1.2;
}

.blog-over-sidebar .widget .tagcloud a:hover,
.blog-over-sidebar .widget.widget_tag_cloud a:hover {
    background: var(--blog-over-tag-hover-bg);
    color: var(--blog-over-tag-hover-text);
    border-color: var(--blog-over-tag-hover-bg);
}

.blog-over-sidebar .widget .tagcloud a::before,
.blog-over-sidebar .widget.widget_tag_cloud a::before {
    display: none;
}

/* Calendar Widget */
.blog-over-sidebar .widget.widget_calendar,
.blog-over-sidebar .widget_calendar {
    padding: var(--blog-over-space-5);
}

.blog-over-sidebar .widget_calendar .wp-calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--blog-over-space-4);
}

.blog-over-sidebar .widget_calendar .wp-calendar-nav a {
    color: var(--blog-over-primary);
    font-weight: 600;
}

.blog-over-sidebar .widget_calendar table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.blog-over-sidebar .widget_calendar caption {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--blog-over-heading-color);
    padding-bottom: 12px;
    text-transform: capitalize;
}

.blog-over-sidebar .widget_calendar thead th {
    padding: 10px 5px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--blog-over-text-muted);
    text-transform: uppercase;
    border-bottom: 2px solid var(--blog-over-border-color);
}

.blog-over-sidebar .widget_calendar tbody td {
    padding: 10px 5px;
    font-size: 0.9rem;
    color: var(--blog-over-widget-text);
    border-bottom: 1px solid var(--blog-over-border-light);
}

.blog-over-sidebar .widget_calendar tbody td a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--blog-over-primary);
    color: var(--blog-over-text-inverse);
    border-radius: 50%;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.blog-over-sidebar .widget_calendar tbody td a::before {
    display: none;
}

.blog-over-sidebar .widget_calendar tbody td a:hover {
    background: var(--blog-over-secondary);
    transform: scale(1.1);
}

.blog-over-sidebar .widget_calendar tbody td#today {
    background: var(--blog-over-bg-input);
    font-weight: 700;
    color: var(--blog-over-primary);
}

.blog-over-sidebar .widget_calendar tfoot td {
    padding: 10px 5px;
}

.blog-over-sidebar .widget_calendar tfoot a {
    color: var(--blog-over-primary);
    font-weight: 500;
}

/* Sidebar Search Widget */
.blog-over-sidebar .widget_search form,
.blog-over-sidebar .widget_search .wp-block-search,
.blog-over-sidebar .wp-block-search {
    position: relative;
    display: flex;
    align-items: center;
}

.blog-over-sidebar .widget_search input[type="search"],
.blog-over-sidebar .widget_search .wp-block-search__input,
.blog-over-sidebar .wp-block-search__input {
    width: 100%;
    padding: 12px 50px 12px 15px;
    font-size: 0.95rem;
    border: 2px solid var(--blog-over-input-border);
    border-radius: 25px;
    /*background: #1e293b;
    color: #e2e8f0;*/
    transition: all 0.3s ease;
}

.blog-over-sidebar .widget_search input[type="search"]:focus,
.blog-over-sidebar .widget_search .wp-block-search__input:focus,
.blog-over-sidebar .wp-block-search__input:focus {
    outline: none;
    border-color: var(--blog-over-primary);
    box-shadow: var(--blog-over-shadow-focus);
}

.blog-over-sidebar .widget_search input[type="search"]::placeholder,
.blog-over-sidebar .widget_search .wp-block-search__input::placeholder,
.blog-over-sidebar .wp-block-search__input::placeholder {
    color: var(--blog-over-input-placeholder);
}

.blog-over-sidebar .widget_search button[type="submit"],
.blog-over-sidebar .widget_search input[type="submit"],
.blog-over-sidebar .widget_search .wp-block-search__button,
.blog-over-sidebar .wp-block-search__button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--blog-over-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    text-indent: -9999px;
    transition: all 0.3s ease;
}

.blog-over-sidebar .widget_search button[type="submit"]:hover,
.blog-over-sidebar .widget_search input[type="submit"]:hover,
.blog-over-sidebar .widget_search .wp-block-search__button:hover,
.blog-over-sidebar .wp-block-search__button:hover {
    background-color: var(--blog-over-secondary);
    transform: translateY(-50%) scale(1.05);
}

/* Sidebar Responsive */
@media (max-width: 992px) {
    .blog-over-sidebar {
        flex-basis: 100% !important;
        width: 100%;
        margin-top: var(--blog-over-space-10);
    }

    .blog-over-sidebar.blog-over-sticky-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .blog-over-sidebar .widget {
        padding: var(--blog-over-space-4);
    }

    .blog-over-sidebar .widget-title {
        font-size: var(--blog-over-font-lg);
    }

    .blog-over-sidebar .widget ul li {
        padding: var(--blog-over-space-2) 0;
    }
}

/* =========================================
   Author Bio Widget
   ========================================= */

/* Base */
.blog-over-author-widget {
    text-align: center;
}

/* Avatar */
.blog-over-author-widget-avatar {
    display: inline-block;
    margin-bottom: var(--blog-over-space-4);
}

.blog-over-author-widget-avatar img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 3px solid var(--blog-over-primary, #3b82f6);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-over-author-widget-avatar img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

/* Avatar Shape: Circle */
.blog-over-author-widget-avatar-circle .blog-over-author-widget-avatar img {
    border-radius: 50%;
}

/* Avatar Shape: Square (Rounded) */
.blog-over-author-widget-avatar-square .blog-over-author-widget-avatar img {
    border-radius: 12px;
}

/* Name */
.blog-over-author-widget-name {
    font-size: var(--blog-over-font-xl, 1.25rem);
    font-weight: 700;
    margin: 0 0 var(--blog-over-space-1, 4px);
    color: var(--blog-over-heading-color);
}

/* Designation */
.blog-over-author-widget-designation {
    display: inline-block;
    font-size: var(--blog-over-font-sm, 0.875rem);
    color: var(--blog-over-primary, #3b82f6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--blog-over-space-3, 12px);
}

/* Bio */
.blog-over-author-widget-bio {
    font-size: var(--blog-over-font-md, 0.95rem);
    line-height: 1.7;
    color: var(--blog-over-text-muted);
    margin-bottom: var(--blog-over-space-4, 16px);
}

.blog-over-author-widget-bio p {
    margin: 0 0 var(--blog-over-space-2, 8px);
}

.blog-over-author-widget-bio p:last-child {
    margin-bottom: 0;
}

/* Website Link */
.blog-over-author-widget-website {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--blog-over-font-sm, 0.875rem);
    font-weight: 600;
    color: var(--blog-over-primary, #3b82f6);
    padding: 6px 16px;
    border: 1px solid var(--blog-over-primary, #3b82f6);
    border-radius: 20px;
    margin-bottom: var(--blog-over-space-4, 16px);
    transition: all 0.3s ease;
}

.blog-over-author-widget-website:hover {
    background: var(--blog-over-primary, #3b82f6);
    color: var(--blog-over-text-inverse, #fff);
}

.blog-over-author-widget-website i {
    font-size: 0.8em;
}

/* Social Icons */
.blog-over-author-widget-social {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: var(--blog-over-space-3, 12px);
}

.blog-over-author-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blog-over-bg-input, #f1f5f9);
    color: var(--blog-over-text-muted, #64748b);
    font-size: 14px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.blog-over-author-social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Social brand colors on hover */
.blog-over-social-facebook:hover {
    background: #1877f2;
    color: #fff;
}

.blog-over-social-twitter:hover {
    background: #000;
    color: #fff;
}

.blog-over-social-instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}

.blog-over-social-linkedin:hover {
    background: #0a66c2;
    color: #fff;
}

.blog-over-social-youtube:hover {
    background: #ff0000;
    color: #fff;
}

/* Remove default list arrow for social links inside widget */
.blog-over-author-social-link::before {
    display: none !important;
}

/* --- Layout: Side by Side --- */
.blog-over-author-widget-layout-side {
    display: flex;
    align-items: flex-start;
    gap: var(--blog-over-space-4, 16px);
    text-align: left;
}

.blog-over-author-widget-layout-side .blog-over-author-widget-avatar {
    flex-shrink: 0;
    margin-bottom: 0;
}

.blog-over-author-widget-layout-side .blog-over-author-widget-avatar img {
    width: 90px;
    height: 90px;
}

.blog-over-author-widget-layout-side .blog-over-author-widget-content {
    flex: 1;
    min-width: 0;
}

.blog-over-author-widget-layout-side .blog-over-author-widget-social {
    justify-content: flex-start;
}

.blog-over-author-widget-layout-side .blog-over-author-widget-website {
    margin-bottom: var(--blog-over-space-3, 12px);
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .blog-over-author-widget-layout-side {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .blog-over-author-widget-layout-side .blog-over-author-widget-social {
        justify-content: center;
    }

    .blog-over-author-widget-layout-side .blog-over-author-widget-avatar img {
        width: 100px;
        height: 100px;
    }
}

/* =========================================
   Content Area Search Form (Search Page)
   ========================================= */
.blog-over-search-form,
.search-form {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 500px;
    margin: 0 auto var(--blog-over-space-8);
}

.blog-over-search-form .blog-over-search-input,
.blog-over-search-form .search-field,
.search-form .search-field {
    width: 100%;
    padding: var(--blog-over-space-3) 55px var(--blog-over-space-3) var(--blog-over-space-4);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 30px;
    /*background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;*/
    font-size: var(--blog-over-font-lg);
    transition: all 0.3s ease;
}

.blog-over-search-form .blog-over-search-input:focus,
.blog-over-search-form .search-field:focus,
.search-form .search-field:focus {
    outline: none;
    border-color: var(--blog-over-primary);
    box-shadow: var(--blog-over-shadow-focus);
}

.blog-over-search-form .blog-over-search-input::placeholder,
.blog-over-search-form .search-field::placeholder,
.search-form .search-field::placeholder {
    color: var(--blog-over-text-muted);
}

.blog-over-search-form .blog-over-search-submit,
.blog-over-search-form .search-submit,
.search-form .search-submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--blog-over-space-10);
    height: var(--blog-over-space-10);
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--blog-over-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    color: transparent;
    font-size: 0;
    text-indent: -9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hide Font Awesome icon if present */
.blog-over-search-form .blog-over-search-submit i,
.blog-over-search-form .search-submit i,
.search-form .search-submit i {
    display: none;
}

/* =========================================
   Global Icon Hover Visibility Fix
   Ensures all buttons/icons turn white on hover
   ========================================= */
button:hover i,
.btn:hover i,
a.btn:hover i,
.button:hover i,
.blog-over-btn:hover i,
.blog-over-search-toggle:hover i,
.blog-over-theme-toggle:hover i,
.blog-over-search-submit:hover i,
.blog-over-scroll-top:hover i,
.blog-over-topbar-social-link:hover i,
.widget button:hover i,
.wp-block-button a:hover i {
    color: var(--blog-over-text-inverse) !important;
}

/* Active state icons also white */
.blog-over-search-toggle.active i,
.blog-over-theme-toggle.active i {
    color: var(--blog-over-text-inverse) !important;
}

/* =========================================
   Footer
   ========================================= */
.blog-over-footer {
    background-color: var(--blog-over-footer-bg);
    color: var(--blog-over-footer-text);
    margin-top: var(--blog-over-space-16);
}

/* Footer Widgets Area */
.footer-widgets {
    padding: var(--blog-over-space-10) 0;
    position: relative;
    z-index: 1;
}

.footer-widgets-grid {
    display: grid;
    gap: 30px;
}

/* Column layout based on Customizer setting */
.footer-columns-1 {
    grid-template-columns: 1fr;
}

.footer-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.footer-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.footer-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.footer-widget .widget {
    color: var(--blog-over-footer-text);
}

.footer-widget .widget-title {
    font-size: var(--blog-over-font-lg);
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

/* Widget link styles */
.footer-widget a {
    color: var(--blog-over-footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-widget a:hover {
    color: #fff;
}

/* Widget list styles */
.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget ul li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-widget ul li:last-child {
    border-bottom: none;
}

/* Widget spacing for stacked widgets inside one column */
.footer-widget .widget+.widget {
    margin-top: 20px;
}

.blog-over-footer-bottom {
    padding: var(--blog-over-space-5) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--blog-over-font-base);
    text-align: center;
}

/* =========================================
   404 Page — Premium Design
   ========================================= */
.blog-over-404-section {
    position: relative;
    overflow: hidden;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 60px 0;
    background: linear-gradient(135deg,
            var(--blog-over-bg-body, #f8fafc) 0%,
            var(--blog-over-bg-card, #ffffff) 50%,
            var(--blog-over-bg-body, #f8fafc) 100%);
}

.blog-over-404-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Floating Particles */
.blog-over-404-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.blog-over-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    background: var(--blog-over-primary, #3b82f6);
    animation: blog-over-particle-float 12s infinite ease-in-out;
}

.blog-over-particle:nth-child(1) {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
    animation-duration: 14s;
}

.blog-over-particle:nth-child(2) {
    width: 50px;
    height: 50px;
    top: 60%;
    left: 15%;
    animation-delay: -3s;
    animation-duration: 10s;
}

.blog-over-particle:nth-child(3) {
    width: 30px;
    height: 30px;
    top: 25%;
    right: 10%;
    animation-delay: -5s;
    animation-duration: 16s;
}

.blog-over-particle:nth-child(4) {
    width: 60px;
    height: 60px;
    bottom: 15%;
    right: 8%;
    animation-delay: -2s;
    animation-duration: 11s;
}

.blog-over-particle:nth-child(5) {
    width: 20px;
    height: 20px;
    top: 45%;
    left: 50%;
    animation-delay: -7s;
    animation-duration: 18s;
}

.blog-over-particle:nth-child(6) {
    width: 40px;
    height: 40px;
    bottom: 30%;
    left: 35%;
    animation-delay: -4s;
    animation-duration: 13s;
}

@keyframes blog-over-particle-float {

    0%,
    100% {
        transform: translateY(0) translateX(0) scale(1);
    }

    25% {
        transform: translateY(-30px) translateX(15px) scale(1.1);
    }

    50% {
        transform: translateY(10px) translateX(-10px) scale(0.9);
    }

    75% {
        transform: translateY(-15px) translateX(-20px) scale(1.05);
    }
}

/* Animated Globe Illustration */
.blog-over-404-illustration {
    flex: 0 0 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.blog-over-404-globe {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-over-404-globe-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}

.blog-over-404-ring-1 {
    width: 100%;
    height: 100%;
    border-color: var(--blog-over-primary, #3b82f6);
    opacity: 0.2;
    animation: blog-over-ring-spin 20s linear infinite;
}

.blog-over-404-ring-2 {
    width: 80%;
    height: 80%;
    border-color: var(--blog-over-primary, #3b82f6);
    opacity: 0.15;
    border-style: dashed;
    animation: blog-over-ring-spin 15s linear infinite reverse;
}

.blog-over-404-ring-3 {
    width: 60%;
    height: 60%;
    border-color: var(--blog-over-primary, #3b82f6);
    opacity: 0.3;
    border-width: 3px;
    animation: blog-over-ring-spin 12s linear infinite;
}

@keyframes blog-over-ring-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 404 Number */
.blog-over-404-number {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 2;
}

.blog-over-404-num {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg,
            var(--blog-over-primary, #3b82f6) 0%,
            var(--blog-over-secondary, #1e40af) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    letter-spacing: -2px;
}

.blog-over-404-num-zero {
    animation: blog-over-zero-bounce 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes blog-over-zero-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* Content Card */
.blog-over-404-card {
    flex: 1;
    position: relative;
    z-index: 1;
    background: var(--blog-over-bg-card, #ffffff);
    border: 1px solid var(--blog-over-border-color, rgba(0, 0, 0, 0.08));
    border-radius: 20px;
    padding: 48px 40px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.06),
        0 10px 15px -3px rgba(0, 0, 0, 0.08),
        0 20px 40px -10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.4s ease;
}

.blog-over-404-card:hover {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.06),
        0 10px 20px -3px rgba(0, 0, 0, 0.1),
        0 25px 50px -10px rgba(0, 0, 0, 0.08);
}

/* Error Badge */
.blog-over-404-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--blog-over-primary, #3b82f6);
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    margin-bottom: 20px;
}

.blog-over-404-badge i {
    font-size: 0.75rem;
}

/* Title */
.blog-over-404-card .blog-over-404-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--blog-over-heading-color, #1e293b);
    line-height: 1.2;
    margin: 0 0 16px;
}

/* Description */
.blog-over-404-card .blog-over-404-description {
    font-size: 1.05rem;
    color: var(--blog-over-text-muted, #64748b);
    line-height: 1.7;
    margin: 0 0 24px;
    max-width: 480px;
}

/* Suggestions */
.blog-over-404-suggestions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.blog-over-404-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--blog-over-text-body, #334155);
}

.blog-over-404-suggestion-item i {
    font-size: 0.85rem;
    color: var(--blog-over-primary, #3b82f6);
    flex-shrink: 0;
}

/* Search */
.blog-over-404-search {
    margin-bottom: 28px;
}

.blog-over-404-search .search-form,
.blog-over-404-search .blog-over-search-form {
    max-width: 100%;
}

/* Action Buttons */
.blog-over-404-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.blog-over-404-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.blog-over-404-btn i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.blog-over-404-btn-primary {
    background: linear-gradient(135deg,
            var(--blog-over-primary, #3b82f6) 0%,
            var(--blog-over-secondary, #1e40af) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.blog-over-404-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
    color: #fff;
}

.blog-over-404-btn-primary:hover i {
    transform: scale(1.15);
}

.blog-over-404-btn-secondary {
    background: transparent;
    color: var(--blog-over-heading-color, #1e293b);
    border-color: var(--blog-over-border-color, rgba(0, 0, 0, 0.12));
}

.blog-over-404-btn-secondary:hover {
    background: var(--blog-over-bg-input, #f1f5f9);
    border-color: var(--blog-over-primary, #3b82f6);
    color: var(--blog-over-primary, #3b82f6);
    transform: translateY(-2px);
}

.blog-over-404-btn-secondary:hover i {
    transform: translateX(-3px);
}

/* ── 404 Responsive ── */
@media (max-width: 992px) {
    .blog-over-404-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .blog-over-404-illustration {
        flex: 0 0 auto;
    }

    .blog-over-404-globe {
        width: 240px;
        height: 240px;
    }

    .blog-over-404-num {
        font-size: 4.5rem;
    }

    .blog-over-404-card {
        padding: 36px 28px;
    }

    .blog-over-404-card .blog-over-404-title {
        font-size: 1.6rem;
    }

    .blog-over-404-card .blog-over-404-description {
        max-width: 100%;
    }

    .blog-over-404-suggestions {
        align-items: center;
    }

    .blog-over-404-actions {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .blog-over-404-section {
        padding: 40px 0;
        min-height: 50vh;
    }

    .blog-over-404-globe {
        width: 180px;
        height: 180px;
    }

    .blog-over-404-num {
        font-size: 3.5rem;
    }

    .blog-over-404-card {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .blog-over-404-card .blog-over-404-title {
        font-size: 1.35rem;
    }

    .blog-over-404-card .blog-over-404-description {
        font-size: 0.95rem;
    }

    .blog-over-404-actions {
        flex-direction: column;
    }

    .blog-over-404-btn {
        justify-content: center;
        width: 100%;
    }
}

/* =========================================
   Forms
   ========================================= */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
    display: block;
    width: 100%;
    padding: var(--blog-over-space-3) var(--blog-over-space-4);
    font-size: var(--blog-over-font-lg);
    border: 1px solid var(--blog-over-input-border);
    border-radius: 6px;
    background: var(--blog-over-input-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--blog-over-primary);
    box-shadow: var(--blog-over-shadow-focus);
}

button,
input[type="submit"] {
    display: inline-block;
    padding: var(--blog-over-space-3) var(--blog-over-space-6);
    font-size: var(--blog-over-font-lg);
    font-weight: 600;
    color: var(--blog-over-btn-primary-text);
    background: var(--blog-over-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

button:hover,
input[type="submit"]:hover {
    background: var(--blog-over-secondary);
}

/* =========================================
   Screen Reader Text
   ========================================= */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* =========================================
   Pagination
   ========================================= */
.pagination,
.nav-links {
    display: flex;
    justify-content: center;
    gap: var(--blog-over-space-2);
    margin: var(--blog-over-space-8) 0;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--blog-over-space-3);
    background: var(--blog-over-bg-card);
    border: 1px solid var(--blog-over-border-color);
    border-radius: 6px;
    color: var(--blog-over-heading-color);
    font-weight: 500;
    transition: all 0.2s;
}

.page-numbers:hover,
.page-numbers.current {
    background: var(--blog-over-primary);
    border-color: var(--blog-over-primary);
    color: var(--blog-over-text-inverse);
}

/* =========================================
   Topbar
   ========================================= */
.blog-over-topbar {
    background: var(--blog-over-bg-topbar);
    font-size: var(--blog-over-font-base);
    min-height: 40px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Topbar text elements - apply text color via CSS variable */
.blog-over-topbar-date,
.blog-over-topbar-text {
    color: var(--blog-over-topbar-text, #94a3b8);
}

/* Topbar Full Width (default) */
.blog-over-topbar>.blog-over-container,
.blog-over-topbar>.blog-over-container-full {
    width: 100%;
}

.blog-over-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--blog-over-space-5);
    min-height: inherit;
    padding: var(--blog-over-space-2) 0;
}

.blog-over-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--blog-over-space-5);
}

.blog-over-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--blog-over-space-3);
}

/* Desktop topbar collapse wrapper — must fill full width */
.blog-over-topbar-collapse {
    width: 100%;
}

.blog-over-topbar-date i {
    margin-right: 6px;
}

.blog-over-topbar-social {
    display: flex;
    align-items: center;
    gap: var(--blog-over-space-2);
}

.blog-over-topbar-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blog-over-primary, #3b82f6);
    color: var(--blog-over-text-inverse);
    transition: all 0.3s ease;
}

.blog-over-topbar-social-link i {
    color: inherit !important;
}

.blog-over-topbar-social-link:hover {
    background: var(--blog-over-secondary, #1e40af);
    color: var(--blog-over-text-inverse) !important;
}

/* Topbar Width - Boxed */
/* Top Bar Width - Boxed */
.blog-over-topbar.blog-over-topbar-boxed {
    width: 100%;
    /* Background spans full width */
    max-width: none;
    margin: 0;
    border-radius: 0;
}

/* Inner Container - Constrained when Boxed */
.blog-over-topbar.blog-over-topbar-boxed>.blog-over-container,
.blog-over-topbar.blog-over-topbar-boxed>.blog-over-container-full {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Top Bar Width - Full Width (Default) 
   Override default container width if user selects Full Width Top Bar 
*/
.blog-over-topbar:not(.blog-over-topbar-boxed)>.blog-over-container,
.blog-over-topbar:not(.blog-over-topbar-boxed)>.blog-over-container-full {
    max-width: 100%;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/* Topbar Border */
.blog-over-topbar.blog-over-topbar-border {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: var(--blog-over-border-dark);
}

/* Social Icons - Outline Style */
.blog-over-social-outline .blog-over-topbar-social-link {
    background: transparent;
    border: 1px solid var(--blog-over-primary, #3b82f6) !important;
    color: var(--blog-over-primary, #3b82f6) !important;
}

.blog-over-social-outline .blog-over-topbar-social-link:hover {
    background: var(--blog-over-secondary, #1e40af);
    border-color: var(--blog-over-secondary, #1e40af) !important;
    color: var(--blog-over-text-inverse) !important;
}

/* Social Icons - Filled Style */
.blog-over-social-filled .blog-over-topbar-social-link {
    background: var(--blog-over-primary, #3b82f6);
    color: var(--blog-over-text-inverse) !important;
}

.blog-over-social-filled .blog-over-topbar-social-link i {
    color: var(--blog-over-text-inverse) !important;
}

.blog-over-social-filled .blog-over-topbar-social-link:hover {
    background: var(--blog-over-secondary, #1e40af);
}

.blog-over-social-filled .blog-over-topbar-social-link:hover i {
    color: var(--blog-over-text-inverse) !important;
}

/* Social Icons - Rounded Style */
.blog-over-social-rounded .blog-over-topbar-social-link {
    border-radius: 6px;
}

.blog-over-social-rounded .blog-over-topbar-social-link:hover {
    background: var(--blog-over-secondary, #1e40af);
    color: var(--blog-over-text-inverse) !important;
}

/* ─────────────────────────────────────────────
   Mobile Top Bar — Two-Row Design
   Row 1: Text left · Info icon right
   Row 2: Dark mode · Search · Subscribe
   Popup: Social links only (bottom sheet)
   ───────────────────────────────────────────── */

/* Hidden on desktop */
.blog-over-topbar-mobile-row,
.blog-over-topbar-mobile-actions {
    display: none;
}

.blog-over-topbar-toggle {
    display: none;
}

/* Desktop: collapse wrapper is always visible, popup hidden */
.blog-over-topbar-collapse {
    display: block;
}

.blog-over-topbar-popup {
    display: none;
}

/* ── Phone-Only Styles (≤480px) ── */
@media (max-width: 480px) {

    /* ── Row 1: [Text ········ ℹ️] ── */
    .blog-over-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-over-topbar-mobile-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 7px 15px;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
    }

    /* Topbar text on the left */
    .blog-over-topbar-mobile-text {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--blog-over-topbar-text, #94a3b8);
        font-size: 0.8rem;
        font-weight: 400;
        letter-spacing: 0.2px;
        line-height: 1.3;
        opacity: 0.85;
    }

    .blog-over-topbar-mobile-text i {
        font-size: 0.75rem;
        opacity: 0.6;
    }

    /* ── Info Toggle Button (far right of Row 1) ── */
    .blog-over-topbar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 50%;
        background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.08) 0%,
                rgba(255, 255, 255, 0.02) 100%);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        color: var(--blog-over-topbar-text, #94a3b8);
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        flex-shrink: 0;
    }

    .blog-over-topbar-toggle:hover,
    .blog-over-topbar-toggle:focus-visible {
        background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.14) 0%,
                rgba(255, 255, 255, 0.06) 100%);
        border-color: rgba(var(--blog-over-primary-rgb, 59, 130, 246), 0.5);
        color: var(--blog-over-primary, #3b82f6);
        box-shadow: 0 0 0 3px rgba(var(--blog-over-primary-rgb, 59, 130, 246), 0.25);
        outline: none;
    }

    .blog-over-topbar-toggle[aria-expanded="true"] {
        background: linear-gradient(135deg,
                rgba(var(--blog-over-primary-rgb, 59, 130, 246), 0.15) 0%,
                rgba(var(--blog-over-primary-rgb, 59, 130, 246), 0.05) 100%);
        border-color: rgba(var(--blog-over-primary-rgb, 59, 130, 246), 0.5);
        color: var(--blog-over-primary, #3b82f6);
    }

    /* ── Row 2: Action Bar (directly below Row 1) ── */
    /* ── Row 2: Action Bar (directly below Row 1) ── */
    .blog-over-topbar-mobile-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        padding: 6px 15px 8px;
        box-sizing: border-box;
        position: relative;
    }

    /* Subtle separator */
    .blog-over-topbar-mobile-actions::before {
        content: '';
        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        height: 1px;
        background: linear-gradient(90deg,
                transparent 0%,
                rgba(var(--blog-over-primary-rgb, 59, 130, 246), 0.3) 50%,
                transparent 100%);
    }

    /* Mobile Action Buttons (Search, Theme Toggle, Subscribe) */
    .blog-over-topbar-mobile-actions .blog-over-theme-toggle,
    .blog-over-topbar-mobile-actions .blog-over-search-toggle,
    .blog-over-topbar-mobile-actions .blog-over-subscribe-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: 0;
        line-height: 1;

        /* Primary Color Bubble Style (Matches Desktop) */
        background: var(--blog-over-primary, #3b82f6);
        color: #ffffff !important;
        border: none;
        box-shadow: none;
        transition: all 0.3s ease;
    }

    /* Subscribe Button - Icon Only on Mobile */
    .blog-over-topbar-mobile-actions .blog-over-subscribe-btn {
        min-width: 40px;
        font-size: 0;
        /* Hide text text node if any */
    }

    .blog-over-topbar-mobile-actions .blog-over-subscribe-btn span {
        display: none;
    }

    .blog-over-topbar-mobile-actions .blog-over-subscribe-btn i {
        font-size: 18px;
        margin: 0;
    }

    .blog-over-topbar-mobile-actions .blog-over-theme-toggle i,
    .blog-over-topbar-mobile-actions .blog-over-search-toggle i {
        font-size: 18px;
    }

    /* Hover States */
    .blog-over-topbar-mobile-actions .blog-over-theme-toggle:hover,
    .blog-over-topbar-mobile-actions .blog-over-search-toggle:hover,
    .blog-over-topbar-mobile-actions .blog-over-subscribe-btn:hover {
        background: var(--blog-over-secondary, #1e40af);
        color: #ffffff !important;
        transform: translateY(-2px);
    }

    /* Remove text decoration/underlines */
    .blog-over-topbar-mobile-actions a {
        text-decoration: none;
    }

    /* Hide desktop topbar content on mobile */
    .blog-over-topbar-collapse {
        display: none !important;
    }

    /* ── Dropdown Popup — Below Topbar ── */
    .blog-over-topbar-popup {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99999;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .blog-over-topbar-popup.blog-over-popup-open {
        max-height: 400px;
        pointer-events: auto;
    }

    /* Backdrop overlay — covers content below topbar */
    .blog-over-topbar-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: -1;
    }

    .blog-over-topbar-popup.blog-over-popup-open .blog-over-topbar-popup-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Panel — dropdown style */
    .blog-over-topbar-popup-panel {
        position: relative;
        z-index: 1;
        background: var(--blog-over-bg, #0f172a);
        border-top: 1px solid rgba(var(--blog-over-primary-rgb, 59, 130, 246), 0.2);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        padding: 0;
    }

    /* Remove the drag handle (not needed for dropdown) */
    .blog-over-topbar-popup-panel::before {
        display: none;
    }

    /* Popup Header */
    .blog-over-topbar-popup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px 10px;
    }

    .blog-over-topbar-popup-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--blog-over-topbar-text, #e2e8f0);
        letter-spacing: 0.3px;
    }

    /* Close button */
    .blog-over-topbar-popup-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        color: var(--blog-over-topbar-text, #94a3b8);
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .blog-over-topbar-popup-close:hover,
    .blog-over-topbar-popup-close:focus-visible {
        background: rgba(239, 68, 68, 0.15);
        border-color: rgba(239, 68, 68, 0.4);
        color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
        outline: none;
    }

    /* Popup Body */
    .blog-over-topbar-popup-body {
        padding: 0 20px 24px;
    }

    /* Section labels */
    .blog-over-topbar-popup-label {
        display: block;
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--blog-over-primary, #3b82f6);
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 10px;
        opacity: 0.8;
    }

    /* Social icons grid */
    .blog-over-topbar-popup-social {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .blog-over-topbar-popup-social .blog-over-topbar-social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: var(--blog-over-topbar-text, #94a3b8);
        font-size: 0.8rem;
        transition: all 0.25s ease;
    }

    .blog-over-topbar-popup-social .blog-over-topbar-social-link:hover,
    .blog-over-topbar-popup-social .blog-over-topbar-social-link:focus-visible {
        background: rgba(var(--blog-over-primary-rgb, 59, 130, 246), 0.15);
        border-color: rgba(var(--blog-over-primary-rgb, 59, 130, 246), 0.4);
        color: var(--blog-over-primary, #3b82f6);
        transform: translateY(-2px);
        box-shadow: 0 0 0 3px rgba(var(--blog-over-primary-rgb, 59, 130, 246), 0.15);
        outline: none;
    }
}


.blog-over-theme-toggle,
.blog-over-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--blog-over-primary, #3b82f6);
    color: #eeeeee;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-over-theme-toggle:hover,
.blog-over-search-toggle:hover {
    background: var(--blog-over-secondary, #1e40af);
    color: var(--blog-over-text-inverse) !important;
}

.blog-over-theme-toggle:hover i,
.blog-over-search-toggle:hover i {
    color: var(--blog-over-text-inverse) !important;
}

/* Search toggle active state (when popup is open) */
.blog-over-search-toggle.active {
    background: var(--blog-over-primary, #3b82f6);
    color: var(--blog-over-text-inverse);
}

.blog-over-search-toggle.active:hover {
    background: var(--blog-over-secondary, #1e40af);
}

.blog-over-search-toggle.active i,
.blog-over-search-toggle.active:hover i {
    color: var(--blog-over-text-inverse);
}

/* Subscribe Button */
.blog-over-subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--blog-over-primary);
    color: var(--blog-over-btn-primary-text);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.blog-over-subscribe-btn:hover {
    background: var(--blog-over-secondary);
    color: var(--blog-over-btn-primary-text);
    transform: translateY(0px);
    box-shadow: var(--blog-over-shadow-card);
}

.blog-over-subscribe-btn i {
    font-size: 0.85rem;
}

/* =========================================
   Scroll to Top Button
   ========================================= */
.blog-over-scroll-top {
    position: fixed;
    bottom: var(--blog-over-scroll-offset-y, 30px);
    /* Default Right if no class present, overridden by modifiers */
    right: var(--blog-over-scroll-offset-x, 30px);
    width: var(--blog-over-scroll-size, 45px);
    height: var(--blog-over-scroll-size, 45px);
    background: var(--blog-over-primary);
    color: var(--blog-over-scroll-top-icon);
    border: var(--blog-over-scroll-border-width, 0px) solid var(--blog-over-scroll-border-color, transparent);
    border-radius: var(--blog-over-scroll-radius, 50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--blog-over-scroll-icon-size, 1.1rem);
    padding: var(--blog-over-scroll-padding, 0);
    box-shadow: var(--blog-over-shadow-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    /* Smooth transition for hover up/down effect */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s ease,
        background-color 0.3s ease,
        opacity 0.3s ease,
        visibility 0.3s ease;
    z-index: 999;
}

.blog-over-scroll-top.blog-over-scroll-pos-left {
    right: auto;
    left: var(--blog-over-scroll-offset-x, 30px);
}

.blog-over-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    bottom: var(--blog-over-scroll-offset-y, 30px);
    /* Ensure it stays at offset */
}

.blog-over-scroll-top:hover {
    transform: translateY(-8px);
    /* Rises up smoothly */
    box-shadow: var(--blog-over-shadow-lg), 0 10px 25px rgba(0, 0, 0, 0.15);
    background: var(--blog-over-secondary);
    /* Change background on hover */
}

/* Show Scroll to Top in Customizer Preview for Edit Shortcut */
.customize-partial-edit-shortcut-blog_over_scroll_top_shortcut,
body.wp-customizer .blog-over-scroll-top,
body.customize-preview .blog-over-scroll-top {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* =========================================
   Mobile Responsive Styles
   ========================================= */

/* ─────────────────────────────────────────
   TABLET (max-width: 768px)
   ───────────────────────────────────────── */
@media (max-width: 768px) {

    /* Container */
    .blog-over-container {
        padding: 0 15px;
    }

    /* Topbar */
    .blog-over-topbar-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 6px 0;
    }

    .blog-over-topbar-left {
        gap: 10px;
    }

    .blog-over-topbar-right {
        gap: 10px;
    }

    .blog-over-topbar-social-link {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
        min-width: 28px;
        min-height: 28px;
    }

    .blog-over-theme-toggle,
    .blog-over-search-toggle {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }

    .blog-over-subscribe-btn {
        padding: 5px 12px;
        font-size: 0.7rem;
        min-width: auto;
        min-height: auto;
    }

    /* Footer Widgets — tablet: max 2 columns */
    .footer-columns-3,
    .footer-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-widgets {
        padding: 30px 0;
    }

    /* Scroll to Top */
    .blog-over-scroll-top {
        width: 40px;
        height: 40px;
        right: 20px;
        bottom: 20px;
    }
}

/* ─────────────────────────────────────────
   MOBILE (max-width: 576px)
   ───────────────────────────────────────── */
@media (max-width: 576px) {

    /* Container */
    .blog-over-container {
        padding: 0 12px;
    }

    /* Main Layout */
    .blog-over-main-layout {
        margin: 20px auto;
        gap: 20px;
    }

    /* Topbar */
    .blog-over-topbar {
        font-size: 0.8rem;
    }

    .blog-over-topbar-inner {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }

    .blog-over-topbar-left {
        order: 1;
        width: auto;
        gap: 6px;
    }

    .blog-over-topbar-right {
        order: 2;
        width: auto;
        gap: 8px;
    }

    .blog-over-topbar-date {
        font-size: 0.75rem;
    }

    .blog-over-topbar-social {
        gap: 5px;
    }

    .blog-over-topbar-social-link {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
        min-width: 26px;
        min-height: 26px;
    }

    .blog-over-theme-toggle,
    .blog-over-search-toggle {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
    }

    .blog-over-subscribe-btn {
        padding: 4px 10px;
        font-size: 0.65rem;
        letter-spacing: 0;
        min-width: auto;
        min-height: auto;
    }

    /* Sidebar Widgets */
    .blog-over-sidebar .widget {
        padding: 12px;
    }

    .blog-over-sidebar .widget ul li {
        padding: 6px 0;
        font-size: 0.9rem;
    }

    /* Footer Widgets — mobile: single column */
    .footer-widgets-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }

    .footer-widgets {
        padding: 25px 0;
    }

    .footer-widget {
        text-align: center;
    }

    .footer-widget .widget-title {
        font-size: 0.9rem;
    }

    .blog-over-footer-bottom {
        padding: 15px 0;
        font-size: 0.8rem;
    }

    .blog-over-footer-social-icons {
        gap: 8px;
    }

    .blog-over-social-icon {
        width: 36px;
        height: 36px;
    }

    /* Posts */
    .blog-over-post-content {
        padding: 18px;
    }

    .blog-over-post-title {
        font-size: 1.15rem;
    }

    .blog-over-post-meta .blog-over-meta-info {
        gap: 10px;
        font-size: 0.8rem;
    }

    .blog-over-post-excerpt {
        font-size: 0.9rem;
    }

    .blog-over-read-more {
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    /* Grid Items */
    .blog-over-grid-content {
        padding: 15px;
    }

    .blog-over-grid-title {
        font-size: 1rem;
    }

    /* Scroll Button */
    .blog-over-scroll-top {
        width: 38px;
        height: 38px;
        right: 15px;
        bottom: 15px;
        font-size: 1rem;
    }

    /* Comments */
    .comments-area {
        padding: 20px;
    }

    .comments-title {
        font-size: 1.25rem;
    }

    .comment-body {
        flex-direction: column;
        gap: 12px;
    }

    .comment-body .avatar {
        width: 50px;
        height: 50px;
    }

    .comment .children {
        margin-left: 15px;
        padding-left: 15px;
    }
}

/* ─────────────────────────────────────────
   SMALL MOBILE (max-width: 480px)
   ───────────────────────────────────────── */
@media (max-width: 480px) {

    /* Topbar - Compact mode */
    .blog-over-topbar-date {
        display: none;
    }

    .blog-over-topbar-text {
        display: none;
    }

    /* Sidebar */
    .blog-over-sidebar .widget {
        padding: 10px;
    }

    .blog-over-sidebar .widget-title {
        font-size: 0.95rem;
        margin-bottom: 12px;
    }

    /* Posts */
    .blog-over-post-content {
        padding: 15px;
    }

    .blog-over-post-title {
        font-size: 1.1rem;
        line-height: 1.35;
    }

    .blog-over-post-category a {
        font-size: 0.6rem;
        padding: 4px 10px;
    }

    /* Single Post */
    .blog-over-single-post {
        padding: 18px;
    }

    .blog-over-single-title {
        font-size: 1.35rem;
    }

    .blog-over-single-meta {
        font-size: 0.8rem;
        gap: 12px;
    }

    .blog-over-single-content {
        font-size: 0.95rem;
    }

    /* Comments */
    .comments-area {
        padding: 15px;
        margin-top: 30px;
    }

    .comments-title {
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    .comment-form input,
    .comment-form textarea {
        font-size: 0.9rem;
    }
}

/* =========================================
   Dark Mode
   ========================================= */
body.blog-over-dark-mode {
    background-color: var(--blog-over-bg-body);
    color: var(--blog-over-text-body);
}

body.blog-over-dark-mode h1,
body.blog-over-dark-mode h2,
body.blog-over-dark-mode h3,
body.blog-over-dark-mode h4,
body.blog-over-dark-mode h5,
body.blog-over-dark-mode h6 {
    color: var(--blog-over-heading-color);
}

/* =========================================
   Footer Enhancements
   ========================================= */
.blog-over-footer {
    position: relative;
    background-size: cover;
    background-position: center;
}

.blog-over-footer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

/* Column rules moved to base .footer-columns-N above */

.blog-over-footer-social {
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

.blog-over-footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.blog-over-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--blog-over-footer-heading);
    transition: all 0.3s ease;
}

.blog-over-social-icon:hover {
    background: var(--blog-over-primary);
    transform: translateY(-3px);
}



/* =========================================
   Search Styles - Common
   ========================================= */
.blog-over-search-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.blog-over-search-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.blog-over-search-close span {
    font-size: 2rem;
    line-height: 1;
    color: var(--blog-over-text-muted);
}

.blog-over-search-close:hover span {
    color: var(--blog-over-primary);
}

.blog-over-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.blog-over-search-input {
    width: 100%;
    padding: 16px 60px 16px 20px;
    font-size: 1.1rem;
    border: 2px solid var(--blog-over-border-color);
    border-radius: 50px;
    background: var(--blog-over-bg-input);
    transition: all 0.3s ease;
}

.blog-over-search-input:focus {
    outline: none;
    border-color: var(--blog-over-primary);
    background: var(--blog-over-bg-card);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.blog-over-search-submit {
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--blog-over-primary);
    color: var(--blog-over-text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/*
.blog-over-search-submit:hover {
    background: #1e40af;
    transform: translateY(-50%) scale(1.05);
}*/

/* =========================================
   Style 1: Popup Modal Search
   ========================================= */
.blog-over-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.blog-over-search-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.blog-over-search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.blog-over-search-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 650px;
    padding: 40px;
    background: var(--blog-over-bg-card);
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.blog-over-search-modal[aria-hidden="false"] .blog-over-search-modal-content {
    transform: translate(-50%, -50%) scale(1);
}

.blog-over-search-modal .blog-over-search-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: var(--blog-over-bg-input);
    border-radius: 50%;
}

.blog-over-search-modal .blog-over-search-close:hover {
    background: var(--blog-over-border-color);
}

/* Modal Search Form - Full Width */
.blog-over-search-modal .blog-over-search-form {
    max-width: 100%;
    margin: 0;
}

.blog-over-search-modal .blog-over-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.blog-over-search-modal .blog-over-search-input {
    width: 100%;
    flex: 1;
    padding: 15px 60px 15px 20px;
    border: 2px solid var(--blog-over-border-color);
    border-radius: 30px;
    background: var(--blog-over-bg-input);
    color: var(--blog-over-text-body);
    font-size: 16px;
    transition: all 0.3s ease;
}

.blog-over-search-modal .blog-over-search-input:focus {
    outline: none;
    border-color: var(--blog-over-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.blog-over-search-modal .blog-over-search-input::placeholder {
    color: var(--blog-over-input-placeholder);
}

.blog-over-search-modal .blog-over-search-submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--blog-over-primary, #3b82f6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-over-search-modal .blog-over-search-submit i {
    display: none;
}

.blog-over-search-modal .blog-over-search-submit:hover {
    background-color: var(--blog-over-secondary, #2563eb);
    transform: translateY(-50%) scale(1.05);
}

/* =========================================
   Style 2: Inline Expand Search (Dropdown)
   Uses position:fixed — JS sets top/right dynamically
   ========================================= */
.blog-over-search-inline {
    position: fixed;
    width: 340px;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transform-origin: top right;
    transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.blog-over-search-inline[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Arrow pointer */
.blog-over-search-inline::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
    z-index: 2;
}

/* Card container */
.blog-over-search-inline form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 1;
}

/* Search Input */
.blog-over-search-inline .blog-over-search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 0.92rem;
    color: #334155;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-over-search-inline .blog-over-search-input::placeholder {
    color: #94a3b8;
}

.blog-over-search-inline .blog-over-search-input:hover:not(:focus) {
    border-color: #e2e8f0;
    /* Prevent blue border on hover */
}

.blog-over-search-inline .blog-over-search-input:focus {
    outline: none;
    border-color: #e2e8f0;
    /* Keep default grey border on click */
    background: #ffffff;
    box-shadow: none !important;
    /* Remove any global double-ring shadows */
}

/* Only show blue border when navigating via keyboard (Tab focus) */
.blog-over-search-inline .blog-over-search-input:focus-visible {
    outline: none;
    border-color: var(--blog-over-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* Submit Button */
.blog-over-search-inline .blog-over-search-submit {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-left: 0;
    border-radius: 10px;
    background: var(--blog-over-primary, #3b82f6);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

/* Show the search icon (overriding global display: none) */
.blog-over-search-inline .blog-over-search-submit i {
    display: inline-block !important;
    font-size: 1rem;
    color: #ffffff;
    line-height: 1;
}

.blog-over-search-inline .blog-over-search-submit:hover {
    background: var(--blog-over-secondary, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.blog-over-search-inline .blog-over-search-submit:hover i {
    color: #ffffff;
}

.blog-over-search-inline .blog-over-search-submit:active {
    transform: translateY(0);
    box-shadow: none;
}


/* =========================================
   Style 3: Slide Panel Search
   ========================================= */
.blog-over-search-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.blog-over-search-panel[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.blog-over-search-panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blog-over-search-panel[aria-hidden="false"] .blog-over-search-panel-overlay {
    opacity: 1;
}

.blog-over-search-panel-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background: var(--blog-over-bg-card);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.blog-over-search-panel[aria-hidden="false"] .blog-over-search-panel-inner {
    transform: translateX(0);
}

.blog-over-search-panel .blog-over-search-close {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 44px;
    height: 44px;
    background: var(--blog-over-bg-input, #f1f5f9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: var(--blog-over-text-muted, #64748b);
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.blog-over-search-panel .blog-over-search-close:hover {
    background: var(--blog-over-error-bg, #fee2e2);
    color: var(--blog-over-error, #ef4444);
    transform: rotate(90deg);
}

.blog-over-search-panel .blog-over-search-close:hover span {
    color: var(--blog-over-error, #ef4444);
}

.blog-over-search-panel-content {
    padding: 100px 30px 40px;
    max-width: 100%;
}

.blog-over-search-panel-title {
    font-size: 1.75rem;
    margin-bottom: 25px;
    font-weight: 700;
    color: var(--blog-over-heading-color);
}

.blog-over-search-panel form {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}

.blog-over-search-panel .blog-over-search-input {
    flex: 1;
    min-width: 0;
    padding: 0 18px;
    height: 52px;
    border-radius: 12px;
    border: 2px solid var(--blog-over-border-color, #e2e8f0);
    background: transparent;
    font-size: 1rem;
    color: var(--blog-over-text-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-over-search-panel .blog-over-search-input:focus {
    outline: none;
    border-color: var(--blog-over-primary, #3b82f6);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.blog-over-search-panel .blog-over-search-submit {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 60px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 12px;
    margin: 0;
    background: var(--blog-over-primary, #3b82f6);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

/* Force showing icon properly due to global overrides */
.blog-over-search-panel .blog-over-search-submit i {
    display: inline-block !important;
    font-size: 1.1rem;
    color: #ffffff;
    line-height: 1;
}

.blog-over-search-panel .blog-over-search-submit:hover {
    background: var(--blog-over-secondary, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}

.blog-over-search-panel .blog-over-search-submit:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Body scroll lock when search panel is open */
body.blog-over-search-open {
    overflow: hidden;
}

/* Style 4: Slide Panel Search (Right to Left) */
.blog-over-search-panel-rtl .blog-over-search-panel-inner {
    left: auto;
    right: 0;
    transform: translateX(100%);
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.2);
}

.blog-over-search-panel-rtl[aria-hidden="false"] .blog-over-search-panel-inner {
    transform: translateX(0);
}

.blog-over-search-panel-rtl .blog-over-search-close {
    right: auto;
    left: 20px;
}

/* =========================================
   Search Styles - Responsive
   ========================================= */
@media (max-width: 576px) {
    .blog-over-search-modal-content {
        padding: 30px 20px;
    }

    .blog-over-search-modal .blog-over-search-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .blog-over-search-input {
        font-size: 1rem;
        padding: 14px 55px 14px 16px;
    }

    .blog-over-search-submit {
        width: 38px;
        height: 38px;
    }

    .blog-over-search-inline {
        width: calc(100vw - 30px);
        max-width: 320px;
        right: -10px;
    }

    .blog-over-search-panel-inner {
        max-width: 100%;
    }
}

/* =========================================
   Content Wrapper & Sidebar Layout
   ========================================= */
.blog-over-content-wrapper {
    display: flex;
    gap: 25px;
    margin: 30px 0;
}

.blog-over-content-wrapper.no-sidebar {
    justify-content: center;
}

.blog-over-content-wrapper.no-sidebar .blog-over-main-content {
    max-width: 800px;
    width: 100%;
}

/* Full width container - Blog Grid template with no sidebar */
.blog-over-container-wide .blog-over-content-wrapper.no-sidebar .blog-over-main-content {
    max-width: 100%;
}

/* Center grid in full-width layouts */
.blog-over-container-wide .blog-over-posts-grid,
.blog-over-container-wide .blog-over-modern-grid {
    margin: 0 auto;
}

/* List view in no-sidebar: center image vertically with content */
.blog-over-content-wrapper.no-sidebar .blog-over-posts-list.list-view .blog-over-post-item {
    display: flex;
    align-items: center;
}

.blog-over-content-wrapper.no-sidebar .blog-over-posts-list.list-view .blog-over-post-thumbnail {
    flex-shrink: 0;
}

.blog-over-content-wrapper.has-sidebar .blog-over-main-content {
    flex: 1;
    min-width: 0;
}

.blog-over-content-wrapper.has-sidebar .blog-over-sidebar {
    width: auto;
    flex-shrink: 0;
}

/* Full width container with sidebar - use full available width */
.blog-over-container-wide .blog-over-content-wrapper.has-sidebar {
    width: 100%;
}

/* Ensure main content fills available space in wide layouts */
.blog-over-container-wide .blog-over-content-wrapper.has-sidebar .blog-over-main-content {
    flex: 1;
    min-width: 0;
}

/* Left sidebar layout - HTML already places sidebar first, no CSS reordering needed */

@media (max-width: 992px) {
    .blog-over-content-wrapper {
        flex-direction: column;
    }

    .blog-over-content-wrapper.sidebar-left {
        flex-direction: column;
    }

    .blog-over-content-wrapper.has-sidebar .blog-over-sidebar {
        width: 100%;
    }
}

/* =========================================
   Breadcrumb Styles
   ========================================= */
.blog-over-breadcrumb-wrapper {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 15px 0;
    border-bottom: 1px solid var(--blog-over-border-color);
}

.blog-over-breadcrumb {
    font-size: 0.875rem;
}

/* Breadcrumb Alignment */
.blog-over-breadcrumb-align-left .blog-over-breadcrumb-list,
.blog-over-breadcrumb-align-left .blog-over-breadcrumb-inner {
    justify-content: flex-start;
}

.blog-over-breadcrumb-align-center .blog-over-breadcrumb-list,
.blog-over-breadcrumb-align-center .blog-over-breadcrumb-inner {
    justify-content: center;
}

.blog-over-breadcrumb-align-right .blog-over-breadcrumb-list,
.blog-over-breadcrumb-align-right .blog-over-breadcrumb-inner {
    justify-content: flex-end;
}

.blog-over-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-over-breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--blog-over-text-muted);
}

.blog-over-breadcrumb-item a {
    color: var(--blog-over-primary);
    transition: color 0.2s ease;
}

.blog-over-breadcrumb-item a:hover {
    color: var(--blog-over-secondary);
    text-decoration: underline;
}

/* Separator - using data attribute for dynamic content */
.blog-over-breadcrumb-item:not(:last-child)::after {
    content: attr(data-sep);
    margin-left: 8px;
    color: var(--blog-over-meta-color);
}

/* Fallback separator when data-sep not set */
.blog-over-breadcrumb-list[data-separator="chevron"] .blog-over-breadcrumb-item:not(:last-child)::after {
    content: '›';
}

.blog-over-breadcrumb-list[data-separator="arrow"] .blog-over-breadcrumb-item:not(:last-child)::after {
    content: '→';
}

.blog-over-breadcrumb-list[data-separator="slash"] .blog-over-breadcrumb-item:not(:last-child)::after {
    content: '/';
}

.blog-over-breadcrumb-list[data-separator="pipe"] .blog-over-breadcrumb-item:not(:last-child)::after {
    content: '|';
}

.blog-over-breadcrumb-item.current {
    color: var(--blog-over-heading-color);
    font-weight: 500;
}

.blog-over-breadcrumb-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--blog-over-text-muted);
    font-size: 0.875rem;
}

.blog-over-breadcrumb-inner a {
    color: var(--blog-over-primary);
}

.blog-over-breadcrumb-inner a:hover {
    text-decoration: underline;
}

/* =========================================
   Archive Page Styles
   ========================================= */
.blog-over-archive-header {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--blog-over-border-color);
}

.blog-over-archive-title {
    font-size: 1.75rem;
    margin-bottom: 10px;
    color: var(--blog-over-heading-color);
}

.blog-over-archive-description {
    color: var(--blog-over-text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.blog-over-archive-description p {
    margin: 0;
}

/* Posts List Views */
.blog-over-posts-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.blog-over-posts-list.grid-view {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

@media (max-width: 768px) {
    .blog-over-posts-list.grid-view {
        grid-template-columns: 1fr;
    }
}

/* Blog Grid Template - Column Classes */
.blog-over-posts-grid {
    display: grid;
    gap: 30px;
    width: 100%;
}

/* Fix overflow for grid items with long content */
.blog-over-posts-grid>* {
    min-width: 0;
}

.blog-over-posts-grid.blog-over-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.blog-over-posts-grid.blog-over-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.blog-over-posts-grid.blog-over-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.blog-over-modern-grid.blog-over-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.blog-over-modern-grid.blog-over-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.blog-over-modern-grid.blog-over-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {

    .blog-over-posts-grid.blog-over-grid-cols-4,
    .blog-over-modern-grid.blog-over-grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {

    .blog-over-posts-grid.blog-over-grid-cols-3,
    .blog-over-posts-grid.blog-over-grid-cols-4,
    .blog-over-modern-grid.blog-over-grid-cols-3,
    .blog-over-modern-grid.blog-over-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .blog-over-posts-grid,
    .blog-over-modern-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Post Item */
.blog-over-post-item {
    background: var(--blog-over-bg-card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    /* No transition on card - hover effects only on thumbnail */
}

.blog-over-posts-list.list-view .blog-over-post-item {
    display: flex;
    align-items: center;
}

.blog-over-posts-list.list-view .blog-over-post-thumbnail {
    width: 38%;
    flex-shrink: 0;
}

.blog-over-posts-list.list-view .blog-over-post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .blog-over-posts-list.list-view .blog-over-post-item {
        flex-direction: column;
    }

    .blog-over-posts-list.list-view .blog-over-post-thumbnail {
        width: 100%;
    }
}

/* Card hover removed - effects now only on thumbnail */

.blog-over-post-thumbnail {
    position: relative;
    overflow: hidden;
}

.blog-over-post-thumbnail.fixed-height img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-over-post-thumbnail.auto-height img {
    width: 100%;
    height: auto;
}

.blog-over-post-thumbnail img {
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

.blog-over-post-item:hover .blog-over-post-thumbnail img {
    transform: scale(1.04);
}

/* Thumbnail Overlay Effect on Hover */
.blog-over-post-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 2;
    pointer-events: none;
    transition: background 0.3s ease;
}

.blog-over-post-item:hover .blog-over-post-thumbnail::before {
    background: rgba(0, 0, 0, 0.15);
}

/* Category Badge - in content flow with normal hover */
.blog-over-post-category {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.blog-over-post-category a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    background: var(--blog-over-secondary, #1e40af);
    color: var(--blog-over-text-inverse);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.blog-over-post-category a:hover {
    background: var(--blog-over-primary, #3b82f6);
    color: var(--blog-over-text-inverse);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35);
    transform: translateY(0px);
}

/* Post Content Area */
.blog-over-post-content {
    padding: 24px;
}

/* Post Header */
.blog-over-post-header {
    margin-bottom: 12px;
}

.blog-over-post-title {
    font-size: 1.3rem;
    margin: 0;
    line-height: 1.45;
    font-weight: 700;
}

.blog-over-post-title a {
    color: var(--blog-over-heading-color);
    transition: color 0.2s ease;
    text-decoration: none;
}

.blog-over-post-title a:hover {
    color: var(--blog-over-primary);
}

/* Post Meta */
.blog-over-post-meta {
    margin-bottom: 16px;
}

.blog-over-post-meta .blog-over-meta-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--blog-over-text-muted);
}

.blog-over-post-meta .blog-over-meta-info span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-over-post-meta .blog-over-meta-info i {
    color: var(--blog-over-meta-color);
    font-size: 0.8rem;
}

.blog-over-post-meta .blog-over-meta-info a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-over-post-meta .blog-over-meta-info a:hover {
    color: var(--blog-over-primary);
}

/* Post Excerpt */
.blog-over-post-excerpt {
    color: var(--blog-over-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.blog-over-post-excerpt p {
    margin: 0;
    /* Line-clamp removed - excerpt length controlled by Customizer word count setting */
}

.blog-over-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--blog-over-primary);
    color: var(--blog-over-btn-primary-text);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.blog-over-read-more:hover {
    background: var(--blog-over-secondary);
    color: var(--blog-over-btn-primary-text);
    transform: translateX(4px);
}

.blog-over-read-more i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.blog-over-read-more:hover i {
    transform: translateX(4px);
}

/* =========================================
   Grid Layout (content-grid.php)
   ========================================= */
.blog-over-grid-item {
    margin-bottom: 0;
}

.blog-over-grid-card {
    background: var(--blog-over-bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Fix overflow for flex children */
.blog-over-grid-card>* {
    min-width: 0;
}

/* Classic Card Hover: Elegant lift with border glow */
.blog-over-grid-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), inset 0px 0px 20px 10px rgba(59, 130, 246, 0.15)
}

.blog-over-grid-thumbnail {
    position: relative;
    overflow: hidden;
}

.blog-over-grid-thumbnail.fixed-height {
    height: 200px;
}

/* Classic Image: Grayscale to color on hover */
.blog-over-grid-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: grayscale(30%) brightness(0.95);
}

.blog-over-grid-card:hover .blog-over-grid-thumbnail img {
    transform: scale(1.02);
    filter: grayscale(0%) brightness(1);
}

/* Classic Category: Pill-shaped solid badge */
.blog-over-grid-category {
    margin-bottom: 10px;
}

.blog-over-grid-category a {
    display: inline-block;
    padding: 5px 14px;
    background: var(--blog-over-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-over-grid-category a:hover {
    background: var(--blog-over-secondary);
}

.blog-over-grid-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.blog-over-grid-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.blog-over-grid-title a {
    color: var(--blog-over-heading-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-over-grid-title a:hover {
    color: var(--blog-over-primary);
}

.blog-over-grid-meta {
    margin-bottom: 12px;
}

.blog-over-grid-meta .blog-over-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--blog-over-text-muted);
}

.blog-over-grid-meta .blog-over-meta-info span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blog-over-grid-meta .blog-over-meta-info i {
    color: var(--blog-over-meta-color);
    font-size: 0.7rem;
}

.blog-over-grid-meta .blog-over-meta-info a {
    color: inherit;
    text-decoration: none;
}

.blog-over-grid-excerpt {
    color: var(--blog-over-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1;
}

.blog-over-grid-excerpt p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-over-grid-footer {
    margin-top: auto;
}

.blog-over-grid-readmore {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: transparent;
    color: var(--blog-over-primary);
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--blog-over-primary);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.blog-over-grid-readmore:hover {
    background: var(--blog-over-primary);
    color: #ececec;
}

.blog-over-no-posts {
    text-align: center;
    padding: 60px 20px;
    background: var(--blog-over-bg-input);
    border-radius: 12px;
}

/* Pagination */
.blog-over-pagination {
    margin-top: 40px;
}

/* =========================================
   Single Post Styles
   ========================================= */
.blog-over-single-post {
    background: var(--blog-over-bg-card);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.blog-over-single-category {
    margin-bottom: 15px;
}

.blog-over-single-category a {
    display: inline-block;
    padding: 5px 14px;
    background: var(--blog-over-primary);
    color: var(--blog-over-text-inverse);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    margin-right: 8px;
    transition: background 0.2s;
}

.blog-over-single-category a:hover {
    background: var(--blog-over-secondary);
    color: #fafafa;
}

.blog-over-single-header {
    margin-bottom: 25px;
}

.blog-over-single-title {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 20px;
    color: var(--blog-over-heading-color);
}

.blog-over-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    color: var(--blog-over-text-muted);
    font-size: 0.9rem;
}

.blog-over-single-meta .blog-over-meta-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-over-single-meta .blog-over-meta-author img {
    border-radius: 50%;
}

.blog-over-single-meta .blog-over-meta-author a {
    color: var(--blog-over-heading-color);
    font-weight: 500;
}

.blog-over-single-meta .blog-over-meta-author a:hover {
    color: var(--blog-over-primary);
}

.blog-over-single-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-over-single-thumbnail {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.blog-over-single-thumbnail img {
    width: 100%;
    height: auto;
}

.blog-over-single-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--blog-over-text-body);
}

.blog-over-single-content p {
    margin-bottom: 1.5rem;
}

.blog-over-single-content h2,
.blog-over-single-content h3,
.blog-over-single-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.blog-over-single-content img {
    border-radius: 8px;
    margin: 1.5rem 0;
}

.blog-over-single-content blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: var(--blog-over-bg-input);
    border-left: 4px solid var(--blog-over-primary);
    font-style: italic;
    color: var(--blog-over-text-muted);
}

/* Drop Caps */
.has-drop-cap>p:first-of-type::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 1;
    font-weight: 700;
    margin-right: 10px;
    margin-top: 5px;
    color: var(--blog-over-primary);
}

/* Tags */
.blog-over-single-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid var(--blog-over-border-color);
}

.blog-over-single-tags .tags-label {
    font-weight: 600;
    color: var(--blog-over-heading-color);
}

.blog-over-single-tags a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--blog-over-tag-bg);
    color: var(--blog-over-tag-text);
    font-size: 0.85rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.blog-over-single-tags a:hover {
    background: var(--blog-over-tag-hover-bg);
    color: var(--blog-over-tag-hover-text);
}

/* Share Buttons */
.blog-over-share-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding: 20px;
    background: var(--blog-over-bg-input);
    border-radius: 8px;
}

.blog-over-share-buttons .share-label {
    font-weight: 600;
    color: var(--blog-over-heading-color);
}

/* Author Box */
.blog-over-author-box {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
}

.blog-over-author-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-over-author-info {
    flex: 1;
}

.blog-over-author-name {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.blog-over-author-name a {
    color: var(--blog-over-heading-color);
}

.blog-over-author-name a:hover {
    color: var(--blog-over-primary);
}

.blog-over-author-bio {
    color: var(--blog-over-text-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 576px) {
    .blog-over-author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Post Navigation */
.post-navigation {
    margin-top: 40px;
}



.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.8rem;
    color: var(--blog-over-text-muted);
    margin-bottom: 5px;
}

.post-navigation .nav-title {
    display: block;
    font-weight: 600;
    color: var(--blog-over-heading-color);
    line-height: 1.4;
}

.post-navigation .nav-next {
    text-align: right;
}

@media (max-width: 576px) {
    .post-navigation .nav-links {
        grid-template-columns: 1fr;
    }

    .post-navigation .nav-next {
        text-align: left;
    }

    .blog-over-single-post {
        padding: 25px;
    }

    .blog-over-single-title {
        font-size: 1.5rem;
    }
}

/* =========================================
   Page Styles
   ========================================= */
.blog-over-page-main .blog-over-single-post {
    padding: 40px;
}

.blog-over-page-title {
    font-size: 2rem;
    margin-bottom: 30px;
    color: var(--blog-over-heading-color);
}

/* Comments */
.comments-area {
    margin-top: 50px;
    padding: 40px;
    background: var(--blog-over-bg-card);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.comments-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--blog-over-primary);
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment {
    padding: 25px 0;
    border-bottom: 1px solid var(--blog-over-border-color);
}

.comment:last-child {
    border-bottom: none;
}

.comment-body {
    display: flex;
    gap: 20px;
}

.comment-body .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
}

.comment-content {
    flex: 1;
}

.comment-author {
    font-weight: 600;
    color: var(--blog-over-heading-color);
    margin-bottom: 5px;
}

.comment-meta {
    font-size: 0.85rem;
    color: var(--blog-over-text-muted);
    margin-bottom: 10px;
}

.comment-text {
    color: var(--blog-over-text-body);
    line-height: 1.7;
}

.comment .children {
    margin-left: 40px;
    padding-left: 20px;
    border-left: 2px solid var(--blog-over-border-color);
}

/* Comment Form */
.comment-respond {
    margin-top: 40px;
}

.comment-reply-title {
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.comment-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--blog-over-heading-color);
}

.comment-form input,
.comment-form textarea {
    margin-bottom: 20px;
}

.comment-form .form-submit {
    margin-top: 10px;
}

/* =========================================
   Full-Width No-Sidebar Layout
   ========================================= */

/* Remove max-width constraint for no-sidebar full-width layouts */
.blog-over-content-wrapper.no-sidebar .blog-over-main-content {
    max-width: 100%;
    width: 100%;
}

/* 3-column grid for no-sidebar layout */
.blog-over-content-wrapper.no-sidebar .blog-over-posts-list.grid-view {
    grid-template-columns: repeat(3, 1fr);
}


/* Responsive: 2 columns on tablets */
@media (max-width: 992px) {

    .blog-over-content-wrapper.no-sidebar .blog-over-posts-list.grid-view {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: 1 column on mobile */
@media (max-width: 768px) {

    .blog-over-content-wrapper.no-sidebar .blog-over-posts-list.grid-view {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Page Title Styles
   ========================================= */

/* Page Header Base */
.blog-over-page-header {
    margin-bottom: 30px;
}

.blog-over-page-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--blog-over-heading-color);
    margin: 0;
    line-height: 1.3;
}

/* Page Title Style: Centered */
.blog-over-page-header-centered {
    text-align: center;
}

.blog-over-page-header-centered .blog-over-page-title,
.blog-over-title-centered {
    text-align: center;
}

/* Page Title Style: With Banner Background */
.blog-over-page-header-banner {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-size: cover;
    background-position: center;
    margin: -20px -20px 30px -20px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

/* Banner Fallback - when no featured image is set */
.blog-over-page-header-banner.blog-over-banner-fallback {
    background: var(--blog-over-primary);
}

.blog-over-page-header-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 30px 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    text-align: center;
}

.blog-over-page-header-banner .blog-over-page-title,
.blog-over-title-banner {
    color: var(--blog-over-text-inverse);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Page Content Area */
.blog-over-page-content {
    background: var(--blog-over-bg-card);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.blog-over-page-thumbnail {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.blog-over-page-thumbnail img {
    width: 100%;
    height: auto;
}

.blog-over-page-body {
    color: var(--blog-over-text-body);
    line-height: 1.8;
}

.blog-over-page-body p {
    margin-bottom: 1.5rem;
}

.blog-over-page-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--blog-over-border-color);
}

.blog-over-page-links {
    margin-top: 20px;
    padding: 15px;
    background: var(--blog-over-bg-input);
    border-radius: 6px;
}

/* Page Responsive */
@media (max-width: 768px) {
    .blog-over-page-content {
        padding: 20px;
    }

    .blog-over-page-title {
        font-size: 1.75rem;
    }

    .blog-over-page-header-banner {
        min-height: 200px;
        margin: -20px -20px 20px -20px;
    }

    .blog-over-page-header-overlay {
        padding: 40px 20px 20px;
    }
}

/* =========================================
   Page Content Width Settings
   ========================================= */

/* Boxed Mode - Default (limit text width for readability) */
body.blog-over-page-width-boxed .blog-over-page-body {
    max-width: 800px !important;
}

/* Full Width Mode (no width restrictions) */
body.blog-over-page-width-full-width .blog-over-page-content {
    max-width: 100% !important;
}

body.blog-over-page-width-full-width .blog-over-page-body {
    max-width: 100% !important;
}

/* =========================================
   Breadcrumb Styles
   ========================================= */

/* Breadcrumb Wrapper - Kirki outputs padding/background here via inline styles */
.blog-over-breadcrumb-wrapper {
    padding: 15px 0;
}

/* Breadcrumb Navigation */
.blog-over-breadcrumb {
    font-size: 13px;
    line-height: 1.5;
}

/* Breadcrumb Inner (for third-party breadcrumbs) */
.blog-over-breadcrumb-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Breadcrumb List */
.blog-over-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* Breadcrumb Items */
.blog-over-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: var(--blog-over-text-muted);
}

/* Separator using ::after pseudo-element */
.blog-over-breadcrumb-item:not(:last-child)::after {
    content: attr(data-separator);
    margin: 0 10px;
    color: var(--blog-over-meta-color);
    font-size: 0.9em;
}

/* Use data-separator from parent ol for consistent separators */
.blog-over-breadcrumb-list[data-separator="›"] .blog-over-breadcrumb-item:not(:last-child)::after {
    content: '›';
}

.blog-over-breadcrumb-list[data-separator="→"] .blog-over-breadcrumb-item:not(:last-child)::after {
    content: '→';
}

.blog-over-breadcrumb-list[data-separator="/"] .blog-over-breadcrumb-item:not(:last-child)::after {
    content: '/';
}

.blog-over-breadcrumb-list[data-separator="|"] .blog-over-breadcrumb-item:not(:last-child)::after {
    content: '|';
}

/* Breadcrumb Links */
.blog-over-breadcrumb-item a {
    color: var(--blog-over-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-over-breadcrumb-item a:hover {
    color: var(--blog-over-secondary);
    text-decoration: underline;
}

/* Current Item (last breadcrumb) */
.blog-over-breadcrumb-item.current {
    color: var(--blog-over-text-muted);
    font-weight: 500;
}

/* Alignment Options */
.blog-over-breadcrumb-align-left .blog-over-breadcrumb-list,
.blog-over-breadcrumb-align-left .blog-over-breadcrumb-inner {
    justify-content: flex-start;
}

.blog-over-breadcrumb-align-center .blog-over-breadcrumb-list,
.blog-over-breadcrumb-align-center .blog-over-breadcrumb-inner {
    justify-content: center;
}

.blog-over-breadcrumb-align-right .blog-over-breadcrumb-list,
.blog-over-breadcrumb-align-right .blog-over-breadcrumb-inner {
    justify-content: flex-end;
}

/* Responsive Breadcrumbs */
@media (max-width: 768px) {
    .blog-over-breadcrumb-wrapper {
        padding: 10px 0;
    }

    .blog-over-breadcrumb {
        font-size: 12px;
    }

    .blog-over-breadcrumb-item:not(:last-child)::after {
        margin: 0 6px;
    }
}

/* ========================================
   Page Header Section
   ======================================== */

.blog-over-page-header {
    position: relative;
    background-color: var(--blog-over-page-header-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px 0;
}

/* Background overlay for image backgrounds */
.blog-over-page-header.blog-over-page-header-has-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.blog-over-page-header.blog-over-page-header-has-bg .blog-over-container {
    position: relative;
    z-index: 2;
}

/* Page title text on image background - color controlled by Customizer */
/* Note: Title color is set via Customizer "blog_over_page_header_text_color" setting */

.blog-over-page-header.blog-over-page-header-has-bg .blog-over-breadcrumb-item,
.blog-over-page-header.blog-over-page-header-has-bg .blog-over-breadcrumb-item::after {
    color: rgba(255, 255, 255, 0.75);
}

.blog-over-page-header.blog-over-page-header-has-bg .blog-over-breadcrumb-item a {
    color: rgba(255, 255, 255, 0.9);
}

.blog-over-page-header.blog-over-page-header-has-bg .blog-over-breadcrumb-item a:hover {
    color: #ffffff;
}

.blog-over-page-header.blog-over-page-header-has-bg .blog-over-breadcrumb-item.current {
    color: rgba(255, 255, 255, 0.85);
}

/* Page Header Wrapper */
.blog-over-page-header-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Page Title */
.blog-over-page-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--blog-over-page-header-text);
    line-height: 1.3;
}

/* Alignment Classes */
.blog-over-page-header-align-left .blog-over-page-header-wrapper {
    text-align: left;
    align-items: flex-start;
}

.blog-over-page-header-align-center .blog-over-page-header-wrapper {
    text-align: center;
    align-items: center;
}

.blog-over-page-header-align-right .blog-over-page-header-wrapper {
    text-align: right;
    align-items: flex-end;
}

/* Breadcrumb inside page header alignment */
.blog-over-page-header-align-left .blog-over-breadcrumb-list,
.blog-over-page-header-align-left .blog-over-breadcrumb-inner {
    justify-content: flex-start;
}

.blog-over-page-header-align-center .blog-over-breadcrumb-list,
.blog-over-page-header-align-center .blog-over-breadcrumb-inner {
    justify-content: center;
}

.blog-over-page-header-align-right .blog-over-breadcrumb-list,
.blog-over-page-header-align-right .blog-over-breadcrumb-inner {
    justify-content: flex-end;
}

/* Breadcrumb inside page header - no wrapper padding */
.blog-over-page-header .blog-over-breadcrumb {
    padding: 0;
    background-color: transparent;
    /*margin-top: 8px;*/
}

/* Responsive Page Header */
@media (max-width: 768px) {
    .blog-over-page-header {
        padding: 25px 0;
    }

    .blog-over-page-title {
        font-size: 1.5rem;
    }
}

/* =========================================
   Page Header - Single Post Category & Meta Alignment
   ========================================= */

/* Remove bottom margin from category in page header */
.blog-over-page-header .blog-over-single-category {
    margin-bottom: 0;
}

/* Alignment for category and meta within page header */
.blog-over-page-header-align-left .blog-over-single-category,
.blog-over-page-header-align-left .blog-over-single-meta {
    justify-content: flex-start;
}

.blog-over-page-header-align-center .blog-over-single-category,
.blog-over-page-header-align-center .blog-over-single-meta {
    justify-content: center;
}

.blog-over-page-header-align-right .blog-over-single-category,
.blog-over-page-header-align-right .blog-over-single-meta {
    justify-content: flex-end;
}

/* Page Header meta styling */
.blog-over-page-header .blog-over-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 0px;
    color: var(--blog-over-page-header-text);
}

/* Page Header author */
.blog-over-page-header .blog-over-meta-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-over-page-header .blog-over-meta-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-over-page-header .blog-over-meta-author a {
    font-weight: 500;
    color: inherit;
}

/* Page Header with background image - ensure light text */
.blog-over-page-header.blog-over-page-header-has-bg .blog-over-single-meta,
.blog-over-page-header.blog-over-page-header-has-bg .blog-over-single-meta a {
    color: var(--blog-over-text-inverse);
}

.blog-over-page-header.blog-over-page-header-has-bg .blog-over-page-title {
    color: var(--blog-over-text-inverse);
}

/* =========================================
   Single Post Styles
   ========================================= */

/* Single Post Article */
.blog-over-single-post {
    background: var(--blog-over-bg-card);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Single Post Title (in content) */
.blog-over-single-title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--blog-over-heading-color, #1e293b);
    margin: 0 0 20px;
}

/* Single Post Header */
.blog-over-single-header {
    margin-bottom: 25px;
}

/* Single Post Category */
.blog-over-single-category {
    margin-bottom: 12px;
}

.blog-over-single-category a {
    display: inline-block;
    background: var(--blog-over-primary);
    color: #f8f8f8;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 6px;
    transition: all 0.2s ease;
}

.blog-over-single-category a:hover {
    background: var(--blog-over-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Single Post Meta */
.blog-over-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    color: var(--blog-over-text-muted);
    font-size: 0.875rem;
}

.blog-over-single-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-over-single-meta i {
    color: var(--blog-over-meta-color);
    font-size: 0.875rem;
}

.blog-over-meta-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-over-meta-author img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-over-meta-author a {
    color: var(--blog-over-heading-color);
    font-weight: 500;
}

.blog-over-meta-author a:hover {
    color: var(--blog-over-primary);
}

/* Single Post Meta - Date & Comments Links */
.blog-over-meta-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-over-meta-date svg {
    width: 14px;
    height: 14px;
    margin-top: -1px;
}

.blog-over-single-meta .blog-over-meta-date a,
.blog-over-single-meta .blog-over-meta-comments a {
    color: #1e2954;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-over-single-meta .blog-over-meta-date a:hover,
.blog-over-single-meta .blog-over-meta-comments a:hover {
    color: var(--blog-over-primary);
}

/* Single Post Thumbnail */
.blog-over-single-thumbnail {
    margin: 25px 0;
    border-radius: 12px;
    overflow: hidden;
}

.blog-over-single-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Single Post Content */
.blog-over-single-content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--blog-over-text-color, #334155);
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Paragraphs & Text Elements - Safe Word Breaking */
.blog-over-single-content p {
    margin-bottom: 1.5rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.blog-over-single-content h2,
.blog-over-single-content h3,
.blog-over-single-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--blog-over-heading-color, #1e293b);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Images - Responsive Constraint */
.blog-over-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}

/* Links - Break Long URLs */
.blog-over-single-content a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Preformatted Text - Allow Wrapping While Preserving Format */
.blog-over-single-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    overflow-x: auto;
    max-width: 100%;
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--blog-over-bg-code);
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Code Blocks - Break Long Strings */
.blog-over-single-content code {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    background: var(--blog-over-bg-code);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
}

.blog-over-single-content pre code {
    white-space: pre-wrap;
    background: transparent;
    padding: 0;
}

/* Blockquotes - Prevent Overflow */
.blog-over-single-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--blog-over-primary);
    background: var(--blog-over-bg-input);
    font-style: italic;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.blog-over-single-content blockquote p {
    margin-bottom: 0.5rem;
}

.blog-over-single-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Tables - Responsive with Horizontal Scroll */
.blog-over-single-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.blog-over-single-content th,
.blog-over-single-content td {
    padding: 0.75rem;
    border: 1px solid var(--blog-over-border-color);
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.blog-over-single-content th {
    background: var(--blog-over-bg-input);
    font-weight: 600;
}

/* Definition Lists */
.blog-over-single-content dl {
    margin: 1.5rem 0;
}

.blog-over-single-content dt {
    font-weight: 700;
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.blog-over-single-content dd {
    margin-left: 2rem;
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Lists - Prevent Overflow */
.blog-over-single-content ul,
.blog-over-single-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.blog-over-single-content li {
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Horizontal Rule */
.blog-over-single-content hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--blog-over-border-color);
}

/* Drop Caps */
.has-drop-cap p:first-of-type::first-letter {
    float: left;
    font-size: 4rem;
    line-height: 1;
    font-weight: 700;
    margin-right: 12px;
    margin-top: 4px;
    color: var(--blog-over-primary);
}

/* Single Post Tags */
.blog-over-single-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--blog-over-space-3);
    margin-top: var(--blog-over-space-8);
    padding-top: var(--blog-over-space-6);
    border-top: 1px solid var(--blog-over-border-color);
}

.blog-over-single-tags .tags-label {
    font-weight: 600;
    color: var(--blog-over-text-body);
}

.blog-over-single-tags .tags-label i {
    margin-right: 5px;
    color: var(--blog-over-meta-color);
}

.blog-over-single-tags a {
    display: inline-block;
    background: var(--blog-over-tag-bg);
    color: var(--blog-over-tag-text);
    padding: 6px var(--blog-over-space-3);
    border-radius: 6px;
    font-size: var(--blog-over-font-sm);
    font-weight: 500;
    transition: all 0.2s;
}

.blog-over-single-tags a:hover {
    background: var(--blog-over-tag-hover-bg);
    color: var(--blog-over-tag-hover-text);
}

/* Share Buttons */
.blog-over-share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--blog-over-space-3);
    margin-top: var(--blog-over-space-6);
    padding-top: var(--blog-over-space-5);
    border-top: 1px solid var(--blog-over-border-color);
}

.blog-over-share-buttons .share-label {
    font-weight: 600;
    color: var(--blog-over-text-body);
    margin-right: 5px;
}

.blog-over-share-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: var(--blog-over-font-lg);
    color: var(--blog-over-text-inverse);
    transition: transform 0.2s, box-shadow 0.2s;
}

.blog-over-share-buttons a:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.blog-over-share-buttons a.facebook {
    background: #1877f2;
}

.blog-over-share-buttons a.twitter {
    background: #000;
}

.blog-over-share-buttons a.linkedin {
    background: #0a66c2;
}

.blog-over-share-buttons a.pinterest {
    background: #e60023;
}

.blog-over-share-buttons a.whatsapp {
    background: #25d366;
}

/* Share Icons (inside blog-over-share-buttons) */
.blog-over-share-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.blog-over-share-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 0.9375rem;
    color: var(--blog-over-text-inverse);
    transition: transform 0.2s, box-shadow 0.2s;
}

.blog-over-share-icons a:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.blog-over-share-icons .blog-over-share-facebook {
    background: #1877f2;
}

.blog-over-share-icons .blog-over-share-twitter {
    background: #000;
}

.blog-over-share-icons .blog-over-share-linkedin {
    background: #0a66c2;
}

.blog-over-share-icons .blog-over-share-pinterest {
    background: #e60023;
}

.blog-over-share-icons .blog-over-share-email {
    background: #6366f1;
}

/* =========================================
   Comments Section Styles
   ========================================= */
.comments-area {
    margin-top: var(--blog-over-space-10);
    padding: var(--blog-over-space-8);
    background: var(--blog-over-bg-input);
    border-radius: 12px;
    border: 1px solid var(--blog-over-border-color);
}

.comments-title {
    font-size: var(--blog-over-font-3xl);
    font-weight: 700;
    color: var(--blog-over-heading-color, #1e293b);
    margin-bottom: var(--blog-over-space-6);
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-list li {
    margin-bottom: var(--blog-over-space-6);
    padding-bottom: var(--blog-over-space-6);
    border-bottom: 1px solid var(--blog-over-border-color);
}

.comment-list li:last-child {
    border-bottom: none;
}

.comment-body {
    display: flex;
    gap: var(--blog-over-space-4);
}

.comment-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-content {
    flex: 1;
}

.comment-author {
    font-weight: 600;
    color: var(--blog-over-heading-color, #1e293b);
    margin-bottom: 4px;
}

.comment-author a {
    color: inherit;
}

.comment-author a:hover {
    color: var(--blog-over-primary);
}

.comment-meta {
    font-size: var(--blog-over-font-sm);
    color: var(--blog-over-text-muted);
    margin-bottom: var(--blog-over-space-3);
}

.comment-text {
    color: var(--blog-over-text-color, #475569);
    line-height: 1.7;
}

.comment-text p {
    margin: 0 0 var(--blog-over-space-3);
}

.comment-reply-link,
.comment-edit-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--blog-over-primary);
    margin-right: 15px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.comment-reply-link:hover,
.comment-edit-link:hover {
    color: var(--blog-over-secondary);
}

/* Comments Area Links - Primary color with secondary on hover */
.comments-area a,
.blog-over-comments-area a {
    color: var(--blog-over-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.comments-area a:hover,
.blog-over-comments-area a:hover {
    color: var(--blog-over-secondary);
}

/* Comment Author Name Link */
.comment-author a,
.comment-author-link {
    color: var(--blog-over-heading-color, #1e293b);
    text-decoration: none;
    transition: color 0.3s ease;
}

.comment-author a:hover,
.comment-author-link:hover {
    color: var(--blog-over-primary);
}

/* Comment Meta Links (time, edit) */
.comment-meta a,
.comment-metadata a {
    color: var(--blog-over-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.comment-meta a:hover,
.comment-metadata a:hover {
    color: var(--blog-over-secondary);
}

.comment-awaiting-moderation {
    font-style: italic;
    color: #f59e0b;
    font-size: 0.875rem;
}

/* Child Comments */
.children {
    list-style: none;
    padding: 0;
    margin-left: 40px;
    margin-top: 20px;
}

/* Comment Form */
.comment-respond {
    margin-top: var(--blog-over-space-8);
    padding-top: var(--blog-over-space-6);
    border-top: 1px solid var(--blog-over-border-color);
}

.comment-reply-title {
    font-size: var(--blog-over-font-2xl);
    font-weight: 700;
    color: var(--blog-over-heading-color, #1e293b);
    margin-bottom: var(--blog-over-space-5);
}

.comment-form {
    display: grid;
    gap: 20px;
}

.comment-form label {
    display: block;
    font-weight: 500;
    color: var(--blog-over-heading-color, #1e293b);
    margin-bottom: var(--blog-over-space-2);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: var(--blog-over-space-3) var(--blog-over-space-4);
    border: 1px solid var(--blog-over-border-color);
    border-radius: 8px;
    font-size: var(--blog-over-font-lg);
    color: var(--blog-over-text-color, #334155);
    background: var(--blog-over-bg-card);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--blog-over-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

.comment-form .submit {
    display: inline-block;
    padding: var(--blog-over-space-3) var(--blog-over-space-7);
    background: var(--blog-over-primary);
    color: var(--blog-over-text-inverse);
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-form .submit:hover {
    background: var(--blog-over-secondary);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}


/* Author Box */
.blog-over-author-box {
    display: flex;
    gap: var(--blog-over-space-6);
    margin-top: 35px;
    padding: var(--blog-over-space-8);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid var(--blog-over-primary);
    transition: border-color 0.3s ease;
}

.blog-over-author-box:hover {
    border-color: var(--blog-over-secondary);
}

.blog-over-author-avatar img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--blog-over-bg-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.blog-over-author-info {
    flex: 1;
}

.blog-over-author-name {
    font-size: var(--blog-over-font-xl);
    font-weight: 600;
    margin-bottom: var(--blog-over-space-2);
    color: var(--blog-over-heading-color, #1e293b);
}

.blog-over-author-name a {
    color: inherit;
}

.blog-over-author-name a:hover {
    color: var(--blog-over-primary);
}

.blog-over-author-bio {
    color: var(--blog-over-text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
}

/* Post Navigation */
.post-navigation {
    margin-top: 35px;
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: var(--blog-over-space-5);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 0 1 auto;
    max-width: 50%;
}

/* When only next exists (first post), push it to the right */
.post-navigation .nav-next:only-child {
    margin-left: auto;
}



.post-navigation .nav-next {
    text-align: right;
}

.post-navigation a {
    display: block;
    color: var(--blog-over-primary);
}

.post-navigation a:hover {
    color: var(--blog-over-secondary);
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: var(--blog-over-font-sm);
    color: inherit;
    margin-bottom: var(--blog-over-space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.post-navigation .nav-subtitle i {
    font-size: 0.75rem;
}

.post-navigation .nav-title {
    display: block;
    font-weight: 600;
    color: inherit;
    font-size: 1rem;
    line-height: 1.4;
    transition: color 0.2s;
}

.post-navigation a:hover .nav-title {
    color: var(--blog-over-secondary);
}


/* =========================================
   Related Posts - Light Theme (Default)
   ========================================= */
.blog-over-related-posts {
    margin-top: 35px;
    padding: 30px;
    background: var(--blog-over-bg-card, #ffffff);
    border-radius: 12px;
    border: 1px solid var(--blog-over-border-color, #e2e8f0);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.blog-over-related-title {
    font-size: var(--blog-over-font-3xl, 1.5rem);
    font-weight: 700;
    margin-bottom: var(--blog-over-space-6, 1.5rem);
    color: #1e293b;
    /* Dark color for light theme */
}

.blog-over-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--blog-over-space-6, 1.5rem);
}

/* Column Options */
.blog-over-related-grid.blog-over-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.blog-over-related-grid.blog-over-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.blog-over-related-grid.blog-over-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.blog-over-related-item {
    background: var(--blog-over-bg-card, #ffffff);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--blog-over-border-color, #e2e8f0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}

.blog-over-related-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.blog-over-related-item .blog-over-related-thumbnail {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.blog-over-related-item .blog-over-related-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.blog-over-related-item:hover .blog-over-related-thumbnail img {
    transform: scale(1.05);
}

.blog-over-related-item .blog-over-related-content {
    padding: var(--blog-over-space-5, 1.25rem);
}

/* Related Post Title - Light Theme */
.blog-over-related-item .blog-over-related-post-title,
.blog-over-related-item .blog-over-related-item-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}

.blog-over-related-item .blog-over-related-post-title a,
.blog-over-related-item .blog-over-related-item-title a {
    color: #1e293b;
    /* Dark title for light theme */
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-over-related-item .blog-over-related-post-title a:hover,
.blog-over-related-item .blog-over-related-item-title a:hover {
    color: var(--blog-over-primary, #3b82f6);
    /* Primary color on hover */
}

/* Related Posts Meta Info - Light Theme */
.blog-over-related-content .blog-over-meta-info,
.blog-over-related-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--blog-over-space-3, 0.75rem);
    font-size: var(--blog-over-font-sm, 0.875rem);
    color: #64748b;
    /* Muted text for light theme */
    margin: var(--blog-over-space-2, 0.5rem) 0;
}

.blog-over-related-content .blog-over-meta-info span,
.blog-over-related-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blog-over-related-content .blog-over-meta-info i,
.blog-over-related-meta i {
    color: #94a3b8;
    /* Muted icon color for light theme */
    font-size: 0.75rem;
}

.blog-over-related-content .blog-over-meta-info a,
.blog-over-related-meta a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-over-related-content .blog-over-meta-info a:hover,
.blog-over-related-meta a:hover {
    color: var(--blog-over-primary, #3b82f6);
}

/* Related Posts Date - Light Theme */
.blog-over-related-date {
    color: #64748b;
    font-size: 0.875rem;
}

/* Related Posts Excerpt - Light Theme */
.blog-over-related-excerpt {
    color: #64748b;
    /* Muted text for light theme */
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 8px 0px;

}

/* Related Posts Responsive */
@media (max-width: 991px) {
    .blog-over-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .blog-over-related-grid {
        grid-template-columns: 1fr;
    }

    .blog-over-related-title {
        font-size: 1.25rem;
    }
}


/* =========================================
   Responsive Single Post
   ========================================= */
@media (max-width: 992px) {
    .blog-over-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-over-single-post {
        padding: 20px;
    }

    .blog-over-single-title {
        font-size: 1.75rem;
    }

    .blog-over-single-meta {
        gap: 15px;
    }

    .blog-over-author-box {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }

    .blog-over-author-avatar {
        display: flex;
        justify-content: center;
    }

    .post-navigation .nav-links {
        flex-direction: column;
    }

    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        max-width: 100%;
        text-align: left;
    }

    .post-navigation .nav-next {
        padding-top: 20px;
    }

    .blog-over-related-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Enhanced Single Post Layout - Premium Design
   ========================================= */

/* Section Spacing Enhancement 
.blog-over-single-tags,
.blog-over-share-buttons,
.blog-over-author-box,
.post-navigation,
.blog-over-related-posts,
.comments-area {
    margin-bottom: 45px !important;
    margin-top: 0 !important;
}*/

/* Enhanced Share Buttons */
.blog-over-share-buttons {
    display: flex;
    align-items: center;
    gap: var(--blog-over-space-4);
    padding: var(--blog-over-space-6);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: none !important;
}

.blog-over-share-buttons a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #f8f8f8;
    font-size: 1.1rem;
}

.blog-over-share-buttons a:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

/* Enhanced Author Box */
.blog-over-author-box {
    display: flex;
    gap: var(--blog-over-space-8);
    padding: var(--blog-over-space-10);
    background: var(--blog-over-bg-card);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

.blog-over-author-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--blog-over-primary);
}

.blog-over-author-avatar img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 4px solid var(--blog-over-bg-card);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    object-fit: cover;
}

.blog-over-author-name {
    font-size: var(--blog-over-font-3xl);
    font-weight: 800;
    margin-bottom: var(--blog-over-space-3);
    color: var(--blog-over-heading-color);
}

.blog-over-author-name a {
    color: var(--blog-over-primary);
}

.blog-over-author-bio {
    color: var(--blog-over-text-muted);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
}


/* Modern Related Posts */
.blog-over-related-posts {
    padding: var(--blog-over-space-12) 0;
    border-top: 2px solid var(--blog-over-border-light);
    margin-top: var(--blog-over-space-12) !important;
}

.blog-over-related-title {
    font-size: var(--blog-over-font-4xl);
    margin-bottom: var(--blog-over-space-8);
    position: relative;
    padding-left: 22px;
}

.blog-over-related-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 32px;
    background: var(--blog-over-primary);
    border-radius: 4px;
}

.blog-over-related-grid {
    gap: 30px;
}

.blog-over-related-item {
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.blog-over-related-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

/*.blog-over-related-content {
    padding: 25px !important;
}*/

.blog-over-related-item-title {
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

/* Styled Comments Section */
.comments-area {
    padding: var(--blog-over-space-12);
    background: var(--blog-over-bg-card);
    border-radius: 24px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.comments-title,
.comment-reply-title {
    font-size: var(--blog-over-font-4xl);
    font-weight: 800;
    margin-bottom: var(--blog-over-space-8);
    padding-bottom: var(--blog-over-space-5);
    border-bottom: 2px solid var(--blog-over-border-light);
    display: flex;
    align-items: center;
    gap: 12px;
}

.comments-title::before,
.comment-reply-title::before {
    content: '';
    width: 6px;
    height: 28px;
    background: var(--blog-over-primary);
    border-radius: 3px;
}

/* Comment Form Inputs */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    padding: var(--blog-over-space-4) var(--blog-over-space-5) !important;
    border-radius: 14px !important;
    font-size: 1rem;
    transition: all 0.3s ease !important;
    width: 100%;
    margin-bottom: 15px;
}

.comment-form input:focus,
.comment-form textarea:focus {
    background: #fff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12) !important;
    outline: none;
}

.comment-form .submit {
    background: var(--blog-over-primary) !important;
    color: var(--blog-over-text-inverse) !important;
    padding: var(--blog-over-space-4) var(--blog-over-space-8) !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}

.comment-form .submit:hover {
    background: var(--blog-over-secondary) !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3) !important;
}

/* Comment List Styling */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Nova custom comment layout - uses flex instead of absolute positioning */
.blog-over-comment-body {
    display: flex;
    gap: 20px;
    padding: 25px;
    background: var(--blog-over-bg-card);
    border-radius: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--blog-over-border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.blog-over-comment-body:hover {
    box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
}

.blog-over-comment-content {
    flex: 1;
    min-width: 0;
}

.blog-over-comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.blog-over-comment-author {
    font-weight: 700;
    color: var(--blog-over-heading-color);
}

.blog-over-comment-date {
    font-size: 0.8rem;
    color: var(--blog-over-meta-color);
}

.blog-over-comment-text {
    color: var(--blog-over-text-body);
    line-height: 1.7;
}

.blog-over-comment-text p:last-child {
    margin-bottom: 0;
}

.blog-over-comment-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.blog-over-comment-awaiting {
    color: #f59e0b;
    font-size: 0.875rem;
    font-style: italic;
    margin-bottom: 10px;
}

.comment-body {
    padding: 30px;
    padding-left: 100px;
    /* Space for avatar */
    background: var(--blog-over-bg-card);
    border-radius: 16px;
    margin-bottom: 25px;
    position: relative;
    border: 1px solid var(--blog-over-border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.comment-body:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.comment-author img {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0;
    border: 3px solid var(--blog-over-bg-card);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Nova custom comment avatar - uses flex layout, not absolute */
.blog-over-comment-avatar {
    flex-shrink: 0;
}

.blog-over-comment-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--blog-over-bg-card);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.comment-author .fn {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--blog-over-heading-color);
    font-style: normal;
    margin-right: 8px;
}

.comment-author .fn a {
    color: inherit;
    text-decoration: none;
}

.comment-metadata,
.blog-over-comment-metadata {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--blog-over-meta-color);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.comment-metadata a,
.blog-over-comment-metadata a {
    color: inherit;
    text-decoration: none;
}

.comment-metadata a:hover,
.blog-over-comment-metadata a:hover {
    color: var(--blog-over-primary);
}

.comment-content,
.blog-over-comment-content {
    margin-top: 12px;
    color: var(--blog-over-text-body);
    line-height: 1.7;
    font-size: 0.95rem;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

.reply,
.blog-over-reply {
    margin-top: 15px;
}

.comment-reply-link,
.blog-over-reply-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: var(--blog-over-tag-bg);
    color: var(--blog-over-tag-text);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comment-reply-link:hover,
.blog-over-reply-link:hover {
    background: var(--blog-over-primary);
    color: var(--blog-over-text-inverse);
    transform: translateY(-1px);
}

/* Note: blog-over-reply-link uses inline <i> icon from template, so no ::before needed */
.comment-reply-link::before {
    content: '\f3e5';
    /* FontAwesome Reply */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
    font-size: 0.7rem;
}

/* Nested Comments */
.children {
    list-style: none;
    padding-left: 0;
    margin-left: 30px;
}

@media (max-width: 768px) {
    .comment-body {
        padding: 20px;
        padding-left: 70px;
    }

    .comment-author img {
        left: 20px;
        top: 20px;
        width: 35px;
        height: 35px;
    }

    .children {
        margin-left: 15px;
    }

    /* Nova comment responsive */
    .blog-over-comment-body {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }

    .blog-over-comment-avatar img {
        width: 45px;
        height: 45px;
    }
}

/* Enhanced Tags */
.blog-over-single-tags a {
    background: var(--blog-over-tag-bg);
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 100px;
    font-size: 0.8125rem;
    transition: all 0.3s ease;
}

.blog-over-single-tags a:hover {
    background: var(--blog-over-secondary);
    color: var(--blog-over-text-inverse);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
}

/* Responsive Enhancement for Enhanced Styles */
@media (max-width: 768px) {
    .blog-over-author-box {
        padding: 30px;
    }

    .blog-over-author-box::before {
        width: 100%;
        height: 4px;
        left: 0;
        top: 0;
        bottom: auto;
    }

    .post-navigation .nav-links {
        grid-template-columns: 1fr;
    }



    .comments-area {
        padding: 30px;
    }

    .blog-over-related-posts {
        padding: 40px 0;
    }
}

/* =========================================
   Page Header Category & Meta Styles (Single Posts)
   ========================================= */

/* Category Badges in Page Header */
.blog-over-page-header-category {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.blog-over-page-header-align-left .blog-over-page-header-category {
    justify-content: flex-start;
}

.blog-over-page-header-align-right .blog-over-page-header-category {
    justify-content: flex-end;
}

.blog-over-page-header-category .blog-over-category-badge {
    display: inline-block;
    background: var(--blog-over-gradient-primary);
    color: var(--blog-over-badge-text);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-over-page-header-category .blog-over-category-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

/* Meta in Page Header */
.blog-over-page-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    font-size: 0.9rem;
}

.blog-over-page-header-align-left .blog-over-page-header-meta {
    justify-content: flex-start;
}

.blog-over-page-header-align-right .blog-over-page-header-meta {
    justify-content: flex-end;
}

.blog-over-page-header-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
}

.blog-over-page-header-meta a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-over-page-header-meta a:hover {
    color: var(--blog-over-text-inverse);
}

/* Author Avatar in Meta */
.blog-over-author-avatar-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Separator between meta items */
.blog-over-page-header-meta span:not(:last-child)::after {
    content: '•';
    margin-left: 12px;
    opacity: 0.5;
}

/* Light mode page header meta */
.blog-over-page-header:not(.blog-over-page-header-has-bg) .blog-over-page-header-meta span {
    color: var(--blog-over-text-muted);
}

.blog-over-page-header:not(.blog-over-page-header-has-bg) .blog-over-page-header-meta a:hover {
    color: var(--blog-over-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .blog-over-page-header-category {
        justify-content: center !important;
    }

    .blog-over-page-header-meta {
        justify-content: center !important;
        gap: 15px;
    }
}

/* =========================================
   Boxed Layout Strings (Single Post)
   ========================================= */

/* Common Card Style */
.blog-over-box-style,
.blog-over-author-box,
.post-navigation,
#comments,
.blog-over-related-posts {
    background: var(--blog-over-bg-card);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--blog-over-border-color);
}

/* Adjustments for specific boxes */
.blog-over-author-box {
    display: flex;
    /* Ensure flex layout is kept if it was flex */
    background-image: none !important;
    /* Override potential gradient */
}

/* Related Posts Container - Only if we want the SECTION to be a card. 
   If not, remove .blog-over-related-posts from the group above. 
   User said "related post" in the list of differentiation. */

/* Ensure internal spacing */
.blog-over-single-content-box {
    margin-bottom: 30px;
}

/* Remove old margins/borders that might conflict */
.blog-over-single-post {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {

    .blog-over-box-style,
    .blog-over-author-box,
    .post-navigation,
    #comments,
    .blog-over-related-posts {
        padding: 25px;
    }
}

.post-navigation .nav-links a,
.post-navigation .nav-previous,
.post-navigation .nav-next {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hover effect for Post Navigation */
.post-navigation a:hover .nav-title,
.post-navigation a:hover .nav-subtitle,
.post-navigation a:hover i {
    color: var(--blog-over-primary) !important;
    transition: color 0.2s ease;
}

/* =====================================================
   AUTHOR BOX - Modern Styles
   ===================================================== */
.blog-over-author-box {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 30px;
    margin-top: 35px;
    background: var(--blog-over-card-bg, #fff);
    border-radius: 16px;
    border: 1px solid var(--blog-over-border-color, #e2e8f0);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.blog-over-author-box:hover {
    box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
}

.blog-over-author-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--blog-over-primary);
    transition: width 0.3s ease;
}

.blog-over-author-box:hover::before {
    width: 6px;
}

.blog-over-author-avatar img {
    border-radius: 50%;
    border: 4px solid var(--blog-over-bg-card);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.blog-over-author-box:hover .blog-over-author-avatar img {
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
}

.blog-over-author-info {
    flex: 1;
}

.blog-over-author-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--blog-over-heading-color, #1e293b);
}

.blog-over-author-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-over-author-name a:hover {
    color: #3b82f6;
}

.blog-over-author-posts-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #64748b;
    background: rgba(59, 130, 246, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.blog-over-author-posts-count i {
    color: var(--blog-over-primary);
    font-size: 0.75rem;
}

.blog-over-author-bio {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #64748b;
    margin: 0 0 15px;
}

.blog-over-author-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blog-over-primary);
    text-decoration: none;
    padding: 10px 20px;
    background: var(--blog-over-bg-card);
    border: 2px solid var(--blog-over-primary);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.blog-over-author-view-all:hover {
    background: var(--blog-over-secondary);
    border-color: var(--blog-over-secondary);
    color: #fdfdfd;
}

.blog-over-author-view-all i {
    transition: transform 0.3s ease;
}

.blog-over-author-view-all:hover i {
    transform: translateX(4px);
}

/* Author Box - Centered Style */
.blog-over-author-box.blog-over-author-style-centered {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 30px;
}

.blog-over-author-box.blog-over-author-style-centered::before {
    width: 100%;
    height: 4px;
    left: 0;
    top: 0;
    background: var(--blog-over-primary);
}

.blog-over-author-box.blog-over-author-style-centered:hover::before {
    height: 6px;
    width: 100%;
}

.blog-over-author-box.blog-over-author-style-centered .blog-over-author-avatar {
    margin-bottom: 5px;
    position: relative;
}

.blog-over-author-box.blog-over-author-style-centered .blog-over-author-avatar::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 2px dashed rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    animation: blog-over-rotate-border 15s linear infinite;
    pointer-events: none;
}

@keyframes blog-over-rotate-border {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.blog-over-author-box.blog-over-author-style-centered .blog-over-author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Author Box - Classic Style */
.blog-over-author-box.blog-over-author-style-classic {
    background: #fff;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.blog-over-author-box.blog-over-author-style-classic:hover {
    border-color: #3b82f6;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.12);
}

.blog-over-author-box.blog-over-author-style-classic::before {
    display: none;
}

.blog-over-author-box.blog-over-author-style-classic .blog-over-author-avatar {
    border: 3px solid var(--blog-over-primary);
    border-radius: 50%;
    padding: 3px;
    transition: transform 0.3s ease;
}

.blog-over-author-box.blog-over-author-style-classic:hover .blog-over-author-avatar {
    transform: scale(1.05);
}

.blog-over-author-box.blog-over-author-style-classic .blog-over-author-avatar img {
    border: 3px solid #fff;
}

.blog-over-author-box.blog-over-author-style-classic .blog-over-author-name a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--blog-over-primary);
    transition: width 0.3s ease;
}

.blog-over-author-box.blog-over-author-style-classic .blog-over-author-name a:hover::after {
    width: 100%;
}

/* Author Box - Minimal Style */
.blog-over-author-box.blog-over-author-style-minimal {
    background: transparent;
    border: none;
    padding: 30px 20px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    position: relative;
}

.blog-over-author-box.blog-over-author-style-minimal::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--blog-over-primary);
    transition: width 0.5s ease;
}

.blog-over-author-box.blog-over-author-style-minimal::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--blog-over-primary);
    transition: width 0.5s ease;
}

.blog-over-author-box.blog-over-author-style-minimal:hover::before,
.blog-over-author-box.blog-over-author-style-minimal:hover::after {
    width: 100%;
}

.blog-over-author-box.blog-over-author-style-minimal:hover {
    transform: none;
    box-shadow: none;
}

.blog-over-author-box.blog-over-author-style-minimal .blog-over-author-avatar img {
    border: 2px solid #e2e8f0;
    box-shadow: none;
    transition: all 0.3s ease;
}

.blog-over-author-box.blog-over-author-style-minimal:hover .blog-over-author-avatar img {
    border-color: #3b82f6;
    transform: scale(1.05);
}

.blog-over-author-box.blog-over-author-style-minimal .blog-over-author-view-all {
    background: transparent;
    border: none;
    padding: 0;
    color: #3b82f6;
    font-weight: 600;
    position: relative;
}

.blog-over-author-box.blog-over-author-style-minimal .blog-over-author-view-all::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #3b82f6;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.blog-over-author-box.blog-over-author-style-minimal .blog-over-author-view-all:hover {
    background: transparent;
    color: #2563eb;
}

.blog-over-author-box.blog-over-author-style-minimal .blog-over-author-view-all:hover::after {
    transform: scaleX(1);
}

/* Avatar Size Support */
.blog-over-author-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
}

.blog-over-author-avatar img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

/* =====================================================
   AUTHOR BOX - Glassmorphism Style
   ===================================================== */
.blog-over-author-box.blog-over-author-style-glassmorphism {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    position: relative;
    overflow: hidden;
}

.blog-over-author-box.blog-over-author-style-glassmorphism::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    animation: blog-over-shimmer-slide 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes blog-over-shimmer-slide {
    0% {
        left: -50%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

.blog-over-author-box.blog-over-author-style-glassmorphism .blog-over-author-avatar img {
    border: 3px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
}

.blog-over-author-box.blog-over-author-style-glassmorphism .blog-over-author-name {
    position: relative;
    z-index: 1;
}

.blog-over-author-box.blog-over-author-style-glassmorphism .blog-over-author-info {
    position: relative;
    z-index: 1;
}

.blog-over-author-box.blog-over-author-style-glassmorphism .blog-over-author-posts-count {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.blog-over-author-box.blog-over-author-style-glassmorphism .blog-over-author-view-all {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #3b82f6;
}

.blog-over-author-box.blog-over-author-style-glassmorphism .blog-over-author-view-all:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.6);
    color: #2563eb;
}

/* =====================================================
   AUTHOR BOX - Gradient Card Style
   ===================================================== */
.blog-over-author-box.blog-over-author-style-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 35px;
    position: relative;
    overflow: hidden;
}

.blog-over-author-box.blog-over-author-style-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.blog-over-author-box.blog-over-author-style-gradient::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #667eea);
    background-size: 300% 300%;
    border-radius: 18px;
    z-index: -1;
    animation: blog-over-gradient-rotate 4s ease infinite;
    animation-play-state: paused;
}

.blog-over-author-box.blog-over-author-style-gradient:hover::after {
    animation-play-state: running;
}

@keyframes blog-over-gradient-rotate {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.blog-over-author-box.blog-over-author-style-gradient .blog-over-author-avatar img {
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.blog-over-author-box.blog-over-author-style-gradient .blog-over-author-name,
.blog-over-author-box.blog-over-author-style-gradient .blog-over-author-name a {
    color: #fff;
}

.blog-over-author-box.blog-over-author-style-gradient .blog-over-author-name a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.blog-over-author-box.blog-over-author-style-gradient .blog-over-author-bio {
    color: rgba(255, 255, 255, 0.85);
}

.blog-over-author-box.blog-over-author-style-gradient .blog-over-author-posts-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.blog-over-author-box.blog-over-author-style-gradient .blog-over-author-posts-count i {
    color: #fff;
}

.blog-over-author-box.blog-over-author-style-gradient .blog-over-author-view-all {
    background: #fff;
    border: none;
    color: #667eea;
    font-weight: 700;
}

.blog-over-author-box.blog-over-author-style-gradient .blog-over-author-view-all:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #764ba2;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* =====================================================
   AUTHOR BOX - Boxed Signature Style
   ===================================================== */
.blog-over-author-box.blog-over-author-style-signature {
    background: #fff;
    border: 2px solid #1e293b;
    border-radius: 0;
    padding: 40px;
    position: relative;
}

.blog-over-author-box.blog-over-author-style-signature::before {
    content: 'AUTHOR';
    position: absolute;
    top: -12px;
    left: 30px;
    background: #fff;
    padding: 0 15px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #64748b;
}

.blog-over-author-box.blog-over-author-style-signature::after {
    content: '';
    position: absolute;
    bottom: 15px;
    right: 20px;
    width: 80px;
    height: 3px;
    background: var(--blog-over-primary);
}

.blog-over-author-box.blog-over-author-style-signature .blog-over-author-avatar {
    position: relative;
}

.blog-over-author-box.blog-over-author-style-signature .blog-over-author-avatar::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #1e293b;
    border-radius: 50%;
    pointer-events: none;
}

.blog-over-author-box.blog-over-author-style-signature .blog-over-author-avatar img {
    border: none;
    box-shadow: none;
}

.blog-over-author-box.blog-over-author-style-signature .blog-over-author-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 1px;
}

.blog-over-author-box.blog-over-author-style-signature .blog-over-author-posts-count {
    background: transparent;
    color: #64748b;
    padding-left: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-over-author-box.blog-over-author-style-signature .blog-over-author-view-all {
    background: #1e293b;
    color: #fff;
    border: none;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

.blog-over-author-box.blog-over-author-style-signature .blog-over-author-view-all:hover {
    background: #3b82f6;
}

/* =====================================================
   AUTHOR BOX - Floating Card Style
   ===================================================== */
.blog-over-author-box.blog-over-author-style-floating {
    background: #fff;
    border: none;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: perspective(1000px) rotateX(0deg);
    transform-style: preserve-3d;
}

.blog-over-author-box.blog-over-author-style-floating::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #f43f5e, #ec4899, #8b5cf6, #3b82f6);
    border-radius: 20px 20px 0 0;
}

.blog-over-author-box.blog-over-author-style-floating:hover {
    transform: perspective(1000px) rotateX(2deg) translateY(-8px);
    box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.02);
}

.blog-over-author-box.blog-over-author-style-floating .blog-over-author-avatar {
    position: relative;
    transform: translateZ(30px);
}

.blog-over-author-box.blog-over-author-style-floating .blog-over-author-avatar img {
    border: 5px solid #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease;
}

.blog-over-author-box.blog-over-author-style-floating:hover .blog-over-author-avatar img {
    transform: scale(1.08) rotate(-3deg);
}

.blog-over-author-box.blog-over-author-style-floating .blog-over-author-name {
    font-size: 1.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-over-author-box.blog-over-author-style-floating .blog-over-author-posts-count {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid transparent;
    background-clip: padding-box;
}

.blog-over-author-box.blog-over-author-style-floating .blog-over-author-view-all {
    background: var(--blog-over-primary);
    border: none;
    color: var(--blog-over-text-inverse);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.blog-over-author-box.blog-over-author-style-floating .blog-over-author-view-all:hover {
    background: var(--blog-over-secondary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

/* =====================================================
   AUTHOR BOX - Responsive for New Styles
   ===================================================== */
@media (max-width: 767px) {

    .blog-over-author-box.blog-over-author-style-glassmorphism,
    .blog-over-author-box.blog-over-author-style-gradient,
    .blog-over-author-box.blog-over-author-style-signature,
    .blog-over-author-box.blog-over-author-style-floating {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 25px 20px;
    }

    .blog-over-author-box.blog-over-author-style-signature::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .blog-over-author-box.blog-over-author-style-signature::after {
        right: 50%;
        transform: translateX(50%);
    }

    .blog-over-author-box.blog-over-author-style-glassmorphism .blog-over-author-info,
    .blog-over-author-box.blog-over-author-style-gradient .blog-over-author-info,
    .blog-over-author-box.blog-over-author-style-signature .blog-over-author-info,
    .blog-over-author-box.blog-over-author-style-floating .blog-over-author-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* =====================================================
   POST NAVIGATION - Modern Styles
   ===================================================== */
.blog-over-post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 25px 0px;
}

/* Cards Style - Default */
.blog-over-postnav-cards {
    background: transparent;
    border: none;
    padding: 0;
}

.blog-over-nav-prev,
.blog-over-nav-next {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-over-nav-prev:hover,
.blog-over-nav-next:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--blog-over-primary, #3b82f6);
}

.blog-over-nav-next {
    text-align: right;
}

.blog-over-nav-empty {
    visibility: hidden;
}

.blog-over-nav-thumb {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    border-radius: 8px;
    overflow: hidden;
}

.blog-over-nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.blog-over-nav-prev:hover .blog-over-nav-thumb img,
.blog-over-nav-next:hover .blog-over-nav-thumb img {
    transform: scale(1.1);
}

.blog-over-nav-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.blog-over-nav-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--blog-over-primary, #3b82f6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 5px;
}

.blog-over-nav-next .blog-over-nav-label {
    justify-content: flex-end;
}

.blog-over-nav-label i {
    transition: transform 0.2s;
}

.blog-over-nav-prev:hover .blog-over-nav-label i {
    transform: translateX(-3px);
}

.blog-over-nav-next:hover .blog-over-nav-label i {
    transform: translateX(3px);
}

.blog-over-nav-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--blog-over-heading-color, #1e293b);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Post Navigation - Simple Style */
.blog-over-postnav-simple .blog-over-nav-prev,
.blog-over-postnav-simple .blog-over-nav-next {
    background: transparent;
    border: none;
    padding: 15px 15px;
}

.blog-over-postnav-simple .blog-over-nav-thumb {
    display: none;
}

.blog-over-postnav-simple .blog-over-nav-prev:hover,
.blog-over-postnav-simple .blog-over-nav-next:hover {
    transform: none;
    box-shadow: none;
}

/* Post Navigation - Full Width Style */
.blog-over-postnav-full_width {
    grid-template-columns: 1fr;
}

.blog-over-postnav-full_width .blog-over-nav-prev,
.blog-over-postnav-full_width .blog-over-nav-next {
    padding: 25px;
}

.blog-over-postnav-full_width .blog-over-nav-thumb {
    width: 100px;
    height: 80px;
}

.blog-over-postnav-full_width .blog-over-nav-title {
    white-space: normal;
}

/* Post Navigation - Minimal Style */
.blog-over-postnav-minimal {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 20px;
}

.blog-over-postnav-minimal .blog-over-nav-prev,
.blog-over-postnav-minimal .blog-over-nav-next {
    background: transparent;
    border: none;
    padding: 0;
    justify-content: flex-start;
}

.blog-over-postnav-minimal .blog-over-nav-next {
    justify-content: flex-end;
}

.blog-over-postnav-minimal .blog-over-nav-prev:hover,
.blog-over-postnav-minimal .blog-over-nav-next:hover {
    transform: none;
    box-shadow: none;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-over-author-box {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }

    .blog-over-author-box::before {
        width: 100%;
        height: 4px;
        left: 0;
        top: 0;
    }

    .blog-over-author-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .blog-over-post-navigation {
        grid-template-columns: 1fr;
    }

    .blog-over-nav-next {
        flex-direction: row;
        text-align: left;
    }

    .blog-over-nav-next .blog-over-nav-label {
        justify-content: flex-start;
    }
}

/* =====================================================
   POST NAVIGATION - Gradient Style
   ===================================================== */
.blog-over-postnav-gradient .blog-over-nav-prev,
.blog-over-postnav-gradient .blog-over-nav-next {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    position: relative;
    overflow: hidden;
}

.blog-over-postnav-gradient .blog-over-nav-prev::before,
.blog-over-postnav-gradient .blog-over-nav-next::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.blog-over-postnav-gradient .blog-over-nav-label {
    color: rgba(255, 255, 255, 0.9);
}

.blog-over-postnav-gradient .blog-over-nav-title {
    color: #fff;
}

.blog-over-postnav-gradient .blog-over-nav-prev:hover,
.blog-over-postnav-gradient .blog-over-nav-next:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    border-color: transparent;
    box-shadow: 0px 0px 10px 5px rgba(102, 126, 234, 0.4);
}

.blog-over-postnav-gradient .blog-over-nav-thumb {
    position: relative;
    z-index: 1;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
}

/* =====================================================
   POST NAVIGATION - Glassmorphism Style (hover only)
   ===================================================== */
.blog-over-postnav-glassmorphism .blog-over-nav-prev,
.blog-over-postnav-glassmorphism .blog-over-nav-next {
    background: #fff;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.blog-over-postnav-glassmorphism .blog-over-nav-prev::before,
.blog-over-postnav-glassmorphism .blog-over-nav-next::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.blog-over-postnav-glassmorphism .blog-over-nav-prev:hover,
.blog-over-postnav-glassmorphism .blog-over-nav-next:hover {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.blog-over-postnav-glassmorphism .blog-over-nav-prev:hover::before,
.blog-over-postnav-glassmorphism .blog-over-nav-next:hover::before {
    left: 100%;
}

.blog-over-postnav-glassmorphism .blog-over-nav-thumb {
    position: relative;
    z-index: 1;
}

.blog-over-postnav-glassmorphism .blog-over-nav-content {
    position: relative;
    z-index: 1;
}

/* =====================================================
   POST NAVIGATION - Z-Index Fix for Chevron Icons
   ===================================================== */
.blog-over-nav-label {
    position: relative;
    z-index: 2;
}

.blog-over-nav-label i {
    position: relative;
    z-index: 2;
}

/* =========================================
   WordPress Required CSS Classes
   ========================================= */

/* Sticky Posts */
.sticky {
    position: relative;
}

.sticky .blog-over-post-card::before {
    content: '\f08d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 10px;
    right: 10px;
    background: #3b82f6;
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
}

/* Image Captions */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5em;
}

.wp-caption img {
    display: block;
    max-width: 100%;
    height: auto;
}

.wp-caption-text {
    font-size: 0.875em;
    color: #64748b;
    text-align: center;
    padding: 0.5em 0;
}

/* Gallery Captions */
.gallery-caption {
    font-size: 0.875em;
    color: #64748b;
    text-align: center;
    padding: 0.5em;
}

/* Comment Author Highlight */
.bypostauthor {
    position: relative;
}

.bypostauthor>.blog-over-comment-body {
    border-left: 3px solid #3b82f6;
}

/* Alignment Classes */
.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

/* Block Editor Alignment */
/* Block Editor Alignment */
.alignwide {
    margin-left: -80px;
    margin-right: -80px;
    max-width: calc(100% + 160px);
    width: calc(100% + 160px);
}

.alignfull {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    width: 100vw;
}

/* Prevent alignfull/narrow from breaking out when sidebar is present */
.blog-over-layout-single-right .alignfull,
.blog-over-layout-single-right .alignwide,
.blog-over-layout-single-left .alignfull,
.blog-over-layout-single-left .alignwide,
.blog-over-layout-right .alignfull,
.blog-over-layout-right .alignwide,
.blog-over-layout-left .alignfull,
.blog-over-layout-left .alignwide {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
}

/* Fix for Overflowing Text in Narrow Columns */
.entry-content .wp-block-columns {
    overflow-wrap: break-word;
    word-break: break-word;
}

.wp-block-column {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    min-width: 0;
    /* Critical for flex containers to allow wrapping */
}

/* WordPress Block Styles */
.wp-block-button__link {
    background: #3b82f6;
    color: #fff;
    padding: 0.75em 1.5em;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
}

.wp-block-button__link:hover {
    background: #2563eb;
    color: #fff;
}

.wp-block-quote {
    border-left: 4px solid #3b82f6;
    padding-left: 1.5em;
    margin: 1.5em 0;
    font-style: italic;
}

.wp-block-quote cite {
    font-size: 0.875em;
    color: #64748b;
    font-style: normal;
}

.wp-block-code {
    background: #f1f5f9;
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
}

.wp-block-preformatted {
    background: #f1f5f9;
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
}

.wp-block-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
}

.wp-block-table th,
.wp-block-table td {
    border: 1px solid #e2e8f0;
    padding: 0.75em;
    text-align: left;
}

.wp-block-table th {
    background: #f8fafc;
    font-weight: 600;
}

/* Responsive Embeds */
.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Screen Reader Text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* =========================================
   Mobile Responsive Fixes
   ========================================= */

/* Small Devices - 576px and below */
@media (max-width: 576px) {

    /* Topbar - Hide non-essential elements */
    .blog-over-topbar {
        padding: 8px 0;
    }

    .blog-over-topbar-inner {
        flex-wrap: wrap;
        gap: 8px;
    }

    .blog-over-topbar-left {
        display: none;
        /* Hide date on very small screens */
    }

    .blog-over-topbar-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .blog-over-topbar-social {
        gap: 4px;
    }

    .blog-over-topbar-social-link {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    /* Limit social icons shown on mobile */
    .blog-over-topbar-social-link:nth-child(n+6) {
        display: none;
    }

    .blog-over-subscribe-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Header adjustments */
    .blog-over-header .blog-over-container,
    .blog-over-header .blog-over-container-full {
        padding: 10px 15px;
    }

    .blog-over-site-title {
        font-size: 1.25rem;
    }

    /* Mobile Menu Toggle - Make visible */
    .blog-over-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 1000;
    }

    .blog-over-mobile-toggle span,
    .blog-over-mobile-toggle .hamburger-line {
        display: block;
        width: 24px;
        height: 3px;
        background: #e2e8f0;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .blog-over-mobile-toggle::before,
    .blog-over-mobile-toggle::after {
        content: '';
        display: block;
        width: 24px;
        height: 3px;
        background: #e2e8f0;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Hide desktop nav */
    .blog-over-main-nav,
    .blog-over-primary-nav {
        display: none !important;
    }

    /* Search form on mobile */
    .blog-over-search-form,
    .search-form {
        max-width: 100%;
        margin: 0 15px 20px;
    }

    .blog-over-search-form .blog-over-search-input,
    .search-form .search-field {
        padding: 10px 50px 10px 15px;
        font-size: 14px;
    }

    /* Page header */
    .blog-over-page-header {
        padding: 30px 15px;
    }

    .blog-over-page-header .blog-over-page-title {
        font-size: 1.5rem;
    }

    /* Featured Links */
    .blog-over-featured-links {
        flex-direction: column;
        padding: 20px 15px;
    }

    .blog-over-featured-link {
        width: 100%;
    }

    /* Post cards */
    .blog-over-post-card {
        margin-bottom: 20px;
    }

    .blog-over-post-card-title {
        font-size: 1.1rem;
    }

    /* Footer */
    .footer-widgets-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }

    .footer-widget {
        text-align: center;
    }

    /* Scroll to top */
    .blog-over-scroll-top {
        bottom: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
    }
}

/* Medium Small Devices - 768px and below */
@media (max-width: 768px) {

    /* Topbar simplification */
    .blog-over-topbar-left {
        flex: 0 0 auto;
    }

    .blog-over-topbar-social-link:nth-child(n+8) {
        display: none;
    }

    /* CRITICAL: Keep nav wrapper visible so mobile toggle is shown */
    .blog-over-header-nav,
    .blog-over-header-nav.main-navigation,
    nav.main-navigation {
        display: flex !important;
        align-items: center;
    }

    /* Mobile Menu Toggle - MUST BE VISIBLE */
    .blog-over-mobile-toggle {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        border-radius: 8px;
        cursor: pointer;
        padding: 8px;
        z-index: 1000;
    }

    /* Mobile toggle bars (hamburger icon) */
    .blog-over-mobile-toggle .bar {
        display: block;
        width: 22px;
        height: 3px;
        background: #e2e8f0;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Hide only the desktop menu container, NOT the nav wrapper or toggle */
    .blog-over-primary-menu-container,
    .blog-over-menu-left,
    .blog-over-menu-right {
        display: none !important;
    }

    /* Header inline search - hide on mobile */
    .blog-over-header-search-inline {
        display: none;
    }

    /* Mobile search popup should work */
    .blog-over-search-popup,
    .blog-over-search-modal {
        width: 95%;
        max-width: none;
    }

    /* Sidebar on mobile - stack below content */
    .blog-over-sidebar {
        width: 100% !important;
        flex: 0 0 100%;
        margin-top: 40px;
    }

    /* Content area full width */
    .blog-over-content-area,
    .blog-over-main-content {
        width: 100% !important;
        flex: 0 0 100%;
    }

    /* Featured section */
    .blog-over-featured-links {
        flex-wrap: wrap;
    }

    .blog-over-featured-link {
        flex: 0 0 100%;
        margin-bottom: 15px;
    }
}

/* Prevent horizontal scroll */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Ensure containers don't overflow */
.blog-over-container,
.blog-over-container-full {
    max-width: 100%;
    overflow: hidden;
}

/* Prevent scrollbars in topbar and header */
.blog-over-topbar,
.blog-over-topbar>.blog-over-container,
.blog-over-topbar>.blog-over-container-full,
.blog-over-topbar-inner,
.blog-over-header,
.blog-over-header>.blog-over-container,
.blog-over-header>.blog-over-container-full,
.blog-over-header-inner,
.blog-over-header-nav,
.blog-over-header-nav>.blog-over-container,
.blog-over-header-nav>.blog-over-container-full {
    overflow: visible !important;
}

/* Mobile menu panel */
.blog-over-mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    max-width: 85%;
    height: 100vh;
    background: #1e293b;
    z-index: 99999;
    transition: left 0.3s ease;
    overflow-y: auto;
    padding: 20px;
}

.blog-over-mobile-menu.active {
    left: 0;
}

.blog-over-mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.blog-over-mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Accessibility - Focus states for mobile */
@media (max-width: 768px) {

    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    /* Touch targets - minimum 44px */
    .blog-over-topbar-social-link,
    .blog-over-subscribe-btn,
    .blog-over-mobile-toggle,
    .blog-over-search-submit,
    button,
    .button,
    input[type="submit"] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* =========================================
   Global Accessibility Improvements
   ========================================= */

/* Global Focus States (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* Fallback for browsers without focus-visible */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Skip to Content Link - Hidden by Default */
.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Skip to Content Link - Visible ONLY on Keyboard Focus (not after click) */
.skip-link:focus-visible,
.screen-reader-text:focus-visible,
a.skip-link:focus-visible {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 999999 !important;
    background: #1e293b !important;
    color: #fff !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    min-width: 150px !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Fallback for older browsers - hide on blur immediately */
.skip-link:focus:not(:focus-visible) {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Remove focus outline on mouse click (better UX) */
:focus:not(:focus-visible) {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {

    a:focus,
    button:focus,
    input:focus {
        outline: 3px solid currentColor !important;
        outline-offset: 3px !important;
    }

    .blog-over-post-card,
    .blog-over-sidebar .widget {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Improved Color Contrast for Key Elements */
.blog-over-menu-link,
.blog-over-main-nav a {
    color: #e2e8f0;
}

.blog-over-cat-item,
.blog-over-post-card-category a {
    background: #2563eb;
    color: #ffffff;
}

/* Ensure Link Visibility */
.blog-over-post-card a,
.blog-over-sidebar a {
    text-decoration-skip-ink: auto;
}

.blog-over-post-card a:hover,
.blog-over-sidebar a:hover {
    text-decoration: underline;
}

/* =========================================
   Keyboard Accessible Dropdown Menus
   ========================================= */

/* Dropdown toggle button (chevron) - ensure visibility and accessibility */
.blog-over-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-left: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

.blog-over-dropdown-toggle:hover,
.blog-over-dropdown-toggle:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.blog-over-dropdown-toggle:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.blog-over-dropdown-toggle:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Chevron icon */
.blog-over-dropdown-icon {
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

/* Rotate chevron when submenu is open */
.submenu-open>.blog-over-dropdown-toggle .blog-over-dropdown-icon {
    transform: rotate(-135deg);
}

/* Submenu hidden by default for keyboard navigation */
.blog-over-has-dropdown>.blog-over-sub-menu,
.menu-item-has-children>.sub-menu:not(.toggled),
.blog-over-has-dropdown>ul.sub-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Submenu visible when parent has .submenu-open class */
.blog-over-has-dropdown.submenu-open>.blog-over-sub-menu,
.menu-item-has-children.submenu-open>.sub-menu,
.blog-over-has-dropdown.submenu-open>ul.sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Desktop hover shows submenu (mouse users only) */
@media (min-width: 992px) {

    .blog-over-has-dropdown:hover>.blog-over-sub-menu,
    .menu-item-has-children:hover>.sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}


/* Items with tabindex=-1 should not show focus rings when clicked */
[tabindex="-1"]:focus {
    outline: none;
}

/* Submenu focus states */
.blog-over-sub-menu a:focus,
.sub-menu a:focus {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    background-color: rgba(59, 130, 246, 0.1);
}

/* Mobile: Stack menu items with toggle */
@media (max-width: 991px) {
    .blog-over-dropdown-toggle {
        width: 44px;
        height: 44px;
    }

    .blog-over-menu-item {
        position: relative;
    }

    .blog-over-menu-item>.blog-over-menu-link {
        display: inline-block;
        max-width: calc(100% - 50px);
    }

    /* Keep toggle at top of menu item, not centered in expanding parent */
    .blog-over-has-dropdown>.blog-over-dropdown-toggle {
        position: absolute;
        right: 0;
        top: 0;
        transform: none;
    }
}

/* =========================================
   MOBILE LAYOUT FIXES (Phase 5)
   Critical fixes for small device layouts
   ========================================= */

/* 
 * FIX 1: Sidebar Order on Mobile
 * Ensures main content ALWAYS appears before sidebar on mobile,
 * regardless of left/right sidebar layout in desktop.
 */
@media (max-width: 992px) {
    .blog-over-content-wrapper.has-sidebar {
        display: flex !important;
        flex-direction: column !important;
    }

    .blog-over-content-wrapper.has-sidebar .blog-over-main-content {
        order: 1 !important;
    }

    .blog-over-content-wrapper.has-sidebar .blog-over-sidebar {
        order: 2 !important;
        width: 100% !important;
        margin-top: 40px;
    }

    /* Explicitly handle left sidebar layout */
    .blog-over-content-wrapper.sidebar-left .blog-over-main-content {
        order: 1 !important;
    }

    .blog-over-content-wrapper.sidebar-left .blog-over-sidebar {
        order: 2 !important;
    }
}

/* 
 * FIX 2: Related Posts Grid on Mobile
 * Using 1 column on small screens for better readability
 */
@media (max-width: 768px) {
    .blog-over-related-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .blog-over-related-posts {
        padding: 20px;
        margin-top: 25px;
    }

    .blog-over-related-title {
        font-size: 1.25rem;
        margin-bottom: 20px;
    }
}

/* 
 * FIX 3: Post Navigation on Mobile
 * Stack Previous/Next vertically with proper spacing
 */
@media (max-width: 768px) {
    .blog-over-post-navigation {
        flex-direction: column;
        gap: 15px;
    }

    .blog-over-post-navigation .blog-over-nav-prev,
    .blog-over-post-navigation .blog-over-nav-next {
        width: 100%;
        flex-direction: row;
    }

    .blog-over-post-navigation .blog-over-nav-next {
        flex-direction: row-reverse;
    }

    .blog-over-nav-thumb {
        width: 80px;
        height: 60px;
        flex-shrink: 0;
    }

    .blog-over-nav-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .blog-over-nav-title {
        font-size: 0.9rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* 
 * FIX 4: Author Box on Mobile
 * Centered layout with proper spacing
 */
@media (max-width: 576px) {
    .blog-over-author-box {
        padding: 20px;
        text-align: center;
    }

    .blog-over-author-box .blog-over-author-avatar {
        margin: 0 auto 15px;
    }

    .blog-over-author-info {
        text-align: center;
    }

    .blog-over-author-bio {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .blog-over-author-view-all {
        margin-top: 15px;
        display: inline-flex;
    }
}

/* 
 * FIX 5: Comments Section on Mobile
 * Better form layout for touch devices
 */
@media (max-width: 576px) {

    .blog-over-comment-form .comment-form-author,
    .blog-over-comment-form .comment-form-email,
    .blog-over-comment-form .comment-form-url {
        width: 100%;
    }

    .blog-over-comment-form textarea {
        min-height: 120px;
    }

    .blog-over-comment-form .form-submit input[type="submit"] {
        width: 100%;
        padding: 14px;
    }
}

/* 
 * FIX 6: Tags & Share Buttons on Mobile
 * Better wrapping and touch-friendly sizing
 */
@media (max-width: 576px) {
    .blog-over-single-tags {
        flex-wrap: wrap;
        gap: 8px;
    }

    .blog-over-single-tags a {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .blog-over-share-buttons {
        flex-wrap: wrap;
        gap: 10px;
    }

    .blog-over-share-buttons a {
        width: 40px;
        height: 40px;
    }
}

/* Footer Widgets on Mobile — handled in main responsive sections above */

/* 
 * FIX 8: You Missed Section on Mobile
 * Single column with proper spacing
 */
@media (max-width: 576px) {
    .blog-over-missed-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .blog-over-missed-item {
        margin-bottom: 0;
    }
}