/* Legacy Basic Section Support - Kept for backward compatibility */

/* Background images - will be dynamically set via ACF */
.image-section#connect-hero {
    background-image: url('./images/connect/connect.hero.container.bg.png');
}

.image-section#homepage-hero {
    background-image: url('./images/home/home-hero-container-bg.png');
}

.image-section#vision-hero {
    background-image: url('./images/vision/vision.hero.container.bg.png');
}

.image-section#enterprise-hero {
    background-image: url('./images/scale/scale.hero.container.bg.png');
}

.image-section#jungle-hero {
    background-image: url('./images/jungle/jungle.hero.container.bg.png');
}

/* Two-Column Layout System */
.layout-left-column {
    /* Intentionally left empty for background elements */
}

.layout-content-column {
    max-width: calc(var(--layout-content-column-percentage));
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 120px);
}

/* Hero Section - New Layout */
.hero-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-color: #000;
    margin-top: -80px;
    margin-bottom: 80px !important;
    padding-top: 80px;
}

.hero-section-background {
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: calc(100% + 80px);
    overflow: hidden;
    z-index: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.hero-section-overlay {
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease 0.5s;
}

.hero-section-overlay.active {
    opacity: 1;
}

.hero-section-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: var(--layout-left-column-width) 1fr;
    gap: var(--layout-gap);
    min-height: 100vh;
    padding: 0 var(--layout-padding-desktop);
    align-items: center;
    overflow: visible;
}

.hero-content-column {
    max-width: calc(var(--layout-content-column-percentage));
    padding: 2rem 0;
    overflow: visible;
}

.hero-section h1 {
    font-family: var(--font-accent);
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 0.98;
    margin-bottom: 0.5em;
    padding: 0.15em 0 0.25em 0;
    background: linear-gradient(to right, var(--color-orange-bright), var(--color-pink-bright));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 1.3s, transform 0.8s ease 1.3s;
    overflow: visible;
    display: block;
}

.hero-section h1.active {
    opacity: 1;
    transform: translateY(0);
}

.hero-section p {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2em;
    max-width: 90%;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 1.6s, transform 0.8s ease 1.6s;
}

.hero-section p.active {
    opacity: 1;
    transform: translateY(0);
}

.scroll-arrow {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--color-pink-bright);
    text-decoration: none;
    animation: bounce 2s infinite;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.8s ease 2s;
}

.scroll-arrow.active {
    opacity: 1;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Mobile Hero Adjustments */
@media (max-width: 768px) {
    .hero-section-content {
        grid-template-columns: 1fr;
        padding: 0 var(--layout-padding-mobile);
        align-items: center;
        text-align: left;
    }
    
    .hero-content-column {
        max-width: 100%;
    }
    
    /* Mobile video scaling - ensure center focus */
    .hero-video {
        /* Scale up video to ensure full coverage on mobile */
        min-width: 120%;
        min-height: 120%;
        /* Keep centered positioning */
        transform: translate(-50%, -50%);
        /* Ensure proper object fitting */
        object-fit: cover;
        object-position: center center;
    }
}

/* Safe area adjustments for hero sections */
@supports (padding-top: env(safe-area-inset-top)) {
    .hero-section {
        margin-top: calc(-80px - env(safe-area-inset-top));
        margin-bottom: 80px !important;
        padding-top: calc(80px + env(safe-area-inset-top));
    }
    
    .hero-section-background {
        top: calc(-80px - env(safe-area-inset-top));
        height: calc(100% + 80px + env(safe-area-inset-top));
    }
    
    .hero-video {
        /* Ensure video covers the extended height on devices with safe areas */
        min-height: calc(100% + env(safe-area-inset-top));
    }
    
    .hero-section-overlay {
        top: calc(-80px - env(safe-area-inset-top));
    }
}

/* Content Sections - Updated Typography */
.content-section {
    position: relative;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem var(--layout-padding-desktop) 4rem var(--layout-padding-desktop);
    background: inherit;
}

.content-section-container {
    display: grid;
    grid-template-columns: var(--layout-left-column-width) 1fr;
    gap: var(--layout-gap);
    max-width: 100%;
}

.content-section-content {
    max-width: calc(var(--layout-content-column-percentage));
}

/* Mobile Content Adjustments */
@media (max-width: 768px) {
    .content-section {
        padding: 4.5rem var(--layout-padding-mobile) 3rem var(--layout-padding-mobile);
    }
    
    .content-section-container {
        grid-template-columns: 1fr;
    }
    
    .content-section-content {
        max-width: 100%;
    }
}

/* Basic Section Styling */
.content-section.grey {
    background: var(--color-grey-light);
}   

.content-section.pink {
    background: var(--color-pink-bright);
}

.content-section.orange {
    background: var(--color-orange-bright);
}

.content-section.turquoise, .app-section {
    background: var(--color-turquoise-bright);
}

.content-section.footer-dark {
    background: var(--color-footer-dark);
}

/* Typography - Updated to use accent fonts */
.content-section h1 {
    font-family: var(--font-accent);
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin: 0 0 1em 0;
}

/* WordPress content headings - ensure proper font styling */
.content-section .entry-title,
.content-section .entry-content h1,
.content-section h1.entry-title {
    font-family: var(--font-accent) !important;
    font-weight: 700 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    line-height: 1.1 !important;
    margin: 0 0 1em 0 !important;
}

/* WordPress entry header - add proper top spacing */
.content-section .entry-header {
    margin-top: 0 !important;
    padding-top: 3rem !important;
    position: relative;
}

/* Mobile adjustment for entry header */
@media (max-width: 768px) {
    .content-section .entry-header {
        padding-top: 2.25rem !important;
    }
}

/* Specific mission section clearance */
#homepage-mission {
    clear: both;
    margin-top: 0;
    position: relative;
}

