/**
 * Shared Hub header integration for complete Photo Award frontend pages.
 *
 * The pa-plugin-html-route marker is applied only to verified HTML routes.
 * Binary certificate assets, downloads, AJAX and REST responses never receive
 * this stylesheet or its body marker.
 */

body.pa-plugin-html-route {
    min-inline-size: 320px;
    overflow-x: hidden;
    overflow-x: clip;
}

/*
 * Hub's marketing header is configured as an overlay on the public site.
 * Plugin pages own no overlay hero, so keep the native header and mobile menu
 * in document flow. This also prevents page titles and keyboard focus from
 * being hidden underneath the menu.
 */
body.pa-plugin-html-route #header.main-header {
    box-sizing: border-box;
    position: relative !important;
    inset: auto !important;
    inline-size: 100% !important;
    max-inline-size: none !important;
    margin: 0 !important;
    transform: none !important;
}

body.pa-plugin-html-route #header.main-header .lqd-mobile-sec {
    position: relative !important;
}

/*
 * Release only Hub's outer page container. Each plugin surface retains its
 * own readable inner measure, while dashboards and galleries can use the
 * full available viewport.
 */
body.pa-plugin-html-route #lqd-contents-wrap.container {
    box-sizing: border-box;
    inline-size: 100% !important;
    max-inline-size: none !important;
    min-inline-size: 0 !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

/*
 * Dashboard mode continues to own the viewport palette. The native header
 * remains theme-controlled, while all application wrappers below it keep the
 * selected light/dark background without exposing a white outer gutter.
 */
body.pa-plugin-html-route.pa-dashboard-workspace.pa-layout-modern :where(
    #wrap,
    #lqd-site-content,
    #lqd-contents-wrap
) {
    background: var(--pa-bg, #faf8f2) !important;
    color: var(--pa-text, #1f1a16);
}

@media (max-width: 899px) {
    body.pa-plugin-html-route #header.main-header,
    body.pa-plugin-html-route #header.main-header .lqd-mobile-sec {
        inline-size: 100% !important;
        max-inline-size: none !important;
    }

    body.pa-plugin-html-route #header.main-header .lqd-mobile-sec-nav {
        inset-inline: 0;
    }
}

/*
 * Hub's modern drawer normally waits for a separate html-level
 * `mobile-nav-activated` class. On standalone plugin templates Bootstrap can
 * open the collapse without that theme helper running, leaving an active
 * drawer translated off-canvas and invisible. Treat Bootstrap's authoritative
 * `.show` state as the open state on verified plugin routes only.
 */
@media (max-width: 1199px) {
    body.pa-plugin-html-route[data-mobile-nav-style="modern"]
    #header.main-header {
        z-index: 100000 !important;
        isolation: isolate;
    }

    body.pa-plugin-html-route[data-mobile-nav-style="modern"]
    #header.main-header .mobile-navbar-collapse.show {
        right: 0 !important;
        left: 0 !important;
        z-index: 100001 !important;
        inline-size: 100vw !important;
        min-inline-size: 100vw !important;
        max-inline-size: 100vw !important;
        block-size: calc(100dvh - 60px) !important;
        max-block-size: calc(100dvh - 60px);
        padding: clamp(52px, 9vh, 82px) 24px 32px !important;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #131313 !important;
        background-image: none !important;
        box-shadow: -24px 0 60px rgb(0 0 0 / 28%) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
    }

    body.pa-plugin-html-route[data-mobile-nav-style="modern"]
    #header.main-header
    .mobile-navbar-collapse.show
    .navbar-collapse-inner {
        inline-size: 100%;
        background-color: #131313 !important;
        background-image: none !important;
    }

    body.pa-plugin-html-route[data-mobile-nav-style="modern"]
    #header.main-header .mobile-navbar-collapse.show > .nav-trigger {
        display: none !important;
    }

    /*
     * Hub inserts a visual clone of the trigger into the drawer, but that
     * clone has no Bootstrap collapse listener on standalone plugin
     * templates. Keep the original bound trigger above the drawer instead so
     * the same control that opened the menu can always close it.
     */
    body.pa-plugin-html-route[data-mobile-nav-style="modern"]
    #header.main-header
    .lqd-mobile-sec-inner.navbar-header
    > .nav-trigger.is-active {
        position: fixed !important;
        top: max(15px, env(safe-area-inset-top)) !important;
        right: max(15px, env(safe-area-inset-right)) !important;
        left: auto !important;
        z-index: 100002 !important;
        display: flex !important;
        inline-size: 44px !important;
        block-size: 44px !important;
        min-inline-size: 44px !important;
        min-block-size: 44px !important;
        border-radius: 50%;
        background: #131313 !important;
        box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    body.pa-plugin-html-route[data-mobile-nav-style="modern"]
    #header.main-header
    .lqd-mobile-sec-inner.navbar-header
    > .nav-trigger.is-active
    .bars-inner {
        position: relative;
        display: block !important;
    }

    body.pa-plugin-html-route[data-mobile-nav-style="modern"]
    #header.main-header
    .lqd-mobile-sec-inner.navbar-header
    > .nav-trigger.is-active
    .bars-inner
    .bar {
        display: none !important;
    }

    body.pa-plugin-html-route[data-mobile-nav-style="modern"]
    #header.main-header
    .lqd-mobile-sec-inner.navbar-header
    > .nav-trigger.is-active
    .bars-inner::before,
    body.pa-plugin-html-route[data-mobile-nav-style="modern"]
    #header.main-header
    .lqd-mobile-sec-inner.navbar-header
    > .nav-trigger.is-active
    .bars-inner::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        inline-size: 18px;
        block-size: 2px;
        border-radius: 999px;
        background: #fff;
        transform-origin: center;
    }

    body.pa-plugin-html-route[data-mobile-nav-style="modern"]
    #header.main-header
    .lqd-mobile-sec-inner.navbar-header
    > .nav-trigger.is-active
    .bars-inner::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    body.pa-plugin-html-route[data-mobile-nav-style="modern"]
    #header.main-header
    .lqd-mobile-sec-inner.navbar-header
    > .nav-trigger[aria-expanded="true"]
    .bars-inner::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.pa-plugin-html-route #header.main-header,
    body.pa-plugin-html-route #header.main-header * {
        scroll-behavior: auto !important;
    }
}