/* ==========================================================================
   LAYER 1: BASELINE VARIABLES (Light Mode Defaults)
   ========================================================================== */

:root {
    /* 1. SURFACES */
    --bg-0: #ffffff;
    --bg-1: #f7f9fb;
    --bg-2: #eef2f6;
    --bg-inverse: #1a1a1a;    
    
    /* 2. TEXT */
    --text-0: #1a1a1a;
    --text-1: #5d6778;
    --text-2: #8b96a8;
    --text-on-accent: #ffffff;
    --text-inverse: #ffffff;
    
    /* 3. BORDERS */
    --border: #e1e5ea;
    
    /* 4. ACCENT (Default Ghost Purple) */
    --accent: #6b46c1;
    --accent-contrast: #ffffff;
    --ghost-accent-color: #6b46c1;

    /* 5. PHYSICS */
    --radius-main: 12px;
    --radius-button: 8px;
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

    /* 6. Z-INDEX SCALE (Portal Protection) */
    --z-back: -1;
    --z-normal: 1;
    --z-sticky: 100;
    --z-modal: 1000;
    --z-portal: 9999;
}

/* ==========================================================================
   LAYER 2: PALETTE OVERRIDES (Cascade-Based)
   ========================================================================== */

/* 1. Arctic Mint */
html[data-palette*="Arctic"] {
    --accent: #6ee7b7;
    --accent-contrast: #064e3b;
    --ghost-accent-color: #6ee7b7;
}

/* 2. Solar Ember */
html[data-palette*="Solar"] {
    --accent: #f59e0b;
    --accent-contrast: #451a03;
    --ghost-accent-color: #f59e0b;
}

/* 3. Midnight Neon (Dark Palette) */
html[data-palette*="Midnight"] {
    --bg-0: #0f172a;
    --bg-1: #1e293b;
    --bg-2: #334155;
    --bg-inverse: #f8fafc;
    
    --text-0: #f8fafc;
    --text-1: #cbd5e1;
    --text-2: #94a3b8;
    --text-inverse: #0f172a;
    
    --border: #334155;
    --accent: #bef264;
    --accent-contrast: #0f172a;
    --ghost-accent-color: #bef264;
}

/* 4. Paper & Ink (High Contrast) */
html[data-palette*="Paper"] {
    --bg-0: #ffffff;
    --bg-1: #f5f5f5;
    --bg-2: #e5e5e5;
    --bg-inverse: #000000;
    
    --text-0: #000000;
    --text-1: #000000;
    --text-2: #404040;
    --text-inverse: #ffffff;
    
    --border: #000000;
    --accent: #000000;
    --accent-contrast: #ffffff;
    --ghost-accent-color: #000000;
}

/* 5. Clay Studio (Warm Earthy) */
html[data-palette*="Clay"] {
    --bg-0: #fcf6f0;
    --bg-1: #f7e6d4;
    --bg-2: #eaddcf;
    --bg-inverse: #78350f;
    
    --text-0: #78350f;
    --text-1: #92400e;
    --text-2: #b45309;
    
    --border: #e7d5c0;
    --accent: #d97706;
    --accent-contrast: #ffffff;
    --ghost-accent-color: #d97706;
}

/* 6. Electric Orchid (Purple) */
html[data-palette*="Electric"] {
    --bg-0: #f5f3ff;
    --bg-1: #ede9fe;
    --bg-2: #ddd6fe;
    
    --text-0: #4c1d95;
    --text-1: #5b21b6;
    
    --border: #ddd6fe;
    --accent: #7c3aed;
    --accent-contrast: #ffffff;
    --ghost-accent-color: #7c3aed;
}

/* 7. Forest Signal (Green) */
html[data-palette*="Forest"] {
    --bg-0: #f0fdf4;
    --bg-1: #dcfce7;
    
    --text-0: #064e3b;
    --text-1: #166534;
    
    --border: #bbf7d0;
    --accent: #166534;
    --accent-contrast: #ffffff;
    --ghost-accent-color: #166534;
}

/* 8. Carbon Blue (Slate) */
html[data-palette*="Carbon"] {
    --bg-0: #f8fafc;
    --bg-1: #f1f5f9;
    
    --text-0: #0f172a;
    --text-1: #334155;
    
    --border: #cbd5e1;
    --accent: #0f172a;
    --accent-contrast: #ffffff;
    --ghost-accent-color: #0f172a;
}

/* 9. Deep Velvet (Dark Purple) */
html[data-palette*="Deep"] {
    --bg-0: #2e1065;
    --bg-1: #4c1d95;
    --bg-2: #5b21b6;
    --bg-inverse: #ffffff;
    
    --text-0: #ffffff;
    --text-1: #e9d5ff;
    --text-2: #c4b5fd;
    --text-inverse: #2e1065;
    
    --border: #5b21b6;
    --accent: #8b5cf6;
    --accent-contrast: #ffffff;
    --ghost-accent-color: #8b5cf6;
}

/* 10. Slate & Sand (Neutral) */
html[data-palette*="Slate"] {
    --bg-0: #fafaf9;
    --bg-1: #f5f5f4;
    
    --text-0: #292524;
    --text-1: #57534e;
    
    --border: #e7e5e4;
    --accent: #57534e;
    --accent-contrast: #ffffff;
    --ghost-accent-color: #57534e;
}

/* ==========================================================================
   MODE LAYER (Highest Authority - Must Be Last)
   ========================================================================== */

/* ==========================================================================
   MASTER MODE ENGINE (Dark Mode Refined)
   ========================================================================== */

body.scheme-Dark {
    /* SURFACES: Richer, slightly lighter blacks for depth */
    --bg-0: #13151a !important;   /* Main Canvas (Was #0f1115) */
    --bg-1: #1e2128 !important;   /* Cards/Secondary (Lighter for contrast) */
    --bg-2: #2a2e37 !important;   /* Tertiary/Inputs */
    --bg-inverse: #ffffff !important;

    /* TEXT: High readability */
    --text-0: #ffffff !important;
    --text-1: #e2e8f0 !important; /* Brighter body text (Zinc-200) */
    --text-2: #94a3b8 !important; /* Muted text (Zinc-400) */
    --text-on-accent: #ffffff !important;
    --text-inverse: #13151a !important;

    /* BORDERS: Visible separation */
    --border: #2e333d !important; /* Visible against the dark BG */

    /* PHYSICS: Deep shadows for elevation */
    --shadow-card: 0 4px 25px -4px rgba(0, 0, 0, 0.6) !important;
}

/* Mid Mode removed - simplifying theme architecture */

/* Midnight Mode Override (Wins over Palettes) */
body.scheme-Midnight {
    --bg-0: #0f172a;
    --bg-1: #1e293b;
    --bg-2: #334155;
    --bg-inverse: #ffffff;
    --text-0: #f1f5f9;
    --text-1: #cbd5e1;
    --text-2: #94a3b8;
    --text-on-accent: #ffffff;
    --text-inverse: #0f172a;
    --border: #475569;
}

/* System Auto Support */
@media (prefers-color-scheme: dark) {
    body.scheme-System {
        /* SURFACES: Richer, slightly lighter blacks for depth */
        --bg-0: #13151a !important;   /* Main Canvas */
        --bg-1: #1e2128 !important;   /* Cards/Secondary */
        --bg-2: #2a2e37 !important;   /* Tertiary/Inputs */
        --bg-inverse: #ffffff !important;

        /* TEXT: High readability */
        --text-0: #ffffff !important;
        --text-1: #e2e8f0 !important; /* Brighter body text */
        --text-2: #94a3b8 !important; /* Muted text */
        --text-on-accent: #ffffff !important;
        --text-inverse: #13151a !important;

        /* BORDERS: Visible separation */
        --border: #2e333d !important;

        /* PHYSICS: Deep shadows for elevation */
        --shadow-card: 0 4px 25px -4px rgba(0, 0, 0, 0.6) !important;
    }
}

/* ==========================================================================
   FUNNEL ENGINE (Conversion Tools)
   ========================================================================== */

/* --- PER-PAGE LANDING MODE (Tag Based) --- */
/* Target any page with the tag '#landing' */
/* Ghost automatically adds the class 'tag-hash-landing' to the body */

body.tag-hash-landing .nav-links,
body.tag-hash-landing .nav-list,
body.tag-hash-landing .gh-head-menu,
body.tag-hash-landing .gh-head-actions {
    display: none !important;
}

/* Optional: Hide the footer too if you want a true squeeze page */
body.tag-hash-landing .calana-footer {
    display: none !important;
}


/* --- 2. ANNOUNCEMENT BAR (Page Content) --- */
.funnel-announcement-bar {
    background: var(--accent);
    width: 100%;
    position: relative;
    z-index: var(--z-portal);
    padding: 12px 5%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: var(--accent-contrast) !important; /* Forces correct text color */
    text-align: center;
    line-height: 1.4;
}

.announcement-inner {
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
}

/* Make sure the text from the page is accessible and inline */
.funnel-announcement-bar p {
    margin: 0;
    padding: 0;
    display: inline-block;
    color: var(--accent-contrast) !important;
    font-weight: 600;
    font-size: 0.95rem;
}

.funnel-announcement-bar a {
    color: var(--accent-contrast) !important;
    text-decoration: underline;
    font-weight: 700;
    margin-left: 5px;
}

.funnel-announcement-bar span {
    color: var(--accent-contrast) !important;
}

/* Hide large elements from the page content to keep the bar slim */
.funnel-announcement-bar h1,
.funnel-announcement-bar h2,
.funnel-announcement-bar h3,
.funnel-announcement-bar img,
.funnel-announcement-bar hr,
.funnel-announcement-bar blockquote {
    display: none !important;
}

/* --- Announcement Bar Variants --- */

