/**
 * America's State Parks - Premium Mega Menu
 * 
 * Provides a visually stunning mega-menu experience with
 * regional state groupings and smooth animations.
 * 
 * @version 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    --asp-menu-bg: #ffffff;
    --asp-menu-text: #1e293b;
    --asp-menu-text-muted: #64748b;
    --asp-menu-hover: #166534;
    --asp-menu-accent: #22c55e;
    --asp-menu-gold: #fbbf24;
    --asp-menu-border: #e2e8f0;
    --asp-menu-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    --asp-menu-radius: 16px;
    --asp-transition-fast: 150ms ease;
    --asp-transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Main Navigation Bar
   ========================================================================== */

.asp-mega-nav {
    position: relative;
    z-index: 1000;
}

/* Primary menu container */
.main-navigation .ast-nav-menu,
.main-header-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Top-level menu items */
.main-header-menu>.menu-item>a,
.ast-nav-menu>.menu-item>a {
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--asp-menu-text);
    text-decoration: none;
    border-radius: 8px;
    transition: all var(--asp-transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.main-header-menu>.menu-item>a:hover,
.ast-nav-menu>.menu-item>a:hover {
    color: var(--asp-menu-hover);
    background: rgba(22, 101, 52, 0.08);
}

/* Current page indicator */
.main-header-menu>.menu-item.current-menu-item>a,
.main-header-menu>.menu-item.current-menu-ancestor>a {
    color: var(--asp-menu-hover);
    background: rgba(22, 101, 52, 0.08);
}

/* Dropdown arrow */
.asp-menu-arrow {
    display: flex;
    align-items: center;
    transition: transform var(--asp-transition-smooth);
}

.menu-item-has-children:hover .asp-menu-arrow {
    transform: rotate(180deg);
}

/* ==========================================================================
   Standard Dropdown (Non-Mega)
   ========================================================================== */

.main-header-menu .sub-menu:not(.asp-mega-menu),
.ast-nav-menu .sub-menu:not(.asp-mega-menu) {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--asp-menu-bg);
    border: 1px solid var(--asp-menu-border);
    border-radius: var(--asp-menu-radius);
    box-shadow: var(--asp-menu-shadow);
    padding: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--asp-transition-smooth);
    z-index: 1001;
}

.main-header-menu .menu-item-has-children:hover>.sub-menu:not(.asp-mega-menu),
.ast-nav-menu .menu-item-has-children:hover>.sub-menu:not(.asp-mega-menu) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Standard dropdown items */
.sub-menu:not(.asp-mega-menu) .menu-item a {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--asp-menu-text);
    text-decoration: none;
    border-radius: 8px;
    transition: all var(--asp-transition-fast);
}

.sub-menu:not(.asp-mega-menu) .menu-item a:hover {
    color: var(--asp-menu-hover);
    background: rgba(22, 101, 52, 0.08);
    padding-left: 1.25rem;
}

/* ==========================================================================
   Mega Menu Container
   ========================================================================== */

.asp-mega-menu-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: translateX(-50%) translateY(10px) !important;
    width: 95vw !important;
    max-width: 1050px !important;
    margin-left: 0 !important;
    background: var(--asp-menu-bg);
    border: 1px solid var(--asp-menu-border);
    border-radius: var(--asp-menu-radius);
    box-shadow: var(--asp-menu-shadow);
    padding: 2rem 2.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all var(--asp-transition-smooth);
    z-index: 1001;
    left: 50% !important;
    right: auto !important;
}

/* Show mega menu on hover */
.asp-mega-menu-trigger:hover .asp-mega-menu-container {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) !important;
}

/* Mega menu header */
.asp-mega-header {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--asp-menu-text);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--asp-menu-accent);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.asp-mega-header::before {
    content: '🗺️';
    font-size: 1.5rem;
}

/* ==========================================================================
   Regional States Grid
   ========================================================================== */

.asp-mega-regions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1200px) {
    .asp-mega-regions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .asp-mega-regions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Region column */
.asp-region-column {
    min-width: 0;
}

/* Region label */
.asp-region-label {
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--asp-menu-hover);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid var(--asp-menu-accent);
}

/* State links within region */
.asp-region-states {
    list-style: none;
    padding: 0;
    margin: 0;
}

.asp-region-states li {
    margin: 0;
}

.asp-region-states a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.5rem;
    /* Reduced vertical padding */
    margin-left: -0.5rem;
    font-size: 0.875rem;
    color: var(--asp-menu-text);
    text-decoration: none;
    border-radius: 6px;
    transition: all var(--asp-transition-fast);
    white-space: nowrap;
    /* Prevent line wrap */
}

.asp-region-states a:hover {
    color: var(--asp-menu-hover);
    background: rgba(22, 101, 52, 0.08);
    transform: translateX(4px);
}

.asp-region-states a::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--asp-menu-accent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--asp-transition-fast);
}

.asp-region-states a:hover::before {
    opacity: 1;
}

/* ==========================================================================
   Activities Category Grid
   ========================================================================== */

.asp-mega-activities-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
}

@media (max-width: 1200px) {
    .asp-mega-activities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .asp-mega-activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Category column */
.asp-category-column {
    min-width: 0;
}

/* Category label */
.asp-category-label {
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--asp-menu-hover);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid var(--asp-menu-accent);
}

/* Activity links within category */
.asp-category-activities {
    list-style: none;
    padding: 0;
    margin: 0;
}

.asp-category-activities li {
    margin: 0;
}

.asp-category-activities a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.5rem;
    margin-left: -0.5rem;
    font-size: 0.8125rem;
    color: var(--asp-menu-text);
    text-decoration: none;
    border-radius: 6px;
    transition: all var(--asp-transition-fast);
    white-space: nowrap;
}

.asp-category-activities a:hover {
    color: var(--asp-menu-hover);
    background: rgba(22, 101, 52, 0.08);
    transform: translateX(4px);
}

.asp-category-activities a::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--asp-menu-accent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--asp-transition-fast);
}