.content-section h2 {
    font-family: var(--font-accent);
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    margin: 0 0 0.8em 0;
}

.content-section h3 {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.3;
    margin: 0 0 0.6em 0;
}

.content-section p {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.6;
    margin: 0 0 1.5em 0;
    max-width: 65ch;
}

/* Special gradient headlines */
.content-section.grey h2.gradient-headline,
.content-section.grey .entry-title,
.content-section.grey .entry-content h1,
.content-section.grey h1.entry-title {
    background: linear-gradient(to right, var(--color-orange-bright), var(--color-pink-bright));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Basic Section Colors */
.content-section.grey h1, .content-section.grey h2, .content-section.grey h3, .content-section.grey p {
    color: var(--color-grey-dark);
}

.content-section.pink h1, .content-section.pink h2, .content-section.pink h3, .content-section.pink p {
    color: var(--color-pink-light);
}   

/* Override h1 in pink sections to be white for visibility */
.content-section.pink h1 {
    color: white !important;
}   

/* Ultra-specific overrides for h1 elements in pink sections - Force white color */
.content-section.pink h1,
.content-section.pink .entry-title,
.content-section.pink h1.entry-title,
.content-section.pink article h1,
.content-section.pink article h1.entry-title,
.content-section.pink article.page h1,
.content-section.pink article.page h1.entry-title,
.content-section.pink article.page header h1,
.content-section.pink article.page header h1.entry-title,
.content-section.pink article.page header.entry-header h1,
.content-section.pink article.page header.entry-header h1.entry-title,
.content-section.pink .entry-content h1,
.content-section.pink .hentry h1,
.content-section.pink .post h1 {
    color: white !important;
    -webkit-text-fill-color: white !important;
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

.content-section.orange h1, .content-section.orange h2, .content-section.orange h3, .content-section.orange p {
    color: var(--color-orange-light);
}   

.content-section.turquoise h1, .content-section.turquoise h2, .content-section.turquoise h3, .content-section.turquoise p {
    color: var(--color-turquoise-dark);
}

.content-section.footer-dark h1, .content-section.footer-dark h2, .content-section.footer-dark h3, .content-section.footer-dark p {
    color: rgba(255, 255, 255, 0.9);
}

/* Beta Section - Restructured with Video and Info Segments */
.beta-section {
    position: relative;
    overflow: hidden;
}

/* Video Segment */
.beta-video-segment {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-color: #000;
}

.beta-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.beta-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.beta-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 150, 136, 0.7); /* Dark turquoise with 70% opacity */
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.beta-video-overlay.active {
    opacity: 1;
}

.beta-video-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: var(--layout-left-column-width) 1fr;
    gap: var(--layout-gap);
    min-height: 100vh;
    padding: 0 var(--layout-padding-desktop);
    align-items: center;
}