/* Style: Sticky (Stays at top while scrolling) */
.funnel-announcement-bar.style-Sticky {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 0;
    z-index: var(--z-portal); /* Ensure it stays above the Header */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Style: Static (Scrolls away) */
.funnel-announcement-bar.style-Static {
    position: relative;
    z-index: var(--z-portal);
}

/* Fix for Sticky: Ensure it works if body has overflow */
body {
    overflow-x: clip; /* Prefer clip over hidden for sticky support */
}


/* --- 3. CTA TEXT REPLACEMENT (The CSS Trick) --- */
/* Since we can't change HTML text easily, we use CSS to swap the label visually */

/* Target the "Subscribe" span inside forms */
html[data-cta="Download"] .subscribe-text,
html[data-cta="Get Access"] .subscribe-text,
html[data-cta="Join Now"] .subscribe-text {
    font-size: 0 !important; /* Hide original text */
}

/* Inject new text based on selection */
html[data-cta="Download"] .subscribe-text::before {
    content: "Download Now";
    font-size: 1rem;
    visibility: visible;
}

html[data-cta="Get Access"] .subscribe-text::before {
    content: "Get Access";
    font-size: 1rem;
    visibility: visible;
}

html[data-cta="Start Free"] .subscribe-text::before {
    content: "Start for Free";
    font-size: 1rem;
    visibility: visible;
}

html[data-cta="Join Now"] .subscribe-text::before {
    content: "Join Now";
    font-size: 1rem;
    visibility: visible;
}

/* Also target the Header "Sign Up" button if possible */
html[data-cta="Download"] .gh-head-btn.gh-btn-subscribe { font-size: 0; }
html[data-cta="Download"] .gh-head-btn.gh-btn-subscribe::before { content: "Download"; font-size: 1rem; }

/* ==========================================================================
   THEME VARIABLES (Signature Style)
   ========================================================================== */

:root {
    /* Dimensions & Physics */
    --radius-main: 12px;           /* Modern, friendly corners */
    --radius-button: 8px;          /* Slightly tighter buttons */
    --border-width: 1px;
    --border-style: solid;
    
    /* Shadows (High Quality 'Apple-style' diffusion) */
    --shadow-card: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Typography Weights */
    --font-weight-head: 700;
    --letter-spacing-head: -0.01em; /* Slight tightening for modern feel */
    
    /* Transitions */
    --transition-speed: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode adjustments now handled by Layer 3 cascade at top of file */

/* ==========================================================================
   ARTICLE LAYOUTS
   ========================================================================== */

/* 1. CLASSIC (Default)
   Standard centered column. No special overrides needed as it uses default styles.
*/

/* 2. FULL FEATURE (Immersive) */
[class*="post-layout-Full"] .article-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    border-radius: 0;
    height: 60vh; /* Tall hero */
    object-fit: cover;
}
[class*="post-layout-Full"] .article-header {
    text-align: center;
    max-width: 900px;
    margin: 40px auto;
}

/* 3. MINIMAL (Text Focused) */
.post-layout-Minimal .article-image {
    display: none; /* Hide the top feature image */
}
.post-layout-Minimal .article-header {
    text-align: center;
    max-width: 800px;
    margin: 80px auto 40px auto; /* Extra top spacing since image is gone */
}
.post-layout-Minimal .article-title {
    font-size: 3.5rem;
    margin-bottom: 20px;
}
.post-layout-Minimal .article-excerpt {
    font-size: 1.3rem;
    color: var(--text-2);
    font-family: Georgia, serif;
}

/* ==========================================================================
   NAVBAR CTA BUTTON
   ========================================================================== */

.gh-head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: var(--radius-button);
    font-weight: 600;
    font-size: 1.4rem; /* Ghost uses rem sizing, usually 1.4-1.6 */
    text-decoration: none;
    transition: all var(--transition-speed);
    margin-left: 15px;
    line-height: 1;
}

/* Primary Style (The CTA) */
.gh-head-btn.gh-primary-btn {
    background: var(--accent);
    color: var(--accent-contrast);
    border: 1px solid transparent;
}
.gh-head-btn.gh-primary-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Adjust for Cloud Nav */
html[data-nav="Cloud"] .gh-head-btn {
    padding: 6px 16px;
    font-size: 1.3rem;
}

/* Mobile Adjustment (Hide text, keep icon if needed, or hide entirely) */
@media (max-width: 700px) {
    .gh-head-btn {
        display: none; /* Often better to hide on mobile menu to save space */
    }
}

/* ==========================================================================
   SCHEME TOKENS (Validated)
   ========================================================================== */

/* ==========================================================================
   3. FONT TOKENS (The Voice)
   ========================================================================== */
/* Note: You will need to import these fonts in default.hbs later */

[data-font="Modernist"] { --font-head: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; }
[data-font="Publisher"] { --font-head: 'Merriweather', serif; --font-body: 'Roboto', sans-serif; }
[data-font="Novelist"] { --font-head: 'Crimson Text', serif; --font-body: 'Crimson Text', serif; }
[data-font="Swiss"] { --font-head: 'Helvetica Neue', Arial, sans-serif; --font-body: 'Courier New', monospace; }
[data-font="Coder"] { --font-head: 'Fira Code', monospace; --font-body: 'Fira Code', monospace; }
[data-font="Elegant"] { --font-head: 'Playfair Display', serif; --font-body: 'Lato', sans-serif; }
[data-font="Humanist"] { --font-head: 'Nunito', sans-serif; --font-body: 'Nunito', sans-serif; }
[data-font="Industry"] { --font-head: 'Oswald', sans-serif; --font-body: 'Inter', sans-serif; }
[data-font="Script"] { --font-head: 'Dancing Script', cursive; --font-body: 'Lora', serif; }
[data-font="Geometric"] { --font-head: 'Jost', sans-serif; --font-body: 'Jost', sans-serif; }

/* ==========================================================================
   COMPONENT IMPORTS
   ========================================================================== */
@import "components/navigation.css";

/* ==========================================================================
   1. RESET & VARIABLES (THEME ENGINE)
   ========================================================================== */

.skip-link {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
    top: 20px; left: 20px; width: auto; height: auto; clip: auto;
    background: #fff; padding: 15px 25px; z-index: var(--z-portal);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15); font-weight: 700; color: #000;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; transition: all var(--transition-speed, 0.2s) ease; }
img { max-width: 100%; height: auto; display: block; }

/* Old variable blocks removed - now using clean 3-layer cascade architecture at top of file */

/* Old @media blocks removed - now using clean cascade architecture */

body { 
    font-family: var(--font-body, var(--font-family)); 
    font-size: 18px; 
    line-height: 1.65; 
    color: var(--text-1); 
    background: var(--bg-0); 
    font-weight: 450;
}

/* Typography */
h1, h2, h3 { font-family: var(--font-head, inherit); font-weight: var(--font-weight-head, 800); letter-spacing: var(--letter-spacing-head, -0.02em); margin-top: 0; color: var(--text-0); }
body.font-Modern\ Sans { --font-family: 'Inter', sans-serif; }
body.font-Classic\ Serif { --font-family: 'Merriweather', serif; }
body.font-Technical\ Mono { --font-family: 'JetBrains Mono', monospace; }

/* Post Cards */
.post-card {
    background: var(--bg-0);
    border-radius: var(--radius-main);
    overflow: hidden;
    transition: all var(--transition-speed, 0.2s) ease;
}

/* Design toggles */
body.style-radius-Sharp { --border-radius: 0px; }
body.style-radius-Soft  { --border-radius: 8px; }
body.style-radius-Round { --border-radius: 20px; }

body.style-card-Minimal { --card-shadow: none; }
body.style-card-Dashed  { --card-shadow: none; } 
body.style-card-Dotted  { --card-shadow: none; }

/* Apply shadow variable to Shadow style */
body.style-card-Shadow .post-card,
body.style-card-Shadow.layout-nav-floating .calana-header {
    box-shadow: var(--card-shadow);
}

body.style-card-Minimal .post-card, 
body.style-card-Minimal.layout-nav-floating .calana-header { border: var(--border-width, 1px) var(--border-style, solid) var(--border-color-override, var(--border)); }
body.style-card-Dashed .post-card,
body.style-card-Dashed.layout-nav-floating .calana-header { border: var(--border-width, 2px) dashed var(--text-2); }
body.style-card-Dotted .post-card,
body.style-card-Dotted.layout-nav-floating .calana-header { border: var(--border-width, 3px) dotted var(--text-2); }

/* Buttons & inputs */
a:hover { color: var(--ghost-accent-color); opacity: 0.8; }
a:focus { 
    color: var(--ghost-accent-color); 
    outline: 2px solid var(--ghost-accent-color);
    outline-offset: 2px;
}

/* Force Contrast on All Buttons */
.gh-head-btn,
.gh-btn,
button,
input[type="submit"] {
    color: var(--accent-contrast) !important;
}
.gh-head-btn span {
    color: var(--accent-contrast) !important;
}

/* --- BUTTON RESET (Fixes Cutoff) --- */
.gh-head-btn,
.gh-btn,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto !important; /* Allow growing */
    min-height: 44px; /* Standard touch target */
    padding: 10px 24px !important;
    line-height: 1.2 !important; /* Prevent vertical clipping */
    box-sizing: border-box;
    overflow: visible !important; /* Never clip text */
}
/* Fix the text span specifically */
.gh-head-btn span,
.gh-btn span {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
}
.gh-btn {
    background: var(--accent);
    color: var(--accent-contrast) !important;
    border: none;
    padding: 8px 20px;
    border-radius: var(--radius-main, 6px);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    outline-offset: 2px;
}
.gh-btn:focus, button[type="submit"]:focus { 
    outline: 3px solid var(--ghost-accent-color); 
    outline-offset: 2px;
    opacity: 0.9;
}

input[type="email"], input[type="text"] {
    background: var(--bg-0);
    color: var(--text-0);
    border: var(--border-width, 1px) var(--border-style, solid) var(--border-color-override, var(--border)); 
    border-radius: var(--radius-main);
    padding: 10px 15px; font-family: inherit; font-size: 1rem;
}
input[type="email"]:focus, input[type="text"]:focus {
    outline: 3px solid var(--ghost-accent-color);
    outline-offset: 2px;
    border-color: var(--ghost-accent-color);
}

.nav-item.nav-current a { color: var(--ghost-accent-color); font-weight: 700; }
blockquote { border-left: 4px solid var(--ghost-accent-color); }


/* ==========================================================================
   3. LAYOUT ENGINE
   ========================================================================== */
.calana-shell {
    display: grid; min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header" "main" "footer";
}
.calana-header { grid-area: header; background: var(--bg-0); padding: 20px; border-bottom: 1px solid var(--border); z-index: var(--z-sticky); transition: background 0.3s; }
.calana-main { grid-area: main; padding: var(--shell-gap); width: 100%; max-width: var(--max-width); margin: 0 auto; }
.calana-footer { grid-area: footer; }
body.is-sticky .calana-header { position: sticky; top: 0; }

.nav-brand img { max-height: 45px; width: auto; display: block; }
.footer-logo-img { max-height: 60px; width: auto; display: block; margin-bottom: 15px; }

/* Sidebar layouts */
@media (min-width: 1024px) {
    body.layout-sidebar-left .calana-shell { 
        grid-template-columns: var(--sidebar-width) 1fr; 
        grid-template-rows: 1fr auto; 
        grid-template-areas: "header main" "footer footer"; 
    }
    body.layout-sidebar-right .calana-shell { 
        grid-template-columns: 1fr var(--sidebar-width); 
        grid-template-rows: 1fr auto; 
        grid-template-areas: "main header" "footer footer"; 
    }
    
    body[class*="layout-sidebar"] .calana-header { 
        height: 100%; min-height: 100vh; border-bottom: none; overflow-y: auto; 
    }
    body.layout-sidebar-left .calana-header { border-right: 1px solid var(--border); }
    body.layout-sidebar-right .calana-header { border-left: 1px solid var(--border); }
}

/* Floating nav */
body.layout-nav-floating .calana-shell { padding-top: 80px; }
body.layout-nav-floating .calana-header {
    position: fixed; top: 20px; 
    left: 0; right: 0; margin: 0 auto; 
    width: 90%; max-width: 1000px;
    background: var(--bg-0); 
    opacity: var(--opacity-glass, 0.95); 
    backdrop-filter: blur(12px);
    border-radius: var(--radius-main);
    box-shadow: var(--shadow-card);
    border: var(--border-width, 1px) var(--border-style, solid) var(--border-color-override, var(--border));
}