.asp-category-activities a:hover::before {
    opacity: 1;
}

/* Different header icon for Activities mega menu */
.asp-mega-activities .asp-mega-header::before {
    content: '🎿';
}

/* ==========================================================================
   Things to Do Hub Grid
   ========================================================================== */

.asp-mega-things-header::before {
    content: '🏞️' !important;
}

.asp-mega-things-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}

@media (max-width: 1200px) {
    .asp-mega-things-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .asp-mega-things-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Hub article card */
.asp-things-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--asp-menu-border);
    background: #fafdf7;
    text-decoration: none;
    transition: all var(--asp-transition-smooth);
    cursor: pointer;
}

.asp-things-card:hover {
    border-color: var(--asp-menu-accent);
    background: rgba(22, 101, 52, 0.05);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(22, 101, 52, 0.12);
}

.asp-things-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
    line-height: 1;
}

.asp-things-title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--asp-menu-text);
    margin-bottom: 0.5rem;
    display: block;
    transition: color var(--asp-transition-fast);
}

.asp-things-card:hover .asp-things-title {
    color: var(--asp-menu-hover);
}

.asp-things-desc {
    font-size: 0.8125rem;
    color: var(--asp-menu-text-muted);
    line-height: 1.4;
    display: block;
}

/* ==========================================================================
   Mobile Navigation
   ========================================================================== */

@media (max-width: 992px) {

    /* Mobile menu container */
    .ast-mobile-popup-drawer .main-header-menu,
    .ast-mobile-popup-inner .main-header-menu {
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }

    /* Mobile menu items */
    .ast-mobile-popup-drawer .menu-item,
    .ast-mobile-popup-inner .menu-item {
        width: 100%;
        border-bottom: 1px solid var(--asp-menu-border);
    }

    .ast-mobile-popup-drawer .menu-item>a,
    .ast-mobile-popup-inner .menu-item>a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        font-size: 1rem;
        font-weight: 600;
        color: var(--asp-menu-text);
        min-height: 48px;
        /* Touch target */
    }

    /* Mobile dropdown toggle */
    .ast-mobile-popup-drawer .menu-item-has-children>a .asp-menu-arrow,
    .ast-mobile-popup-inner .menu-item-has-children>a .asp-menu-arrow {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: -1rem;
        background: #f1f5f9;
        border-radius: 8px;
    }

    /* Mobile sub-menu (accordion style) */
    .ast-mobile-popup-drawer .sub-menu,
    .ast-mobile-popup-inner .sub-menu {
        position: static !important;
        display: none;
        width: 100%;
        padding: 0 0 0.5rem 1rem;
        background: transparent;
        box-shadow: none;
        border: none;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .ast-mobile-popup-drawer .menu-item.toggled>.sub-menu,
    .ast-mobile-popup-inner .menu-item.toggled>.sub-menu {
        display: block;
    }

    /* Mobile mega menu - becomes accordion */
    .ast-mobile-popup-drawer .asp-mega-menu-container,
    .ast-mobile-popup-inner .asp-mega-menu-container {
        position: static !important;
        width: 100%;
        transform: none !important;
        max-width: none;
        padding: 1rem;
        border-radius: 0;
        box-shadow: none;
        border: none;
        background: #f8fafc;
    }

    /* Mobile regions - vertical stack */
    .ast-mobile-popup-drawer .asp-mega-regions-grid,
    .ast-mobile-popup-inner .asp-mega-regions-grid,
    .ast-mobile-popup-drawer .asp-mega-activities-grid,
    .ast-mobile-popup-inner .asp-mega-activities-grid,
    .ast-mobile-popup-drawer .asp-mega-things-grid,
    .ast-mobile-popup-inner .asp-mega-things-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .asp-region-column,
    .asp-category-column {
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--asp-menu-border);
    }

    .asp-region-column:last-child,
    .asp-category-column:last-child {
        border-bottom: none;
    }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* Focus states */
.main-header-menu a:focus,
.asp-region-states a:focus,
.asp-category-activities a:focus {
    outline: 2px solid var(--asp-menu-hover);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .asp-mega-menu-container,
    .sub-menu,
    .asp-menu-arrow,
    .asp-region-states a,
    .asp-category-activities a {
        transition: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --asp-menu-border: #000000;
        --asp-menu-text: #000000;
    }

    .asp-region-label {
        border-bottom-width: 3px;
    }
}/**
 * America's State Parks - Premium Footer
 * 
 * Multi-section footer with brand, navigation columns,
 * social icons, gradient accents, and micro-animations.
 * 
 * @version 3.0.0
 */

/* ==========================================================================
   Hide Default Astra Footer
   ========================================================================== */

footer.site-footer,
#colophon {
    display: none !important;
}

/* ==========================================================================
   Design Tokens
   ========================================================================== */

.asp-premium-footer {
    --f-bg: #1a2e23;
    --f-bg-deep: #142019;
    --f-text: rgba(255, 255, 255, 0.7);
    --f-text-dim: rgba(255, 255, 255, 0.45);
    --f-heading: rgba(255, 255, 255, 0.95);
    --f-accent: #4a9d6e;
    --f-accent-light: #6bc48f;
    --f-link-hover: #ffffff;
    --f-border: rgba(255, 255, 255, 0.08);
    --f-max-width: 1240px;
    --f-glow: radial-gradient(ellipse 600px 400px at 20% 50%, rgba(74, 157, 110, 0.06) 0%, transparent 70%);
}

/* ==========================================================================
   Footer Container
   ========================================================================== */

.asp-premium-footer {
    position: relative;
    background-color: var(--f-bg);
    color: var(--f-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin-top: 0;
    width: 100%;
    overflow: hidden;
}

/* Subtle background glow */
.asp-premium-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--f-glow);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Gradient Accent Line (Top)
   ========================================================================== */

.asp-footer-accent {
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--f-accent) 20%,
            var(--f-accent-light) 50%,
            var(--f-accent) 80%,
            transparent 100%);
    opacity: 0.8;
}

/* ==========================================================================
   Inner Container
   ========================================================================== */