/* Large Forge Title */
.beta-forge-title {
    font-family: var(--font-accent);
    font-weight: 100; /* Thin weight */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: clamp(10rem, 30vw, 100rem); /* Much larger max value for proper scaling */
    line-height: 0.85; /* Tighter line height for bigger appearance */
    color: white;
    margin: -2rem 0 0 0; /* Position higher with negative top margin */
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: opacity 1s ease, transform 1s ease;
    text-align: left; /* Left align to match button positioning */
    width: 100%;
    display: block;
}

.beta-forge-title.motion-in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Enlarged Coming Soon Badge */
.beta-coming-soon-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 1.5rem 0.8rem; /* Very tight horizontal padding */
    border-radius: 3rem;
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* 3x larger font */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    margin-top: clamp(2rem, 8vw, 8rem); /* Responsive spacing that scales with title */
    margin-left: 0; /* Align with left edge of Forge title */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    white-space: nowrap; /* Prevent text wrapping */
}

.beta-coming-soon-badge.motion-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Info Segment */
.beta-info-segment {
    position: relative;
    background: var(--color-turquoise-bright);
    padding: 6rem 0;
    transform: translateY(0);
    transition: transform 0.8s ease;
    z-index: 3;
}

.beta-info-segment.slide-active {
    /* Slide effect handled by scroll position */
}

.beta-info-container {
    display: grid;
    grid-template-columns: var(--layout-left-column-width) 1fr;
    gap: var(--layout-gap);
    padding: 0 var(--layout-padding-desktop);
}

/* Main Description - Three Column Wide */
.beta-main-description {
    margin-bottom: 4rem;
}

.beta-main-description p {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: clamp(1.375rem, 3vw, 2rem);
    line-height: 1.4;
    color: var(--color-turquoise-dark);
    margin: 0;
    max-width: 100%; /* Full width for three-column description */
}

/* Beta Features Grid - Three Column Layout */
.beta-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 4rem;
}

.beta-feature-column h3 {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.3;
    color: var(--color-turquoise-dark);
    margin-bottom: 1rem;
}

.beta-feature-column p {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.5;
    color: var(--color-turquoise-dark);
    margin: 0;
}

/* Beta Signup Section */
.beta-signup-section {
    border-top: 2px solid rgba(0, 105, 95, 0.2);
    padding-top: 3rem;
}

.beta-signup-section h2 {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.3;
    color: var(--color-turquoise-dark);
    margin-bottom: 1rem;
}

.beta-signup-section p {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.5;
    color: var(--color-turquoise-dark);
    margin-bottom: 2rem;
}

/* Mobile Beta Adjustments */
@media (max-width: 768px) {
    .beta-video-content {
        grid-template-columns: 1fr;
        padding: 0 var(--layout-padding-mobile);
    }
    
    .beta-info-container {
        grid-template-columns: 1fr;
        padding: 0 var(--layout-padding-mobile);
    }
    
    .beta-features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .beta-forge-title {
        font-size: clamp(5rem, 25vw, 40rem); /* Bigger mobile max for proper scaling */
        margin-top: -1rem; /* Less negative margin on mobile */
        text-align: left; /* Maintain left alignment on mobile */
    }
    
    .beta-coming-soon-badge {
        padding: 1rem 0.6rem; /* Very tight on mobile */
        font-size: clamp(1rem, 4vw, 1.25rem);
        margin-top: clamp(1.5rem, 6vw, 4rem); /* Responsive mobile spacing */
        margin-left: 0; /* Maintain left alignment on mobile */
    }
    
    /* Mobile video scaling */
    .beta-video {
        min-width: 120%;
        min-height: 120%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        object-position: center center;
    }
}

/* Teaser Section - Two Column Layout */
.teaser-section {
    position: relative;
    background: var(--color-orange-bright);
    padding: 6rem var(--layout-padding-desktop); /* Increased padding for better vertical balance */
}

.teaser-section-container {
    display: grid;
    grid-template-columns: var(--layout-left-column-width) 1fr;
    gap: var(--layout-gap);
}

.teaser-section-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.teaser-column h3 {
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: clamp(1.375rem, 2.8vw, 1.75rem); /* Controlled sizing, slightly smaller than pink h2 */
    line-height: 1.3;
    color: var(--color-orange-light);
    margin-bottom: 1rem;
}

.teaser-column p {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.125rem); /* Same size as beta feature columns */
    line-height: 1.5;
    color: var(--color-orange-light);
    margin: 0 0 1.5em 0;
}

/* Teaser Links in Orange Section */
.teaser-column .teaser-link-with-arrow {
    margin-top: 1rem;
}