/* Light-colored shadow for floating navs in dark schemes */
body.scheme-dark.layout-nav-floating .calana-header {
    box-shadow: 
        0 4px 30px rgba(255, 255, 255, 0.2),
        0 8px 60px rgba(255, 255, 255, 0.15),
        0 12px 90px rgba(255, 255, 255, 0.1);
}

/* Mid Mode floating nav removed */

/* Double Layer Float Override */
body.nav-double-layer.layout-nav-floating .calana-shell {
    padding-top: 140px;
}

body.nav-double-layer.layout-nav-floating .calana-header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

/* Layer 1: Top Bar (Logo Only) */
body.nav-double-layer.layout-nav-floating .calana-nav {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

body.nav-double-layer.layout-nav-floating .nav-brand {
    background: var(--bg-0);
    border-radius: var(--radius-button) var(--radius-button) 0 var(--radius-button);
    border: var(--border-width, 1px) var(--border-style, solid) var(--border-color-override, var(--border));
    border-bottom: none;
    padding: 24px 300px;
    text-align: center;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.9);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Layer 2: Tab Bar (Navigation Links) - Hanging Layout */
body.nav-double-layer.layout-nav-floating .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    width: auto;
    min-width: 300px;
    background: var(--accent);
    border-radius: 0 0 var(--radius-button) var(--radius-button);
    padding: 16px 40px;
    box-shadow: var(--shadow-card);
    z-index: -1;
    min-height: 60px;
    display: flex;
    align-items: center;
}

body.nav-double-layer.layout-nav-floating .nav-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    margin: 0;
    width: 100%;
}

body.nav-double-layer.layout-nav-floating .nav-item a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

body.nav-double-layer.layout-nav-floating .nav-item a:hover {
    color: var(--text-on-accent);
}

body.nav-double-layer.layout-nav-floating .nav-item.nav-current a {
    color: var(--text-on-accent);
    font-weight: 600;
}

/* Hide actions for this preset */
body.nav-double-layer.layout-nav-floating .nav-actions {
    display: none;
}

/* Classic + Ticker preset removed as requested */

/* Centered Logo preset removed as requested */

/* Simple Float - More padding */
body.nav-single-float.layout-nav-floating .calana-header {
    padding: 25px 40px;
}

/* Simple Float - More spacing between nav and content */
body.nav-single-float.layout-nav-floating .calana-shell {
    padding-top: 120px;
}

/* Floating Subscribe preset removed as requested */

/* Feature Nav removed as requested */

/* Bottom Navigation Layouts - Proper centering and positioning */

/* Bottom Classic - Everything centered like regular Classic */
body.layout-nav-bottom-docked .calana-nav {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

body.layout-nav-bottom-docked .nav-brand {
    order: 2;
}

body.layout-nav-bottom-docked .nav-links {
    order: 1;
}

body.layout-nav-bottom-docked .nav-actions {
    order: 3;
}

/* Bottom Floating - Like Simple Float but on bottom */
body.layout-nav-bottom-floating .calana-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}



/* Bottom Subscribe and Bottom Minimal presets removed as requested */

/* Bottom docked nav */
body.layout-nav-bottom-docked .calana-shell { 
    padding-bottom: 80px; 
    grid-template-areas: "main" "footer" "header";
}
body.layout-nav-bottom-docked .calana-header {
    position: fixed; bottom: 0; 
    left: 0; right: 0; 
    width: 100%; 
    background: var(--bg-0); 
    border-top: var(--border-width, 1px) var(--border-style, solid) var(--border-color-override, var(--border));
    border-bottom: none;
    box-shadow: var(--shadow-card);
    z-index: var(--z-modal);
}

/* Bottom floating nav */
body.layout-nav-bottom-floating .calana-shell { padding-bottom: 100px; }
body.layout-nav-bottom-floating .calana-header {
    position: fixed; bottom: 20px; 
    left: 0; right: 0; margin: 0 auto; 
    width: 90%; max-width: 1000px;
    background: var(--bg-0); 
    opacity: var(--opacity-glass, 0.95); 
    backdrop-filter: blur(12px);
    border-radius: var(--radius-main);
    box-shadow: var(--shadow-card);
    border: var(--border-width, 1px) var(--border-style, solid) var(--border-color-override, var(--border));
}


/* ==========================================================================
   4. NAVIGATION COMPONENTS
   ========================================================================== */
.calana-nav { display: flex; gap: 20px; width: 100%; height: 100%; }
.nav-brand { font-weight: 800; font-size: 1.3rem; flex-shrink: 0; }
.nav-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 24px; }
.nav-actions { display: flex; align-items: center; gap: 15px; }
.calana-burger { display: none; background: none; border: none; cursor: pointer; padding: 10px; margin-right: -10px; color: var(--text-0); }
.burger-line { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; }

body[class*="layout-nav-top"] .calana-nav, 
body[class*="layout-nav-floating"] .calana-nav { flex-direction: row; align-items: center; justify-content: space-between; }
body[class*="layout-sidebar"] .calana-nav { flex-direction: column; align-items: flex-start; }
body[class*="layout-sidebar"] .nav-list { flex-direction: column; gap: 10px; margin-top: 40px; }
body[class*="layout-sidebar"] .nav-actions { margin-top: auto; width: 100%; flex-direction: column; align-items: flex-start; }

/* Hero search */
.hero-search-wrapper { 
    margin-top: 30px; margin-bottom: 40px; 
    display: flex; justify-content: center; position: relative; z-index: var(--z-normal); 
}
.hero-search-trigger {
    width: 100%; max-width: 400px;
    padding: 12px 20px;
    border: var(--border-width, 1px) var(--border-style, solid) var(--border-color-override, var(--border));
    border-radius: var(--radius-main);
    background: var(--bg-0);
    color: var(--text-2);
    cursor: text;
    display: flex; align-items: center; gap: 10px;
    transition: all var(--transition-speed, 0.2s);
}
.hero-search-trigger:hover { border-color: var(--ghost-accent-color); }
.hero-search-icon { opacity: 0.7; width: 20px; height: 20px; }

/* Mobile menu */
@media (max-width: 1023px) {
    .calana-shell { display: block; }
    
    /* Default mobile header positioning */
    .calana-header { 
        width: 100% !important; top: auto !important; left: auto !important; 
        transform: none !important; border-radius: 0 !important; margin: 0 !important;
        background: var(--bg-0) !important;
        border-bottom: 1px solid var(--border) !important;
    }
    
    /* Allow sticky positioning on mobile when enabled */
    body.is-sticky .calana-header {
        position: sticky !important;
        top: 0 !important;
        z-index: var(--z-modal);
    }
    
    /* Non-sticky mobile header */
    body:not(.is-sticky) .calana-header {
        position: relative !important;
    }
    
    /* Remove floating nav padding on mobile */
    body.layout-nav-floating .calana-shell {
        padding-top: 0 !important;
    }
    
    /* Double Layer Float - Hide logo capsule on mobile, keep hamburger only */
    body.nav-double-layer.layout-nav-floating .nav-brand {
        display: none !important;
    }

    body.nav-double-layer.layout-nav-floating .nav-links {
        display: none !important;
    }
    
    /* Override for mobile menu when open */
    body.nav-double-layer.layout-nav-floating.is-mobile-menu-open .nav-links {
        display: flex !important;
    }

    body.nav-double-layer.layout-nav-floating .calana-nav {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 0 20px !important;
        min-height: 60px !important;
    }
    
    .calana-nav { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; }
    .calana-burger { display: block; z-index: var(--z-modal); }

    .nav-links {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: var(--bg-0);
        z-index: var(--z-modal); flex-direction: column; justify-content: center; align-items: center;
    }
    .nav-list { 
        flex-direction: column; align-items: center; gap: 30px; 
        font-size: 1.5rem; font-weight: 700; 
        color: var(--text-0) !important;
    }
    body.is-mobile-menu-open .nav-links { display: flex !important; }
    .nav-actions { display: none !important; } 
}


/* ==========================================================================
   5. FEED LAYOUTS - Handled by preset system in _vars.css
   ========================================================================== */
/* Feed layouts and card styles are now dynamically controlled by preset classes in _vars.css */

/* ==========================================================================
   6. POST & PAGE & UTILS
   ========================================================================== */
.toc-wrapper { margin-bottom: 40px; border-bottom: 1px solid var(--border); padding-bottom: 40px; }
.toc-accordion { background: var(--bg-1); border-radius: var(--radius-main); overflow: hidden; transition: all var(--transition-speed, 0.3s) ease; }
.toc-summary { padding: 15px 20px; font-weight: 700; cursor: pointer; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--text-0); }
.toc-summary::after { content: '+'; font-size: 1.2rem; font-weight: 400; opacity: 0.5; }
details[open] .toc-summary::after { content: '-'; }
.toc-container { padding: 0 20px 20px; border-top: 1px solid var(--border); }
.toc-container ul { list-style: none; padding: 0; margin: 15px 0 0; }
.toc-container li { margin-bottom: 8px; }

.calana-content-grid { display: grid; gap: 60px; margin: 0 auto; max-width: 1200px; }
.calana-content-grid.sidebar-None { grid-template-columns: minmax(0, 800px); justify-content: center; }
.calana-content-grid.sidebar-Right { grid-template-columns: 1fr 300px; }
.calana-content-grid.sidebar-Left { grid-template-columns: 300px 1fr; }
@media (max-width: 1024px) { 
    .calana-content-grid[class*="sidebar-"] { grid-template-columns: 1fr; } 
    .article-sidebar { order: 2; margin-top: 40px; border-top: 1px solid var(--border); padding-top: 40px; }
}

.calana-footer { 
    border-top: 1px solid var(--border); 
    padding: 60px 20px; 
    background: var(--bg-1); 
    text-align: var(--footer-text-align, center); 
}

/* Footer background color customization */
body[style*="--footer-bg-color"] .calana-footer {
    background: var(--footer-bg-color) !important;
}

/* Footer alignment options */
body.footer-align-Left .calana-footer {
    --footer-text-align: left;
}
body.footer-align-Center .calana-footer {
    --footer-text-align: center;
}

/* Footer logo dark theme support */
body.scheme-Dark .footer-logo-img {
    filter: invert(1) brightness(1.2);
}

/* Mid Mode footer logo removed */

body.scheme-Midnight .footer-logo-img {
    filter: invert(1) brightness(1.15);
}

