/**
 * Blog Post Enhanced Stylesheet - v2.0
 *
 * ARCHITECTURE:
 * - Mobile-first approach with progressive enhancement
 * - Component-based media queries (inline with components)
 * - CSS variables for theming and consistency
 *
 * BREAKPOINTS (Standardized):
 * - Mobile: Base styles (default)
 * - Tablet: 768px+
 * - Desktop: 1024px+
 * - Very Small: 480px (special cases)
 *
 * DYNAMIC VARIABLES:
 * - Border radius, brand color, and font size set via JavaScript
 * - Theme Design Settings control these values
 */

:root {
    /* Seeded from the server-emitted tokens (inc/design-tokens.php, wp_head
       priority 5) rather than a literal. These used to be #030303/#000000 and
       were only corrected once js/blog-post-enhanced.js ran, so every blog post
       painted near-black links and accents and then flipped to the brand color
       on hydration. The JS still sets them (it also derives the rgba tints), it
       just no longer has a flash to repair. */
    --brand-color: var(--cgn-brand-color, #FF8B5A);
    --brand-color-dark: var(--cgn-primary-hover, #E07040);
    --brand-color-light: rgba(255, 139, 90, 0.1);
    --brand-color-lighter: rgba(255, 139, 90, 0.05);
    /* --border-radius and --base-font-size are emitted globally by
       inc/design-tokens.php from CGN Settings. This file used to shadow both
       with local literals (16px and 18px), which is why blog radius and blog
       type never tracked the admin settings. Redeclaring them here would also
       double the radius on any site that customises it, since --cgn-radius-lg
       is itself derived from --border-radius. */
    --content-max-width: 1200px;
    --sidebar-width: 400px;
    --hero-bg-color: #383737;
    --sidebar-bg-color: #333;
    /* Legacy aliases retained so the remaining var() call sites in this file
       keep resolving. Both now point at the shared ladder rather than a
       private calc() scale. */
    --hero-title-size: var(--cgn-fs-3xl);
    --hero-description-size: var(--cgn-fs-lg);
    --section-heading-size: var(--cgn-fs-xl);
    --text-color: #333;
    --text-color-light: #444;
    --text-color-lighter: #666;
    --text-color-darker: #1a1a1a;
    --text-gray: #4b5563;
    --white: #ffffff;
    --grey-light: #f8f9fa;
    --grey-medium: #e9ecef;
    --grey-dark: #6c757d;
    --border-light: #e8e9ea;
    --transition: all 0.3s ease;
    --transition-fast: all 0.2s ease;
    --cta-button-bg-color: #ff8b5a;
    --cta-button-text-color: #ffffff;
    --brand-shadow: rgba(255, 139, 90, 0.3);
    --brand-shadow-hover: rgba(255, 139, 90, 0.4);

    /* Gradient definitions */
    --gradient-primary: linear-gradient(135deg, var(--brand-color) 0%, #e07040 100%);
    --gradient-light: linear-gradient(135deg, #fff9f5 0%, #ffffff 100%);
    --gradient-subtle: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

    /* Standardized breakpoints (non-overlapping) */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;

    /* Breakpoint ranges:
     * Mobile: 0-767px (max-width: 767px)
     * Tablet: 768px-1023px (min-width: 768px and max-width: 1023px)
     * Desktop: 1024px+ (min-width: 1024px)
     */

    /* Layout dimensions */
    --toc-widget-height: 350px;
    --toc-header-height: 60px;
    --toc-list-height: 290px; /* Calculated: 350px - 60px */
    --featured-image-ratio-desktop: 3/2;
    --featured-image-ratio-mobile: 4/3;
    --sidebar-sticky-offset: 15vh;
    --sidebar-max-height: calc(100vh - 1rem);
}

/* White background on single posts to override any global Elementor background */
body.single-post {
    background: #ffffff !important;
    background-image: none !important;
}

/* Force overflow visible on parent containers for sticky positioning to work */
.site-main,
#content.site-main {
    overflow: visible !important;
}

.cgn-modern-article {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
        Cantarell, sans-serif;
    font-size: var(--cgn-fs-base);
    line-height: 1.7;
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

.hero-section {
    color: var(--text-color);
    padding: 1.5rem 0 0 0;
    /* margin-top is controlled by Blog Post Top Margin setting in Design Settings */
    position: relative;
    min-height: auto;
    display: flex;
    align-items: flex-start;
}

.hero-container {
    position: relative;
    z-index: 1;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: flex-start;
    min-height: auto;
}

.hero-text {
    max-width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-title {
    font-size: var(--hero-title-size);
    font-weight: 700;
    line-height: 1.2;
    margin: 1.5rem 0 1rem 0;
    color: var(--text-color);
    letter-spacing: -0.02em;
}

.hero-description {
    font-size: var(--hero-description-size);
    color: var(--text-color-light);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.hero-section .author-section {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Remove bottom margin from last meta item */
.hero-section .author-section > *:last-child {
    margin-bottom: 0;
}

.byline-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--cgn-fs-base);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.byline-label {
    color: var(--text-color-light);
    font-weight: 600;
}

.byline-value {
    color: var(--text-color);
    font-weight: 400;
}

.post-meta {
    font-size: var(--cgn-fs-base);
    color: var(--text-color-light);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.reviewed-by-link {
    font-size: var(--cgn-fs-base);
    color: var(--text-color-light);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

/* Byline links sit inline against #333 body text. On the raw brand color they
   measured 2.54:1 against that adjacent text (needs 3:1) and 2.24-2.34:1
   against the background (needs 4.5:1), so they failed as text AND as a
   link-vs-text signal. The content-link token clears the background rule; the
   2px border carries the affordance so the link is never color-only. */
a[href="#key-points"],
#key-points-link,
.reviewed-by-link .author-link {
    color: var(--cgn-content-link, var(--brand-color));
    border-bottom: 2px solid currentColor;
    text-decoration: none;
    transition: var(--transition-fast);
}

a[href="#key-points"]:hover,
a[href="#key-points"]:focus-visible,
#key-points-link:hover,
#key-points-link:focus-visible,
.reviewed-by-link .author-link:hover,
.reviewed-by-link .author-link:focus-visible {
    color: var(--cgn-content-link-hover, var(--brand-color-dark));
    text-decoration: none;
}

.hero-image {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.featured-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    object-fit: cover;
    aspect-ratio: var(--featured-image-ratio-desktop);
    overflow: hidden;
    display: block;
}

.featured-image-placeholder {
    width: 100%;
    aspect-ratio: var(--featured-image-ratio-desktop);
    background: var(--grey-light);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-lighter);
    font-size: var(--cgn-fs-xs);
}

.featured-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
}

/* Base breadcrumb styles when rendered as a direct child of main (new default) */
.site-main > .cgn-breadcrumbs {
    max-width: var(--content-max-width, 1200px);
    margin: 1rem auto 0;
    padding: 0 2rem;
    font-size: var(--cgn-fs-xs);
}

.site-main > .cgn-breadcrumbs .cgn-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-main > .cgn-breadcrumbs .cgn-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-main > .cgn-breadcrumbs .cgn-breadcrumb-link {
    color: var(--text-color-light, #555);
    text-decoration: none;
    transition: var(--transition-fast, color 0.15s ease);
}

.site-main > .cgn-breadcrumbs .cgn-breadcrumb-link:hover,
.site-main > .cgn-breadcrumbs .cgn-breadcrumb-link:focus {
    color: var(--brand-color, #ec824e);
    text-decoration: underline;
}

.site-main > .cgn-breadcrumbs .cgn-breadcrumb-current {
    color: var(--text-color, #222);
    font-weight: 500;
}

.site-main > .cgn-breadcrumbs .cgn-breadcrumb-separator {
    color: var(--text-color-lighter, #999);
    display: inline-flex;
    line-height: 0;
}

@media (max-width: 767px) {
    .site-main > .cgn-breadcrumbs {
        padding: 0 1rem;
    }
}

/* Breadcrumb relocated into the post sidebar, under the sticky TOC. The
   top-of-main .site-main > .cgn-breadcrumbs rules above no longer match on
   blog posts (now schema-only there). Re-scoped + tightened for the narrow
   sidebar column. Desktop-only: the sidebar itself is display:none <=767px. */
.clean-breadcrumb-widget {
    margin-bottom: 25px;
}

.clean-sidebar .cgn-breadcrumbs {
    font-size: var(--cgn-fs-xs);
    line-height: 1.4;
}

.clean-sidebar .cgn-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.clean-sidebar .cgn-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.clean-sidebar .cgn-breadcrumb-link {
    color: var(--text-color-light, #555);
    text-decoration: none;
    transition: var(--transition-fast, color 0.15s ease);
}

.clean-sidebar .cgn-breadcrumb-link:hover,
.clean-sidebar .cgn-breadcrumb-link:focus {
    color: var(--brand-color, #ec824e);
    text-decoration: underline;
}

.clean-sidebar .cgn-breadcrumb-current {
    color: var(--text-color, #222);
    font-weight: 500;
}

.clean-sidebar .cgn-breadcrumb-separator {
    color: var(--text-color-lighter, #999);
    display: inline-flex;
    line-height: 0;
}

/* Content Wrapper */
.content-wrapper {
    background: var(--white);
    min-height: 100vh;
}

.post-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 2rem 2rem;
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: 3rem;
    align-items: start;
    position: relative;
}

.main-content {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

.content-section {
    background: var(--brand-color-light);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.content-section.key-points-section {
    background: transparent;
    padding: 0;
}

.content-section h2,
.content-section h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-color);
    font-weight: 600;
}

.key-points-heading {
    color: var(--text-color);
    font-weight: 700;
    font-size: var(--cgn-fs-2xl);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.key-points-list {
    list-style: none;
    border-radius: var(--border-radius);
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid var(--grey-medium);
}

.key-point-item {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    line-height: 1.6;
    font-size: var(--cgn-fs-base);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.key-point-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.125em;
    width: 20px;
    height: 20px;
    background-color: var(--brand-color);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M505 174.8l-39.6-39.6c-9.4-9.4-24.6-9.4-33.9 0L192 374.7 80.6 263.2c-9.4-9.4-24.6-9.4-33.9 0L7 302.9c-9.4 9.4-9.4 24.6 0 34L175 505c9.4 9.4 24.6 9.4 33.9 0l296-296.2c9.4-9.5 9.4-24.7.1-34zm-324.3 106c6.2 6.3 16.4 6.3 22.6 0l208-208.2c6.2-6.3 6.2-16.4 0-22.6L366.1 4.7c-6.2-6.3-16.4-6.3-22.6 0L192 156.2l-55.4-55.5c-6.2-6.3-16.4-6.3-22.6 0L68.7 146c-6.2 6.3-6.2 16.4 0 22.6l112 112.2z'/%3E%3C/svg%3E")
        no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M505 174.8l-39.6-39.6c-9.4-9.4-24.6-9.4-33.9 0L192 374.7 80.6 263.2c-9.4-9.4-24.6-9.4-33.9 0L7 302.9c-9.4 9.4-9.4 24.6 0 34L175 505c9.4 9.4 24.6 9.4 33.9 0l296-296.2c9.4-9.5 9.4-24.7.1-34zm-324.3 106c6.2 6.3 16.4 6.3 22.6 0l208-208.2c6.2-6.3 6.2-16.4 0-22.6L366.1 4.7c-6.2-6.3-16.4-6.3-22.6 0L192 156.2l-55.4-55.5c-6.2-6.3-16.4-6.3-22.6 0L68.7 146c-6.2 6.3-6.2 16.4 0 22.6l112 112.2z'/%3E%3C/svg%3E")
        no-repeat center;
    -webkit-mask-size: contain;
    flex-shrink: 0;
}

.key-point-item:last-child {
    margin-bottom: 0;
}

/* FAQ Navigation Link in Key Points */
.key-points-faq-link {
    margin-top: 1.5rem;
    text-align: right;
}

.faq-jump-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--brand-color);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--cgn-fs-sm);
    transition: all 0.3s ease;
    border-bottom: none;
}

.faq-jump-link:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.faq-link-text {
    font-weight: 400;
    letter-spacing: 0.025em;
    border-bottom: 1px solid var(--brand-color);
}

.faq-arrow {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-jump-link:hover .faq-arrow {
    transform: translateY(2px);
}

/* Clean TOC Widget */
.clean-toc-widget {
    background: var(--white);
    border: 1px solid var(--grey-medium);
    border-radius: var(--border-radius);
    overflow: hidden;
    height: var(--toc-widget-height); /* Fixed height to show 8+ headings */
    flex-shrink: 0;
    margin: 0; /* Ensure no margin conflicts */
}

.clean-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--grey-medium);
    background: var(--grey-light);
    height: var(--toc-header-height);
    box-sizing: border-box;
}

.clean-toc-header h3 {
    margin: 0;
    font-size: var(--cgn-fs-base);
    font-weight: 600;
    color: var(--text-color);
}

.clean-toc-list-container {
    height: var(--toc-list-height); /* Calculated from widget height - header */
    overflow-y: auto;
    padding: 0.75rem 0;
}

/* Clean TOC List Styles */
.clean-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.clean-toc-item {
    margin: 0;
    border-bottom: 1px solid var(--grey-light);
}

.clean-toc-item:last-child {
    border-bottom: none;
}

.clean-toc-link {
    display: block;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: var(--text-color);
    font-size: var(--cgn-fs-sm);
    line-height: 1.4;
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
    font-weight: normal; /* Override bold from article-content links */
    border-bottom: none; /* Remove bottom border from article-content links */
}

.clean-toc-link:hover {
    background: var(--grey-light);
    color: var(--brand-color);
    border-left-color: var(--brand-color);
    border-bottom: none; /* Keep bottom border removed on hover */
}

.clean-toc-link.active {
    background: var(--grey-light);
    color: var(--brand-color);
    border-left-color: var(--brand-color);
    font-weight: 500;
}

/* Mobile TOC Styling */
.mobile-toc-widget {
    background: var(--white);
    border: 1px solid var(--grey-medium);
    border-radius: var(--border-radius);
    margin: 2rem 1rem; /* Consistent mobile margins */
    overflow: hidden;
    display: none; /* Hidden by default, shown on mobile */
}

.mobile-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--grey-light);
    cursor: pointer;
    user-select: none;
    min-height: 56px; /* Better touch target for mobile */
    touch-action: manipulation;
}

.mobile-toc-header h3 {
    margin: 0;
    font-size: var(--cgn-fs-base);
    font-weight: 600;
    color: var(--text-color);
}

.mobile-toc-toggle {
    color: var(--text-color);
    font-size: var(--cgn-fs-base);
    transition: var(--transition-fast);
    min-width: 24px;
    text-align: center;
    font-weight: bold;
}

.mobile-toc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-toc-content.expanded {
    max-height: 500px;
}

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

.mobile-toc-item {
    border-bottom: 1px solid rgba(233, 236, 239, 0.5);
}

.mobile-toc-item:last-child {
    border-bottom: none;
}

.mobile-toc-link {
    color: var(--text-color);
    text-decoration: none;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    transition: var(--transition-fast);
    font-size: var(--cgn-fs-sm);
    font-weight: 300;
    line-height: 1.4;
    min-height: 48px; /* Better mobile touch target */
    touch-action: manipulation;
    border-bottom: none; /* Remove bottom border from article-content links */
}

.mobile-toc-link:hover {
    background: rgba(255, 139, 90, 0.05);
    color: var(--brand-color);
    border-bottom: none; /* Keep bottom border removed on hover */
}

.article-content {
    margin: 3rem 0;
    line-height: 1.7;
    font-size: var(--cgn-fs-base);
    background: rgba(249, 249, 250, 1);
    padding: 1rem 1rem;
    border-radius: var(--border-radius);
    word-wrap: break-word; /* Break long words */
}

/* HR elements styling - respect brand color */
.article-content hr,
hr {
    border: none;
    border-top: 2px solid var(--brand-color);
    margin: 2rem 0;
    width: 100%;
    background: transparent;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 0.5em;
    color: var(--text-color);
}

.article-content h2 {
    font-size: 2em;
}

.article-content h3 {
    font-size: 1.5em;
}

.article-content h4 {
    font-size: 1.3em;
}

.article-content p {
    margin-bottom: 1.5em;
    text-align: justify;
    hyphens: auto;
}

.article-content p:first-of-type {
    font-size: 1.2em;
    font-weight: 400;
}

/* .article-content a is styled sitewide in style.css from the Design-tab
   content-link tokens (THEME-30). The rule that used to live here welded the
   link color to the raw brand color, which measured 2.24-2.34:1 on white
   across the fleet. Redeclaring it here would be dead code — the global rule
   is (0,2,2) against this one's (0,1,1) — so it is removed rather than left to
   drift. */

.article-content ul,
.article-content ol {
    margin-bottom: 1.5em;
    padding-left: 2em;
}

.article-content li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.article-content blockquote {
    margin: 2em 0;
    padding: 1.5em 2em;
    background-color: var(--grey-light);
    border-left: 4px solid var(--brand-color);
    font-style: italic;
    font-size: 1.1em;
}

.article-content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto;
    border-radius: var(--border-radius);
    margin: 1.5em 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    object-fit: contain; /* Ensure images fit within container */
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95em;
}

.article-content th,
.article-content td {
    padding: 0.75em;
    text-align: left;
    border-bottom: 1px solid var(--grey-medium);
}

.article-content th {
    background-color: var(--grey-light);
    font-weight: 600;
    color: var(--text-color);
}

.article-content .wp-block-image {
    text-align: center;
    max-width: 100% !important;
    overflow: hidden;
}

/* Ensure all WordPress blocks respect container width */
.article-content [class*="wp-block"] {
    max-width: 100% !important;
    overflow-x: hidden;
}

.article-content .wp-block-quote {
    border-left: 4px solid var(--brand-color);
    padding-left: 1.5em;
    font-style: italic;
}

.article-content a:focus,
.article-content button:focus {
    outline: 2px solid var(--brand-color);
    outline-offset: 2px;
}

.social-sharing-section {
    text-align: center;
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.social-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--white);
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--border-radius);
    border: 2px solid var(--grey-medium);
    transition: var(--transition);
    font-weight: 500;
    font-size: var(--cgn-fs-xs);
}

.social-button:hover {
    background: var(--brand-color);
    color: var(--white);
    border-color: var(--brand-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--brand-shadow);
}

.recent-posts-section {
    margin: 4rem 0;
}

.recent-posts-section h2 {
    text-align: center;
    font-size: var(--cgn-fs-2xl);
    font-weight: 600;
}

.recent-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.recent-post-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.recent-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.recent-post-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.recent-post-content {
    padding: 1.5rem;
}

.recent-post-title {
    margin: 0 0 0.75rem 0;
    font-size: var(--cgn-fs-base);
    font-weight: 600;
}

.recent-post-title a {
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition-fast);
}

.recent-post-title a:hover {
    color: var(--brand-color);
}

.recent-post-excerpt {
    color: var(--text-color-light);
    font-size: var(--cgn-fs-xs);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.recent-post-meta {
    font-size: var(--cgn-fs-2xs);
    color: var(--text-color-lighter);
    font-weight: 500;
}

/* Use higher specificity without !important for better maintainability */
body.single-post .post-container .clean-sidebar,
.cgn-modern-article .post-container .clean-sidebar,
body.single .post-container .clean-sidebar {
    position: sticky;
    top: var(--sidebar-sticky-offset);
    height: fit-content;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-height: var(--sidebar-max-height);
    overflow-y: auto; /* Allow sidebar to scroll when taller than viewport */
    z-index: 5; /* Below the fixed Elementor header so the sidebar tucks behind the nav */
    will-change: transform;
}

/* TOC Widget Stability */
body.single-post .clean-toc-widget,
body.single .clean-toc-widget,
.cgn-modern-article .clean-toc-widget {
    flex-shrink: 0;
    overflow: hidden;
}

/* CTA Widget Stability */
body.single-post .clean-cta-widget,
body.single .clean-cta-widget,
.cgn-modern-article .clean-cta-widget {
    flex-shrink: 0;
}

.sidebar-section {
    background: var(--sidebar-bg-color);
    color: var(--white);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 0; /* Remove margin - using gap from parent */
}

.sidebar-section:last-child {
    margin-bottom: 0;
}

.sidebar-section h3,
.sidebar-section h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--white);
    font-weight: 600;
    font-size: var(--cgn-fs-base);
}

/* Clean CTA Widget */
.clean-cta-widget {
    background: var(--white);
    border: 1px solid var(--grey-medium);
    border-radius: var(--border-radius);
    padding: 2rem;
    flex-shrink: 0;
    min-height: 200px;
    margin: 0; /* Ensure no margin conflicts */
}

.cta-section {
    background: var(--white);
    border: 1px solid var(--grey-medium);
    border-radius: var(--border-radius);
    overflow: hidden;
    padding: 2rem;
}

.cta-header {
    background: transparent;
    padding: 0 0 1.5rem 0;
    border-bottom: none;
}

.cta-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cta-brand-name {
    color: var(--text-color);
    font-weight: 700;
    font-size: var(--cgn-fs-2xl);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.cta-content {
    padding: 0;
    text-align: left;
}

.cta-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.cta-features li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-color-light);
    font-size: var(--cgn-fs-base);
    line-height: 1.6;
    font-weight: 400;
}

.cta-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.125em;
    width: 24px;
    height: 24px;
    background-color: var(--brand-color);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M505 174.8l-39.6-39.6c-9.4-9.4-24.6-9.4-33.9 0L192 374.7 80.6 263.2c-9.4-9.4-24.6-9.4-33.9 0L7 302.9c-9.4 9.4-9.4 24.6 0 34L175 505c9.4 9.4 24.6 9.4 33.9 0l296-296.2c9.4-9.5 9.4-24.7.1-34zm-324.3 106c6.2 6.3 16.4 6.3 22.6 0l208-208.2c6.2-6.3 6.2-16.4 0-22.6L366.1 4.7c-6.2-6.3-16.4-6.3-22.6 0L192 156.2l-55.4-55.5c-6.2-6.3-16.4-6.3-22.6 0L68.7 146c-6.2 6.3-6.2 16.4 0 22.6l112 112.2z'/%3E%3C/svg%3E")
        no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M505 174.8l-39.6-39.6c-9.4-9.4-24.6-9.4-33.9 0L192 374.7 80.6 263.2c-9.4-9.4-24.6-9.4-33.9 0L7 302.9c-9.4 9.4-9.4 24.6 0 34L175 505c9.4 9.4 24.6 9.4 33.9 0l296-296.2c9.4-9.5 9.4-24.7.1-34zm-324.3 106c6.2 6.3 16.4 6.3 22.6 0l208-208.2c6.2-6.3 6.2-16.4 0-22.6L366.1 4.7c-6.2-6.3-16.4-6.3-22.6 0L192 156.2l-55.4-55.5c-6.2-6.3-16.4-6.3-22.6 0L68.7 146c-6.2 6.3-6.2 16.4 0 22.6l112 112.2z'/%3E%3C/svg%3E")
        no-repeat center;
    -webkit-mask-size: contain;
}

.cta-features li:last-child {
    margin-bottom: 0;
}

.cta-button {
    display: block;
    background-color: var(--cta-button-bg-color);
    color: var(--cta-button-text-color) !important; /* Override article link styles */
    padding: 1rem 1.5rem;
    border-radius: var(--cta-button-radius, var(--border-radius));
    text-decoration: none !important;
    font-weight: 600;
    font-size: var(--cgn-fs-base);
    transition: var(--transition);
    text-align: center;
    border: none;
    border-bottom: none !important; /* Remove link underline style */
    margin-top: 1.5rem;
}

.cta-button:hover,
.cta-button:focus,
.cta-button:active {
    background: var(--cta-button-bg-color);
    color: var(--cta-button-text-color) !important; /* Override article link styles */
    transform: translateY(-2px);
    text-decoration: none !important;
    border-bottom: none !important;
}

.mobile-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--brand-color);
    color: var(--white);
    padding: 1rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    z-index: 1000;
    transform: translateY(0);
    transition: var(--transition);
    display: none; /* Hidden by default, shown on mobile */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.mobile-sticky-cta.collapsed {
    transform: translateY(calc(100% - 3rem));
}