.teaser-column .teaser-link-with-arrow a {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    color: var(--color-orange-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.teaser-column .teaser-link-with-arrow a:after {
    content: '→';
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.teaser-column .teaser-link-with-arrow a:hover:after {
    transform: translateX(4px);
}

/* Pink Section H2 Adjustment */
.content-section.pink h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem); /* Slightly smaller than default h2 */
}

/* Pink Section Vision Link Styling */
.content-section.pink h3.teaser-link-with-arrow::after {
    display: none; /* Remove the original bouncing arrow */
}

.content-section.pink .teaser-link-with-arrow a {
    font-family: var(--font-accent);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.content-section.pink .teaser-link-with-arrow a:after {
    content: '→';
    font-size: 1.2em;
    transition: transform 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.content-section.pink .teaser-link-with-arrow a:hover:after {
    transform: translateX(4px);
}

/* Mobile Teaser Adjustments */
@media (max-width: 768px) {
    .teaser-section {
        padding: 4.5rem var(--layout-padding-mobile); /* Increased mobile padding too */
    }
    
    .teaser-section-container {
        grid-template-columns: 1fr;
    }
    
    .teaser-section-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Jungle Page Typography Optimizations */
#jungle-content .content-section-content > div p:first-of-type {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: clamp(1.375rem, 3vw, 2rem);
    line-height: 1.4;
}

/* Jungle Post Entry Headers */
.jungle-post .entry-header {
    margin-bottom: 0.5rem; /* Reduced spacing between header and meta */
}

.jungle-post .entry-title,
.jungle-post .entry-title h3,
.jungle-post h3.entry-title {
    font-family: var(--font-accent) !important;
    font-weight: 600 !important;
    font-size: clamp(1.5rem, 2.7vw, 1.875rem) !important; /* 1.5x bigger headlines */
    line-height: 1.6 !important; /* Increased line height to prevent descender cutoff */
    margin: 0 0 0.5rem 0 !important;
    padding: 0.2rem 0 0.4rem 0 !important; /* Top and bottom padding to prevent cutoff */
    overflow: visible !important; /* Ensure descenders are visible */
}

.jungle-post .entry-title a,
.jungle-post .entry-title h3 a,
.jungle-post h3.entry-title a,
.jungle-post .entry-header .entry-title a {
    color: var(--color-grey-dark) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    display: block !important;
    background: none !important; /* Reset any background gradients */
    -webkit-background-clip: initial !important; /* Reset gradient clipping */
    background-clip: initial !important;
    -webkit-text-fill-color: var(--color-grey-dark) !important; /* Override gradient text */
}

.jungle-post .entry-title a:hover,
.jungle-post .entry-title h3 a:hover,
.jungle-post h3.entry-title a:hover,
.jungle-post .entry-header .entry-title a:hover {
    color: rgba(51, 51, 51, 0.7) !important; /* 70% opacity of grey-dark */
    -webkit-text-fill-color: rgba(51, 51, 51, 0.7) !important; /* Override gradient text on hover */
}

/* Jungle Post Entry Meta - WordPress specific */
.jungle-post .entry-meta,
.jungle-post .entry-meta *,
.jungle-post .posted-on,
.jungle-post .byline,
.jungle-post .entry-date,
.jungle-post .author.vcard {
    font-family: var(--font-primary) !important;
    font-weight: 300 !important;
    font-size: clamp(1rem, 1.8vw, 1.125rem) !important; /* Same as entry content */
    line-height: 1.6 !important;
    color: var(--color-grey-dark) !important;
}

.jungle-post .entry-meta {
    margin-bottom: 0.75rem !important;
}

/* Jungle Post Entry Content - WordPress specific */
.jungle-post .entry-content,
.jungle-post .entry-content *,
.jungle-post .entry-content p,
.jungle-post .entry-summary,
.jungle-post .entry-summary p {
    font-family: var(--font-primary) !important;
    font-weight: 300 !important;
    font-size: clamp(1rem, 1.8vw, 1.125rem) !important; /* Matching meta size */
    line-height: 1.6 !important;
    color: var(--color-grey-dark) !important;
    max-width: 65ch !important;
}

.jungle-post .entry-content {
    margin: 0 !important;
}

.jungle-post .entry-content p,
.jungle-post .entry-summary p {
    margin: 0 0 1.5em 0 !important;
}

/* WordPress article elements */
.jungle-post article,
.jungle-post .post,
.jungle-post .hentry {
    margin-bottom: 3rem;
}

/* Ensure all blog post text uses primary font */
#jungle-content .entry-content,
#jungle-content .entry-summary,
#jungle-content .entry-excerpt {
    font-family: var(--font-primary) !important;
}

/* Legacy app-section support for backward compatibility */
.app-section {
    min-height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    text-align: left;
}

/* ===== SINGLE POST STYLES ===== */

/* Single Post Hero Section Styles */
#single-post-hero .hero-content-column {
    max-width: none; /* Allow full width for single posts */
}

/* Post Meta in Hero Section */
.post-meta {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.5;
    margin: 1rem 0 1.5rem 0;
    color: inherit; /* Inherit color from parent section */
}

.post-meta .entry-date,
.post-meta .post-author,
.post-meta .post-categories {
    display: inline;
    margin-right: 1rem;
}

.post-meta .post-categories a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.post-meta .post-categories a:hover {
    opacity: 0.7;
}

/* Post Intro Text in Hero Section */
.post-intro {
    font-family: var(--font-accent) !important;
    font-weight: 300 !important;
    font-size: clamp(1.125rem, 2.2vw, 1.375rem) !important;
    line-height: 1.5 !important;
    margin: 1.5rem 0 0 0 !important;
    max-width: 60ch !important;
    color: inherit !important;
}

/* Single Post Content Area */
#single-post-content .entry-content {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.6;
    color: var(--color-grey-dark);
    max-width: 65ch;
}