/* Subscribe section styling */
.footer-subscribe {
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.footer-subscribe .footer-logo-img {
    max-height: 60px;
    width: auto;
    display: block;
    margin: 0 auto 30px auto;
}

body.footer-align-Left .footer-subscribe .footer-logo-img {
    margin-left: 0;
}

.footer-subscribe-content {
    max-width: 500px;
    margin: 0 auto;
}

body.footer-align-Left .footer-subscribe-content {
    margin: 0;
}

.footer-form {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    justify-content: center;
}

body.footer-align-Left .footer-form {
    justify-content: flex-start;
}

.footer-brand-info {
    margin-top: 30px;
    padding-top: 20px;
}

.footer-brand {
    margin-bottom: 40px;
}

.footer-brand .footer-logo-img {
    max-height: 60px;
    width: auto;
    display: block;
    margin: 0 auto 15px auto;
}

body.footer-align-Left .footer-brand .footer-logo-img {
    margin-left: 0;
}

.footer-title {
    margin: 15px 0 10px 0;
    color: var(--text-0);
    font-size: 1.2rem;
}

.footer-copyright {
    padding-top: 20px;
    border-top: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.9rem;
    opacity: 0.8;
}

.footer-copyright a {
    color: var(--ghost-accent-color);
    text-decoration: none;
}

.footer-copyright a:hover {
    text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .footer-form {
        flex-direction: column;
        gap: 15px;
    }
    
    .footer-form input {
        width: 100%;
    }
    
    .footer-form button {
        width: 100%;
    }
}
.kg-width-wide { grid-column: 1 / -1; max-width: 1200px; width: 100%; }
.kg-width-full { grid-column: 1 / -1; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
@media (max-width: 900px) { .kg-width-full { width: 100%; left: 0; right: 0; margin: 0; } }

/* Hero style: split screen */
.article-header.style-split {
    display: grid; grid-template-columns: 1fr; gap: 40px;
    margin-bottom: 60px; align-items: center;
}
.header-split-content { padding: 20px 0; }
.header-split-image { margin: 0; width: 100%; height: 400px; border-radius: var(--radius-main); overflow: hidden; }
.header-split-image img { width: 100%; height: 100%; object-fit: cover; }

/* Desktop split */
@media (min-width: 1024px) {
    .article-header.style-split { grid-template-columns: 1fr 1fr; gap: 60px; min-height: 60vh; }
    .header-split-image { height: 100%; max-height: 600px; order: 2; }
    .header-split-content { order: 1; padding-left: 20px; }
    .article-header.style-split .article-title { font-size: 3rem; line-height: 1.1; }
}
@media (max-width: 1023px) {
    .article-header.style-split .article-title { font-size: 2.2rem; }
}

/* ==========================================================================
   7. SNIPPETS (Dark Mode Ready)
   ========================================================================== */
.kg-gallery-row.calana-gallery-scroll { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 15px; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.calana-gallery-scroll .kg-gallery-image { flex: 0 0 85%; max-width: 85%; scroll-snap-align: center; }
.calana-gallery-scroll img { height: 400px; width: 100%; object-fit: cover; border-radius: var(--radius-main); }

.calana-box { background: var(--bg-1); border: var(--border-width, 1px) var(--border-style, solid) var(--border-color-override, var(--border)); border-radius: var(--radius-main); padding: 30px; margin: 40px 0; text-align: center; color: var(--text-0); }
.calana-box h2 { margin-top: 0; color: var(--text-0); }
.calana-box .gh-btn { margin-top: 20px; }

/* Custom component: FAQ */
.calana-faq details { background: var(--bg-1); border-radius: var(--radius-main); margin-bottom: 15px; border: var(--border-width, 1px) var(--border-style, solid) transparent; }
.calana-faq details[open] { background: var(--bg-0); border-color: var(--border); box-shadow: var(--shadow-card); }
.calana-faq summary { padding: 20px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--text-0); }
.calana-faq p { padding: 0 20px 20px; margin: 0; color: var(--text-2); }

/* Custom component: Pricing */
.calana-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin: 40px 0; }
.pricing-card { display: flex; flex-direction: column; padding: 30px; background: var(--bg-0); border: var(--border-width, 1px) var(--border-style, solid) var(--border-color-override, var(--border)); border-radius: var(--radius-main); text-align: center; transition: transform var(--transition-speed, 0.2s); color: var(--text-0); }
.pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.pricing-card.featured { border: 2px solid var(--accent); position: relative; }
.pricing-card.featured::before { content: 'POPULAR'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-contrast); padding: 4px 12px; font-size: 0.7rem; font-weight: 800; border-radius: var(--radius-button); letter-spacing: 0.05em; }
.pricing-price { font-size: 2.5rem; font-weight: 800; margin: 20px 0 10px; color: var(--text-0); }
.pricing-price span { font-size: 1rem; font-weight: 400; color: var(--text-2); }
.pricing-features li { margin-bottom: 10px; color: var(--text-2); font-size: 0.95rem; }

/* Custom component: Flip card */
.flip-container { background-color: transparent; width: 100%; height: 400px; perspective: 1000px; margin: 40px 0; }
.flip-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform var(--transition-speed, 0.6s); transform-style: preserve-3d; }
.flip-container:hover .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: var(--radius-main); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; }
.flip-front { background: var(--bg-0); border: var(--border-width, 1px) var(--border-style, solid) var(--border-color-override, var(--border)); color: var(--text-0); }
.flip-front img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; }
.flip-front h3 { background: rgba(var(--bg-0), 0.9); padding: 10px 20px; border-radius: var(--radius-main); }
.flip-back { background: var(--accent); color: var(--accent-contrast); transform: rotateY(180deg); }
.flip-back h3, .flip-back p { color: var(--text-on-accent); }
.flip-back .gh-btn { background: #ffffff; color: var(--accent); margin-top: 15px; }
@media (hover: none) { .flip-container:active .flip-inner { transform: rotateY(180deg); } }


/* ==========================================================================
   9. HOMEPAGE HERO STYLES (Fixed Spacing)
   ========================================================================== */
.calana-hero.style-cover {
    min-height: 60vh;
    background-size: cover;
    background-position: center;
    position: relative;
    color: var(--text-on-accent);
    display: flex; align-items: center; justify-content: center;
    border-bottom: none; 
    margin-bottom: 60px; /* FIX */
}
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); 
    z-index: var(--z-normal);
}
.calana-hero.style-cover .hero-content {
    position: relative; z-index: var(--z-normal);
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    max-width: 800px;
}
.calana-hero.style-cover h1,
.calana-hero.style-cover p {
    color: var(--text-on-accent);
}
.calana-hero.style-cover .hero-search-trigger {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,0.3);
    color: var(--text-on-accent);
}
.calana-hero.style-cover .hero-search-trigger:hover {
    background: rgba(255,255,255,0.25);
}

/* Hero Content Section Visibility Controls */
.calana-hero .hero-featured-content,
.calana-hero .hero-simple-content, 
.calana-hero .hero-newsletter-content {
    display: none;
}

/* 1. Magazine Feature Hero - HIDDEN for this preset */
.calana-hero.style-featured-post {
    display: none;
}

.calana-hero.style-featured-post .hero-featured-content {
    display: block;
}

/* 2. Editorial Feed Hero - HIDDEN for this preset */
.calana-hero.style-simple {
    display: none;
}

.calana-hero.style-simple .hero-simple-content {
    display: block;
}

.calana-hero.style-simple h1 {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    background: linear-gradient(45deg, var(--accent), var(--text-0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.calana-hero.style-simple p {
    font-size: 1.3rem;
    opacity: 0.8;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
}

/* 3. Newsletter Landing Hero - HIDDEN for this preset */
.calana-hero.style-newsletter {
    display: none;
}

.calana-hero.style-newsletter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    z-index: var(--z-normal);
}

.calana-hero.style-newsletter .hero-newsletter-content {
    display: block;
}

.calana-hero.style-newsletter .hero-content {
    position: relative;
    z-index: var(--z-normal);
}

.calana-hero.style-newsletter h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: white;
}

.calana-hero.style-newsletter p {
    font-size: 1.4rem;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255,255,255,0.9);
}

.calana-hero.style-newsletter .hero-subscribe-form {
    max-width: 500px;
    margin: 0 auto;
}

.calana-hero.style-newsletter .form-group {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.calana-hero.style-newsletter .subscribe-email {
    flex: 1;
    padding: 15px 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 1.1rem;
    backdrop-filter: blur(10px);
}

.calana-hero.style-newsletter .subscribe-email::placeholder {
    color: rgba(255,255,255,0.7);
}

.calana-hero.style-newsletter .gh-btn-white {
    padding: 15px 30px;
    background: white;
    color: var(--ghost-accent-color);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calana-hero.style-newsletter .gh-btn-white:hover {
    background: rgba(255,255,255,0.9);
    transform: translateY(-2px);
}

.calana-hero.style-newsletter .subscribe-success,
.calana-hero.style-newsletter .subscribe-error {
    display: none;
    text-align: center;
    color: white;
    font-weight: 500;
}

.calana-hero.style-newsletter .subscribe-loading {
    display: none;
}

/* 4. Visual Grid Hero - HIDDEN for this preset */
.calana-hero.style-cover-image {
    display: none;
}

.calana-hero.style-cover-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: var(--z-normal);
}

.calana-hero.style-cover-image .hero-simple-content {
    display: block;
}

.calana-hero.style-cover-image .hero-content {
    position: relative;
    z-index: var(--z-normal);
    text-align: center;
    color: white;
}

.calana-hero.style-cover-image h1 {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.calana-hero.style-cover-image p {
    font-size: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* 5. Minimal Reader Hero - HIDDEN for this preset */
.calana-hero.style-text-only {
    display: none;
}

.calana-hero.style-text-only .hero-simple-content {
    display: block;
}

.calana-hero.style-text-only h1 {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 15px;
    font-family: Georgia, serif;
    color: var(--text-0);
}

.calana-hero.style-text-only p {
    font-size: 1.1rem;
    opacity: 0.7;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}
.hero-featured-card {
    display: flex; flex-direction: column;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    max-width: 1000px; margin: 0 auto;
    text-align: left;
}
.hero-featured-image { width: 100%; height: 300px; }
.hero-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-featured-text { padding: 40px; display: flex; flex-direction: column; justify-content: center; }

.featured-label { 
    text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.1em; 
    color: var(--ghost-accent-color); font-weight: 700; margin-bottom: 10px; 
}
.hero-featured-title { font-size: 2rem; margin-bottom: 15px; }
.hero-featured-title a { color: var(--text-0); }
.hero-featured-excerpt { margin-bottom: 25px; opacity: 0.8; color: var(--text-0); }

@media (min-width: 800px) {
    .hero-featured-card { flex-direction: row; min-height: 400px; }
    .hero-featured-text { flex: 1; order: 1; }
    .hero-featured-image { flex: 1; height: auto; order: 2; }
}

.hero-subscribe-form {
    margin-top: 30px;
    margin-bottom: 50px; /* FIX */
    max-width: 500px; margin-left: auto; margin-right: auto;
}
.hero-subscribe-form .form-group {
    display: flex; gap: 10px;
}
.hero-subscribe-form input {
    flex: 1;
    border: 1px solid var(--border);
    padding: 12px 15px;
    border-radius: var(--border-radius);
    background: var(--bg-0); 
    color: var(--text-0);
}
.hero-subscribe-form p { font-size: 0.8rem; margin-top: 10px; display: none; }
.hero-subscribe-form form.success .success-message { display: block; color: green; }
.hero-subscribe-form form.error .error-message { display: block; color: red; }
@media (max-width: 500px) {
    .hero-subscribe-form .form-group { flex-direction: column; }
    .hero-subscribe-form .gh-btn { width: 100%; }
}


/* ==========================================================================
   10. READING & MONETIZATION
   ========================================================================== */
.reading-progress-bar {
    position: fixed;
    top: 0; left: 0;
    width: 0%; /* JS will update this */
    height: 4px;
    background: var(--accent);
    z-index: var(--z-portal);
    transition: width 0.1s;
}

.gh-post-upgrade-cta {
    background: var(--bg-0) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--card-shadow) !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px !important; margin: 40px 0 !important;
    text-align: center;
}
.gh-post-upgrade-cta-content { font-family: var(--font-family); color: var(--text-0); }
.gh-post-upgrade-cta h2 { margin-top: 0; font-size: 1.8rem; color: var(--text-0); }
.gh-btn[data-portal="signup"] { background: var(--accent); color: var(--accent-contrast); border-radius: var(--radius-button); margin-top: 15px; }

body.scheme-Dark .gh-post-upgrade-cta,
body.scheme-Midnight .gh-post-upgrade-cta {
    box-shadow: 0 0 30px rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.1) !important;
}


/* ==========================================================================
   11. ARCHIVE PAGES (Author & Tag)
   ========================================================================== */
.hero-tag-image {
    margin-top: 30px;
    border-radius: var(--border-radius);
    overflow: hidden;
    max-width: 800px;
    margin-left: auto; margin-right: auto;
}
.author-profile-image {
    width: 100px; height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 3px solid var(--ghost-accent-color);
    padding: 3px;
    background: var(--bg-0);
}
.author-meta-links {
    display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--text-2);
}
.author-meta-links a:hover { color: var(--ghost-accent-color); text-decoration: underline; }