.mobile-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.mobile-cta-heading {
    flex: 1;
    font-size: var(--cgn-fs-base);
    font-weight: 600;
    color: var(--white);
}

.mobile-cta-button {
    background: var(--cta-button-bg-color);
    color: var(--cta-button-text-color) !important; /* Respect theme settings */
    padding: 0.75rem 1.25rem;
    border-radius: var(--border-radius);
    text-decoration: none !important;
    font-weight: 600;
    font-size: var(--cgn-fs-xs);
    transition: var(--transition);
    white-space: nowrap;
    border-bottom: none !important; /* Remove link underline style */
}

.mobile-cta-button:hover {
    background: var(--cta-button-bg-color);
    color: var(--cta-button-text-color) !important;
    transform: scale(1.05);
    text-decoration: none !important;
    border-bottom: none !important;
}

.mobile-cta-toggle {
    position: absolute;
    top: -2.5rem;
    right: 1rem;
    background: var(--brand-color);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    padding: 0.5rem;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-cta-toggle:hover {
    background: var(--brand-color);
}

.mobile-cta-toggle svg {
    transition: var(--transition);
}

.mobile-sticky-cta.collapsed .mobile-cta-toggle svg {
    transform: rotate(180deg);
}

/* ========================================
   FAQ Section - Plain Text Display
   Mobile: Base styles
   Tablet (768px+): Larger padding and fonts
   Desktop (1024px+): Maximum spacing
   ======================================== */
.faq-section {
    margin: 3rem 0;
    background: var(--white);
    border-radius: var(--border-radius, 8px);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.faq-title {
    font-size: var(--cgn-fs-lg);
    font-weight: 700;
    color: var(--text-color-darker);
    margin: 0 0 1.5rem 0;
    padding: 1.5rem 1.5rem 0 1.5rem;
    line-height: 1.3;
}

.faq-container {
    padding: 0;
}

.faq-item {
    border-bottom: 1px solid var(--border-light);
    padding: 1.5rem 1.5rem;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    font-size: var(--cgn-fs-lg);
    font-weight: 600;
    color: var(--text-color-darker);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.faq-answer {
    color: var(--text-gray);
    font-size: var(--cgn-fs-base);
    line-height: 1.7;
}

.faq-answer p {
    margin: 0 0 1rem 0;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* ========================================
   FAQ Tablet & Desktop Styles (768px+)
   ======================================== */
@media (min-width: 768px) {
    .faq-section {
        margin: 3rem 0;
    }

    .faq-title {
        padding: 2rem 2rem 0 2rem;
        margin: 0 0 2rem 0;
    }

    .faq-item {
        padding: 2rem;
    }

    .faq-question {
        margin-bottom: 1rem;
    }
}

/* ========================================
   FAQ Large Desktop Styles (1024px+)
   ======================================== */
@media (min-width: 1024px) {
    .faq-section {
        margin: 3.5rem 0;
    }

    .faq-title {
        padding: 2.5rem 2.5rem 0 2.5rem;
        margin: 0 0 2rem 0;
    }

    .faq-item {
        padding: 2.5rem;
    }
}

/* Author Section Styling */
.author-section {
    background: var(--grey-light);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid var(--grey-medium);
}

.author-card {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.author-avatar {
    flex-shrink: 0;
}

.author-avatar img {
    border-radius: var(--cgn-radius-circle);
    border: 3px solid var(--brand-color);
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.author-info {
    flex: 1;
}

.author-name {
    margin: 0 0 0.75rem 0;
    font-size: var(--cgn-fs-lg);
    font-weight: 600;
    color: var(--text-color);
}

.author-bio {
    color: var(--text-color-light);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.author-bio p {
    margin-bottom: 0.75rem;
}

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

.read-more-link {
    display: inline-flex;
    align-items: center;
    color: var(--brand-color);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 1px solid var(--brand-color);
    border-radius: var(--border-radius);
    transition: var(--transition-fast);
    font-size: var(--cgn-fs-sm);
}

.read-more-link:hover {
    background: var(--brand-color);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--brand-shadow);
}

@media (min-width: 1024px) {
    body .mobile-sticky-cta {
        display: none;
    }
}

/* Clean Responsive Design */
@media (min-width: 1024px) {
    .clean-sidebar {
        display: flex;
    }
}

/* Responsive Design */

/* Tablet Styles (includes mobile) */
@media (max-width: 1023px) {
    :root {
        --sidebar-width: 350px;
    }

    .post-container {
        gap: 2rem;
        padding: 2rem 1.5rem;
    }

    .hero-container {
        padding: 0 1.5rem;
    }

    .hero-section {
        padding: 1.75rem 0 0 0;
        min-height: auto;
    }

    .hero-content {
        gap: 2rem;
        min-height: auto;
        align-items: flex-start;
    }

    .hero-title {
        margin: 3rem 0 1rem 0;
    }

    /* Tablet hero breadcrumbs */
    .hero-breadcrumbs {
        top: 0.75rem;
        left: 1.5rem;
    }

    /* Author page hero content spacing to avoid breadcrumb overlap on tablet */
    .author-page .hero-content {
        padding-top: 2.5rem;
    }

    .hero-breadcrumbs .cgn-breadcrumbs {
        padding: 0.4rem 0.9rem;
    }

    /* Tablet featured image sizing - use 1:1 square ratio */
    .featured-image-placeholder {
        aspect-ratio: 1/1;
        height: auto;
    }
}

/* All Tablets (768px - 1023px) - Single Column Layout */
@media (min-width: 768px) and (max-width: 1023px) {
    .post-container {
        grid-template-columns: 1fr !important;
        max-width: 800px;
        padding: 2rem 1.5rem;
        gap: 2rem;
    }

    .clean-sidebar {
        display: none !important;
    }

    .mobile-toc-widget {
        display: block !important;
        margin: 2rem 1.5rem;
    }

    /* Constrain content width for better readability */
    .main-content {
        max-width: 800px;
        margin: 0 auto;
    }

    /* Hero section single-column layout for tablet portrait */
    .hero-section {
        min-height: auto;
    }

    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
        text-align: left;
        min-height: auto;
    }

    .hero-text {
        order: 1;
    }

    .hero-image {
        order: 2;
        margin-top: 0.5rem;
    }

    .featured-image {
        margin-bottom: 2rem;
    }

    /* Key points section optimization for tablet */
    .key-points-list {
        padding: 1.5rem;
        margin: 1.5rem 0;
    }

    /* Featured image sizing for tablet - use 1:1 square ratio */
    .featured-image-placeholder {
        aspect-ratio: 1/1;
        height: auto;
    }
}

/* TOC Responsive Styles */
@media (min-width: 1024px) {
    .mobile-toc-widget {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-toc-widget {
        display: block !important;
    }
}

@media (max-width: 767px) {
    body .clean-sidebar {
        display: none;
    }

    .mobile-toc-widget {
        display: block;
    }

    /* Mobile FAQ improvements */
    .faq-question {
        padding: 1rem 1.25rem;
        gap: 0.75rem;
    }

    /* Make featured image 4:3 on mobile for less height */
    .featured-image-placeholder {
        aspect-ratio: var(--featured-image-ratio-mobile);
    }

    /* Ensure consistent margins for all page elements */
    .recent-posts-section,
    .author-card {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* Override any sections that might have their own horizontal margins */
    .content-wrapper > * {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* The mobile step-down that lived here (--hero-title-size * 1.7) is now
       handled by the fluid ladder itself: --cgn-fs-3xl resolves to its 28.8px
       floor below ~800px. Re-declaring it here would reintroduce the hard
       breakpoint jump the clamp exists to remove. */

    .hero-container {
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
    }

    .hero-section {
        padding: 1rem 0 0 0;
        min-height: auto;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 0.625rem;
        text-align: left;
        min-height: auto;
        width: 100%;
        max-width: 100%;
    }

    /* Light design - no overlay needed */
    .hero-section::before {
        display: none;
    }

    .hero-text {
        order: 1;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .hero-image {
        order: 2;
        margin-top: 0;
    }

    .featured-image {
        margin-bottom: 2rem;
    }

    .hero-description {
        line-height: 1.6;
        margin-bottom: 0.75rem;
        color: var(--text-color-light);
    }

    .hero-section .author-section {
        margin-top: 0.5rem;
        gap: 0.25rem;
        margin-bottom: 0.5rem;
        padding: 0 1rem;
    }

    /* Mobile post meta styling */
    .post-meta {
        line-height: 1.4;
        margin-bottom: 0.25rem;
    }
    .reviewed-by-link {
        line-height: 1.4;
        margin-bottom: 0.25rem;
    }
    .byline-item {
        margin-bottom: 0.25rem;
    }

    /* Mobile hero breadcrumbs */
    .hero-breadcrumbs {
        top: 0.5rem;
        left: 1rem;
    }

    .hero-breadcrumbs .cgn-breadcrumbs {
        padding: 0.375rem 0.75rem;
    }

    .hero-breadcrumbs .cgn-breadcrumb-list {
        gap: 0.25rem;
        font-size: var(--cgn-fs-2xs);
    }

    .hero-breadcrumbs .cgn-breadcrumb-link,
    .hero-breadcrumbs .cgn-breadcrumb-current {
        font-size: var(--cgn-fs-2xs);
    }

    .hero-breadcrumbs .cgn-breadcrumb-separator {
        font-size: var(--cgn-fs-2xs);
    }

    .post-meta {
        line-height: 1.5;
    }

    .reviewed-by-link {
        line-height: 1.5;
    }

    /* Mobile byline improvements */
    .byline-item {
        gap: 0.375rem;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .byline-label {
        font-weight: 600;
        color: var(--text-color);
    }

    .byline-value {
        font-weight: 400;
    }

    body .post-container {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0.75rem 1rem; /* Consistent mobile margin */
    }

    .main-content {
        width: 100%;
        max-width: 100%;
    }

    /* Sidebar hidden on mobile - handled above in consolidated media query */

    .mobile-sticky-cta {
        display: block; /* Show mobile CTA */
    }

    .recent-posts-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .social-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 0; /* Remove padding since post-container now handles margins */
    }

    .social-button {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        padding: 1rem 1.5rem;
        min-height: 48px; /* Better touch target */
        border-radius: calc(var(--border-radius) * 1.5);
    }

    .social-button svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .content-section {
        padding: 0; /* Remove padding since post-container now handles margins */
        margin-bottom: 1.5rem;
    }

    .article-content {
        line-height: 1.8;
    }

    .article-content h1 {
        font-size: 1.9em;
        line-height: 1.3;
        margin-top: 1.5em;
    }

    .article-content h2 {
        line-height: 1.4;
        margin-top: 1.8em;
        margin-bottom: 0.8em;
    }

    .article-content h3 {
        line-height: 1.4;
        margin-top: 1.6em;
    }

    .article-content p {
        margin-bottom: 1.6em;
        text-align: left; /* Better for mobile reading */
    }

    .article-content blockquote {
        padding: 1em 1.5em;
        margin: 1.5em 0;
    }

}

@media (max-width: 480px) {
    /* Ensure all elements fit within viewport */
    * {
        box-sizing: border-box;
    }

    .hero-container {
        padding: 0 0.5rem;
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .hero-section {
        padding: 1rem 0;
        min-height: 140px;
    }

    /* Very small mobile hero breadcrumbs */
    .hero-breadcrumbs {
        top: 0.25rem;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
    }

    /* Author page hero content spacing to avoid breadcrumb overlap */
    .author-page .hero-content {
        padding-top: 3rem;
    }

    .hero-breadcrumbs .cgn-breadcrumbs {
        padding: 0.25rem 0.5rem;
        border-radius: var(--cgn-radius-lg);
        max-width: calc(100vw - 1rem);
        overflow: hidden;
    }

    .hero-breadcrumbs .cgn-breadcrumb-list {
        gap: 0.125rem;
        font-size: var(--cgn-fs-2xs);
    }

    .hero-breadcrumbs .cgn-breadcrumb-link,
    .hero-breadcrumbs .cgn-breadcrumb-current {
        font-size: var(--cgn-fs-2xs);
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 150px;
    }

    .hero-breadcrumbs .cgn-breadcrumb-separator {
        font-size: var(--cgn-fs-2xs);
    }

    .post-container {
        padding: 1.5rem 0.5rem;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .hero-title {
        margin: 1.5rem 0 0.5rem 0;
        line-height: 1.3;
        letter-spacing: -0.015em;
    }

    .hero-description {
        margin-bottom: 0.625rem;
        line-height: 1.55;
    }

    .hero-section .author-section {
        margin-top: 0.75rem;
        gap: 0.375rem;
        margin-bottom: 0.625rem;
        padding: 1rem;
    }

    /* Very small mobile post meta styling */
    .post-meta {
        line-height: 1.4;
        margin-bottom: 0.375rem;
    }
    .reviewed-by-link {
        line-height: 1.4;
        margin-bottom: 0.375rem;
    }
    .byline-item {
        margin-bottom: 0.375rem;
    }

    .byline-item {
        gap: 0.375rem;
        margin-bottom: 0.5rem;
    }

    .post-meta {
        line-height: 1.4;
    }

    .reviewed-by-link {
        line-height: 1.4;
    }

    .byline-label {
        font-weight: 500;
        min-width: fit-content;
    }

    .mobile-cta-content {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .mobile-cta-button {
        width: 100%;
    }

    /* Very small screen social button improvements */
    .social-sharing-section {
        padding: 2rem 0;
    }

    .social-buttons {
        padding: 0 0.5rem;
        gap: 0.875rem;
    }

    .social-button {
        max-width: 280px;
        padding: 0.875rem 1.25rem;
    }

    /* Mobile key points adjustments */
    .key-points-list {
        padding: 1rem;
    }

    .key-point-item {
        padding-left: 1.25rem;
    }

    .hero-image {
        margin-top: 0;
    }

    /* FAQ improvements for very small screens */
    .faq-question {
        padding: 0.875rem 1rem;
        gap: 0.625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   READING PROGRESS BAR (Sidebar - Desktop Only)
   Horizontal bar above TOC that fills as user scrolls
   ======================================== */
.reading-progress-container {
    width: 100%;
    background: var(--grey-light);
    border-radius: var(--border-radius);
    overflow: hidden;
    height: 8px;
    margin-bottom: 1rem;
    border: 1px solid var(--grey-medium);
}

.reading-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--brand-color);
    transition: width 0.2s ease-out;
    box-shadow: 0 0 8px rgba(255, 139, 90, 0.4);
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .reading-progress-bar {
        transition: none;
    }
}

/* Hide progress bar on mobile and tablet */
@media (max-width: 767px) {
    .reading-progress-container {
        display: none;
    }
}

/* ========================================
   AUTHOR PAGE STYLES
   Desktop: Full hero with side-by-side layout
   Tablet (768px): Simplified hero, stacked layout
   Mobile (480px): Compact hero, centered content
   ======================================== */

/* Author Hero Section */
.author-hero-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px; /* Reduced from 200px */
    padding: 1.5rem 0; /* Reduced padding */
    margin-top: 3.5rem;
}

.author-hero-info {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 800px;
    width: 100%;
}

.author-hero-avatar {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    position: relative;
}

.author-hero-image {
    width: 120px !important;
    height: 120px !important;
    border-radius: var(--cgn-radius-circle);
    border: 4px solid var(--brand-color);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    object-fit: cover;
    background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
    transition: var(--transition-fast);
}

.author-hero-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Author Avatar Placeholder */
.author-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: white;
    font-weight: 700;
    font-size: var(--cgn-fs-3xl);
    letter-spacing: 1px;
}

.avatar-initials {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.author-hero-text {
    flex: 1;
}

.author-hero-title {
    font-size: var(--cgn-fs-3xl);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem 0; /* Reduced margin for compact hero */
    color: var(--text-color);
}

.author-hero-bio {
    font-size: var(--cgn-fs-lg);
    line-height: 1.6;
    color: var(--text-color-light);
    margin-bottom: 1rem; /* Reduced for compact design */
}

.author-hero-stats {
    display: flex;
    gap: 2rem;
}

.author-stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: var(--cgn-fs-xl);
    font-weight: 700;
    color: var(--brand-color);
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: var(--cgn-fs-sm);
    color: var(--text-color-light);
    font-weight: 500;
    margin-top: 0.25rem;
}

/* Author Content Area */
.author-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 3rem 2rem;
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: 3rem;
    align-items: start;
}

.author-main-content {
    max-width: 100%;
    width: 100%;
}

.author-posts-section {
    margin-bottom: 2rem;
}

.section-title {
    font-size: var(--cgn-fs-2xl);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2rem;
    text-align: center;
}

/* Author Posts Grid */
.author-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.author-post-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    border: 1px solid var(--grey-medium);
}

.author-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.author-post-image {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.author-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.author-post-card:hover .author-post-image img {
    transform: scale(1.05);
}

.author-post-content {
    padding: 1.5rem;
}

.author-post-title {
    margin: 0 0 0.75rem 0;
    font-size: var(--cgn-fs-lg);
    font-weight: 600;
    line-height: 1.3;
}

.author-post-title a {
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition-fast);
}

.author-post-title a:hover {
    color: var(--brand-color);
}

.author-post-excerpt {
    color: var(--text-color-light);
    font-size: var(--cgn-fs-sm);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.author-post-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--cgn-fs-xs);
    color: var(--text-color-lighter);
    font-weight: 500;
}

.meta-separator {
    color: var(--grey-dark);
}

/* Author Pagination */
.author-pagination {
    margin-top: 3rem;
    text-align: center;
}

.pagination-list {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    align-items: center;
}

.pagination-item {
    margin: 0;
}

.pagination-item a,
.pagination-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--grey-medium);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: var(--transition-fast);
}

.pagination-item a:hover {
    background: var(--brand-color);
    color: var(--white);
    border-color: var(--brand-color);
}

.pagination-item .current {
    background: var(--brand-color);
    color: var(--white);
    border-color: var(--brand-color);
}

/* Author Sidebar */
.author-sidebar {
    position: sticky;
    top: 2rem;
    height: fit-content;
    max-height: calc(100vh - 4rem);
}

.author-quick-info {
    background: var(--white);
    border: 1px solid var(--grey-medium);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
}

.author-quick-info h4 {
    margin: 0 0 1rem 0;
    font-size: var(--cgn-fs-base);
    font-weight: 600;
    color: var(--text-color);
}

.author-sidebar-avatar {
    margin-bottom: 1rem;
}

.author-sidebar-avatar img {
    border-radius: var(--cgn-radius-circle);
    border: 2px solid var(--brand-color);
}

.author-sidebar-stats {
    margin-bottom: 1rem;
}

.sidebar-stat {
    font-size: var(--cgn-fs-sm);
    color: var(--text-color-light);
}

.sidebar-stat strong {
    color: var(--brand-color);
    font-size: var(--cgn-fs-base);
}

.author-sidebar-bio {
    font-size: var(--cgn-fs-sm);
    line-height: 1.6;
    color: var(--text-color-light);
}

/* No Posts Section */
.no-posts-section {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--grey-light);
    border-radius: var(--border-radius);
    margin: 2rem 0;
}

.no-posts-section h2 {
    margin: 0 0 1rem 0;
    color: var(--text-color);
    font-size: var(--cgn-fs-xl);
}

.no-posts-section p {
    color: var(--text-color-light);
    margin-bottom: 2rem;
}

.back-to-blog-link {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--brand-color);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
}

.back-to-blog-link:hover {
    background: var(--brand-color-dark);
    transform: translateY(-1px);
}

/* Author Page Mobile Responsive Styles */
@media (max-width: 767px) {
    .author-hero-content {
        min-height: 100px; /* Even more compact on mobile */
        padding: 1rem 0;
    }

    .author-hero-info {
        flex-direction: column;
        text-align: center;
        gap: 1rem; /* Reduced gap */
    }

    .author-hero-avatar {
        width: 100px;
        height: 100px;
    }

    .author-hero-image {
        width: 100px !important;
        height: 100px !important;
        border-width: 3px; /* Slightly thinner border on mobile */
    }

    .author-avatar-placeholder {
 /* Smaller text on mobile */
    }

    .author-hero-title {
        margin-bottom: 0.5rem; /* Reduced margin */
    }

    .author-hero-bio {
        margin-bottom: 0.75rem; /* Reduced margin */
    }

    .author-hero-stats {
        justify-content: center;
        gap: 1.5rem;
    }

    .author-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1rem;
    }

    .author-posts-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .author-post-card {
        max-width: 100%;
    }

    .section-title {
        margin-bottom: 1.5rem;
    }

    .author-sidebar {
        position: static;
        order: -1;
    }

    .pagination-list {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .pagination-item a,
    .pagination-item span {
        min-width: 36px;
        height: 36px;
        font-size: var(--cgn-fs-xs);
    }
}

@media (max-width: 480px) {
    .author-hero-content {
        min-height: 80px; /* Very compact on very small screens */
        padding: 0.75rem 0;
    }

    .author-hero-info {
        gap: 0.75rem; /* Tighter spacing */
    }

    .author-hero-avatar {
        width: 80px;
        height: 80px;
    }

    .author-hero-image {
        width: 80px !important;
        height: 80px !important;
        border-width: 2px; /* Thin border on very small screens */
    }

    .author-avatar-placeholder {
 /* Even smaller text on very small screens */
    }

    .author-hero-title {
        margin-bottom: 0.5rem; /* Compact margins */
    }

    .author-hero-bio {
        margin-bottom: 0.5rem; /* Reduced margin */
    }

    .author-hero-stats {
        gap: 1rem;
    }

    .author-container {
        padding: 1.5rem 0.5rem;
    }

    .author-posts-grid {
        gap: 1rem;
    }

    .author-post-content {
        padding: 1rem;
    }

    .author-quick-info {
        padding: 1rem;
    }

    .no-posts-section {
        padding: 2rem 1rem;
    }
}

.cta-button:focus,
.mobile-cta-button:focus,
.social-button:focus,
.mobile-cta-toggle:focus {
    outline: 2px solid var(--brand-color);
    outline-offset: 2px;
}

@media print {
    .clean-sidebar,
    .mobile-sticky-cta,
    .social-sharing-section {
        display: none;
    }

    .post-container {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .hero-section {
        background: var(--white);
        color: var(--text-color);
    }

    .hero-title {
        color: var(--text-color);
    }
}

/* Force hero title color to override Elementor styles */
body.single .cgn-modern-article .hero-title,
body.single-post .hero-section .hero-title {
    color: var(--text-color);
}

/* Desktop grid layout with higher specificity */
body.single .cgn-modern-article .post-container,
body.single-post .cgn-modern-article .post-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 3rem;
    align-items: start;
    position: relative;
}

body.single .cgn-modern-article .hero-content,
body.single-post .cgn-modern-article .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

body.single .cgn-modern-article .main-content,
body.single-post .cgn-modern-article .main-content {
    grid-column: 1;
    width: 100%;
    max-width: 100%;
}

body.single .cgn-modern-article .clean-sidebar,
body.single-post .cgn-modern-article .clean-sidebar {
    grid-column: 2;
    position: sticky;
    top: var(--sidebar-sticky-offset);
    height: fit-content;
    display: block;
    width: var(--sidebar-width);
    align-self: start;
    max-height: var(--sidebar-max-height);
}

@media (min-width: 1024px) {
    body.single .cgn-modern-article .clean-sidebar,
    body.single-post .cgn-modern-article .clean-sidebar {
        display: block;
    }

    body.single .cgn-modern-article .post-container,
    body.single-post .cgn-modern-article .post-container {
        display: grid;
        grid-template-columns: 1fr 400px;
    }
}

@media (max-width: 767px) {
    body.single .cgn-modern-article .post-container,
    body.single-post .cgn-modern-article .post-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 1rem;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.single .cgn-modern-article .clean-sidebar,
    body.single-post .cgn-modern-article .clean-sidebar {
        display: none;
    }

    body.single .cgn-modern-article .main-content,
    body.single-post .cgn-modern-article .main-content {
        grid-column: 1;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    body.single .cgn-modern-article .hero-container,
    body.single-post .cgn-modern-article .hero-container {
        width: 100%;
        max-width: 100%;
        padding: 0 1rem;
    }

    body.single .cgn-modern-article .hero-content,
    body.single-post .cgn-modern-article .hero-content {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
    }

    body.single .cgn-modern-article .hero-text,
    body.single-post .cgn-modern-article .hero-text {
        width: 100%;
        max-width: 100%;
        padding: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Mobile author section adjustments */
    .author-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .author-avatar img {
        width: 64px;
        height: 64px;
    }

    .author-section {
        padding: 1.5rem;
    }

    /* Key Points Mobile Improvements */
    .key-points-heading {
        margin-bottom: 1rem;
    }

    .key-points-list {
        padding: 1.5rem;
    }

    .key-point-item {
        line-height: 1.7;
        margin-bottom: 1.25rem;
        padding-left: 1.5rem;
    }

    .key-point-item::before {
        width: 18px;
        height: 18px;
    }
}

/* Author E-E-A-T (THEME-4) */
.author-hero-role {
    margin: -0.25rem 0 0.75rem 0;
    font-size: var(--cgn-fs-base);
    font-weight: 600;
    color: var(--brand-color);
}

.author-hero-credentials {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}

.author-hero-credentials li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.4rem;
    font-size: var(--cgn-fs-base);
    line-height: 1.5;
    color: var(--text-color-light);
}

.author-hero-credentials li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--brand-color);
}

.author-hero-profiles {
    margin: 1rem 0 0 0;
    font-size: var(--cgn-fs-sm);
    color: var(--text-color-light);
}

.author-profile-link {
    color: var(--brand-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-author-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}