.asp-footer-inner {
    max-width: var(--f-max-width);
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Main Footer (4 Columns)
   ========================================================================== */

.asp-footer-main {
    padding: 56px 0 48px;
}

.asp-footer-main .asp-footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
}

/* ==========================================================================
   Brand Column
   ========================================================================== */

.asp-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.asp-footer-logo-icon {
    color: var(--f-accent-light);
    flex-shrink: 0;
}

.asp-footer-logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--f-heading);
    letter-spacing: -0.01em;
}

.asp-footer-tagline {
    color: var(--f-text);
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 24px;
    max-width: 300px;
}

/* ==========================================================================
   Social Icons
   ========================================================================== */

.asp-footer-social {
    display: flex;
    gap: 12px;
}

.asp-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--f-text);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.asp-social-link:hover {
    background: rgba(74, 157, 110, 0.15);
    border-color: var(--f-accent);
    color: var(--f-accent-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 157, 110, 0.15);
}

.asp-social-link svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Link Columns
   ========================================================================== */

.asp-footer-heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--f-heading);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--f-accent);
    display: inline-block;
}

.asp-footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.asp-footer-links li {
    margin-bottom: 10px;
}

.asp-footer-links a {
    color: var(--f-text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.25s ease;
    position: relative;
    padding-left: 0;
}

.asp-footer-links a::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid var(--f-accent-light);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    opacity: 0;
    transition: all 0.25s ease;
}

.asp-footer-links a:hover {
    color: var(--f-link-hover);
    padding-left: 18px;
}

.asp-footer-links a:hover::before {
    opacity: 1;
    left: 0;
}

/* ==========================================================================
   Divider
   ========================================================================== */

.asp-footer-divider {
    max-width: var(--f-max-width);
    margin: 0 auto;
    padding: 0 24px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--f-border) 15%,
            rgba(255, 255, 255, 0.12) 50%,
            var(--f-border) 85%,
            transparent 100%);
}

/* ==========================================================================
   Bottom Bar
   ========================================================================== */

.asp-footer-bottom {
    padding: 24px 0;
    background: var(--f-bg-deep);
}

.asp-footer-bottom .asp-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.asp-footer-copyright {
    font-size: 14px;
    color: var(--f-text);
    margin: 0;
}

.asp-footer-copyright a {
    color: var(--f-accent-light);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.asp-footer-copyright a:hover {
    color: var(--f-link-hover);
}

.asp-footer-affiliate {
    font-size: 11px;
    color: var(--f-text-dim);
    margin: 0;
    max-width: 700px;
    line-height: 1.5;
}

/* ==========================================================================
   Responsive: Tablet
   ========================================================================== */

@media (max-width: 992px) {
    .asp-footer-main .asp-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }

    .asp-footer-brand {
        grid-column: 1 / -1;
    }

    .asp-footer-tagline {
        max-width: 100%;
    }

    .asp-footer-social {
        margin-bottom: 8px;
    }
}

/* ==========================================================================
   Responsive: Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .asp-footer-main {
        padding: 40px 0 32px;
    }

    .asp-footer-main .asp-footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .asp-footer-heading {
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .asp-footer-bottom .asp-footer-inner {
        padding: 0 16px;
    }

    .asp-footer-affiliate {
        font-size: 10px;
    }
}

/* ==========================================================================
   Newsletter Section (Get Insider Tips)
   Styles the existing widget-based newsletter in Astra
   ========================================================================== */

.ast-builder-layout-element[data-section="section-hb-below-header-1"],
.entry-content>.wp-block-group:has(h3:is(.has-text-align-center)),
.site-below-footer-wrap .ast-builder-layout-element {
    /* Keep existing newsletter styling */
}/**
 * Hub Article Styles — Tier 1 Landing Pages (v6.0.0)
 * 
 * Premium visual design matching State Park page quality.
 * Uses Astra's Page Builder content layout (set via PHP filter).
 *
 * @package Astra-Child
 * @since 6.0.0
 */

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */

:root {
    --hub-container-max: 1600px;
    --hub-pad-inline: clamp(16px, 3vw, 40px);

    /* Brand palette */
    --hub-green-700: #2e7d32;
    --hub-green-600: #388e3c;
    --hub-green-100: #e8f5e9;
    --hub-green-50: #f1f8e9;

    /* Neutrals */
    --hub-color-title: #0d1f13;
    --hub-color-heading: #1a2e1a;
    --hub-color-text: #374151;
    --hub-color-muted: #6b7280;
    --hub-white: #ffffff;
    --hub-bg: #f5f5f0;

    /* Effects */
    --hub-radius: 16px;
    --hub-radius-sm: 10px;
    --hub-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 20px rgba(0, 0, 0, 0.06);
    --hub-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.10);
    --hub-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   HIDE LEGACY TOC PLUGINS — Floating Blog TOC is used instead
   ============================================================================ */

.asp-hub-article .toc-sidebar,
.asp-hub-article .lwptoc,
.asp-hub-article .lwptoc_i,
.asp-hub-article #toc_container,
.asp-hub-article .ez-toc-container,
.asp-hub-article .rank-math-toc-container,
.asp-hub-article .wp-block-rank-math-toc-block,
.asp-hub-article .sp-toc {
    display: none !important;
}

/* ============================================================================
   GLOBAL PAGE SETUP
   ============================================================================ */

.asp-hub-article {
    overflow-x: hidden;
    background: var(--hub-bg);
}

/* Hide any sidebar that might render */
.asp-hub-article #secondary {
    display: none;
}

/* Force primary container to take full width and disable auto-centering from Astra no-sidebar layout */
.asp-hub-article #primary {
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Main container width */
.asp-hub-article .ast-container,
.asp-hub-article .site-content>.ast-container {
    max-width: var(--hub-container-max);
    margin: 0 auto;
    padding-left: var(--hub-pad-inline);
    padding-right: var(--hub-pad-inline);
}