/* ==========================================================================
   12. LIGHTBOX (Image Zoom)
   ========================================================================== */
.lightbox-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: var(--z-portal);
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    cursor: zoom-out;
}
.lightbox-overlay.active { opacity: 1; pointer-events: auto; }
.lightbox-overlay img {
    max-width: 90%; max-height: 90vh;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border-radius: 4px;
    transform: scale(0.9); transition: transform 0.3s ease;
}
.lightbox-overlay.active img { transform: scale(1); }
.kg-image-card img, .kg-gallery-image img { cursor: zoom-in; }


/* ==========================================================================
   13. SHARE WIDGET
   ========================================================================== */
.calana-share-widget {
    display: flex; gap: 10px;
    margin-bottom: 20px;
    padding: 15px 0;
}
.share-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bg-1);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.share-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.share-btn:active {
    transform: translateY(0);
}
.share-btn svg {
    width: 18px;
    height: 18px;
}
/* Sticky on LARGE Desktop Only (Increased breakpoint to prevent overlap) */
@media (min-width: 1450px) {
    .calana-share-widget {
        flex-direction: column;
        position: fixed;
        /* Push it further to the left (was 460px) */
        left: calc(50% - 520px); 
        top: 200px;
        z-index: var(--z-normal);
    }
}
/* Disable sticky if sidebar is active */
body[class*="layout-sidebar"] .calana-share-widget {
    position: static; flex-direction: row; margin-bottom: 30px;
}

/* ==========================================================================
   14. SIDEBAR WIDGET STYLES
   ========================================================================== */
.sidebar-widget {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border);
}
.sidebar-widget:last-child { border: none; }

.sidebar-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-2);
}

/* Mini Feed in Sidebar */
.sidebar-feed { display: flex; flex-direction: column; gap: 20px; }
.sidebar-story { display: flex; gap: 15px; align-items: start; }
.sidebar-story-img {
    width: 60px; height: 60px; flex-shrink: 0;
    border-radius: 4px; overflow: hidden;
}
.sidebar-story-img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-story-text h4 {
    font-size: 0.95rem; margin: 0 0 5px; line-height: 1.4;
    font-weight: 600;
}
.sidebar-story-text h4 a { color: var(--text-0); }
.sidebar-story-text time { font-size: 0.8rem; color: var(--text-2); }

/* Tag Cloud in Sidebar */
.sidebar-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-pill {
    font-size: 0.8rem;
    padding: 6px 12px;
    background: var(--bg-1);
    border-radius: 20px;
    font-weight: 600;
    color: var(--text-2);
    transition: all 0.2s;
}
.tag-pill:hover {
    background: var(--accent);
    color: #fff;
}

/* ==========================================================================
   15. NAVIGATION DROPDOWNS
   ========================================================================== */
/* Dropdown Arrow */
.dropdown-arrow { margin-left: 6px; display: inline-block; transition: transform 0.2s; }
.has-dropdown:hover .dropdown-arrow { transform: rotate(180deg); }

/* DESKTOP STYLES */
@media (min-width: 1024px) {
    .nav-list > li { position: relative; display: flex; align-items: center; height: 100%; }
    
    .nav-dropdown {
        position: absolute;
        top: 100%; left: 0;
        min-width: 200px;
        background: var(--bg-0);
        border: 1px solid var(--border);
        border-radius: var(--border-radius);
        box-shadow: var(--card-shadow);
        padding: 10px 0;
        list-style: none;
        opacity: 0; visibility: hidden;
        transform: translateY(10px);
        transition: all 0.2s ease;
        z-index: var(--z-modal);
        display: flex; flex-direction: column; gap: 0; /* Override nav-list gap */
    }
    
    /* Show on Hover */
    .has-dropdown:hover .nav-dropdown {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    
    /* Dropdown Items */
    .nav-dropdown li {
        width: 100%; margin: 0; padding: 0;
    }
    .nav-dropdown a {
        display: block;
        padding: 10px 20px;
        font-size: 0.95rem;
        color: var(--text-0) !important;
        white-space: nowrap;
        text-decoration: none;
    }
    .nav-dropdown a:hover {
        background: var(--bg-1);
        color: var(--ghost-accent-color) !important;
    }

/* Ensure dropdown text visibility across all color schemes */
body.scheme-light .nav-dropdown a {
    color: var(--text-0) !important;
}

/* Mid Mode dropdown selector removed */

body.scheme-dark .nav-dropdown a {
    color: var(--text-0) !important;
}

body.scheme-light .nav-dropdown a:hover {
    color: var(--ghost-accent-color) !important;
    background: var(--bg-1) !important;
}

/* Mid Mode dropdown hover removed */

body.scheme-dark .nav-dropdown a:hover {
    color: var(--ghost-accent-color) !important;
    background: var(--bg-1) !important;
}
}

/* MOBILE STYLES (Indent instead of popup) */
@media (max-width: 1023px) {
    .nav-dropdown {
        display: none !important; /* Hidden by default */
        list-style: none !important;
        padding: 40px 30px !important;
        width: 100% !important;
        background: var(--bg-1) !important;
        border-radius: var(--border-radius) !important;
        margin: 25px 0 !important;
        border: 1px solid var(--border) !important;
    }
    
    .nav-dropdown li {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .nav-dropdown a {
        color: var(--text-0) !important;
        text-decoration: none !important;
        padding: 25px 0 !important;
        display: block !important;
        font-size: 1.3rem !important;
        line-height: 1.5 !important;
        margin: 10px 0 !important;
    }
    
    .nav-dropdown a:hover {
        color: var(--ghost-accent-color) !important;
        background: rgba(0, 0, 0, 0.05) !important;
        padding: 25px 15px !important;
        margin: 10px -15px !important;
        border-radius: 8px !important;
    }

    /* Enhanced color scheme support for mobile dropdowns */
    body.scheme-light .nav-dropdown {
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    }

    /* Mobile Mid Mode dropdown removed */

    body.scheme-dark .nav-dropdown {
        background: rgba(15, 17, 21, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    }

    /* Text color overrides for better contrast */
    body.scheme-light .nav-dropdown a {
        color: #1a1a1a !important;
    }

    /* Mobile Mid Mode dropdown text removed */

    body.scheme-dark .nav-dropdown a {
        color: rgba(255, 255, 255, 0.95) !important;
    }

    body.scheme-light .nav-dropdown a:hover {
        background: rgba(0, 0, 0, 0.05) !important;
        color: var(--ghost-accent-color) !important;
    }

    /* Mobile Mid Mode dropdown hover removed */

    body.scheme-dark .nav-dropdown a:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--ghost-accent-color) !important;
    }
    
    .has-dropdown.active .nav-dropdown { 
        display: block !important; 
    }
    
    /* Mobile Toggle Arrow */
    .dropdown-arrow {
        padding: 10px; margin-left: auto; /* Push to right */
        cursor: pointer;
    }
    
    /* Ensure items stack */
    .nav-list { align-items: flex-start; }
    .nav-list > li { flex-wrap: wrap; }
}
/* ==========================================================================
   16. DARK MODE LOGO FIX (ROBUST)
   ========================================================================== */


/* ==========================================================================
   17. SOCIAL FEED WIDGET (ActivityPub)
   ========================================================================== */
ghost-activitypub-embed {
    /* Force the widget to use Calana's font settings */
    --ghap-font-family: var(--font-sans);
    --ghap-bg-color: transparent;
    
    /* Adapt colors based on theme settings */
    --ghap-text-color: var(--text-1);
    --ghap-accent-color: var(--accent);
    --ghap-border-color: var(--border);
    
    display: block;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
}

/* Midnight Mode Specifics */
html[data-color-scheme="Midnight"] ghost-activitypub-embed {
    background: rgba(255, 255, 255, 0.05); /* Subtle glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   15. BULLET LIST BOX
   ========================================================================== */

/* Adaptive Bullet List Box - Ghost Theme Compatible */
.bullet-list-box {
    background: var(--bg-0);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 24px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.bullet-list-box:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.bullet-list-box ul {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
}

.bullet-list-box li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 8px;
    color: var(--text-0);
    line-height: 1.6;
}

.bullet-list-box li:before {
    content: '•';
    position: absolute;
    left: -12px;
    top: 0;
    color: var(--ghost-accent-color);
    font-weight: bold;
    font-size: 1.2em;
}

/* Editorial Article Preset - Dashed Border */
body.post-preset-editorial-article .bullet-list-box,
body.feed-layout-editorial .bullet-list-box {
    border-style: dashed;
    border-width: 3px;
}

/* Magazine Feature Preset - Dotted Border */
body.post-preset-magazine-feature .bullet-list-box,
body.feed-layout-magazine-grid .bullet-list-box {
    border-style: dotted;
    border-width: 4px;
    border-radius: 12px;
}

/* Knowledge Layout Preset - Double Border */
body.post-preset-knowledge-layout .bullet-list-box {
    border-style: double;
    border-width: 6px;
}

/* Big Image Preset - Thick Solid Border */
body.post-preset-big-image .bullet-list-box {
    border-width: 4px;
    border-radius: 4px;
}

/* Minimal Reading Preset - Thin Border */
body.post-preset-minimal-reading .bullet-list-box {
    border-width: 1px;
    background: transparent;
    box-shadow: none;
}

/* Immersive Story Preset - Rounded Border with Accent */
body.post-preset-immersive-story .bullet-list-box {
    border-radius: 16px;
    border-width: 3px;
    background: var(--bg-1);
}

/* Dark Mode Adaptations */
body.scheme-dark .bullet-list-box {
    background: var(--bg-1);
    box-shadow: 0 2px 8px rgba(255,255,255,0.1);
}

body.scheme-dark .bullet-list-box:hover {
    box-shadow: 0 4px 16px rgba(255,255,255,0.15);
}

/* Mid Mode bullet list box removed */

/* Responsive Design */
@media (max-width: 768px) {
    .bullet-list-box {
        padding: 16px 20px;
        margin: 20px 0;
        border-radius: 6px;
    }
    
    .bullet-list-box ul {
        padding-left: 16px;
    }
    
    .bullet-list-box li {
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   DROPDOWN ENGINE
   ========================================================================== */

.nav-item {
    position: relative;
}

/* Sub-menu Container (Hidden by default) */
.nav-sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-0);
    min-width: 200px;
    padding: 10px 0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: var(--z-modal);
    list-style: none;
    border: 1px solid var(--border);
    margin-top: 10px; /* Slight gap */
}

/* Show on Hover */
.nav-item:hover .nav-sub-menu {
    display: block;
    animation: fadeUp 0.2s ease forwards;
}

/* Dropdown Links */
.nav-sub-menu .nav-item {
    display: block;
    margin: 0;
}

.nav-sub-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 0.9rem;
    color: var(--text-1);
    text-decoration: none;
    transition: background 0.2s;
}

.nav-sub-menu a:hover {
    background: var(--bg-1);
    color: var(--ghost-accent-color);
}

/* Parent Indicator (Chevron) */
.has-chevron::after {
    content: '▾';
    display: inline-block;
    margin-left: 6px;
    font-size: 0.8em;
    opacity: 0.6;
}

/* Animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Mobile Fix --- */
/* On mobile, just indent them, don't float them */
@media (max-width: 768px) {
    .nav-sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 20px;
        background: transparent;
        display: block; /* Always show in hamburger */
    }
    .has-chevron::after { display: none; }
}

