/*
 * AspiraTrade -- single article layout.
 *
 * Extracted from single.php, where it was printed inline on every request.
 * Enqueued via includes/aspiratrade-assets.php so it can be cached and minified.
 */

.aspira-single-wrapper {
        background-color: #070D12;
        color: #E2E8F0;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        min-height: 80vh;
    }
    .aspira-single-wrapper h1, 
    .aspira-single-wrapper h2, 
    .aspira-single-wrapper h3, 
    .aspira-single-wrapper h4 {
        font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    .single-glass-card {
        background: linear-gradient(145deg, rgba(18, 35, 46, 0.75) 0%, rgba(11, 22, 30, 0.9) 100%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
    }
    .single-btn-gold {
        background: linear-gradient(135deg, #D4AF37 0%, #E8C868 50%, #B5952F 100%);
        color: #070D12 !important;
        font-weight: 700;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .single-btn-gold:hover {
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
        transform: translateY(-2px);
    }
    .single-article-content h2 {
        font-size: 1.65rem;
        font-weight: 700;
        color: #FFFFFF;
        margin-top: 2rem;
        margin-bottom: 0.85rem;
        border-left: 4px solid #D4AF37;
        padding-left: 0.85rem;
    }
    .single-article-content h3 {
        font-size: 1.3rem;
        font-weight: 600;
        color: #F3E5AB;
        margin-top: 1.5rem;
        margin-bottom: 0.6rem;
    }
    .single-article-content p {
        font-size: 1.05rem;
        line-height: 1.85;
        margin-bottom: 1.25rem;
        color: #CBD5E1;
    }
    .single-article-content ul, .single-article-content ol {
        margin-left: 1.75rem;
        margin-bottom: 1.5rem;
        line-height: 1.85;
        color: #CBD5E1;
    }
    .single-article-content li {
        margin-bottom: 0.6rem;
    }
    .single-article-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 2rem 0;
        background: #0B161D;
        border-radius: 10px;
        overflow: hidden;
    }
    .single-article-content th {
        background: #12232E;
        color: #D4AF37;
        font-weight: 700;
        padding: 12px 16px;
        text-align: left;
        border: 1px solid rgba(255,255,255,0.1);
    }
    .single-article-content td {
        padding: 12px 16px;
        border: 1px solid rgba(255,255,255,0.06);
        color: #E2E8F0;
    }

/*
 * Sticky article sidebar.
 *
 * The consultation CTA and related guides now follow the reader down the
 * article instead of scrolling away after the first screen.
 *
 * `top` clears the sticky site header (~76px) plus a little breathing room.
 * The parent grid carries `items-start` so the column is only as tall as its
 * content -- a stretched flex/grid item can never travel. Sticky is disabled
 * below the lg breakpoint, where the sidebar sits under the article anyway,
 * and whenever the column is taller than the viewport, so nothing gets pinned
 * with its lower half unreachable.
 */
@media (min-width: 1024px) {
    .aspira-sticky-aside {
        position: -webkit-sticky;
        position: sticky;
        top: 96px;
        align-self: start;
        max-height: calc(100vh - 112px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(212, 175, 55, 0.35) transparent;
    }
    .aspira-sticky-aside::-webkit-scrollbar {
        width: 6px;
    }
    .aspira-sticky-aside::-webkit-scrollbar-track {
        background: transparent;
    }
    .aspira-sticky-aside::-webkit-scrollbar-thumb {
        background: rgba(212, 175, 55, 0.3);
        border-radius: 999px;
    }
    .aspira-sticky-aside:hover::-webkit-scrollbar-thumb {
        background: rgba(212, 175, 55, 0.55);
    }
}