/*
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 fast, modern, and highly customizable WordPress theme crafted for news websites, blogs, online magazines, and all types of content-driven platforms. Designed with performance, readability, and SEO in mind, it delivers a seamless user experience across all devices. This versatile theme is ideal for a wide range of categories including personal blogs, tech blogs, lifestyle blogs, fashion blogs, travel blogs, food blogs, business websites, finance blogs, crypto news platforms, affiliate websites, review blogs, educational websites, and multi-author publishing platforms. Blog Over comes with multiple layout options such as grid and masonry styles, allowing you to showcase content in a visually appealing and structured way. With a clean and minimal design, customizable typography, color controls, and optimized loading speed, it ensures better engagement and lower bounce rates. Built with SEO-friendly coding standards and mobile-first design, Blog Over helps your website rank higher on search engines while delivering a smooth browsing experience. It is fully compatible with popular plugins and easy to customize without coding knowledge. Whether you're a blogger, journalist, marketer, or content creator, Blog Over is the perfect solution to build a professional, scalable, and high-performing website. your perfect choice for building a powerful online presence, so don’t go astray.
Version: 1.2.1
Tested up to: 7.0
Requires PHP: 7.4
Tags: blog, news, magazine, custom-background, custom-colors, custom-header, custom-menu, featured-images, footer-widgets, full-width-template, 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;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
    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);
}

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 {
    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;
    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 a:hover {
    text-decoration: none !important;
}

.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 var(--blog-over-border-color);
    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-toggle-icon: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,
button:focus i,
.btn:focus i,
a.btn:focus i,
.button:focus i,
.blog-over-btn:focus i,
.blog-over-search-toggle:focus i,
.blog-over-toggle-icon:focus i,
.blog-over-search-submit:focus i,
.blog-over-scroll-top:focus i,
.blog-over-topbar-social-link:focus i,
.widget button:focus i,
.wp-block-button a:focus i {
    color: var(--blog-over-text-inverse) !important;
}

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

/* =========================================
   Fix 2: Remove underline from all buttons/pills/badges
   (WP Theme Review: underline reserved for text links only)
   ========================================= */
.blog-over-read-more,
.blog-over-btn,
.btn,
a.btn,
.button,
button,
input[type="submit"],
input[type="button"],
.blog-over-single-category a,
.blog-over-post-category a,
.blog-over-grid-category a,
.blog-over-cat-item,
.blog-over-single-tags a,
.comment-reply-link,
.blog-over-reply-link,
.wp-block-button__link,
.blog-over-scroll-top,
.blog-over-search-submit,
.blog-over-subscribe-btn,
.nav-links a,
.page-numbers,
.blog-over-topbar-social-link {
    text-decoration: none;
}

/* =========================================
   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;
}

.widget .wp-block-search__input {
    padding: 10px 15px;
    border: 1px solid var(--blog-over-border-color);
    border-radius: 4px;
    outline: none;
    background-color: var(--blog-over-bg-input);
    color: var(--blog-over-text-body);
    width: 100%;
    flex: 1;
    min-width: 100px;
}

.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;
    z-index: 9999;
}

/* 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,
.blog-over-topbar-social-link:focus,
.blog-over-topbar-social-link:focus-visible {
    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,
.blog-over-social-outline .blog-over-topbar-social-link:focus,
.blog-over-social-outline .blog-over-topbar-social-link:focus-visible {
    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,
.blog-over-social-filled .blog-over-topbar-social-link:focus,
.blog-over-social-filled .blog-over-topbar-social-link:focus-visible {
    background: var(--blog-over-secondary, #1e40af);
}

.blog-over-social-filled .blog-over-topbar-social-link:hover i,
.blog-over-social-filled .blog-over-topbar-social-link:focus i,
.blog-over-social-filled .blog-over-topbar-social-link:focus-visible 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,
.blog-over-social-rounded .blog-over-topbar-social-link:focus,
.blog-over-social-rounded .blog-over-topbar-social-link:focus-visible {
    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,
    .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:focus i,
    .blog-over-topbar-toggle:focus-visible i {
        color: #ffffff !important;
    }

    .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) ── */
    .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, Icon Toggle, Subscribe) */
    .blog-over-topbar-mobile-actions .blog-over-toggle-icon,
    .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, #2563eb);
        color: #ffffff !important;
        border: none;
        box-shadow: none;
        transition: all 0.3s ease;
    }

    /* Pill & Labeled toggles — keep their native sizing on mobile */
    .blog-over-topbar-mobile-actions .blog-over-toggle-pill,
    .blog-over-topbar-mobile-actions .blog-over-toggle-labeled {
        width: auto;
        height: auto;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    /* 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-toggle-icon i,
    .blog-over-topbar-mobile-actions .blog-over-search-toggle i {
        font-size: 18px;
    }

    /* Hover States */
    .blog-over-topbar-mobile-actions .blog-over-toggle-icon:hover,
    .blog-over-topbar-mobile-actions .blog-over-search-toggle:hover,
    .blog-over-topbar-mobile-actions .blog-over-subscribe-btn:hover,
    .blog-over-topbar-mobile-actions .blog-over-toggle-icon:focus,
    .blog-over-topbar-mobile-actions .blog-over-search-toggle:focus,
    .blog-over-topbar-mobile-actions .blog-over-subscribe-btn:focus {
        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: #ffffff;
        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: #ffffff;
        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,
    .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;
    }
}