/* ==========================================================================
   NAVIGATION LAYOUT ENGINE
   ========================================================================== */

/* Base Reset */
.calana-header {
    position: relative;
    width: 100%;
    z-index: var(--z-modal);
    padding: 20px 40px;
    background: transparent;
    transition: all 0.3s ease;
}

.calana-nav {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    gap: 20px;
}

.nav-brand img { height: 40px; width: auto; }
.nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 30px; }
.nav-actions { display: flex; gap: 10px; }


/* --- 1. MASTHEAD (The Classic) --- */
/* Logo Left | Links Center | Actions Right */
html[data-nav="Masthead"] .calana-nav {
    justify-content: space-between;
}
html[data-nav="Masthead"] .nav-links {
    margin: 0 auto; /* Pushes links to absolute center */
}


/* --- 2. ARCHITECT (The Stack) --- */
/* Logo Top Center | Links Bottom Center */
html[data-nav="Architect"] .calana-header {
    padding-top: 40px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
html[data-nav="Architect"] .calana-nav {
    flex-direction: column;
    justify-content: center;
}
html[data-nav="Architect"] .nav-actions {
    position: absolute;
    top: 20px;
    right: 40px;
}


/* --- 3. CLOUD (Floating Pill) --- */
/* Floating Centered Pill Box */
html[data-nav="Cloud"] .calana-header {
    padding: 20px;
    display: flex;
    justify-content: center;
}
html[data-nav="Cloud"] .calana-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 20px; /* Floats 20px from the top */
    width: 90%;
    margin: 20px auto;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    z-index: var(--z-portal);
    padding: 10px 30px;
}


/* --- 4. FOUNDATION (Solid & Heavy) --- */
/* Full Width | Thick Border Bottom | Logo Left */
html[data-nav="Foundation"] .calana-header {
    border-bottom: 4px solid var(--ghost-accent-color);
    background: #fff;
    padding: 25px 5%;
}
html[data-nav="Foundation"] .calana-nav {
    justify-content: space-between;
    max-width: 100%;
}


/* --- LEVITATE (Glass Bar) --- */
/* Fix: Should sit at Top + Offset. Content needs padding top if overlapping, but usually Levitate floats OVER content. */
html[data-nav="Levitate"] .calana-nav {
    position: -webkit-sticky;
    position: sticky; /* Sit naturally, then stick */
    top: 20px; /* Float 20px from top when scrolling */
    width: 90%;
    margin: 20px auto; /* Add margin around it */
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    z-index: var(--z-portal);
}
/* Fix Dark Mode Levitate */
@media (prefers-color-scheme: dark) {
    html[data-nav="Levitate"] .calana-nav { background: rgba(0,0,0,0.6); }
}

/* --- Mobile Handling (Keep Hamburger Visible) --- */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .calana-burger { display: block; }
    /* Reset complex layouts for mobile */
    html[data-nav] .calana-nav { flex-direction: row; justify-content: space-between; }
    html[data-nav="Architect"] .nav-actions { position: static; }
}

/* --- 6. RAIL (Sidebar Redesign) --- */
/* Fixed Left Sidebar, 260px width, Readable Horizontal Text */
html[data-nav="Rail"] body {
    padding-left: 260px; /* Push site content right */
}

html[data-nav="Rail"] .calana-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start; /* Top align */
    align-items: stretch; /* Full width items */
    padding: 40px 30px;
    border-bottom: none;
    border-right: 1px solid var(--border);
    background: var(--bg-0);
    z-index: var(--z-modal);
    overflow-y: auto;
}

/* Logo Area */
html[data-nav="Rail"] .nav-left {
    margin-bottom: 60px;
    text-align: left;
}

/* Menu List - Vertical Stack */
html[data-nav="Rail"] .nav-center {
    flex: 1; /* Take up middle space */
    width: 100%;
}
html[data-nav="Rail"] .nav-list {
    flex-direction: column;
    gap: 15px;
    width: 100%;
}
html[data-nav="Rail"] .nav-item {
    width: 100%;
}
html[data-nav="Rail"] .nav-item a {
    display: block;
    text-align: left;
    font-size: 1rem;
    padding: 8px 0;
    /* Reset rotation/writing mode */
    writing-mode: horizontal-tb;
    transform: none;
}

/* CTA Button - Full Width */
html[data-nav="Rail"] .nav-right {
    margin-top: 40px;
    width: 100%;
}
html[data-nav="Rail"] .gh-head-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-left: 0;
}

/* --- Dropdowns: Accordion Style (Expand Down) --- */
/* Fixes clipping issue in scrollable sidebar */

html[data-nav="Rail"] .nav-item {
    flex-wrap: wrap; /* Allow wrapping for submenu */
}

html[data-nav="Rail"] .nav-sub-menu {
    position: relative; /* Sit inside the flow, not floating */
    top: auto;
    left: auto;
    width: 100%;
    margin-left: 0;
    margin-top: 5px;
    padding-left: 15px; /* Indent sub-items */
    border-left: 2px solid var(--border);
    border-radius: 0;
    box-shadow: none; /* Remove card shadow */
    background: transparent;
    display: none; /* Hidden by default */
}

/* Show on Hover */
html[data-nav="Rail"] .nav-item:hover .nav-sub-menu {
    display: block;
    animation: slideDown 0.2s ease forwards;
}

/* Rotate Chevron Down instead of Right */
html[data-nav="Rail"] .has-chevron::after {
    transform: rotate(0deg);
    transition: transform 0.2s;
}
html[data-nav="Rail"] .nav-item:hover .has-chevron::after {
    transform: rotate(180deg);
}