#single-post-content .entry-content p {
    margin: 0 0 1.5em 0;
}

#single-post-content .entry-content h1,
#single-post-content .entry-content h2,
#single-post-content .entry-content h3,
#single-post-content .entry-content h4,
#single-post-content .entry-content h5,
#single-post-content .entry-content h6 {
    font-family: var(--font-accent);
    font-weight: 600;
    color: var(--color-grey-dark);
    margin: 2em 0 1em 0;
    line-height: 1.3;
}

#single-post-content .entry-content h2 {
    font-size: clamp(1.5rem, 2.8vw, 1.875rem);
}

#single-post-content .entry-content h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

/* Blockquote Styling */
#single-post-content .entry-content blockquote {
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.2vw, 2.25rem); /* Slightly larger than h2 */
    line-height: 1.2;
    background: linear-gradient(to right, var(--color-pink-bright), var(--color-orange-bright));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 3rem 0;
    padding: 2rem 0;
    text-align: left;
    position: relative;
}

#single-post-content .entry-content blockquote p {
    margin: 0 !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    background: inherit !important;
    -webkit-background-clip: inherit !important;
    background-clip: inherit !important;
    -webkit-text-fill-color: inherit !important;
    color: transparent !important;
    max-width: none !important;
}



/* Post Tags */
.entry-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(51, 51, 51, 0.1);
}

.post-tags {
    font-family: var(--font-primary);
    font-weight: 300;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.tags-list a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: rgba(51, 51, 51, 0.05);
    color: var(--color-grey-dark);
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.tags-list a:hover {
    background-color: rgba(51, 51, 51, 0.1);
}

/* Post Navigation */
.post-navigation {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(51, 51, 51, 0.1);
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    font-family: var(--font-primary);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    padding: 1.5rem;
    background-color: rgba(51, 51, 51, 0.02);
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
    background-color: rgba(51, 51, 51, 0.05);
}

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

.post-navigation a {
    color: var(--color-grey-dark);
    text-decoration: none;
    display: block;
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-navigation .nav-title {
    display: block;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.4;
}

/* Page Links for Multi-page Posts */
.page-links {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: rgba(51, 51, 51, 0.02);
    border-radius: 8px;
    font-family: var(--font-primary);
    text-align: center;
}

.page-links a,
.page-links > span {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    background-color: rgba(51, 51, 51, 0.05);
    color: var(--color-grey-dark);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.page-links a:hover {
    background-color: rgba(51, 51, 51, 0.1);
}

.page-links > span {
    background-color: var(--color-grey-dark);
    color: white;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .post-meta .entry-date,
    .post-meta .post-author,
    .post-meta .post-categories {
        display: block;
        margin: 0 0 0.5rem 0;
    }
    
    .post-navigation .nav-links {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .post-navigation .nav-next {
        text-align: left;
    }
    
    .tags-list {
        justify-content: center;
    }
    
    .page-links a,
    .page-links > span {
        margin: 0.25rem;
    }
}