/* Site navigation — the single source of nav styles, loaded on every page
           from _includes/base.njk. Colours come from the page stylesheet's variables. */
        /* Transparent at the top; a floating, frosted cream pill once scrolled.
           Always light-themed (dark-ink logo + teal text). */
        .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; padding: 0; transition: padding 0.5s var(--transition-elegant); }
        .nav-inner { max-width: 1200px; margin: 0 auto; padding: 1.1rem 2.5rem; display: flex; justify-content: space-between; align-items: center; position: relative; border-radius: 100px; border: 1px solid transparent; transition: padding 0.45s var(--transition-elegant), border-color 0.5s var(--transition-elegant), box-shadow 0.5s var(--transition-elegant); }
        /* The frosted bar background lives on a pseudo-element (z-index:-1) instead of
           on .nav-inner itself. A backdrop-filter on .nav-inner would sit in the
           ancestor chain of the dropdown + mobile menus and cancel THEIR blur (nested
           backdrop-filters don't render). Keeping it on a sibling layer frees them. */
        .nav-inner::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(252, 249, 241, 0.76); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); opacity: 0; transition: opacity 0.5s var(--transition-elegant); z-index: -1; pointer-events: none; }
        /* Floating bar (scrolled): fades in, leaving content visible above and below */
        .nav.scrolled { padding: 0.85rem 1rem; }
        .nav.scrolled .nav-inner::before { opacity: 1; }
        .nav.scrolled .nav-inner { border-color: var(--spark-border); box-shadow: 0 14px 40px -18px rgba(var(--spark-shadow), 0.35); padding: 0.5rem 0.85rem 0.5rem 1.5rem; }
        /* Logo — the dark-ink (on-light) mark; shrinks slightly when scrolled */
        .nav-logo { cursor: pointer; display: flex; align-items: center; transition: opacity 0.3s ease; }
        .nav-logo:hover { opacity: 0.8; }
        .nav-logo-img { height: 84px; width: auto; transition: height 0.45s var(--transition-elegant); }
        .nav.scrolled .nav-logo-img { height: 60px; }
        .nav-logo-light { display: block; }
        .nav-logo-dark { display: none; }
        .nav-menu { display: flex; align-items: center; gap: 0.5rem; list-style: none; position: absolute; left: 50%; transform: translateX(-50%); }
        .nav-link { display: inline-block; padding: 0.6rem 1.1rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--spark-text-light); text-decoration: none; border-radius: 100px; transition: color 0.35s var(--transition-smooth), background 0.35s var(--transition-smooth); cursor: pointer; }
        .nav-link:hover { color: var(--spark-forest); }
        /* A gold hairline draws out from the centre beneath the hovered link */
        .nav-link { position: relative; }
        .nav-link::before { content: ''; position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0.35rem; height: 1px; background: var(--spark-champagne); transform: scaleX(0); transition: transform 0.6s var(--spark-hairline-ease); pointer-events: none; }
        .nav-link:hover::before, .nav-dropdown:hover > .nav-link::before { transform: scaleX(1); }
        .nav-link.active { color: var(--spark-champagne); background: transparent; }
        .nav-dropdown { position: relative; }
        .nav-dropdown > .nav-link { display: inline-flex; align-items: center; gap: 0.35rem; }
        .nav-dropdown > .nav-link::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; margin-top: 1px; transition: transform 0.3s ease; }
        .nav-dropdown:hover > .nav-link::after { transform: rotate(180deg); }
        .nav-dropdown-menu { position: absolute; top: calc(100% + 1rem); left: 50%; transform: translateX(-50%); min-width: 180px; background: rgba(252, 249, 241, 0.97); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--spark-border); border-radius: 14px; padding: 0.5rem; box-shadow: 0 22px 44px -24px rgba(var(--spark-shadow), 0.4); opacity: 0; visibility: hidden; transition: all 0.3s var(--transition-smooth); z-index: 200; }
        /* Invisible bridge across the gap so hover doesn't drop between the bar and the menu */
        .nav-dropdown-menu::before { content: ''; position: absolute; top: -1rem; left: 0; right: 0; height: 1rem; }
        .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
        .nav-dropdown-menu a { display: block; padding: 0.65rem 1rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--spark-text-light); text-decoration: none; border-radius: 10px; transition: all 0.25s ease; cursor: pointer; }
        .nav-dropdown-menu a:hover { color: var(--spark-forest); background: rgba(12, 54, 52, 0.06); }
        .nav-dropdown-menu a.active { color: var(--spark-champagne); }
        .nav-cta { margin-left: 1.5rem; padding: 0.7rem 1.6rem; background: transparent; color: var(--spark-forest); border: 1px solid var(--spark-forest); border-radius: 100px; font-family: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background-color 0.4s ease, color 0.4s ease; }
        .nav-cta:hover { background: var(--spark-forest); color: var(--spark-ivory); }
        .mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; }
        .mobile-toggle span { display: block; width: 24px; height: 1.5px; background: var(--spark-forest); border-radius: 2px; transition: all 0.3s ease; }
        /* Touch devices: a tap can leave a stuck :hover, which would fire the desktop
           hover rules (shifting the submenu via translateX and painting a hover box).
           Neutralize hover effects where there's no real pointer. */
        @media (hover: none) {
            .nav-link:hover { background: transparent; }
            .nav-dropdown-menu a:hover { background: transparent; }
            .nav-dropdown:hover .nav-dropdown-menu { transform: none; }
            .nav-dropdown:hover > .nav-link::after { transform: none; }
        }
        /* Pages with a photo hero (the event pages) set navOverPhoto in their front matter.
           The nav behaves exactly as everywhere else (transparent at the top, frosted pill
           once scrolled); only the ink is light while it sits transparent over the photo. */
        /* A soft shade along the top of the photo keeps the light ink readable on bright images. */
        .nav--over-photo::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 160px; background: linear-gradient(to bottom, rgba(8, 40, 38, 0.5), rgba(8, 40, 38, 0)); pointer-events: none; z-index: -1; transition: opacity 0.5s var(--transition-elegant); }
        .nav--over-photo.scrolled::after { opacity: 0; }
        .nav--over-photo.hero-mode .nav-logo-light { display: none; }
        .nav--over-photo.hero-mode .nav-logo-dark { display: block; }
        .nav--over-photo.hero-mode .nav-cta { color: white; border-color: rgba(255,255,255,0.75); }
        .nav--over-photo.hero-mode .nav-cta:hover { background: white; color: var(--spark-forest); }
        .nav--over-photo.hero-mode .mobile-toggle span { background: white; }
        @media (min-width: 769px) {
            .nav--over-photo.hero-mode .nav-link { color: rgba(255,255,255,0.85); }
            .nav--over-photo.hero-mode .nav-link:hover { color: white; }
            .nav--over-photo.hero-mode .nav-link::before { background: var(--spark-champagne-light); }
            .nav--over-photo.hero-mode .nav-link.active { color: var(--spark-champagne-light); }
        }
        @media (max-width: 1024px) {
            .nav-inner { padding: 1rem 2.5rem; }
        }
        @media (max-width: 768px) {
            .nav-inner { padding: 1rem 1.5rem; }
            .nav-logo-img { height: 68px; }
            .nav.scrolled .nav-logo-img { height: 46px; }
            .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; transform: none; background: rgba(252, 249, 241, 0.98); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); flex-direction: column; padding: 1.25rem; gap: 0.25rem; border: 1px solid var(--spark-border); border-radius: 16px; box-shadow: 0 22px 44px -24px rgba(var(--spark-shadow), 0.45); margin-top: 0.75rem; }
            .nav-menu.open { display: flex; }
            .nav-link { padding: 0.9rem 1.15rem; border-radius: 12px; }
            .nav-link::before { display: none; }
            .nav-link:hover { background: rgba(12, 54, 52, 0.06); }
            .nav-cta { display: none; }
            .mobile-toggle { display: flex; }
            /* Mobile: accordion submenus, collapsed until the parent is tapped */
            .nav-dropdown { display: block; width: 100%; }
            .nav-dropdown > .nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; }
            .nav-dropdown > .nav-link::after { display: inline-block; margin-left: auto; }
            .nav-dropdown.open > .nav-link::after { transform: rotate(180deg); }
            .nav-dropdown-menu { position: static; transform: none; visibility: visible; min-width: auto; box-shadow: none; border: none; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; margin: 0.15rem 0 0.35rem; padding: 0 0 0 0.85rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s var(--transition-smooth), opacity 0.3s ease; }
            .nav-dropdown-menu::before { display: none; }
            .nav-dropdown.open .nav-dropdown-menu { max-height: 340px; opacity: 1; }
            .nav-dropdown-menu a { padding: 0.7rem 1rem; font-size: 0.7rem; }
        }
        /* Small laptops and tablets: the centred menu would run under the
           Member Portal button, so let it sit in the row and tighten the spacing. */
        @media (min-width: 769px) and (max-width: 1140px) {
            .nav-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
            .nav-menu { position: static; transform: none; margin: 0 auto; gap: 0; }
            .nav-link { padding: 0.6rem 0.8rem; }
            .nav-link::before { left: 0.8rem; right: 0.8rem; }
            .nav-cta { margin-left: 0.5rem; padding: 0.65rem 1.25rem; white-space: nowrap; flex-shrink: 0; }
            .nav-logo-img { height: 68px; }
        }