/* Sub-link styling for sidebar */
html[data-nav="Rail"] .nav-sub-menu a {
    padding: 8px 10px;
    font-size: 0.95rem;
    color: var(--text-2);
}
html[data-nav="Rail"] .nav-sub-menu a:hover {
    color: var(--ghost-accent-color);
    background: transparent;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Mobile Override --- */
/* On mobile, revert to a top bar */
@media (max-width: 900px) {
    html[data-nav="Rail"] body { padding-left: 0; }
    html[data-nav="Rail"] .calana-nav {
        position: relative; width: 100%; height: auto;
        flex-direction: row; padding: 15px 5%;
        border-right: none; border-bottom: 1px solid var(--border);
        align-items: center;
    }
    html[data-nav="Rail"] .nav-left { margin-bottom: 0; }
    html[data-nav="Rail"] .nav-center { display: none; } /* Handled by JS menu */
    html[data-nav="Rail"] .nav-right { display: none; }
}


/* --- 7. CAPSULE (Bottom Float) --- */
/* Floating Bar at Bottom of Screen */

/* Desktop: Invisible Wrapper */
html[data-nav="Capsule"] .calana-header {
    position: fixed;
    bottom: 30px;
    top: auto;
    left: 0;
    width: 100%;
    pointer-events: none; /* Let clicks pass through empty space */
    padding: 0;
    display: flex;
    justify-content: center;
    z-index: var(--z-modal);
    background: transparent;
}

/* Desktop: Visible Pill */
html[data-nav="Capsule"] .calana-nav {
    pointer-events: auto;
    background: #000;
    color: #fff;
    border-radius: 50px;
    padding: 15px 40px;
    width: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Desktop: White text on black pill */
html[data-nav="Capsule"] .nav-links a,
html[data-nav="Capsule"] .nav-brand a,
html[data-nav="Capsule"] .nav-title {
    color: #fff !important;
}

/* Desktop: Show logo images with original colors */
html[data-nav="Capsule"] .nav-brand img {
    filter: none !important; /* Remove inversion - let logo show its original gray/white colors */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Desktop: Ensure logo text is visible - Override conflicting rules */
html[data-nav="Capsule"] .nav-brand,
html[data-nav="Capsule"] .nav-title {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important; /* Override any display: none rules */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove any pseudo-elements creating white circles - DESKTOP */
html[data-nav="Capsule"] .nav-brand a:before,
html[data-nav="Capsule"] .nav-brand a:after,
html[data-nav="Capsule"] .nav-brand:before,
html[data-nav="Capsule"] .nav-brand:after {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Specifically override the nav-double-layer rule that hides logos */
html[data-nav="Capsule"] body.nav-double-layer.layout-nav-floating .nav-brand,
html[data-nav="Capsule"].nav-double-layer .nav-brand,
body.nav-double-layer html[data-nav="Capsule"] .nav-brand {
    display: flex !important; /* Force display over display: none !important */
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Force actual logo content to appear ON TOP of white circle */
html[data-nav="Capsule"] .nav-brand a,
html[data-nav="Capsule"] .nav-brand .nav-title,
html[data-nav="Capsule"] .nav-title {
    color: #fff !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    position: relative !important;
    z-index: 999 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important; /* Make text more visible */
}

/* Force logo images to appear on top */
html[data-nav="Capsule"] .nav-brand img {
    position: relative !important;
    z-index: 999 !important;
}

/* Clean logo container setup */
html[data-nav="Capsule"] .nav-brand {
    min-width: 60px !important;
    min-height: 30px !important;
    position: relative !important;
}

/* Make sure real logo content still shows if present */
html[data-nav="Capsule"] .nav-brand a,
html[data-nav="Capsule"] .nav-brand img,
html[data-nav="Capsule"] .nav-title {
    position: relative !important;
    z-index: 10000 !important;
}

/* FORCE DROP-UP MENUS (For Bottom Capsule) */
html[data-nav="Capsule"] .nav-item:hover .nav-dropdown,
html[data-nav="Capsule"] .nav-item:hover ul,
html[data-nav="Capsule"] .has-dropdown:hover .nav-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: auto !important;           /* Stop it from going down */
    bottom: 100% !important;        /* Anchor to top of the bar */
    margin-bottom: 25px !important; /* Gap between bar and menu */
    
    /* Visual Tweaks */
    transform-origin: bottom center !important; /* Animation starts from bottom */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.15) !important; /* Shadow goes UP */
    border-radius: 12px !important;
    background: var(--bg-0) !important;
    z-index: var(--z-portal) !important;
}

/* Ensure dropdown items are visible */
html[data-nav="Capsule"] .nav-dropdown a,
html[data-nav="Capsule"] .nav-item ul a {
    color: var(--text-0) !important;
    background: transparent !important;
    padding: 10px 20px !important;
    display: block !important;
}

html[data-nav="Capsule"] .nav-dropdown a:hover,
html[data-nav="Capsule"] .nav-item ul a:hover {
    background: var(--bg-1) !important;
    color: var(--accent) !important;
}

/* Optional: Add invisible bridge so mouse doesn't lose focus */
html[data-nav="Capsule"] .nav-item ul:before,
html[data-nav="Capsule"] .nav-dropdown:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 25px; /* Matches the margin-bottom gap */
}

/* --- Mobile Capsule Navigation --- */
@media (max-width: 767px) {
    /* 1. MOBILE POSITIONING: Invisible Wrapper (Bottom Float) */
    html[data-nav="Capsule"] .calana-header {
        position: fixed !important;
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom) + 20px) !important;
        left: 0 !important;
        width: 100% !important;
        background: transparent !important;
        pointer-events: none !important;
        display: flex !important;
        justify-content: center !important;
        z-index: var(--z-portal) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. MOBILE POSITIONING: Visible Pill (Child Container) */
    html[data-nav="Capsule"] .calana-nav {
        pointer-events: auto !important;
        width: 90% !important;
        max-width: 400px !important;
        padding: 12px 24px !important;
        background: #000 !important; /* Force black background */
        color: #fff !important;      /* Force white text */
        border-radius: 100px !important; /* Force pill shape */
        box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border: none !important;
    }

    /* 3. MOBILE CONTRAST: Force White Hamburger Icon */
    html[data-nav="Capsule"] .calana-burger .burger-line {
        background-color: #ffffff !important; /* White hamburger lines */
    }
    html[data-nav="Capsule"] .calana-burger:before,
    html[data-nav="Capsule"] .calana-burger:after {
        background-color: #ffffff !important;
    }

    /* 4. MOBILE CONTRAST: Force White Logo */
    html[data-nav="Capsule"] .nav-brand a,
    html[data-nav="Capsule"] .nav-title {
        color: #ffffff !important; /* White logo text */
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 1.1rem !important; /* Force font size */
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        text-indent: 0 !important;
        overflow: visible !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }
    
    /* Logo images: show original colors, don't invert */
    html[data-nav="Capsule"] .nav-brand img {
        filter: none !important; /* Keep original gray/white logo colors */
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        max-height: 32px !important;
        width: auto !important;
    }

    /* Ensure nav-brand container is visible and properly sized */
    html[data-nav="Capsule"] .nav-brand {
        display: flex !important;
        align-items: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-width: none !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        border-radius: 0 !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        /* Aggressive debugging overrides */
        position: relative !important;
        z-index: 10 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-indent: 0 !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
    }
    
    /* Emergency logo fallback - if no logo shows, this should be visible */
    html[data-nav="Capsule"] .nav-brand:empty::after,
    html[data-nav="Capsule"] .nav-brand a:empty::after {
        content: "LOGO" !important;
        color: #ffffff !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        display: inline-block !important;
    }
    
    /* Override any mobile-specific hiding rules */
    html[data-nav="Capsule"] body.nav-double-layer.layout-nav-floating .nav-brand,
    html[data-nav="Capsule"].nav-double-layer .nav-brand,
    body.nav-double-layer html[data-nav="Capsule"] .nav-brand,
    body.layout-nav-floating html[data-nav="Capsule"] .nav-brand {
        display: flex !important; /* Force display over any hiding rules */
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Fix potential circular background issue */
    html[data-nav="Capsule"] .nav-brand a:before,
    html[data-nav="Capsule"] .nav-brand a:after,
    html[data-nav="Capsule"] .nav-brand:before,
    html[data-nav="Capsule"] .nav-brand:after {
        display: none !important;
        content: none !important;
        background: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Remove any circular styling that creates white circles */
    html[data-nav="Capsule"] .nav-brand,
    html[data-nav="Capsule"] .nav-brand a,
    html[data-nav="Capsule"] .nav-brand img,
    html[data-nav="Capsule"] .nav-title {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* 5. MOBILE MENU: Default hidden state */
    html[data-nav="Capsule"] .nav-links {
        display: none !important; /* Start hidden */
    }
    
    /* 6. MOBILE MENU: When opened by hamburger click (match JS classes) */
    html[data-nav="Capsule"] body.gh-head-open .nav-links,
    html[data-nav="Capsule"] body.calana-menu-open .nav-links,
    html[data-nav="Capsule"] .nav-links.active {
        display: block !important;
        position: fixed !important;
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom) + 90px) !important; /* Above capsule */
        left: 5% !important;
        width: 90% !important;
        height: auto !important;
        max-height: 70vh !important;
        border-radius: 24px !important;
        background: var(--bg-0) !important;
        box-shadow: 0 0 0 100vw rgba(0,0,0,0.6) !important; /* Dim background */
        padding: 30px !important;
        overflow-y: auto !important;
        z-index: var(--z-portal) !important;
        
        /* Animation */
        transform: translateY(0) !important;
        transition: transform 0.3s ease !important;
    }

    /* Mobile menu navigation styling */
    html[data-nav="Capsule"] .nav-links .nav-list {
        flex-direction: column !important;
        gap: 20px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html[data-nav="Capsule"] .nav-links a {
        color: var(--text-0) !important; /* Dark text on light menu */
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        padding: 10px 0 !important;
        display: block !important;
    }

    html[data-nav="Capsule"] .nav-links a:hover {
        color: var(--accent) !important;
    }
}


/* --- 8. BROADSHEET (Newspaper) --- */
/* Double Border | Centered Serif */
html[data-nav="Broadsheet"] .calana-header {
    border-top: 5px solid #000;
    border-bottom: 1px solid #000;
    padding: 30px 0;
    margin-bottom: 40px;
}
html[data-nav="Broadsheet"] .calana-nav {
    flex-direction: column;
    gap: 15px;
}
html[data-nav="Broadsheet"] .nav-brand img {
    height: 60px; /* Bigger logo */
}
html[data-nav="Broadsheet"] .nav-links {
    border-top: 1px solid #eee;
    padding-top: 15px;
    width: 100%;
    justify-content: center;
    font-family: 'Times New Roman', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* --- PANORAMA (Wide Floating) --- */
/* Fix: It was centering vertically. We force it to top. */
html[data-nav="Panorama"] .calana-nav {
    position: absolute; /* Absolute sits at top of content, doesn't float down screen */
    top: var(--announcement-offset, 0px); /* Just under announcement */
    left: 0;
    width: 100%;
    margin: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    align-items: center; /* Vertically center items inside bar */
    padding: 20px 5%;
}


/* --- 10. COMMAND (Terminal) --- */
/* Mono Font | Green Text | Black Bar */
html[data-nav="Command"] .calana-header {
    background: #000;
    border-bottom: 2px solid #333;
    font-family: 'Courier New', monospace;
}
html[data-nav="Command"] a {
    color: #0f0 !important; /* Matrix Green */
    text-transform: lowercase;
}
html[data-nav="Command"] .nav-brand::before {
    content: "> ";
    color: #0f0;
}

/* --- COMMAND (Menu Left | Logo + CTA Right) --- */
html[data-nav="Command"] .calana-nav {
    display: flex;
    justify-content: space-between; /* Space between Menu and (Logo+CTA) */
    align-items: center;
    padding: 15px 5%;
}

/* 1. Menu (Left) */
html[data-nav="Command"] .nav-center {
    order: 1;
    flex: 1; /* Take up available space */
    margin-right: auto;
    display: flex;
    justify-content: flex-start;
}
html[data-nav="Command"] .nav-list {
    justify-content: flex-start; /* Align links to left */
}

/* 2. Group Logo and CTA (Right) */
/* We can't group them physically in HTML, so we use visual ordering */
html[data-nav="Command"] .nav-left {
    order: 2; /* Move Logo to right */
    margin-right: 20px; /* Space between Logo and CTA */
    margin-left: auto; /* Push to far right */
}
html[data-nav="Command"] .nav-right {
    order: 3; /* Move CTA to far right */
    margin-left: 0;
}

/* HOMEPAGE LAYOUT ENGINE removed - now using page-based #landing tag system */

/* Hero components removed - using page-based builder */


/* Layout definitions removed - using page-based builder */


/* ==========================================================================
   FUNNEL BUILDER STYLES
   ========================================================================== */
/* Homepage layout content removed - using page-based builder */


/* All layout definitions removed - now using page-based #landing tag system */
/* Layout fragments removed */


/* Remaining layout definitions cleaned up */

.post-card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.post-card-tags { color: var(--ghost-accent-color); font-size: 0.8rem; font-weight: bold; text-transform: uppercase; display: block; margin-bottom: 8px; }
.post-card-title { font-size: 1.5rem; margin: 0 0 10px 0; line-height: 1.2; }
.post-card-excerpt { font-size: 1rem; color: var(--text-2); flex-grow: 1; }
.post-card-meta { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--text-2); }
.author-profile-image { width: 30px; height: 30px; border-radius: 50%; }

/* --- FORM MESSAGE FIX (Nuclear Option) --- */
.subscribe-form .message-success,
.subscribe-form .message-error {
    display: none !important; /* Force hidden by default */
}
/* Only show when the parent form specifically has the 'success' class */
.subscribe-form.success .message-success {
    display: block !important;
}
.subscribe-form.error .message-error {
    display: block !important;
}
/* Hide the input fields when success is active */
.subscribe-form.success form {
    display: none !important;
}

/* Hero components removed - all layout logic moved to page-based system */

/* ==========================================================================
   POST LAYOUT ENGINE
   ========================================================================== */

/* --- Base Post Reset --- */
.article-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

/* --- 1. LEAD (Standard) --- */
html[data-post="Lead"] .article-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 60px;
}
html[data-post="Lead"] .article-image {
    order: 2; margin-top: 30px; width: 100%; border-radius: var(--radius-main);
}
html[data-post="Lead"] .article-title {
    order: 1; font-size: 3rem;
}

/* --- 2. MANUAL (formerly Premiere) --- */
/* Cinema Style: Huge Image */
html[data-post="Manual"] .article-header {
    position: relative; margin-bottom: 0;
}
html[data-post="Manual"] .article-image {
    order: 1; width: 100vw; margin-left: 50%; transform: translateX(-50%);
    max-height: 80vh; object-fit: cover;
}
html[data-post="Manual"] .article-title {
    order: 2; margin-top: 40px; text-align: center; max-width: 800px;
    margin-left: auto; margin-right: auto;
}

/* --- 3. VISTA (formerly Sidecar) --- */
/* Sidebar Layout */
html[data-post="Vista"] .gh-article {
    display: grid; grid-template-columns: 1fr 300px; gap: 60px; align-items: start;
}
html[data-post="Vista"] .article-header {
    grid-column: 1 / -1; text-align: left;
}
@media (max-width: 1000px) {
    html[data-post="Vista"] .gh-article { grid-template-columns: 1fr; }
}

/* --- 4. DRAFT (formerly Typist) --- */
/* Text Focus / No Image */
html[data-post="Draft"] .article-image {
    display: none;
}
html[data-post="Draft"] .gh-article {
    max-width: 680px; margin: 0 auto; font-family: var(--font-serif, Georgia, serif);
}
html[data-post="Draft"] .article-title {
    font-size: 4rem; line-height: 1.1; text-align: left;
    border-bottom: 1px solid var(--border); padding-bottom: 30px; margin-bottom: 30px;
}

/* --- 5. DECK (formerly U-Turn) --- */
/* Split Header */
html[data-post="Deck"] .article-header {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; text-align: left;
}
html[data-post="Deck"] .article-image {
    order: 1; height: 100%; min-height: 400px; object-fit: cover;
}
@media (max-width: 768px) {
    html[data-post="Deck"] .article-header { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER LAYOUT ENGINE
   ========================================================================== */

/* --- Base Reset --- */
.calana-footer {
    background: var(--bg-1);
    color: var(--text-1);
    padding: 60px 0;
    margin-top: auto;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: var(--z-normal);
}
.footer-inner {
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding: 0 5%;
}
.footer-logo-img { display: none; } /* Hidden by default */


/* --- 1. MONOLITH (The Standard) --- */
/* Centered, Heavy, Big Subscribe Form */
html[data-footer="Monolith"] .footer-inner { text-align: center; max-width: 800px; }
html[data-footer="Monolith"] .footer-subscribe-content h3 { font-size: 2.5rem; margin-bottom: 10px; }
html[data-footer="Monolith"] .footer-form { margin: 30px auto; max-width: 500px; display: flex; gap: 10px; }
html[data-footer="Monolith"] .footer-form input { flex: 1; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-main); }


/* --- 2. BASELINE (Minimalist) --- */
/* Single Line, Flexbox, No big form */
html[data-footer="Baseline"] .footer-subscribe { display: none; }
html[data-footer="Baseline"] .calana-footer { padding: 20px 0; background: var(--bg-0); border-top: 1px solid var(--border); }
html[data-footer="Baseline"] .footer-inner { display: flex; justify-content: space-between; align-items: center; }
html[data-footer="Baseline"] .footer-copyright { margin: 0; font-size: 0.9rem; opacity: 0.7; }


/* --- 3. CATALOG (Sitemap Grid) --- */
/* 4 Columns (Brand | Links | Links | Social) - CSS Grid */
html[data-footer="Catalog"] .footer-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
html[data-footer="Catalog"] .footer-brand-info { grid-column: 1 / -1; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
html[data-footer="Catalog"] .footer-subscribe { grid-column: 1 / -1; } /* Fallback to show form full width */


/* --- 4. BUBBLE (Floating Round) --- */
/* Floating Card, Rounded Corners */
html[data-footer="Bubble"] .calana-footer { background: transparent; padding: 0 5% 40px; border: none; }
html[data-footer="Bubble"] .footer-inner {
    background: var(--bg-1);
    padding: 50px;
    border-radius: 40px;
    text-align: center;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05);
}


/* --- 5. ORACLE (Big Typography) --- */
/* Huge "Subscribe" text, minimal distractions */
html[data-footer="Oracle"] .calana-footer { background: #000; color: #fff; }
html[data-footer="Oracle"] .footer-subscribe-content h3 { font-size: 5rem; line-height: 0.9; margin-bottom: 30px; letter-spacing: -2px; }
html[data-footer="Oracle"] .footer-form { border-bottom: 2px solid #fff; padding-bottom: 10px; }
html[data-footer="Oracle"] .footer-form input { background: transparent; border: none; color: #fff; font-size: 1.5rem; width: 100%; }
html[data-footer="Oracle"] .footer-form button { display: none; } /* Press Enter style */


/* --- 6. SIGNATURE (Personal Brand) --- */
/* Left: Logo/Face | Right: Content */
html[data-footer="Signature"] .footer-subscribe { display: flex; align-items: center; gap: 40px; }
html[data-footer="Signature"] .footer-logo-img { display: block; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
html[data-footer="Signature"] .footer-subscribe-content { text-align: left; }


/* --- 7. CAROUSEL (Horizontal) --- */
/* Wide layout, items spaced out horizontally */
html[data-footer="Carousel"] .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px; }
html[data-footer="Carousel"] .footer-brand-info { flex: 1; min-width: 250px; }
html[data-footer="Carousel"] .footer-subscribe-content { flex: 2; min-width: 300px; }


/* --- 8. TRIPTYCH (3 Columns) --- */
/* Distinct 3-column split */
html[data-footer="Triptych"] .footer-inner {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr; /* Columns with lines */
    align-items: center;
    gap: 20px;
}
/* Fake vertical lines */
html[data-footer="Triptych"] .footer-inner::before,
html[data-footer="Triptych"] .footer-inner::after {
    content: ''; width: 1px; height: 100%; background: var(--border); display: block;
}
/* Re-arrange content using grid areas if needed, or generic styling */
html[data-footer="Triptych"] .footer-subscribe { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }


/* --- 9. STASH (Boxed/Compact) --- */
/* Dark box, compact text, very functional */
html[data-footer="Stash"] .calana-footer { background: var(--bg-0); padding: 40px 0; }
html[data-footer="Stash"] .footer-inner {
    background: #111;
    color: #fff;
    padding: 30px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
html[data-footer="Stash"] .footer-form input { background: #333; border: none; color: #fff; }


/* --- 10. ELEVATOR (Vertical Stack) --- */
/* Narrow, everything stacked vertically, centered */
html[data-footer="Elevator"] .footer-inner { max-width: 400px; text-align: center; }
html[data-footer="Elevator"] .footer-logo-img { display: block; margin: 0 auto 20px; width: 50px; }
html[data-footer="Elevator"] .footer-brand-info { margin-bottom: 40px; }
html[data-footer="Elevator"] .footer-copyright { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 40px; }


/* ==========================================================================
   CODE BLOCK COPY BUTTON
   ========================================================================== */
pre {
    position: relative; /* Ensure button sits inside */
}
.gh-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0; /* Hide by default */
}
pre:hover .gh-copy-btn {
    opacity: 1; /* Show on hover */
}
.gh-copy-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ==========================================================================
   GHOST NATIVE CARDS
   ========================================================================== */

/* --- Base Header Card Integration --- */
body .kg-header-card {
    /* Physics: Use theme's border-radius and shadows */
    border-radius: var(--radius-main);
    box-shadow: var(--shadow-card);
    
    /* Typography: Use theme's font system */
    font-family: var(--font-body, inherit);
    
    /* Spacing & Layout */
    padding: 2.5rem;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
    
    /* Default Style: Secondary background with primary text */
    background-color: var(--bg-1);
    color: var(--text-0);
    border: 1px solid var(--border);
    
    /* Smooth transitions for style changes */
    transition: all 0.3s ease;
}

/* --- Typography Hierarchy --- */
body .kg-header-card h2 {
    font-family: var(--font-head, inherit);
    font-weight: var(--font-weight-head, 700);
    letter-spacing: var(--letter-spacing-head, -0.01em);
    color: var(--text-0);
    margin: 0 0 1rem 0;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.2;
}

body .kg-header-card h3 {
    font-family: var(--font-head, inherit);
    font-weight: var(--font-weight-head, 700);
    letter-spacing: var(--letter-spacing-head, -0.01em);
    color: var(--text-0);
    margin: 0 0 0.75rem 0;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.3;
}

body .kg-header-card p {
    color: var(--text-1);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

body .kg-header-card p:last-child {
    margin-bottom: 0;
}

/* --- Accent Style (.kg-style-accent) --- */
body .kg-header-card.kg-style-accent {
    /* Use semantic accent variables */
    background-color: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
    
    /* Enhanced shadow for accent cards */
    box-shadow: 
        var(--shadow-card),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Force all text inside accent cards to use accent-contrast */
body .kg-header-card.kg-style-accent h2,
body .kg-header-card.kg-style-accent h3,
body .kg-header-card.kg-style-accent p {
    color: var(--accent-contrast);
}

body .kg-header-card.kg-style-accent p {
    opacity: 0.95;
}

/* --- Dark Style (.kg-style-dark) --- */
body .kg-header-card.kg-style-dark {
    /* Adapt to theme's dark mode, not pure black */
    background-color: var(--bg-2);
    color: #ffffff;
    border-color: var(--border);
    
    /* Subtle inner shadow for depth */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        var(--shadow-card);
}

/* Force all text inside dark cards to use appropriate colors */
body .kg-header-card.kg-style-dark h2,
body .kg-header-card.kg-style-dark h3 {
    color: #ffffff;
}

body .kg-header-card.kg-style-dark p {
    color: rgba(255, 255, 255, 0.8);
}

/* --- Dark Mode Adaptations --- */
body.scheme-Dark .kg-header-card {
    /* Enhanced shadows for dark mode */
    box-shadow: 
        0 4px 25px -4px rgba(0, 0, 0, 0.6),
        0 2px 10px -2px rgba(0, 0, 0, 0.4);
}

body.scheme-Dark .kg-header-card.kg-style-accent {
    /* Accent cards get special treatment in dark mode */
    box-shadow: 
        0 4px 25px -4px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.scheme-Dark .kg-header-card.kg-style-dark {
    /* Dark style gets even darker in dark mode */
    background-color: #0a0a0a;
    border-color: #1a1a1a;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 25px -4px rgba(0, 0, 0, 0.8);
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    body .kg-header-card {
        padding: 2rem 1.5rem;
        margin: 1.5rem 0;
    }
    
    body .kg-header-card h2 {
        font-size: clamp(1.25rem, 5vw, 2rem);
    }
    
    body .kg-header-card h3 {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
    }
    
    body .kg-header-card p {
        font-size: 1rem;
    }
}

/* --- Links inside Header Cards --- */
body .kg-header-card a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

body .kg-header-card a:hover {
    color: var(--text-0);
    text-decoration: underline;
}

body .kg-header-card.kg-style-accent a {
    color: var(--accent-contrast);
    text-decoration: underline;
}

body .kg-header-card.kg-style-accent a:hover {
    opacity: 0.8;
}

/* --- Content Alignment Variations --- */
body .kg-header-card.kg-align-center {
    text-align: center;
}

body .kg-header-card.kg-align-right {
    text-align: right;
}

/* --- Size Variations --- */
body .kg-header-card.kg-size-small {
    padding: 1.5rem;
    margin: 1rem 0;
}

body .kg-header-card.kg-size-large {
    padding: 3rem;
    margin: 2.5rem 0;
}

body .kg-header-card.kg-size-large h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

body .kg-header-card.kg-size-large h3 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
}