/* ═══════════════════════════════════════════════════════════════
   Harmonic London — main.css
   Shared infrastructure: skip-nav, print, footer, gnav
   Generated automatically — do not edit directly.
   ═══════════════════════════════════════════════════════════════ */

    /* Skip navigation -- accessibility */
    .skip-nav {
        position: absolute;
        left: -9999px;
        top: auto;
        background: var(--accent, #d4af37);
        color: var(--primary, #0a0e27);
        padding: 12px 24px;
        font-weight: 700;
        font-size: .9375rem;
        text-decoration: none;
        z-index: 9999;
        transition: top .2s ease;
    }
    .skip-nav:focus {
        top: 16px;
        outline: 3px solid var(--primary, #0a0e27);
        outline-offset: 2px;
    }
    
    @media print {
        /* Hide navigation, CTAs, forms, and decorative elements */
        .gnav, .nav, nav, .breadcrumb, .hero-orb-1, .hero-orb-2,
        .hero-ring-1, .hero-ring-2, .cta-band, .cta-btns,
        .btn-primary, .btn-outline, .btn-gold, .hero-cta,
        .footer, .skip-nav, .mobile-toggle,
        .resource-cta, .related, .faq-toggle,
        [class*="orb"], [class*="ring"], [class*="blob"],
        form, .hs-form-frame, .hs-embed-wrap,
        #stcm-wrapper { display: none !important; }

        /* Reset colours, opacity, transforms and filters — clears decorative blobs and reveal animations */
        *, *::before, *::after {
            background: white !important;
            color: black !important;
            box-shadow: none !important;
            text-shadow: none !important;
            opacity: 1 !important;
            transform: none !important;
            animation: none !important;
            transition: none !important;
            filter: none !important;
        }

        /* Readable body type */
        body { font-size: 12pt; line-height: 1.5; font-family: Georgia, serif; }
        h1 { font-size: 22pt; margin-bottom: 12pt; }
        h2 { font-size: 16pt; margin-bottom: 8pt; }
        h3 { font-size: 13pt; }

        /* Show URLs for external links */
        a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555 !important; }
        a[href^="/"]::after { content: ""; }

        /* Avoid page breaks inside key elements */
        h2, h3, h4 { page-break-after: avoid; }
        p, li { orphans: 3; widows: 3; }

        /* Ensure content fills page width */
        .container { max-width: 100% !important; padding: 0 !important; }
        .hero { padding: 20pt 0 !important; }
    }

    /* ── FOOTER ── */
        .footer { background:#060918; padding:64px 0 0; border-top:1px solid rgba(255,255,255,.04); }
        .f-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:64px; }
        .f-brand p { font-size:.875rem; color:rgba(255,255,255,.3); line-height:1.75; max-width:260px; margin-top:12px; }
        .f-col h5 { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.35); margin-bottom:18px; }
        .f-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; padding:0; }
        .f-col ul a { color:rgba(255,255,255,.4); font-size:.875rem; transition:color .25s; text-decoration:none; }
        .f-col ul a:hover { color:var(--accent,#d4af37); }
        .f-bottom { border-top:1px solid rgba(255,255,255,.05); padding:24px 0; display:flex; justify-content:space-between; align-items:center; }
        .f-bottom p,.f-bottom a { font-size:.8125rem; color:rgba(255,255,255,.22); text-decoration:none; }
        .f-bl a { margin-left:16px; }
        .f-bottom a:hover { color:var(--accent,#d4af37); }
        @media(max-width:1024px) { .f-grid { grid-template-columns:1fr 1fr; } }
        @media(max-width:640px) { .f-grid { grid-template-columns:1fr; } .f-bottom { flex-direction:column; gap:8px; text-align:center; } }
        body { padding-top: 68px; }

        /* ═══ SITE HEADER ═══ */
        .gnav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
            height: 68px;
            background: rgba(10,14,39,0.96);
            backdrop-filter: blur(12px);
            transition: background .35s, box-shadow .35s;
        }
        .gnav.scrolled {
            background: rgba(10,14,39,.97);
            backdrop-filter: blur(20px);
            box-shadow: 0 4px 30px rgba(0,0,0,.3);
        }
        .gnav .container { height: 100%; }
        .gnav-inner {
            display: flex; align-items: center;
            justify-content: space-between;
            height: 100%;
        }
        /* Logo */
        .gnav .logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem; font-weight: 700;
            color: white; text-decoration: none;
            flex-shrink: 0;
        }
        .gnav .logo span { color: var(--accent, #d4af37); }
        .gnav .logo-sub {
            font-family: 'DM Sans', sans-serif;
            font-size: .5rem; font-weight: 600;
            color: rgba(255,255,255,.3);
            text-transform: uppercase; letter-spacing: .15em;
            display: block;
        }
        /* Nav links */
        .gnav-links {
            display: flex;
            list-style: none;
            height: 100%;          /* fill nav height */
            align-items: stretch;  /* each li fills height */
            gap: 0;
            margin: 0; padding: 0;
        }
        .gnav-links > li {
            display: flex;
            align-items: center;
            padding: 0 14px;
            position: relative;
        }
        .gnav-links > li > a,
        .gnav-links > li > button {
            color: rgba(255,255,255,.75);
            font-size: .9375rem; font-weight: 500;
            text-decoration: none;
            background: none; border: none;
            cursor: pointer; padding: 0;
            font-family: 'DM Sans', sans-serif;
            transition: color .25s;
            display: flex; align-items: center; gap: 5px;
            white-space: nowrap;
        }
        .gnav-links > li > a:hover,
        .gnav-links > li > button:hover,
        .gnav-links > li.is-open > button { color: var(--accent, #d4af37); }
        /* CTA button */
        .gnav-cta {
            border: 1.5px solid var(--accent, #d4af37) !important;
            color: var(--accent, #d4af37) !important;
            padding: 9px 22px !important;
            font-size: .8125rem !important;
            font-weight: 600 !important;
            letter-spacing: .06em;
            text-transform: uppercase;
            transition: background .25s, color .25s !important;
        }
        .gnav-cta:hover {
            background: var(--accent, #d4af37) !important;
            color: var(--primary, #0a0e27) !important;
        }
        /* Dropdown */
        .has-drop { cursor: default; }
        .gnav-drop {
            display: none;
            position: absolute;
            top: 100%;       /* flush with bottom of the full-height li */
            left: 0;
            min-width: 270px;
            background: rgba(8,11,32,.98);
            border: 1px solid rgba(212,175,55,.2);
            border-top: 2px solid var(--accent, #d4af37);
            box-shadow: 0 12px 40px rgba(0,0,0,.5);
            list-style: none;
            padding: 8px 0;
            z-index: 200;
        }
        .has-drop.is-open > .gnav-drop { display: block; }
        .gnav-drop li a {
            display: block;
            padding: 10px 20px;
            color: rgba(255,255,255,.75);
            font-size: .875rem; font-weight: 500;
            text-decoration: none;
            white-space: nowrap;
            transition: color .2s, background .2s;
        }
        .gnav-drop li a:hover {
            color: var(--accent, #d4af37);
            background: rgba(255,255,255,.04);
        }
        /* Chevron icon */
        .drop-chevron {
            width: 12px; height: 12px;
            transition: transform .25s;
            flex-shrink: 0;
        }
        .has-drop.is-open .drop-chevron { transform: rotate(180deg); }
        /* Mobile toggle */
        .mobile-toggle {
            display: none;
            background: none; border: none;
            cursor: pointer; padding: 8px;
        }
        .mobile-toggle span {
            display: block; width: 22px; height: 2px;
            background: white; margin: 5px 0;
            transition: all .3s;
        }
        /* Mobile */
        @media (max-width: 768px) {
            .gnav-links { display: none; }
            .gnav-links.mobile-open {
                display: flex; flex-direction: column;
                align-items: flex-start; height: auto;
                position: absolute; top: 68px; left: 0; right: 0;
                background: rgba(10,14,39,.98);
                padding: 12px 0 20px; gap: 0;
                border-top: 1px solid rgba(255,255,255,.08);
            }
            .gnav-links.mobile-open > li { width: 100%; padding: 0; }
            .gnav-links.mobile-open > li > a,
            .gnav-links.mobile-open > li > button {
                padding: 12px 24px; width: 100%;
                justify-content: space-between;
            }
            .gnav-drop {
                position: static; border: none;
                background: rgba(255,255,255,.04);
                box-shadow: none; padding: 4px 0;
            }
            .mobile-toggle { display: block; }
        }

/* ── LEARNING PATH NAV (prev/next across the curated reading path) ── */
.path-nav { background: var(--primary); padding: 32px 0 0; border-top: 1px solid rgba(255,255,255,.08); }
.path-nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.path-nav-inner.single { grid-template-columns: 1fr; }
.path-nav-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 24px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.path-nav-item:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.path-next { text-align: right; align-items: flex-end; }
.path-nav-dir { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--cat); }
.path-nav-title { font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.85); line-height: 1.4; }
@media (max-width: 768px) {
    .path-nav-inner { grid-template-columns: 1fr; }
    .path-next { text-align: left; align-items: flex-start; }
}