/*
Theme Name: Navid Magazine
Theme URI: https://wpmatcha.com/wordpress-themes/navid/
Author: WP Matcha
Author URI: https://wpmatcha.com
Description: Navid Magazine is a luxury editorial WordPress magazine theme crafted for publishers, editors, and culture journals. As a powerful news and digital magazine theme, it transforms your website into a dark, cinematic reading experience. Whether you want a focused editorial alternative to multipurpose themes like Astra or need a dedicated cultural publication layout, Navid Magazine delivers a refined aesthetic. It features an exclusive split-screen hero layout, a clean centered header, elegant serif typography, and refined gold accents. Built with SEO and core web vitals in mind, Navid Magazine delivers lightning-fast loading speeds and responsive layouts that keep readers engaged. Highly customizable and fully compatible with popular page builders like Elementor, as well as Gutenberg block libraries like Kadence Blocks and Spectra. Perfect for daily journalism, fashion editorials, creative portfolios, review sites, and modern publishing platforms.
Template: navid
Version: 1.0.5
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: navid-magazine
Tags: blog, entertainment, news, one-column, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options, translation-ready
*/

/* ==========================================================================
   Magazine Overrides for Navid
   ========================================================================== */

/* ── Base Refinements ── */
body:not(.dark-mode) {
    background-color: #fdfcfa;
}

/* Sharp editorial corners on all images */
.post-thumbnail,
.post-card,
.bento-item,
.category-card,
.wp-block-image img,
.entry-content img,
.woocommerce-product-gallery__image img {
    border-radius: 0 !important;
}

/* ── Elegant Typography Overrides ── */
h1,
h2,
h3,
h4,
h5,
h6,
.post-card-title,
.hero-title,
.site-header .logo {
    letter-spacing: -0.01em;
}

.site-header .logo {
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: clamp(20px, 3vw, 32px);
}

/* ── Refined Hairline Borders ── */
.site-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body:not(.dark-mode) .site-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* ── Feed Layout: Clean newspaper style ── */
.feed-layout-newspaper .post-card {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

.feed-layout-newspaper .post-card-body {
    padding: 0 !important;
}

/* ── Category Pills: Magazine gold accent ── */
.post-card-tag {
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 9px !important;
    font-weight: 700;
}




/* ── Subscribe Button: Magazine Gold ── */
.header-subscribe-btn {
    background: var(--terracotta, #c9a96e) !important;
    color: #fff !important;
    border-color: var(--terracotta, #c9a96e) !important;
}

.header-subscribe-btn:hover {
    background: #b8963f !important;
    border-color: #b8963f !important;
}

/* ==========================================================================
   Split Hero Layout (native, no Pro required)
   ========================================================================== */

.hero-split {
    display: flex;
    width: 100%;
    height: calc(100vh - 80px);
    height: 80svh;
    min-height: 560px;
    overflow: hidden;
    position: relative;
}

/* No flex resizing — just overlay dimming on the non-hovered panel */
.hero-split-panel {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 60px 48px;
    text-decoration: none;
    overflow: hidden;
    will-change: opacity;
}

/* Darken inactive panel smoothly — no layout shift */
.hero-split:hover .hero-split-panel:not(:hover) .hero-split-overlay {
    background: rgba(0, 0, 0, 0.72);
}

.hero-split-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.hero-split-panel:hover .hero-split-bg {
    transform: scale(1.04);
}

.hero-split-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.18) 55%,
            rgba(0, 0, 0, 0.0) 100%);
    will-change: background;
    transition: background 0.5s ease;
    z-index: 2;
}

/* Content — both panels always left-aligned */
.hero-split-content {
    position: relative;
    z-index: 3;
    color: #fff;
    width: 100%;
    max-width: 460px;
    text-align: center;
    will-change: transform;
    transform: translateY(10px);
    transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-split-panel:hover .hero-split-content {
    transform: translateY(0);
}

/* Category label — plain text, no pill */
.hero-split-cat {
    display: inline-block;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--sage);
    background: none;
    border: none;
    padding: 0;
}