/* =========================================
   SEARCH 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, #2563eb);
    color: #eeeeee;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

.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, #2563eb);
    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);
}

/* =========================================
   THEME TOGGLE — Style 1: Icon (Classic)
   ========================================= */
.blog-over-toggle-icon {
    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, #2563eb);
    color: #eeeeee;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-over-toggle-icon:hover {
    background: var(--blog-over-secondary, #1e40af);
    color: #fff !important;
}

.blog-over-toggle-icon:hover i {
    color: #fff !important;
}

/* =========================================
   THEME TOGGLE — Style 2: Pill (Modern)
   iOS-style sliding toggle with sun/moon icons
   ========================================= */
.blog-over-toggle-pill {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
}

.blog-over-toggle-pill .blog-over-toggle-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 60px;
    height: 32px;
    background: #fdf6d8; /* Light Mode: Pale Yellow */
    border-radius: 16px;
    padding: 3px;
    transition: background 0.4s ease, box-shadow 0.3s ease;
}

.blog-over-toggle-pill .blog-over-toggle-thumb {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 26px;
    height: 26px;
    background: #f59e0b; /* Light Mode: Yellow/Orange Thumb */
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Light Mode Default: Thumb is on the RIGHT */
    transform: translateX(28px);
}

.blog-over-toggle-pill .blog-over-toggle-thumb i {
    font-size: 14px;
    color: #ffffff; /* White icon inside thumb */
    position: absolute;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Mode: Show Sun, Hide Moon */
.blog-over-toggle-pill .blog-over-toggle-thumb .fa-sun {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.blog-over-toggle-pill .blog-over-toggle-thumb .fa-moon {
    opacity: 0;
    transform: scale(0.5) rotate(-45deg);
}

/* Pill — Active (Dark Mode) */
.blog-over-toggle-pill.active .blog-over-toggle-track {
    background: #111827; /* Dark Mode: Slate/Black background */
}

.blog-over-toggle-pill.active .blog-over-toggle-thumb {
    /* Dark Mode: Thumb moves to the LEFT */
    transform: translateX(0);
    background: #0db3b0; /* Dark Mode: Cyan Thumb */
}

/* Dark Mode: Show Moon, Hide Sun */
.blog-over-toggle-pill.active .blog-over-toggle-thumb .fa-sun {
    opacity: 0;
    transform: scale(0.5) rotate(45deg);
}

.blog-over-toggle-pill.active .blog-over-toggle-thumb .fa-moon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Pill — Hover Effects */
.blog-over-toggle-pill:hover .blog-over-toggle-track {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 2px rgba(245, 158, 11, 0.3);
}

.blog-over-toggle-pill.active:hover .blog-over-toggle-track {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(13, 179, 176, 0.3);
}

/* =========================================
   THEME TOGGLE — Style 3: Labeled
   Pill toggle with "Light" / "Dark" text
   ========================================= */
.blog-over-toggle-labeled {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
}

.blog-over-toggle-labeled:hover,
.blog-over-toggle-labeled:focus,
.blog-over-toggle-pill:hover,
.blog-over-toggle-pill:focus {
    background: transparent !important;
}

.blog-over-toggle-labeled .blog-over-toggle-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 110px;
    height: 28px;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    border-radius: 14px;
    padding: 2px;
    transition: background 0.4s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.blog-over-toggle-labeled .blog-over-toggle-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 50%;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.blog-over-toggle-labeled .blog-over-toggle-label i {
    font-size: 10px;
    color: #ffffff !important;
}

.blog-over-toggle-labeled .blog-over-toggle-label-light {
    color: #1e293b;
}

.blog-over-toggle-labeled .blog-over-toggle-label-dark {
    color: rgba(255, 255, 255, 0.6);
}

.blog-over-toggle-labeled .blog-over-toggle-thumb {
    position: absolute;
    left: 3px;
    top: 3px;
    width: calc(50% - 3px);
    height: 22px;
    background: #fff;
    border-radius: 11px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

/* Labeled — Active (Dark Mode) */
.blog-over-toggle-labeled.active .blog-over-toggle-track {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.blog-over-toggle-labeled.active .blog-over-toggle-thumb {
    transform: translateX(calc(100% + 3px));
    background: #334155;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.blog-over-toggle-labeled.active .blog-over-toggle-label-light {
    color: rgba(255, 255, 255, 0.5);
}

.blog-over-toggle-labeled.active .blog-over-toggle-label-dark {
    color: #fbbf24;
}

/* Labeled — Hover */
.blog-over-toggle-labeled:hover .blog-over-toggle-track {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.blog-over-toggle-labeled.active:hover .blog-over-toggle-track {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(251, 191, 36, 0.3);
}

/* 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-toggle-icon,
    .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-toggle-icon,
    .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-theme-toggle-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0 8px; /* Move margin here so pencil icon stays close to the toggle */
}

.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: 50px 20px 30px;
    }

    .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: stretch image to full card height */
.blog-over-content-wrapper.no-sidebar .blog-over-posts-list.list-view .blog-over-post-item {
    display: flex;
    align-items: stretch;
}

.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: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    min-height: 260px;
}

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

.blog-over-posts-list.list-view .blog-over-post-thumbnail {
    width: 42%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Ensure full height chain using nested flexbox instead of absolute positioning */
.blog-over-posts-list.list-view .blog-over-post-thumbnail a {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

.blog-over-posts-list.list-view .blog-over-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-grow: 1;
}

.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;
        min-height: auto;
    }

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

/* ─── Image Auto Height (Default Blog Style) ─────────────
   When enabled via Customizer, the featured image stretches
   to match the full height of the content area.
   We keep the 'a' tag in flow (flex-grow) so the container
   doesn't collapse, and absolutely position the img to fill it. */

.blog-over-auto-height-image .blog-over-posts-list.list-view .blog-over-post-thumbnail {
    height: auto !important; /* Overrides .ratio-full height: 100% which breaks flex stretch */
    align-self: stretch !important; /* Overrides ratio alignments */
}

.blog-over-auto-height-image .blog-over-posts-list.list-view .blog-over-post-thumbnail a {
    position: relative;
    display: block; /* Override flex so absolute child is relative to this block */
    flex-grow: 1;
    width: 100%;
    height: 100%;
}

.blog-over-auto-height-image .blog-over-posts-list.list-view .blog-over-post-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Auto Height - mobile: revert to stacked layout */
@media (max-width: 768px) {
    .blog-over-auto-height-image .blog-over-posts-list.list-view .blog-over-post-thumbnail {
        height: 200px;
    }
}

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

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

/* Blog Image System */
.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ratio-full {
    height: 100%;
}

/* =========================================
   IMAGE RATIO variants (Pro filter)
   ratio-full = natural cover (default)
   ratio-square / landscape / wide / portrait
   ========================================= */
.blog-over-posts-list.list-view .blog-over-post-thumbnail.ratio-square  { aspect-ratio: 1/1; height: auto; align-self: start; }
.blog-over-posts-list.list-view .blog-over-post-thumbnail.ratio-landscape { aspect-ratio: 4/3; height: auto; align-self: start; }
.blog-over-posts-list.list-view .blog-over-post-thumbnail.ratio-wide    { aspect-ratio: 16/9; height: auto; align-self: start; }
.blog-over-posts-list.list-view .blog-over-post-thumbnail.ratio-portrait { aspect-ratio: 3/4; height: auto; align-self: start; }

.blog-over-posts-list.grid-view .blog-over-post-thumbnail.ratio-square  { aspect-ratio: 1/1; height: auto; }
.blog-over-posts-list.grid-view .blog-over-post-thumbnail.ratio-landscape { aspect-ratio: 4/3; height: auto; }
.blog-over-posts-list.grid-view .blog-over-post-thumbnail.ratio-wide    { aspect-ratio: 16/9; height: auto; }
.blog-over-posts-list.grid-view .blog-over-post-thumbnail.ratio-portrait { aspect-ratio: 3/4; 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: 48px;
    margin-bottom: 16px;
}

/* Core wrapper generated by the_posts_pagination() */
.blog-over-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Every page number link / span */
.blog-over-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    background: var(--blog-over-bg-card, #fff);
    color: var(--blog-over-heading-color, #1e293b);
    border: 1.5px solid var(--blog-over-border-color, #e2e8f0);
}

.blog-over-pagination .page-numbers:hover {
    background: var(--blog-over-primary, #3b82f6);
    color: #fff;
    border-color: var(--blog-over-primary, #3b82f6);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

/* Active / current page */
.blog-over-pagination .page-numbers.current {
    background: var(--blog-over-primary, #3b82f6);
    color: #fff;
    border-color: var(--blog-over-primary, #3b82f6);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
    cursor: default;
    pointer-events: none;
}

/* Dots (…) */
.blog-over-pagination .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    pointer-events: none;
    cursor: default;
    color: var(--blog-over-text-muted, #94a3b8);
}

/* Prev / Next arrow links */
.blog-over-pagination .page-numbers.prev,
.blog-over-pagination .page-numbers.next {
    background: var(--blog-over-bg-input, #f1f5f9);
    color: var(--blog-over-primary, #3b82f6);
    border-color: var(--blog-over-primary, #3b82f6);
    font-size: 0.8rem;
}

.blog-over-pagination .page-numbers.prev:hover,
.blog-over-pagination .page-numbers.next:hover {
    background: var(--blog-over-primary, #3b82f6);
    color: #fff;
}

/* ── Style: Minimal ───────────────────────────────── */
.blog-over-pagination-minimal .page-numbers {
    background: transparent;
    border-color: transparent;
    color: var(--blog-over-text-muted, #64748b);
    border-radius: 4px;
}

.blog-over-pagination-minimal .page-numbers:hover {
    background: var(--blog-over-bg-input, #f1f5f9);
    color: var(--blog-over-primary, #3b82f6);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.blog-over-pagination-minimal .page-numbers.current {
    background: transparent;
    color: var(--blog-over-primary, #3b82f6);
    border-bottom: 2px solid var(--blog-over-primary, #3b82f6);
    border-radius: 0;
    box-shadow: none;
}

.blog-over-pagination-minimal .page-numbers.prev,
.blog-over-pagination-minimal .page-numbers.next {
    background: transparent;
    border-color: transparent;
    color: var(--blog-over-primary, #3b82f6);
}

/* ── Style: Rounded (pill buttons) ───────────────── */
.blog-over-pagination-rounded .page-numbers {
    border-radius: 50px;
    min-width: 44px;
    height: 44px;
}

.blog-over-pagination-rounded .page-numbers.current {
    border-radius: 50px;
}

.blog-over-pagination-rounded .page-numbers.prev,
.blog-over-pagination-rounded .page-numbers.next {
    border-radius: 50px;
    padding: 0 18px;
}

/* ── Dark Mode Overrides ─────────────────────────── */
.blog-over-dark-mode .blog-over-pagination .page-numbers {
    background: var(--blog-over-bg-card, #1e293b);
    color: var(--blog-over-text-body, #cbd5e1);
    border-color: rgba(255, 255, 255, 0.1);
}

.blog-over-dark-mode .blog-over-pagination .page-numbers:hover {
    background: var(--blog-over-primary, #3b82f6);
    color: #fff;
    border-color: var(--blog-over-primary, #3b82f6);
}

.blog-over-dark-mode .blog-over-pagination .page-numbers.current {
    background: var(--blog-over-primary, #3b82f6);
    color: #fff;
    border-color: var(--blog-over-primary, #3b82f6);
}

.blog-over-dark-mode .blog-over-pagination .page-numbers.prev,
.blog-over-dark-mode .blog-over-pagination .page-numbers.next {
    background: rgba(255, 255, 255, 0.05);
    color: var(--blog-over-primary, #3b82f6);
    border-color: var(--blog-over-primary, #3b82f6);
}

/* Responsive */
@media (max-width: 480px) {
    .blog-over-pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
}

/* =========================================
   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;
}

/* Prevent patterns from overflowing when sidebar is present */
.has-sidebar .blog-over-page-body .alignfull,
.has-sidebar .blog-over-page-body .alignwide {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
}

/* Fix 1: Underline links in page body (Theme Review Req.) */
.blog-over-page-body p a,
.blog-over-page-body li a {
    text-decoration: underline;
}

.blog-over-page-body p a.wp-block-button__link,
.blog-over-page-body li a.wp-block-button__link {
    text-decoration: none;
}

.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 - Underline + Break Long URLs (Theme Review Req.) */
.blog-over-single-content a {
    text-decoration: underline;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Buttons inside content should NOT be underlined */
.blog-over-single-content a.blog-over-read-more,
.blog-over-single-content a.blog-over-btn,
.blog-over-single-content a.button,
.blog-over-single-content a.blog-over-cat-item,
.blog-over-single-content .blog-over-post-category a,
.blog-over-single-content .blog-over-single-category a,
.blog-over-single-content .blog-over-single-tags a,
.blog-over-single-content .wp-block-button__link {
    text-decoration: none;
}

/* 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;
}

/* Fix 3: Underline links inside comment content (Theme Review Req.) */
.comment-content a,
.blog-over-comment-content a,
.blog-over-comment-text a {
    text-decoration: underline;
}

.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;
    -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: 100vw;
    width: calc(100% + 160px);
}

.alignfull {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    width: 100vw;
}

@media (max-width: 1200px) {
    .alignwide {
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
    }
}

/* 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,
.blog-over-content-wrapper.has-sidebar .alignfull,
.blog-over-content-wrapper.has-sidebar .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 while preserving position: sticky */
html,
body {
    overflow-x: clip;
    max-width: 100vw;
}

/* Ensure containers don't overflow horizontally */
.blog-over-container,
.blog-over-container-full {
    max-width: 100%;
    overflow-x: clip;
}

/* 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: var(--blog-over-secondary, #1e40af);
    color: #ffffff;
    transition: all 0.3s ease;
}

.blog-over-cat-item:hover,
.blog-over-post-card-category a:hover {
    background: var(--blog-over-primary, #3b82f6);
    color: #ffffff !important;
    text-decoration: none;
}

/* 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;
    }
}

/* ==========================================================================
   Gutenberg Block Styles Support
   ========================================================================== */

/* 1. Checklist List Style (.is-style-checkmark) */
ul.is-style-checkmark {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

ul.is-style-checkmark li {
    position: relative !important;
    padding-left: 28px !important;
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
}

ul.is-style-checkmark li::before {
    content: "\2713" !important; /* Checkmark character */
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    width: 18px !important;
    height: 18px !important;
    background-color: var(--blog-over-primary, #2563eb) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
}

/* 2. Rounded Button Style (.is-style-blog-over-rounded) */
.wp-block-button.is-style-blog-over-rounded .wp-block-button__link {
    border-radius: 50px !important;
    padding: 12px 30px !important;
}

/* 3. Outline Button Style (.is-style-blog-over-outline) */
.wp-block-button.is-style-blog-over-outline .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid var(--blog-over-primary, #2563eb) !important;
    color: var(--blog-over-primary, #2563eb) !important;
    transition: all 0.2s ease !important;
}

.wp-block-button.is-style-blog-over-outline .wp-block-button__link:hover {
    background-color: var(--blog-over-primary, #2563eb) !important;
    color: #ffffff !important;
}

/* 4. Card Group Style (.is-style-blog-over-card) */
.wp-block-group.is-style-blog-over-card {
    background-color: var(--blog-over-bg-card, #ffffff) !important;
    border: 1px solid var(--blog-over-border-color, #e5e7eb) !important;
    border-radius: 12px !important;
    padding: 2.5rem !important;
    box-shadow: var(--blog-over-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.05)) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.wp-block-group.is-style-blog-over-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--blog-over-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)) !important;
}