/* ============================================================================
   SPECTRA GRID FIX — Override 3-column to clean 2-column layout
   
   Spectra outputs a 3-column grid where the first column is an empty spacer.
   We hide the spacer and force a clean content + sidebar layout.
   ============================================================================ */

/* Force the grid to 2 columns: content takes available space, sidebar fixed */
.asp-hub-article .uagb-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 320px !important;
    gap: 2rem !important;
    overflow: visible !important;
}

/* Hide the empty first Spectra column (spacer div with no useful content) */
.asp-hub-article .uagb-layout-grid>.wp-block-uagb-container:not(:has(.entry-content)):not(:has(.aawp-product)) {
    display: none !important;
}

/* ============================================================================
   CONTENT CARD — White elevated card for main content
   Matches the premium State Park page aesthetic
   ============================================================================ */

/* The Spectra grid column wrapping .entry-content */
.asp-hub-article .uagb-layout-grid>.wp-block-uagb-container:has(.entry-content) {
    background: var(--hub-white);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow-card);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    align-self: start;
}

/* Universal Content Card — White elevated styling applied directly to entry content */
.asp-hub-article .entry-content {
    background: var(--hub-white);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow-card);
    padding: clamp(1.5rem, 3vw, 2.5rem) !important;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow: visible !important;
    /* Extremely important to let 100vw hero images break out without being clipped */
}

/* EXCEPTION: If entry-content is wrapped in a Spectra Grid, the white card is handled by the wrapper column.
   Remove the background and padding from entry-content to prevent double-boxing. */
.asp-hub-article .uagb-layout-grid .entry-content {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Fix Hero Image layout when embedded directly in the padded white card. 
   Pulls the hero up to cover the top padding, ensuring it sits flush, while keeping the content padded. */
.asp-hub-article .entry-content>.wp-block-cover:first-of-type,
.asp-hub-article .entry-content>.wp-block-image:first-of-type,
.asp-hub-article .entry-content>figure.sp-content-image:first-of-type {
    margin-top: calc(-1 * clamp(1.5rem, 3vw, 2.5rem)) !important;
    margin-bottom: 2rem !important;
}

/* ============================================================================
   AMAZON SIDEBAR — Polished sidebar card
   ============================================================================ */

/* The sidebar Spectra column (the one with Amazon widgets, typically the last child) */
.asp-hub-article .uagb-layout-grid>.wp-block-uagb-container:has(.aawp-product) {
    background: var(--hub-white);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow-card);
    padding: 1.5rem;
    margin-top: 1.5rem;
    position: sticky;
    top: 100px;
    align-self: start;
}

/* Sidebar heading — "Recommended Gear" feel */
.asp-hub-article .uagb-layout-grid>.wp-block-uagb-container:has(.aawp-product)::before {
    content: "📚 Recommended Guides";
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hub-green-700);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--hub-green-100);
}

/* Amazon product cards — refined */
.asp-hub-article .aawp-product {
    max-width: 100%;
    margin: 0 0 1.25rem;
    border-radius: var(--hub-radius-sm);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: all var(--hub-transition);
    box-shadow: none;
}

.asp-hub-article .aawp-product:hover {
    border-color: var(--hub-green-600);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.08);
    transform: translateY(-2px);
}

.asp-hub-article .aawp-product:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   BREADCRUMBS — Harmonized with State Park pages
   ============================================================================ */

.asp-hub-article .ast-breadcrumbs-wrapper,
.asp-hub-article .astra-advanced-hook-39909 {
    max-width: var(--hub-container-max);
    margin: 0 auto;
    padding: 12px var(--hub-pad-inline);
}

.asp-hub-article .ast-breadcrumbs-wrapper .rank-math-breadcrumb,
.asp-hub-article .ast-breadcrumbs-wrapper a {
    font-size: 0.85rem;
    color: var(--hub-color-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.asp-hub-article .ast-breadcrumbs-wrapper a:hover {
    color: var(--hub-green-700);
    text-decoration: underline;
}

/* ============================================================================
   TYPOGRAPHY — Premium text design
   ============================================================================ */

/* Article title — hidden if in hero block, styled if visible */
.asp-hub-article .entry-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--hub-color-title);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Hide post meta — hub articles are evergreen */
.asp-hub-article .entry-meta {
    display: none;
}

/* First paragraph — lead text */
.asp-hub-article .entry-content>p:first-of-type {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--hub-color-text);
    font-weight: 400;
}

/* First paragraph first letter — drop cap effect */
.asp-hub-article .entry-content>p:first-of-type::first-letter {
    font-size: 3.2em;
    float: left;
    line-height: 0.8;
    margin-right: 0.08em;
    margin-top: 0.05em;
    font-weight: 800;
    color: var(--hub-green-700);
}

/* Regular paragraphs */
.asp-hub-article .entry-content>p {
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--hub-color-text);
}

/* ============================================================================
   HEADINGS — Section hierarchy with green accents
   ============================================================================ */

/* H2 — Major sections with accent border */
.asp-hub-article .entry-content>h2 {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--hub-color-heading);
    margin: 3rem 0 1rem;
    padding-top: 2rem;
    padding-bottom: 0.6rem;
    padding-left: 1rem;
    letter-spacing: -0.01em;
    border-top: 1px solid #e5e7eb;
    border-left: 4px solid var(--hub-green-700);
    line-height: 1.3;
}

/* First H2 — no top border (follows intro text) */
.asp-hub-article .entry-content>h2:first-of-type {
    border-top: none;
    margin-top: 2rem;
    padding-top: 0;
}

/* H3 — Sub-sections */
.asp-hub-article .entry-content>h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1f2937;
    margin: 2rem 0 0.6rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--hub-green-100);
    line-height: 1.35;
}

/* H4 */
.asp-hub-article .entry-content>h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 1.5rem 0 0.5rem;
}

/* ============================================================================
   LINKS — Brand green instead of default blue
   ============================================================================ */