/* Title */
.hero-split-title {
    font-family: var(--font-serif);
    font-size: clamp(26px, 4vw, 70px);
    font-weight: 400;
    line-height: 1.18;
    margin: 0 0 16px;
    color: #fff;
}

.hero-split-title em {
    font-style: italic;
}

/* Excerpt — fades in on hover */
.hero-split-excerpt {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 18px;
    will-change: opacity, transform;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease 0.08s, transform 0.4s ease 0.08s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-split-panel:hover .hero-split-excerpt {
    opacity: 1;
    transform: translateY(0);
}

/* Footer: author · date  [Read →] */
.hero-split-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    flex-wrap: nowrap;
}

.hero-split-author {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    white-space: nowrap;
}

.hero-split-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}

.hero-split-sep {
    opacity: 0.4;
}

.hero-split-date {
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

/* CTA — slides in from bottom-right on hover */
.hero-split-btn-inline {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    padding-bottom: 2px;
    will-change: opacity, transform;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease 0.12s, transform 0.35s ease 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
}

.hero-split-panel:hover .hero-split-btn-inline {
    opacity: 1;
    transform: translateY(0);
}

/* Vertical divider — hidden */
.hero-split-divider {
    display: none;
}

/* ── Mobile ─────────────────────────────── */
@media (max-width: 768px) {
    .hero-split {
        flex-direction: column;
        height: 100svh;
    }

    .hero-split-panel {
        padding: 32px 24px;
    }

    .hero-split-excerpt,
    .hero-split-btn-inline {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-split-content {
        transform: translateY(0) !important;
        max-width: 100%;
    }

    .hero-split-divider {
        top: 50%;
        bottom: auto;
        left: 8%;
        right: 8%;
        width: auto;
        height: 1px;
        transform: translateY(-50%);
    }
}

/* ==========================================================================
   Colourful Season Spread Slider
   ========================================================================== */

.cs-section {
    padding: 60px 0;
    background: transparent;
}

.cs-spread-wrapper {
    position: relative;
    width: 100%;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    gap: 1.5vw;
    padding: 3vw;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);
    aspect-ratio: 1.6 / 1;
    /* Keep proportions like a magazine spread */
    min-height: 600px;
}

body.dark-mode .cs-spread-wrapper {
    background: #1a1a1a;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

/* ── Static Backgrounds ── */
.cs-bg-red {
    grid-column: 1 / 5;
    grid-row: 3 / 8;
    /* Restored to original proportion */
    background: var(--cs-color-1, var(--navid-accent, #900C1C));
}

.cs-bg-black {
    grid-column: 7 / 13;
    grid-row: 4 / 13;
    background: var(--cs-color-bg, #111);
}

.cs-bg-yellow {
    grid-column: 6 / 10;
    grid-row: 6 / 10;
    background: var(--cs-color-2, #F1C40F);
    z-index: 2;
}

/* ── Headers ── */
.cs-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cs-header-left {
    grid-column: 1 / 7;
    grid-row: 1 / 2;
    color: #111;
}

.cs-header-right {
    grid-column: 7 / 13;
    grid-row: 1 / 2;
    justify-content: space-between;
    color: #111;
}

body.dark-mode .cs-header {
    color: #fff;
}

body.dark-mode .cs-title a,
body.dark-mode .cs-kicker {
    color: #fff;
}

body.dark-mode .cs-title-overlay {
    display: none !important;
}

.cs-dots {
    letter-spacing: 3px;
    font-weight: normal;
}

/* ── Dynamic Fading Slides ── */
.cs-slide-data {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    gap: 1.5vw;
    padding: 3vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
    z-index: 5;
}

.cs-slide-data.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Elements inside data slide */
.cs-img-left {
    grid-column: 1 / 4;
    grid-row: 3 / 7;
    transform: translate(1.5vw, 1.5vw);
    z-index: 3;
}

.cs-img-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.cs-vertical-text {
    grid-column: 5 / 6;
    grid-row: 4 / 7;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    color: #666;
    display: flex;
    align-items: center;
}

.cs-title-wrap {
    grid-column: 2 / 6;
    grid-row: 7 / 13;
    /* Extend to align with the bottom of the black box */
    padding-top: 2vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    height: 100%;
    z-index: 6;
}

.cs-kicker {
    font-size: 10px;
    font-weight: bold;
    color: var(--cs-color-1, var(--navid-accent, #900C1C));
    letter-spacing: 2px;
    margin-bottom: 1vw;
}

.cs-title a {
    font-family: inherit;
    font-size: clamp(32px, 4vw, 56px);
    /* Increased size for bolder impact */
    line-height: 1.1;
    font-weight: 700;
    /* Bold typography */
    color: #000;
    text-decoration: none;
    letter-spacing: -1px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-read-more {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--charcoal, #111);
    text-decoration: none;
    padding-bottom: 4px;
    position: relative;
    transition: color 0.3s ease;
    margin-top: auto;
    /* Push to the absolute bottom of the grid row */
}

.cs-read-more::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--cs-color-1, var(--navid-accent, #900C1C));
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.cs-read-more:hover {
    color: var(--cs-color-1, var(--navid-accent, #900C1C));
}

.cs-read-more:hover::after,
.cs-slide-item:hover .cs-read-more::after {
    transform: scaleX(0);
    transform-origin: right;
}

/* ── White Text Overlay (Clipped to Red Box) ── */
.cs-title-overlay {
    grid-column: 2 / 6;
    grid-row: 7 / 13;
    padding-top: 2vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    height: 100%;
    z-index: 7;
    /* Above the black title-wrap (z-index: 6) */
    pointer-events: none;
    /* Clip to 0 height initially as fallback. JS will calculate the exact clip-path. */
    clip-path: inset(0 26% 100% 0);
}

.cs-title-overlay .cs-kicker {
    color: rgba(255, 255, 255, 0.7);
}

.cs-title-overlay .cs-title a {
    color: #fff;
}

.cs-img-top-right {
    grid-column: 10 / 13;
    grid-row: 2 / 5;
    z-index: 3;
    position: relative;
}

.cs-img-top-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-top-right-decor {
    position: absolute;
    bottom: -3vw;
    left: -8vw;
    width: 12vw;
    font-size: 11px;
    color: #888;
    background: #fff;
    padding: 10px;
}

body.dark-mode .cs-top-right-decor {
    background: #1a1a1a;
    color: #aaa;
}

.cs-text-bottom-right {
    grid-column: 7 / 12;
    grid-row: 11 / 13;
    color: #aaa;
    font-size: 11px;
    line-height: 1.5;
    padding-right: 2vw;
}

.cs-cursive-title {
    grid-column: 7 / 13;
    /* Span to the edge so it has maximum room */
    grid-row: 9 / 10;
    font-family: 'Dancing Script', cursive;
    font-size: clamp(60px, 7vw, 100px);
    /* Specific size requested by user */
    color: #fff;
    z-index: 10;
    transform: translateY(-1vw);
    text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
}

/* ── Center Sliding Track ── */
.cs-center-slider-viewport {
    grid-column: 6 / 10;
    grid-row: 6 / 10;
    transform: translate(1.5vw, -1.5vw);
    z-index: 4;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.cs-center-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.cs-center-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.cs-center-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Controls ── */
.cs-slider-controls {
    grid-column: 11 / 13;
    grid-row: 6 / 7;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 15px;
}

.cs-slider-controls button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.cs-slider-controls button:hover {
    background: #fff;
    color: #111;
}

.cs-slider-controls button svg {
    width: 16px;
    height: 16px;
}

.cs-pagination {
    font-size: 12px;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ── Decorative ── */
.cs-decor-lines-1 {
    grid-column: 4 / 5;
    grid-row: 4 / 5;
    font-size: 16px;
    letter-spacing: 4px;
    font-weight: 800;
    transform: rotate(90deg);
    color: #111;
}

.cs-decor-lines-2 {
    grid-column: 12 / 13;
    grid-row: 7 / 8;
    font-size: 16px;
    letter-spacing: 4px;
    font-weight: 800;
    transform: rotate(90deg);
    color: #fff;
}

/* ── Mobile Fallbacks ── */
@media (max-width: 991px) {
    .cs-spread-wrapper {
        display: flex;
        flex-direction: column;
        aspect-ratio: auto;
        min-height: auto;
    }

    .cs-bg-red,
    .cs-bg-black,
    .cs-bg-yellow,
    .cs-decor-lines-1,
    .cs-decor-lines-2,
    .cs-header {
        display: none;
    }

    .cs-slide-data {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 20px;
        opacity: 1;
        pointer-events: auto;
    }

    /* We hide the complex grid on mobile for now */
    .cs-slide-data:not(.is-active) {
        display: none;
    }

    .cs-img-left,
    .cs-img-top-right,
    .cs-vertical-text,
    .cs-cursive-title,
    .cs-text-bottom-right {
        display: none;
    }

    .cs-center-slider-viewport {
        transform: none;
        height: 300px;
        margin-bottom: 20px;
    }

    .cs-slider-controls {
        flex-direction: row;
        color: #111;
    }

    .cs-slider-controls button {
        border-color: #111;
        color: #111;
    }
}

/* ==========================================================================
   Magazine Marquee Override
   ========================================================================== */

.marquee-magazine-mode {
    background: #111;
    border-top: none;
    border-bottom: none;
    padding: 0;
    overflow: hidden;
}

.marquee-magazine-mode .marquee-strip {
    display: flex;
    overflow: hidden;
    width: 100%;
}

.marquee-magazine-mode .mm-track {
    display: flex;
    animation: marquee-scroll 80s linear infinite;
    /* Pause on hover */
}

.marquee-magazine-mode .mm-track:hover {
    animation-play-state: paused;
}

.mm-spread {
    flex: 0 0 auto;
    width: 700px;
    /* Wider: Two pages of 350px */
    height: 420px;
    /* Taller to fit big text */
    display: flex;
    text-decoration: none;
    position: relative;
    border-right: 1px solid #000;
    transition: transform 0.3s ease;
    background: #fff;
    white-space: normal;
    /* Override parent's nowrap to allow text to wrap */
    /* Create a spine shadow effect in the middle */
    box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.05);
}

.mm-spread:hover {
    transform: translateY(-5px);
}

.mm-page-left {
    width: 50%;
    height: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Spine shadow on the left page */
.mm-page-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 15px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1));
}

.mm-page-right {
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    position: relative;
}

/* Inner shadow on the right page to match spine */
.mm-page-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 15px;
    background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.2));
}

.mm-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-top: 1px solid var(--charcoal);
    padding-top: 10px;
}

.mm-kicker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cs-color-1, var(--navid-accent, #900C1C));
}

.mm-page-num {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 400;
    color: var(--charcoal);
    font-style: italic;
}

.mm-title {
    color: var(--charcoal);
    font-family: var(--font-serif);
    /* Magazine serif font */
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 400;
    /* Lighter weight for big elegant text */
    line-height: 1.1;
    margin-bottom: 20px;
    /* Removed overflow hidden/line clamp to allow big text */
}

.mm-excerpt {
    color: var(--charcoal-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px 0;
    /* Removed line clamp */
}

.mm-read-more {
    margin-top: auto;
    /* Pushes it to the bottom of the page if there's space */
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--charcoal);
    padding-bottom: 4px;
    position: relative;
    transition: color 0.3s ease;
}

.mm-read-more::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--cs-color-1, var(--navid-accent, #900C1C));
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.mm-spread:hover .mm-read-more {
    color: var(--cs-color-1, var(--navid-accent, #900C1C));
}

.mm-spread:hover .mm-read-more::after {
    transform: scaleX(0);
    transform-origin: right;
}

/* ==========================================================================
   Magazine Feed Layout (Offset Frame Editorial)
   ========================================================================== */

.feed-layout-magazine {
    display: grid;
    grid-template-columns: 1fr;
    /* Force 1-column list view overriding parent theme settings */
    gap: 80px;
}

.feed-layout-magazine .post-card {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    /* Prevent parent theme from clipping the offset box */
}

.feed-layout-magazine .post-card>a {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 100%;
    /* Match container width */
    margin: 0 auto;
    background: transparent;
    position: relative;
    text-decoration: none;
    overflow: visible !important;
    /* Prevent clipping */
    gap: 80px;
    /* Perfect spacing between image and text */
}

/* Hide image wrapper completely if it doesn't contain an image */
.feed-layout-magazine .post-card-img-wrap:not(:has(img)) {
    display: none;
}

.feed-layout-magazine .post-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.feed-layout-magazine .post-card-img-wrap {
    flex: 0 0 45%;
    aspect-ratio: 4/5;
    position: relative;
    border-radius: 0;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    /* Must be visible and unmasked to show offset block */
}

/* The Offset Background Block */
.feed-layout-magazine .post-card-img-wrap::before {
    content: '';
    position: absolute;
    top: 25px;
    left: -25px;
    width: 100%;
    height: 100%;
    background: var(--cs-color-1, var(--navid-accent, #e3b018));
    /* Accent color */
    z-index: 0;
    transition: transform 0.4s ease;
    border-radius: inherit;
}

.feed-layout-magazine .post-card-img-wrap img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.feed-layout-magazine .post-card>a:hover .post-card-img-wrap::before {
    transform: translate(-10px, 10px);
}

/* Typography Overrides */
.feed-layout-magazine .post-card-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--cs-color-1, var(--navid-accent, #900C1C));
    margin-bottom: 20px;
    display: inline-block;
}

.feed-layout-magazine .post-card-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--charcoal);
    margin-bottom: 20px;
}

.feed-layout-magazine .post-card-snippet {
    color: var(--charcoal-muted);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 35px;
}

.feed-layout-magazine .post-card-meta {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--charcoal-muted);
}

.feed-layout-magazine .post-card-meta img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 15px;
}

/* Alternating Layout */
.feed-layout-magazine .post-card:nth-child(even)>a {
    flex-direction: row-reverse;
}

.feed-layout-magazine .post-card:nth-child(even) .post-card-img-wrap::before {
    left: auto;
    right: -25px;
    /* Offset to the right for even posts */
}

.feed-layout-magazine .post-card:nth-child(even)>a:hover .post-card-img-wrap::before {
    transform: translate(10px, 10px);
}

@media (max-width: 768px) {

    .feed-layout-magazine .post-card>a,
    .feed-layout-magazine .post-card:nth-child(even)>a {
        flex-direction: column-reverse;
        gap: 40px;
    }

    .feed-layout-magazine .post-card-img-wrap {
        width: 90%;
        margin: 0 auto;
    }
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .mm-spread {
        width: 500px;
        height: 300px;
    }

    .mm-page-left {
        padding: 20px;
    }

    .mm-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .mm-excerpt {
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Dark Mode Adjustments for Magazine Spread */
body.dark-mode .mm-spread {
    background: #161616;
    border-right-color: #000;
}

body.dark-mode .mm-page-left {
    border-right-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .mm-page-header {
    border-top-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .mm-page-left::after {
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.8));
}

body.dark-mode .mm-page-right::before {
    background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.8));
}

/* Dark Mode Adjustments for Magazine Feed */
body.dark-mode .feed-layout-magazine .post-card-title {
    color: #fff;
}

/* Default Marquee Speed Override */
.marquee-track {
    animation-duration: 200s !important;
}


/* Hero Split Button Underline Animation Override */
.hero-split-btn-inline {
    border-bottom: none !important;
    position: relative;
}

.hero-split-btn-inline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.hero-split-panel:hover .hero-split-btn-inline::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* ==========================================================================
   Gutenberg Layout Fixes for Classic Theme
   ========================================================================== */
/* Fix Gutenberg Columns stacking on desktop due to missing layout constraints */
.wp-block-columns.is-layout-flex {
    flex-wrap: nowrap;
    gap: 2em;
}

@media (max-width: 781px) {
    .wp-block-columns.is-layout-flex:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap;
    }
}

/* Fix Query Loop Grid stacking on desktop */
ul.wp-block-post-template.is-layout-grid {
    display: grid;
    gap: 1.25em;
}

ul.wp-block-post-template.is-layout-grid.columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

ul.wp-block-post-template.is-layout-grid.columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

ul.wp-block-post-template.is-layout-grid.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 781px) {

    ul.wp-block-post-template.is-layout-grid.columns-2,
    ul.wp-block-post-template.is-layout-grid.columns-3,
    ul.wp-block-post-template.is-layout-grid.columns-4 {
        grid-template-columns: 1fr;
    }
}

/* Fix .single-body aggressive resets breaking Gutenberg blocks */
.single-body ul.wp-block-post-template {
    padding-left: 0;
    margin-bottom: 0;
}

.single-body ul.wp-block-post-template li {
    margin-bottom: 0;
    padding: 0;
    border: none;
}

.single-body .wp-block-image.is-style-rounded img {
    border-radius: 9999px !important;
}

/* Fix Heading color inheritance inside colored Group blocks */
.single-body .has-text-color h1,
.single-body .has-text-color h2,
.single-body .has-text-color h3,
.single-body .has-text-color h4,
.single-body .has-text-color h5,
.single-body .has-text-color h6,
.single-body .has-text-color p {
    color: inherit;
}

### Bug Fixes - **Colourful Season Slider Missing Fix:** Resolved an issue where the "Colourful Season Slider"(`editorial`) would not appear on the homepage or in the Customizer Layout Manager if a user had previously saved their layout settings before updating the theme. The layout is now correctly appended to existing Customizer saves and is draggable via the Layout Manager.
/* ==========================================================================
   Magazine Feed Layout (Offset Frame Editorial) - Copied from Pro for Child Theme Default
   ========================================================================== */

.layout-main .bento-grid.feed-layout-magazine {
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
}

.feed-layout-magazine .post-card {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    overflow: visible !important;
    -webkit-mask-image: none !important;
}

.feed-layout-magazine .post-card>a {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: transparent;
    position: relative;
    text-decoration: none;
    overflow: visible !important;
    gap: 80px;
}

.feed-layout-magazine .post-card-img-wrap:not(:has(img)) {
    display: none;
}

.feed-layout-magazine .post-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.feed-layout-magazine .post-card-img-wrap {
    flex: 0 0 45%;
    aspect-ratio: 4/5;
    position: relative;
    border-radius: 0;
    overflow: visible !important;
    -webkit-mask-image: none !important;
}

.feed-layout-magazine .post-card-img-wrap::before {
    content: '';
    position: absolute;
    top: 25px;
    left: -25px;
    width: 100%;
    height: 100%;
    background: var(--cs-color-1, var(--navid-accent, #e3b018));
    z-index: 0;
    transition: transform 0.4s ease;
    border-radius: inherit;
}

.feed-layout-magazine .post-card-img-wrap img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.feed-layout-magazine .post-card>a:hover .post-card-img-wrap::before {
    transform: translate(-10px, 10px);
}

.feed-layout-magazine .post-card-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--cs-color-1, var(--navid-accent, #900C1C));
    margin-bottom: 20px;
    display: inline-block;
}

.feed-layout-magazine .post-card-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--charcoal);
    margin-bottom: 20px;
}

.feed-layout-magazine .post-card-snippet {
    color: var(--charcoal-muted);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 35px;
}

.feed-layout-magazine .post-card-meta {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--charcoal-muted);
}

.feed-layout-magazine .post-card-meta img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 15px;
}

.feed-layout-magazine .post-card:nth-child(even)>a {
    flex-direction: row-reverse;
}

.feed-layout-magazine .post-card:nth-child(even) .post-card-img-wrap::before {
    left: auto;
    right: -25px;
}

.feed-layout-magazine .post-card:nth-child(even)>a:hover .post-card-img-wrap::before {
    transform: translate(10px, 10px);
}

@media (max-width: 768px) {

    .feed-layout-magazine .post-card>a,
    .feed-layout-magazine .post-card:nth-child(even)>a {
        flex-direction: column-reverse;
        gap: 40px;
    }

    .feed-layout-magazine .post-card-img-wrap {
        width: 90%;
        margin: 0 auto;
    }
}

/* ── Block Pattern Contrast & Inheritance Fixes ── */
.has-text-color h1,
.has-text-color h2,
.has-text-color h3,
.has-text-color h4,
.has-text-color h5,
.has-text-color h6,
.has-text-color p {
    color: inherit;
}

.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
    color: inherit;
    border-color: currentColor;
}