/*
 * Desktop: keep the header sticky, but place it back in normal document flow.
 * Unlike position: fixed, position: sticky reserves its own height, so the
 * hero begins underneath the navigation rather than behind it.
 */
@media (min-width: 782px) {
    html body header.itap-header,
    html body .itap-header {
        position: sticky !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-top: 0 !important;
        transform: none !important;
        z-index: 9999 !important;
    }

    /* A fixed template-part wrapper can otherwise keep the whole header
       floating over the first section even after the header itself is reset. */
    html body .wp-block-template-part:has(.itap-header),
    html body .wp-site-blocks > header:has(.itap-header) {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    /* Remove offsets that may have been added for the old fixed header. */
    html body .itap-header + *,
    html body .wp-block-template-part:has(.itap-header) + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/*
 * ITAP Mobile Header Fix
 * Compact mobile header plus a desktop overlap correction.
 */

.itap-mobile-header-fix {
    display: none;
}

@media (max-width: 781px) {
    html,
    body {
        scroll-padding-top: 0 !important;
    }

    body.itap-mobile-header-ready .itap-header,
    body.itap-mobile-header-ready header.itap-header,
    body.itap-mobile-header-ready .itap-mobile-unpin {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        z-index: auto !important;
    }

    /* Hide the large Gutenberg desktop construction on mobile. */
    body.itap-mobile-header-ready .itap-header > .wp-block-columns,
    body.itap-mobile-header-ready .itap-header > .itap-mobile {
        display: none !important;
    }

    body.itap-mobile-header-ready .itap-header {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #dd0000 !important;
    }

    body.itap-mobile-header-ready .itap-mobile-header-fix {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        background: #dd0000 !important;
        box-sizing: border-box !important;
    }

    .itap-mobile-header-fix__bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 78px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
    }

    .itap-mobile-header-fix__identity {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .itap-mobile-header-fix__home {
        display: block !important;
        flex: 0 1 145px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    .itap-mobile-header-fix__logo {
        display: block !important;
        width: 100% !important;
        max-width: 145px !important;
        max-height: 68px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    .itap-mobile-header-fix__details {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
    }

    .itap-mobile-header-fix__date,
    .itap-mobile-header-fix__venue {
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

    .itap-mobile-header-fix__venue {
        margin-top: 3px !important;
        font-weight: 400 !important;
    }

    .itap-mobile-header-fix__toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        border-radius: 4px !important;
        color: #ffffff !important;
        background: transparent !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    .itap-mobile-header-fix__toggle-lines,
    .itap-mobile-header-fix__toggle-lines::before,
    .itap-mobile-header-fix__toggle-lines::after {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        border-radius: 2px !important;
        background: currentColor !important;
        content: "" !important;
        transition: transform 160ms ease, opacity 160ms ease !important;
    }

    .itap-mobile-header-fix__toggle-lines {
        position: relative !important;
    }

    .itap-mobile-header-fix__toggle-lines::before {
        position: absolute !important;
        top: -7px !important;
        left: 0 !important;
    }

    .itap-mobile-header-fix__toggle-lines::after {
        position: absolute !important;
        top: 7px !important;
        left: 0 !important;
    }

    .itap-mobile-header-fix__toggle[aria-expanded="true"] .itap-mobile-header-fix__toggle-lines {
        background: transparent !important;
    }

    .itap-mobile-header-fix__toggle[aria-expanded="true"] .itap-mobile-header-fix__toggle-lines::before {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .itap-mobile-header-fix__toggle[aria-expanded="true"] .itap-mobile-header-fix__toggle-lines::after {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

    .itap-mobile-header-fix__menu {
        display: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 14px 16px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
        background: #c90000 !important;
        box-sizing: border-box !important;
    }

    .itap-mobile-header-fix__menu.is-open {
        display: block !important;
    }

    .itap-mobile-header-fix__list {
        display: block !important;
        list-style: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .itap-mobile-header-fix__item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    }

    .itap-mobile-header-fix__item:last-child {
        border-bottom: 0 !important;
    }

    .itap-mobile-header-fix__link,
    .itap-mobile-header-fix__label {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 2px !important;
        color: #ffffff !important;
        background: transparent !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        text-align: left !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    .itap-mobile-header-fix__label {
        padding-top: 18px !important;
        color: rgba(255, 255, 255, 0.72) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }

    .itap-mobile-header-fix__link:focus-visible,
    .itap-mobile-header-fix__toggle:focus-visible {
        outline: 2px solid #ffffff !important;
        outline-offset: 2px !important;
    }

    /* Remove offsets commonly left behind by fixed-header CSS. */
    body.itap-mobile-header-ready .itap-header + *,
    body.itap-mobile-header-ready .wp-block-template-part:has(.itap-header) + * {
        margin-top: 0 !important;
    }
}

@media (max-width: 390px) {
    .itap-mobile-header-fix__bar {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .itap-mobile-header-fix__identity {
        gap: 8px !important;
    }

    .itap-mobile-header-fix__home {
        flex-basis: 125px !important;
    }

    .itap-mobile-header-fix__logo {
        max-width: 125px !important;
        max-height: 60px !important;
    }

    .itap-mobile-header-fix__date,
    .itap-mobile-header-fix__venue {
        font-size: 10px !important;
    }
}