.asp-hub-article .entry-content a:not(.wp-block-button__link):not(.aawp-product__link) {
    color: var(--hub-green-700);
    text-decoration: underline;
    text-decoration-color: rgba(46, 125, 50, 0.3);
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

.asp-hub-article .entry-content a:not(.wp-block-button__link):not(.aawp-product__link):hover {
    color: #1b5e20;
    text-decoration-color: var(--hub-green-700);
}

/* ============================================================================
   LISTS — Refined bullets and spacing
   ============================================================================ */

.asp-hub-article .entry-content>ul,
.asp-hub-article .entry-content>ol {
    padding-left: 1.5rem;
    color: var(--hub-color-text);
    line-height: 1.78;
    margin: 1rem 0 1.5rem;
}

.asp-hub-article .entry-content li {
    margin-bottom: 0.4rem;
}

/* ============================================================================
   TABLES — Premium matching State Park quality
   ============================================================================ */

.asp-hub-article .entry-content table,
.asp-hub-article .wp-block-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--hub-radius-sm);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    margin: 1.5rem 0 2rem;
    font-size: 0.95rem;
}

.asp-hub-article .entry-content th,
.asp-hub-article .wp-block-table th {
    background: var(--hub-green-700);
    color: var(--hub-white);
    font-weight: 600;
    text-align: left;
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.asp-hub-article .entry-content td,
.asp-hub-article .wp-block-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    color: var(--hub-color-text);
    vertical-align: top;
}

.asp-hub-article .entry-content tr:nth-child(even),
.asp-hub-article .wp-block-table tr:nth-child(even) {
    background: #fafafa;
}

.asp-hub-article .entry-content tr:hover,
.asp-hub-article .wp-block-table tbody tr:hover {
    background: var(--hub-green-50);
}

.asp-hub-article .entry-content tr:last-child td,
.asp-hub-article .wp-block-table tr:last-child td {
    border-bottom: none;
}

/* ============================================================================
   BLOCKQUOTES — Styled callouts
   ============================================================================ */

.asp-hub-article .entry-content blockquote {
    background: var(--hub-green-50);
    border-left: 4px solid var(--hub-green-700);
    border-radius: 0 var(--hub-radius-sm) var(--hub-radius-sm) 0;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 2rem;
    font-style: italic;
    color: #2d4a2d;
}

.asp-hub-article .entry-content blockquote p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
}

/* ============================================================================
   IMAGES — Clean presentation with captions
   ============================================================================ */

.asp-hub-article .entry-content img {
    border-radius: var(--hub-radius-sm);
    max-width: 100%;
    height: auto;
}

.asp-hub-article .entry-content figcaption,
.asp-hub-article .entry-content .wp-caption-text {
    font-size: 0.8rem;
    color: var(--hub-color-muted);
    text-align: center;
    margin-top: 0.5rem;
    font-style: italic;
}

/* ============================================================================
   SPECTRA OVERRIDES — Contain blocks within layout
   ============================================================================ */

