/*Shared navigation and conference media. Loaded after page styles.*/

.nav-toggle {

    min-width: 44px;

    min-height: 44px;

}

.nav-toggle[aria-expanded="true"] span {

    background: transparent;

}

.nav-toggle[aria-expanded="true"] span::before {

    top: 0;

    transform: rotate(45deg);

}

.nav-toggle[aria-expanded="true"] span::after {

    top: 0;

    transform: rotate(-45deg);

}

/*Mobile dropdown: natural height, translucent background, opaque text.*/

@media (max-width: 1050px) {

    nav.main-nav {

        position: absolute;

        inset: 100% 0 auto;

        width: 100%;

        height: auto;

        max-height: none;

        overflow: visible;

        padding: 22px 28px;

        gap: 16px;

        background: rgba(252, 249, 242, .86);

        backdrop-filter: blur(12px);

        -webkit-backdrop-filter: blur(12px);

        opacity: 1;

        border-bottom: 1px solid var(--green-line);

        box-shadow: 0 12px 24px rgba(48, 43, 35, .12);

    }

    nav.main-nav a {

        flex-shrink: 0;

        color: var(--ink);

        opacity: 1;

    }

}

.gallery-trigger {

    display: block;

    width: 100%;

    padding: 0;

    border: 0;

    border-radius: 6px;

    overflow: hidden;

    background: var(--bg-alt);

    cursor: zoom-in;

}

.gallery-trigger:focus-visible, .gallery-arrow:focus-visible {

    outline: 3px solid var(--green-deep);

    outline-offset: 4px;

}

.conference-reel video {

    display: block;

    width: 100%;

    max-width: 480px;

    max-height: 80vh;

    height: auto;

    margin: 20px auto 0;

    border-radius: 6px;

    background: #111;

}

.gallery-dialog {

    position: fixed;

    inset: 0;

    width: 100vw;

    height: 100dvh;

    max-width: none;

    max-height: none;

    margin: 0;

    padding: 24px 72px;

    border: 0;

    background: rgba(15, 25, 21, .94);

    color: white;

    cursor: zoom-out;

}

.gallery-dialog[open] {

    display: flex;

    align-items: center;

    justify-content: center;

}

.gallery-dialog::backdrop {

    background: rgba(15, 25, 21, .8);

}

.gallery-dialog figure {

    margin: 0;

    max-width: 100%;

    text-align: center;

}

.gallery-dialog img {

    display: block;

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: calc(100dvh - 110px);

    margin: auto;

    object-fit: contain;

}

.gallery-dialog figcaption {

    padding-top: 14px;

}

.gallery-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;

    height: 64px;

    border: 0;

    border-radius: 8px;

    background: rgba(255,255,255,.15);

    color: white;

    font-size: 48px;

    line-height: 1;

    cursor: pointer;

}

.gallery-prev {

    left: 12px;

}

.gallery-next {

    right: 12px;

}

body.gallery-open {

    overflow: hidden;

}

@media (max-width: 800px) {

    .conference-gallery, .conference-speakers {

        grid-template-columns: minmax(0, 1fr);

    }

    .conference-gallery-single {

        max-width: none;

    }

    .gallery-trigger {

        cursor: default;

    }

    .gallery-hint {

        display: none;

    }

}

/*Bold main navigation on every screen size.*/

nav.main-nav a, nav.main-nav a[aria-current="page"] {

    font-weight: 700;

}

/*Consistent active and hover states across all pages.*/

nav.main-nav a:not(.nav-cta):hover,
nav.main-nav a:not(.nav-cta):focus-visible,
nav.main-nav a[aria-current="page"]:not(.nav-cta) {

    color: var(--green-deep, #315e4b) !important;

    text-decoration: underline !important;

    text-decoration-thickness: 2px !important;

    text-underline-offset: 5px;

}

nav.main-nav .nav-cta:hover,
nav.main-nav .nav-cta:focus-visible,
nav.main-nav .nav-cta[aria-current="page"] {

    text-decoration: underline !important;

    text-underline-offset: 4px;

    filter: brightness(.88);

}

.nav-backdrop {

    display: none;

}

@media (max-width: 1050px) {

    .nav-backdrop.open {

        display: block;

        position: fixed;

        inset: 0;

        z-index: 900;

        background: rgba(15, 25, 21, .32);

    }

    /* Keep the header visible while scrolling on mobile. */
    header.site {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        z-index: 901;
    }

    /* Preserve document flow beneath the fixed header. */
    body {
        padding-top: var(--mobile-header-height, 90px);
    }

    header.site nav.main-nav {

        z-index: 902;

    }

    body.mobile-menu-open {

        overflow: hidden;

    }

    /*The hamburger becomes a clickable X on the left edge of the opened menu.*/

    header.site .nav-toggle[aria-expanded="true"] {

        position: relative;

        z-index: 903;

        cursor: pointer;

    }

    nav.main-nav:not(.open) {

        display: none;

    }

}
