/**
 * 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;
}

/* ============================================================================
   PASS CALLOUT — Annual pass info boxes with link to pillar article
   ============================================================================ */

.asp-hub-article .entry-content blockquote:has(a[href*="annual-passes"]),
.tax-us_state .entry-content blockquote:has(a[href*="annual-passes"]) {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    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: normal;
    color: #1a2e1a;
    box-shadow: 0 1px 4px rgba(46, 125, 50, 0.08);
}

.asp-hub-article .entry-content blockquote:has(a[href*="annual-passes"]) a,
.tax-us_state .entry-content blockquote:has(a[href*="annual-passes"]) a {
    color: var(--hub-green-700) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--hub-green-700);
}

.asp-hub-article .entry-content blockquote:has(a[href*="annual-passes"]) a:hover,
.tax-us_state .entry-content blockquote:has(a[href*="annual-passes"]) a:hover {
    color: #1b5e20 !important;
}

/* ============================================================================
   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 RIGHT side, so we allocate 320px padding-right
       (260px TOC + 60px gap) to keep text readable without overlapping the TOC. */
    .asp-hub-article .site-content>.ast-container {
        max-width: var(--hub-container-max) !important;
        margin: 0 auto !important;
        padding-left: 40px !important;
        padding-right: 320px !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 (40px left, 320px right), the center of the content
       is shifted LEFT 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 right next to the content panel */
@media (min-width: 1400px) {
    .asp-hub-article .blog-floating-toc {
        /* Position TOC directly beside the content's right edge.
           Container is 1600px wide, centered (50vw offset).
           Content area ends at: 50vw + 800px - 320px (right padding) = 50vw + 480px.
           TOC starts 20px after: left = 50vw + 500px. */
        left: calc(50vw + 460px) !important;
        right: auto !important;
        width: var(--blog-toc-width) !important;
    }

    /* Always show the TOC content (override the 1200-1599px collapsed default) */
    .asp-hub-article .blog-floating-toc .blog-toc-content {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.75) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-radius: var(--blog-toc-radius) !important;
        padding: 20px 16px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto !important;
    }

    /* Hide the collapsed toggle button - TOC is always visible */
    .asp-hub-article .blog-floating-toc .blog-toc-toggle {
        display: none !important;
    }
}