/* Override Spectra alignfull */
.asp-hub-article .alignfull,
.asp-hub-article .wp-block-uagb-container.alignfull {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================================
   SPECTRA STICKY KILL — Disable Spectra's JS-based sticky positioning
   
   Spectra duplicates grid children into "placeholder" divs (with massive 
   inline heights ~20k px) and sets content containers to position:fixed.
   This creates huge empty gaps. We force everything back to normal flow.
   ============================================================================ */

/* Kill all Spectra sticky/fixed positioning in hub articles */
.asp-hub-article .uagb-position__sticky,
.asp-hub-article .uagb-position__sticky.uagb-position__sticky--stuck,
.asp-hub-article [class*="uagb-position__sticky"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    transform: none !important;
    z-index: auto !important;
}

/* Collapse Spectra's placeholder spacing divs (the empty ones with inline heights) */
.asp-hub-article .uagb-layout-grid>div[style*="height"]:empty,
.asp-hub-article .uagb-layout-grid>div[style*="min-height"]:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force grid children to use auto height, not Spectra's JS-calculated heights */
.asp-hub-article .uagb-layout-grid>.wp-block-uagb-container {
    height: auto !important;
    min-height: 0 !important;
}

/* Only allow sticky on the Amazon sidebar (our own CSS, not Spectra's) */
.asp-hub-article .uagb-layout-grid>.wp-block-uagb-container:has(.aawp-product) {
    position: sticky !important;
    top: 100px !important;
    align-self: start;
}

/* ============================================================================
   PARK FILTER INTEGRATION — Premium filter section
   ============================================================================ */

.asp-hub-article .pf-container {
    max-width: 100%;
    padding: 0;
    margin: 2rem 0 3rem;
}

/* Filter bar — sticky disabled, flow naturally */
.asp-hub-article .pf-filter-bar {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    max-width: 100%;
    background: var(--hub-white);
    border-radius: var(--hub-radius-sm);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* ============================================================================
   AUTHOR BOX — End of article
   ============================================================================ */

.asp-hub-article .asp-author-box {
    border-radius: var(--hub-radius);
    margin-top: 2rem;
}

/* ============================================================================
   RESPONSIVE — Tablet (<=900px)
   ============================================================================ */

@media (max-width: 900px) {

    /* Stack the grid on tablet */
    .asp-hub-article .uagb-layout-grid {
        display: block !important;
    }

    /* Content card — full width, smaller padding */
    .asp-hub-article .uagb-layout-grid>.wp-block-uagb-container:has(.entry-content) {
        padding: 1.5rem;
        border-radius: var(--hub-radius-sm);
        margin-top: 1rem;
    }

    /* Sidebar — un-stick, center */
    .asp-hub-article .uagb-layout-grid>.wp-block-uagb-container:has(.aawp-product) {
        position: relative;
        top: auto;
        padding: 1.25rem;
        margin-top: 1.5rem;
        border-radius: var(--hub-radius-sm);
    }

    /* Amazon widget card — constrain width */
    .asp-hub-article .aawp-product {
        max-width: 420px;
    }

    /* Disable sticky on mobile */
    .asp-hub-article .uagb-position__sticky,
    .asp-hub-article .uagb-position__sticky.uagb-position__sticky--stuck {
        position: relative !important;
        top: auto !important;
    }
}

/* ============================================================================
   RESPONSIVE — Tablet (<=768px)
   ============================================================================ */

@media (max-width: 768px) {

    .asp-hub-article .ast-container,
    .asp-hub-article .site-content>.ast-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .asp-hub-article .entry-title {
        font-size: 1.5rem;
    }

    .asp-hub-article .entry-content>p:first-of-type {
        font-size: 1.05rem;
    }

    .asp-hub-article .entry-content>p:first-of-type::first-letter {
        font-size: 2.5em;
    }

    .asp-hub-article .entry-content>h2 {
        font-size: 1.4rem;
        padding-left: 0.75rem;
    }

    .asp-hub-article .entry-content>h3 {
        font-size: 1.15rem;
    }

    .asp-hub-article .ast-breadcrumbs-wrapper,
    .asp-hub-article .astra-advanced-hook-39909 {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ============================================================================
   RESPONSIVE — Small mobile (<=480px)
   ============================================================================ */

@media (max-width: 480px) {

    .asp-hub-article .uagb-layout-grid>.wp-block-uagb-container:has(.entry-content) {
        padding: 1rem;
        border-radius: 8px;
    }

    .asp-hub-article .entry-title {
        font-size: 1.35rem;
    }

    .asp-hub-article .entry-content>h2 {
        font-size: 1.3rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .asp-hub-article .entry-content>h3 {
        font-size: 1.1rem;
    }

    .asp-hub-article .entry-content>p:first-of-type::first-letter {
        font-size: 2.2em;
    }

    .asp-hub-article .entry-content table,
    .asp-hub-article .wp-block-table table {
        font-size: 0.85rem;
    }

    .asp-hub-article .entry-content th,
    .asp-hub-article .wp-block-table th,
    .asp-hub-article .entry-content td,
    .asp-hub-article .wp-block-table td {
        padding: 0.5rem 0.6rem;
    }
}

/* ============================================================================
   RESPONSIVE — Large desktop (>=1400px)
   ============================================================================ */

@media (min-width: 1400px) {

    /* Use a centered layout with max 1400px width.
       The TOC takes up 260px on the left side, so we allocate 320px padding
       (260px TOC + 60px gap) to keep text readable without overlapping. */
    .asp-hub-article .site-content>.ast-container {
        max-width: var(--hub-container-max) !important;
        margin: 0 auto !important;
        padding-left: 320px !important;
        padding-right: 40px !important;
        box-sizing: border-box !important;
    }

    /* Force the Header Menu into Full-Width stretched mode using centered breakout */
    .asp-hub-article .site-header .ast-builder-grid-row {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        box-sizing: border-box !important;
    }

    /* Force Hero Images to break out of the asymmetrical padded containers.
       Because padding is asymmetrical (320px left, 40px right), the center of the content
       is shifted right by 140px. The negative margin counters this offset to reach the edges. */
    .asp-hub-article .site-content [class*="astra-advanced-hook"]>.wp-block-cover,
    .asp-hub-article .site-content [class*="astra-advanced-hook"]>.wp-block-image,
    .asp-hub-article .site-content [class*="astra-advanced-hook"]>figure,
    .asp-hub-article .entry-content>.wp-block-cover.alignfull,
    .asp-hub-article .entry-content>.wp-block-image.alignfull,
    .asp-hub-article .entry-content>.wp-block-cover:first-of-type,
    .asp-hub-article .entry-content>.wp-block-image:first-of-type,
    .asp-hub-article .entry-content>figure.sp-content-image:first-of-type {
        margin-left: calc(50% - 50vw - 140px) !important;
        margin-right: calc(50% - 50vw + 140px) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }

    /* Ensure inner images stretch to 100% and get rid of border-radius */
    .asp-hub-article .site-content [class*="astra-advanced-hook"]>.wp-block-cover img,
    .asp-hub-article .site-content [class*="astra-advanced-hook"]>.wp-block-image img,
    .asp-hub-article .site-content [class*="astra-advanced-hook"]>figure img,
    .asp-hub-article .entry-content>figure.sp-content-image:first-child img,
    .asp-hub-article .entry-content>.wp-block-image:first-child img {
        width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
    }

    /* UAG Layout grid (Tier 1 Hub Articles structure) */
    .asp-hub-article .uagb-layout-grid {
        grid-template-columns: 1fr 320px !important;
        gap: 2.5rem !important;
    }
}

/* ============================================================================
   HUB TOC OVERRIDES — Keep TOC expanded on hub articles
   ============================================================================ */

/* On large desktop (>=1400px): TOC lives in the left gutter */
@media (min-width: 1400px) {
    .asp-hub-article .blog-floating-toc {
        /* Align TOC 20px inside the left edge of the centered 1600px container */
        left: max(20px, calc(50vw - 800px + 20px));
    }
}/**
 * Blog TOC - Premium Floating Table of Contents
 * 
 * Provides State Parks-style floating TOC for blog posts and planning pages.
 * 
 * @version 2.0.0
 */

/* ==========================================================================
   HIDE LUCYWP TOC PLUGIN (Duplicate with our Floating TOC)
   ========================================================================== */

/* Hide the LuckyWP TOC plugin block on pages with our floating TOC */
.has-blog-toc .lwptoc,
.has-blog-toc .lwptoc_i,
.has-blog-toc .toc-sidebar,
.has-blog-toc #toc_container,
.has-blog-toc .ez-toc-container,
.has-blog-toc .sp-toc {
    display: none !important;
}

/* ==========================================================================
   BREADCRUMB CAPITALIZATION FIX
   ========================================================================== */

/* Capitalize breadcrumb text (fixes lowercase category names like "hunting" -> "Hunting") */
.ast-breadcrumbs-wrapper .trail-items .trail-item a span,
.ast-breadcrumbs-wrapper .trail-items .trail-item>span span,
.breadcrumb-trail .trail-items .trail-item span {
    text-transform: capitalize;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Reuse State Parks design tokens)
   ========================================================================== */

:root {
    --blog-toc-primary: #1a5a1a;
    --blog-toc-primary-light: #2e7d32;
    --blog-toc-accent: #4caf50;
    --blog-toc-text: #2d3748;
    --blog-toc-text-light: #718096;
    --blog-toc-white: #ffffff;
    --blog-toc-bg: #f8f9fa;
    --blog-toc-border: #e2e8f0;
    --blog-toc-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --blog-toc-radius: 12px;
    --blog-toc-width: 260px;
}

/* ==========================================================================
   BASE - Hidden by default (shown via media queries)
   ========================================================================== */

.blog-floating-toc {
    display: none;
}

/* Hide TOC until hero is scrolled past */
.blog-floating-toc.is-hidden-before-hero {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ==========================================================================
   MOBILE/TABLET (<1200px) - Horizontal Sticky Pill-Bar
   ========================================================================== */

@media (max-width: 1199px) {
    .blog-floating-toc {
        display: block;
        position: sticky;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 50;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-bottom: 1px solid #e2e8f0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        padding: 0.75rem 1rem;
    }

    /* Hide toggle button on mobile */
    .blog-floating-toc .blog-toc-toggle {
        display: none;
    }

    /* Content becomes horizontal scrolling container */
    .blog-floating-toc .blog-toc-content {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0;
        margin: 0;
        background: transparent;
        box-shadow: none;
        max-height: none;
        border-radius: 0;
    }

    .blog-floating-toc .blog-toc-content::-webkit-scrollbar {
        display: none;
    }

    /* Hide title on mobile */
    .blog-floating-toc .blog-toc-title {
        display: none;
    }

    /* List becomes horizontal flex */
    .blog-floating-toc .blog-toc-list {
        display: flex;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Items inline */
    .blog-floating-toc .blog-toc-item {
        flex-shrink: 0;
        margin: 0;
    }

    .blog-floating-toc .blog-toc-item-sub {
        padding-left: 0;
    }

    /* Hide triangle and children on mobile - flat pill layout */
    .blog-floating-toc .blog-toc-triangle {
        display: none;
    }

    .blog-floating-toc .blog-toc-children {
        display: none;
    }

    .blog-floating-toc .blog-toc-link-wrap {
        display: contents;
    }

    /* Pill-style links */
    .blog-floating-toc .blog-toc-link {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 0.875rem;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 9999px;
        color: #2e7d32;
        font-size: 0.8rem;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.2s ease;
        line-height: 1.2;
    }

    .blog-floating-toc .blog-toc-link:hover {
        color: #14532d;
        background: #dcfce7;
        border-color: #86efac;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
    }

    .blog-floating-toc .blog-toc-link.active {
        background: linear-gradient(135deg, #166534 0%, #14532d 100%);
        color: white;
        border-color: #166534;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(22, 101, 52, 0.35);
    }

    /* Hide progress bar on mobile */
    .blog-floating-toc .blog-toc-progress {
        display: none;
    }
}

/* ==========================================================================
   LARGE DESKTOP (≥1400px) - Full floating TOC
   ========================================================================== */

@media (min-width: 1400px) {
    .blog-floating-toc {
        display: block;
        position: fixed;
        /* Anchors TOC to the left side of a 1240px container (620px half-width)
           leaving room for the 260px TOC + 20px gap = 900px offset from center */
        left: max(20px, calc(50vw - 900px));
        top: 150px;
        width: var(--blog-toc-width);
        z-index: 100;
        transition: all 0.3s ease;
    }


    .blog-floating-toc.is-collapsed {
        width: 44px;
    }

    .blog-toc-content {
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius: var(--blog-toc-radius);
        padding: 20px 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        transition: all 0.3s ease;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    .blog-toc-content:hover {
        scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    }

    .blog-floating-toc.is-collapsed .blog-toc-content {
        padding: 6px;
        overflow: hidden;
    }

    /* In collapsed state: hide list and progress, keep header/toggle visible */
    .blog-floating-toc.is-collapsed .blog-toc-list,
    .blog-floating-toc.is-collapsed .blog-toc-progress {
        opacity: 0;
        visibility: hidden;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .blog-floating-toc.is-collapsed .blog-toc-header {
        margin-bottom: 0;
    }

    .blog-floating-toc.is-collapsed .blog-toc-title {
        display: none;
    }

    /* Header with title and toggle button */
    .blog-toc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 2px solid var(--blog-toc-border);
    }

    .blog-toc-title {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--blog-toc-primary);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin: 0;
        padding: 0;
        border: none;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .blog-toc-title::before {
        content: '📑';
        font-size: 1rem;
    }

    /* Toggle button in header - top right */
    .blog-toc-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 1px solid var(--blog-toc-border);
        border-radius: 6px;
        background: var(--blog-toc-bg);
        color: var(--blog-toc-primary);
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .blog-toc-toggle:hover {
        background: var(--blog-toc-primary);
        color: var(--blog-toc-white);
        border-color: var(--blog-toc-primary);
    }

    .blog-toc-toggle svg {
        width: 14px;
        height: 14px;
        stroke-width: 2.5;
        flex-shrink: 0;
    }

    /* Icon visibility based on collapsed state */
    .blog-toc-icon-expand {
        display: none !important;
    }

    .blog-toc-icon-collapse {
        display: block !important;
    }

    .blog-floating-toc.is-collapsed .blog-toc-icon-collapse {
        display: none !important;
    }

    .blog-floating-toc.is-collapsed .blog-toc-icon-expand {
        display: block !important;
    }

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

    .blog-toc-item {
        margin-bottom: 2px;
    }

    .blog-toc-item-sub {
        padding-left: 0;
    }

    /* Link wrapper: holds triangle + link side by side */
    .blog-toc-link-wrap {
        display: flex;
        align-items: center;
        gap: 0;
    }

    /* Triangle toggle button */
    .blog-toc-triangle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        min-width: 22px;
        border: none;
        border-radius: 4px;
        background: transparent;
        color: var(--blog-toc-text-light);
        cursor: pointer;
        padding: 0;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .blog-toc-triangle svg {
        transition: transform 0.25s ease;
    }

    .blog-toc-triangle:hover {
        background: var(--blog-toc-bg);
        color: var(--blog-toc-primary);
    }

    /* Rotate triangle when open */
    .blog-toc-has-children.is-open>.blog-toc-link-wrap>.blog-toc-triangle svg {
        transform: rotate(90deg);
    }

    /* Collapsible child list (Notion-style hierarchy) */
    .blog-toc-children {
        list-style: none;
        margin: 2px 0 0 10px;
        padding: 0 0 0 10px;
        border-left: 1px solid rgba(0, 0, 0, 0.06);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    }

    .blog-toc-has-children.is-open>.blog-toc-children {
        max-height: 500px;
        opacity: 1;
        padding: 4px 0 4px 10px;
    }

    .blog-toc-link {
        display: block;
        padding: 8px 10px;
        color: #2e7d32;
        text-decoration: none;
        font-size: 0.82rem;
        font-weight: 500;
        border-radius: 6px;
        border-left: 3px solid transparent;
        transition: all 0.2s ease;
        line-height: 1.4;
        white-space: normal;
        word-wrap: break-word;
        flex: 1;
        min-width: 0;
    }

    .blog-toc-link:hover {
        background: var(--blog-toc-bg);
        color: var(--blog-toc-primary);
    }

    .blog-toc-link.active {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.18), rgba(139, 195, 74, 0.12));
        color: #2e7d32;
        border-left-color: #4caf50;
        font-weight: 700;
        box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.2);
        transform: translateX(4px);
        /* Fluid Active-State Micro-Animation */
    }

    /* When parent H2 has an active child, highlight the triangle subtly */
    .blog-toc-has-children.is-open>.blog-toc-link-wrap>.blog-toc-triangle {
        color: var(--blog-toc-primary-light);
    }

    /* Ghost Scrollbar */
    .blog-toc-content::-webkit-scrollbar {
        width: 4px;
    }

    .blog-toc-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .blog-toc-content::-webkit-scrollbar-thumb {
        background-color: transparent;
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }

    .blog-toc-content:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.15);
    }
}

/* ==========================================================================
   MEDIUM DESKTOP (1200-1399px) - Collapsed by default, expand on click
   ========================================================================== */

@media (min-width: 1200px) and (max-width: 1399px) {
    .blog-floating-toc {
        display: block;
        position: fixed;
        left: 16px;
        top: 150px;
        z-index: 100;
    }

    .blog-toc-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 10px;
        background: var(--blog-toc-white);
        color: var(--blog-toc-primary);
        cursor: pointer;
        box-shadow: var(--blog-toc-shadow);
        transition: all 0.2s ease;
    }

    .blog-toc-toggle:hover {
        background: var(--blog-toc-primary);
        color: var(--blog-toc-white);
    }

    .blog-toc-toggle .blog-toc-icon-close {
        display: none;
    }

    .blog-floating-toc.is-expanded .blog-toc-icon-list {
        display: none;
    }

    .blog-floating-toc.is-expanded .blog-toc-icon-close {
        display: block;
    }

    .blog-toc-content {
        position: absolute;
        left: 0;
        top: 48px;
        width: 220px;
        background: var(--blog-toc-white);
        border-radius: var(--blog-toc-radius);
        padding: 16px 20px;
        box-shadow: var(--blog-toc-shadow);
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s ease;
    }

    .blog-floating-toc.is-expanded .blog-toc-content {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .blog-toc-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--blog-toc-primary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 12px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--blog-toc-border);
    }

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

    /* Link wrapper */
    .blog-toc-link-wrap {
        display: flex;
        align-items: center;
        gap: 0;
    }

    /* Triangle toggle */
    .blog-toc-triangle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        min-width: 20px;
        border: none;
        border-radius: 4px;
        background: transparent;
        color: var(--blog-toc-text-light);
        cursor: pointer;
        padding: 0;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .blog-toc-triangle svg {
        transition: transform 0.25s ease;
    }

    .blog-toc-triangle:hover {
        background: var(--blog-toc-bg);
        color: var(--blog-toc-primary);
    }

    .blog-toc-has-children.is-open>.blog-toc-link-wrap>.blog-toc-triangle svg {
        transform: rotate(90deg);
    }

    /* Collapsible child list */
    .blog-toc-children {
        list-style: none;
        margin: 0;
        padding: 0 0 0 6px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    }

    .blog-toc-has-children.is-open>.blog-toc-children {
        max-height: 500px;
        opacity: 1;
        padding: 2px 0 4px 6px;
    }

    .blog-toc-link {
        display: block;
        padding: 6px 10px;
        color: #2e7d32;
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 500;
        border-radius: 6px;
        border-left: 2px solid transparent;
        transition: all 0.2s ease;
        line-height: 1.3;
        flex: 1;
        min-width: 0;
    }

    .blog-toc-link:hover {
        background: var(--blog-toc-bg);
        color: var(--blog-toc-primary);
    }

    .blog-toc-link.active {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.18), rgba(139, 195, 74, 0.12));
        color: #2e7d32;
        border-left-color: #4caf50;
        font-weight: 700;
        box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.2);
    }

    .blog-toc-has-children.is-open>.blog-toc-link-wrap>.blog-toc-triangle {
        color: var(--blog-toc-primary-light);
    }
}

/* ==========================================================================
   HUB ARTICLE OVERRIDES
   
   Hub articles now use Astra's Page Builder layout (same as State Parks).
   The floating TOC works unchanged — standard left-gutter positioning
   applies without any hub-specific overrides needed.
   ========================================================================== */

/* ==========================================================================
   READING PROGRESS BAR (Optional enhancement)
   ========================================================================== */

.blog-toc-progress {
    height: 3px;
    background: var(--blog-toc-border);
    border-radius: 3px;
    margin-top: 16px;
    overflow: hidden;
}

.blog-toc-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--blog-toc-accent), var(--blog-toc-primary-light));
    width: 0%;
    transition: width 0.1s ease;
}