/* HOSTREND GLOBAL MEGA MENU COMPONENT v4.0 — CANVA BORDER + BLUE HOVER DESKTOP */
.host-mega-menu {
    position: fixed;
    top: var(--mega-menu-top, calc(var(--hr-header-height, var(--header-height-desktop)) + var(--mega-menu-offset-y)));
    left: var(--mega-menu-left, 50vw);
    z-index: var(--mega-menu-z-index);
    width: var(--mega-menu-width, auto);
    min-width: var(--mega-menu-min-width);
    max-width: var(--mega-menu-max-width);
    padding: var(--mega-menu-padding);
    border: var(--mega-menu-border-width) solid var(--mega-menu-border);
    border-radius: var(--mega-menu-radius);
    background: var(--mega-menu-surface);
    color: var(--color-dark);
    box-shadow: var(--mega-menu-shadow);
    -webkit-backdrop-filter: blur(var(--mega-menu-blur)) saturate(var(--mega-menu-saturate));
    backdrop-filter: blur(var(--mega-menu-blur)) saturate(var(--mega-menu-saturate));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(calc(var(--mega-menu-enter-offset) * -1)) scale(var(--mega-menu-enter-scale));
    transform-origin: top center;
    transition: opacity var(--mega-menu-transition-duration) var(--mega-menu-transition-ease), visibility var(--mega-menu-transition-duration) var(--mega-menu-transition-ease), transform var(--mega-menu-transition-duration) var(--mega-menu-transition-ease), box-shadow var(--mega-menu-transition-duration) var(--mega-menu-transition-ease);
    will-change: transform, opacity;
    overflow: hidden;
}
.host-mega-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.host-mega-menu.is-open .host-mega-menu__link { opacity: 1; transform: translateY(0); }
.host-mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--mega-menu-column-count, 1), minmax(0, 1fr));
    grid-auto-flow: column;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    align-items: stretch;
    text-align: left;
}
.host-mega-menu__column {
    min-width: 0;
    width: 100%;
    padding: var(--mega-menu-column-padding-block) var(--mega-menu-column-padding-inline);
    align-self: stretch;
    border-inline-end: var(--mega-menu-divider-width) solid var(--mega-menu-divider);
    text-align: left;
}
.host-mega-menu__column:first-child { padding-inline-start: var(--mega-menu-column-first-padding); }
.host-mega-menu__column:last-child { border-inline-end: 0; }
.host-mega-menu__group {
    min-width: 0;
}
.host-mega-menu__column-title {
    margin: 0 0 var(--mega-menu-heading-gap);
    color: var(--mega-menu-heading-color);
    font-family: var(--font-primary);
    font-size: var(--mega-menu-heading-size);
    font-weight: var(--mega-menu-heading-weight);
    line-height: var(--mega-menu-heading-line);
    text-align: left;
}
.host-mega-menu__link {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: var(--mega-menu-item-height);
    height: var(--mega-menu-item-height);
    margin: 0;
    padding: 0 10px !important;
    border: 0;
    border-radius: var(--mega-menu-item-radius, 8px);
    background: transparent;
    color: var(--mega-menu-item-color);
    font-family: var(--font-primary);
    text-align: left;
    text-decoration: none;
    transition: opacity var(--mega-menu-item-transition-duration) var(--mega-menu-transition-ease), transform var(--mega-menu-item-transition-duration) var(--mega-menu-transition-ease);
    opacity: 0;
    transform: translateY(6px);
    transition-delay: calc(var(--mega-menu-item-index, 0) * var(--mega-menu-item-stagger-step));
}
.host-mega-menu__group .host-mega-menu__link + .host-mega-menu__link { margin-top: var(--mega-menu-item-gap); }
.host-mega-menu__group + .host-mega-menu__group { margin-top: var(--mega-menu-group-gap); }
.host-mega-menu__grid > .host-mega-menu__column { min-width: 0; }
.host-mega-menu__copy { display: block; min-width: 0; }
.host-mega-menu__copy strong { display: block; color: inherit; font-size: var(--mega-menu-item-size); font-weight: var(--mega-menu-item-weight); line-height: var(--mega-menu-item-line); white-space: normal; }
.host-mega-menu__promo { display: none; }

/* Desktop page backdrop: keeps the header/navigation crisp while blurring the page behind the open mega menu. */
.host-mega-menu__backdrop {
    position: fixed;
    inset: var(--mega-menu-backdrop-top, var(--hr-header-height, var(--header-height-desktop))) 0 0;
    z-index: var(--mega-menu-backdrop-z-index);
    background: var(--mega-menu-backdrop-surface);
    -webkit-backdrop-filter: blur(var(--mega-menu-backdrop-blur)) saturate(var(--mega-menu-backdrop-saturate));
    backdrop-filter: blur(var(--mega-menu-backdrop-blur)) saturate(var(--mega-menu-backdrop-saturate));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--mega-menu-backdrop-transition) var(--ease-standard), visibility var(--mega-menu-backdrop-transition) var(--ease-standard);
}
.host-mega-menu__backdrop.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Mobile/tablet submenu panels: same content model, presented as a sliding page inside the drawer. */
.host-mega-menu__mobile-panel {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
    padding: var(--mega-menu-mobile-panel-padding-top) var(--mega-menu-mobile-panel-padding-inline) var(--mega-menu-mobile-panel-padding-bottom);
    overflow-y: auto; background: var(--mega-menu-mobile-surface); color: var(--color-dark);
    transform: translateX(100%); visibility: hidden; pointer-events: none;
    transition: transform var(--mega-menu-mobile-transition-duration) var(--mega-menu-mobile-transition-ease), visibility var(--mega-menu-mobile-transition-duration) var(--mega-menu-mobile-transition-ease);
}
.host-mega-menu__mobile-panel.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.host-mega-menu__mobile-back { width: var(--mega-menu-mobile-back-size); min-height: var(--mega-menu-mobile-back-size); flex: 0 0 var(--mega-menu-mobile-back-size); align-self: flex-start; display: inline-flex; align-items: center; justify-content: flex-start; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-dark); cursor: pointer; }
.host-mega-menu__mobile-back .host-icon { width: var(--mega-menu-mobile-back-icon-size); height: var(--mega-menu-mobile-back-icon-size); transform: rotate(180deg); }
.host-mega-menu__mobile-title { margin: var(--mega-menu-mobile-title-margin-top) 0 var(--mega-menu-mobile-title-margin-bottom); color: var(--color-dark); font-family: var(--font-primary); font-size: var(--mega-menu-mobile-title-size); font-weight: var(--mega-menu-mobile-title-weight); line-height: var(--mega-menu-mobile-title-line); text-align: left; }
.host-mega-menu__mobile-group-title { margin: var(--mega-menu-mobile-group-margin-top) 0 var(--mega-menu-mobile-group-margin-bottom); color: var(--mega-menu-mobile-group-color); font-family: var(--font-primary); font-size: var(--mega-menu-mobile-group-size); font-weight: var(--mega-menu-mobile-group-weight); line-height: var(--mega-menu-mobile-group-line); text-align: left; }
.host-mega-menu__mobile-link { display: flex; align-items: center; width: 100%; min-height: var(--mega-menu-mobile-item-height); padding: 0 var(--mega-menu-mobile-item-padding-inline); border: 0; border-radius: var(--mega-menu-mobile-item-radius); background: transparent; color: var(--color-dark); font-family: var(--font-primary); font-size: var(--mega-menu-mobile-item-size); font-weight: var(--mega-menu-mobile-item-weight); line-height: var(--mega-menu-mobile-item-line); text-align: left; text-decoration: none; transition: background-color var(--motion-fast) var(--ease-standard); }
@media (min-width: 768px) and (max-width: 1023px) {
    .host-mega-menu__mobile-panel {
        padding: var(--mega-menu-tablet-panel-padding-top) var(--mega-menu-tablet-panel-padding-inline) var(--mega-menu-tablet-panel-padding-bottom);
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        background: var(--mega-menu-mobile-surface);
        color: var(--mega-menu-tablet-link-color);
        transition: transform var(--header-tablet-panel-transition-duration) var(--header-tablet-panel-transition-ease),
                    opacity var(--header-tablet-panel-transition-duration) var(--ease-standard),
                    visibility var(--header-tablet-panel-transition-duration) var(--ease-standard);
    }

    .host-mega-menu__mobile-panel.is-open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    .host-mega-menu__mobile-panel.is-open .host-mega-menu__mobile-title,
    .host-mega-menu__mobile-panel.is-open .host-mega-menu__mobile-group-title,
    .host-mega-menu__mobile-panel.is-open .host-mega-menu__mobile-link {
        animation-name: hostrend-tablet-submenu-item-in;
        animation-duration: var(--header-tablet-panel-item-duration);
        animation-timing-function: var(--header-tablet-panel-item-ease, var(--ease-standard));
        animation-fill-mode: both;
    }

    .host-mega-menu__mobile-panel.is-open .host-mega-menu__mobile-title {
        animation-delay: 35ms;
    }

    .host-mega-menu__mobile-panel.is-open .host-mega-menu__mobile-group-title {
        animation-delay: calc(45ms + (var(--tablet-group-index, 0) * var(--header-tablet-panel-item-stagger)));
    }

    .host-mega-menu__mobile-panel.is-open .host-mega-menu__mobile-link {
        animation-delay: calc(70ms + (var(--tablet-subitem-index, 0) * var(--header-tablet-panel-item-stagger)));
    }

    @keyframes hostrend-tablet-submenu-item-in {
        from { opacity: 0; transform: translateY(var(--header-tablet-panel-item-offset)); }
        to { opacity: 1; transform: translateY(0); }
    }

    .host-mega-menu__mobile-back {
        width: var(--mega-menu-tablet-back-size);
        min-height: var(--mega-menu-tablet-back-size);
        flex-basis: var(--mega-menu-tablet-back-size);
    }

    .host-mega-menu__mobile-back .host-icon {
        width: var(--mega-menu-tablet-back-icon-size);
        height: var(--mega-menu-tablet-back-icon-size);
    }

    .host-mega-menu__mobile-title {
        margin-top: var(--mega-menu-tablet-title-margin-top);
        margin-bottom: var(--mega-menu-tablet-title-margin-bottom-refined);
        color: var(--mega-menu-tablet-title-color);
        font-size: var(--mega-menu-tablet-title-size-refined);
        font-weight: var(--mega-menu-tablet-title-weight);
        line-height: 1.2;
    }

    .host-mega-menu__mobile-group-title {
        margin-top: var(--mega-menu-tablet-group-margin-top-refined);
        margin-bottom: var(--mega-menu-tablet-group-margin-bottom-refined);
        color: var(--mega-menu-tablet-group-color);
        font-size: var(--mega-menu-tablet-group-size-refined);
        font-weight: var(--mega-menu-tablet-group-weight);
        line-height: 1.2;
        letter-spacing: 0;
    }

    .host-mega-menu__mobile-link {
        min-height: var(--mega-menu-tablet-link-height-refined);
        height: var(--mega-menu-tablet-link-height-refined);
        padding-inline: 0;
        color: var(--mega-menu-tablet-link-color);
        font-size: var(--mega-menu-tablet-link-size-refined);
        font-weight: var(--mega-menu-tablet-link-weight);
        line-height: 1.2;
        border-radius: var(--radius-sm);
    }

}

@media (min-width: 768px) and (max-width: 1023px) {
    .hr-header .hr-navigation__mobile-drawer.has-mobile-panel .hr-navigation__mobile-drawer-head .hr-navigation__mobile-close {
        visibility: hidden;
        pointer-events: none;
    }
}

/* V48 — compact/tablet submenu reference refinement.
   Applies the same Canva-inspired hierarchy across the compact viewport range. */
@media (max-width: 1023px) {
    .host-mega-menu__mobile-panel {
        padding: 0 16px 16px;
    }

    .host-mega-menu__mobile-title {
        margin-top: 8px;
        margin-bottom: 20px;
        color: var(--mega-menu-tablet-title-color);
        font-size: var(--mega-menu-tablet-title-size-refined);
        font-weight: var(--mega-menu-tablet-title-weight);
        line-height: 1.2;
    }

    .host-mega-menu__mobile-group-title {
        margin-top: var(--mega-menu-tablet-group-margin-top-refined);
        margin-bottom: var(--mega-menu-tablet-group-margin-bottom-refined);
        color: var(--mega-menu-tablet-group-color);
        font-size: var(--mega-menu-tablet-group-size-refined);
        font-weight: var(--mega-menu-tablet-group-weight);
        line-height: 1.25;
        letter-spacing: 0;
    }

    .host-mega-menu__mobile-link {
        min-height: var(--mega-menu-tablet-link-height-refined);
        height: var(--mega-menu-tablet-link-height-refined);
        padding-inline: 0;
        color: var(--mega-menu-tablet-link-color);
        font-size: var(--mega-menu-tablet-link-size-refined);
        font-weight: var(--mega-menu-tablet-link-weight);
        line-height: 1.25;
    }
/* Canva reference: submenu view uses Back rather than a second close control. */
    .hr-header .hr-navigation__mobile-drawer.has-mobile-panel .hr-navigation__mobile-drawer-head .hr-navigation__mobile-close {
        visibility: hidden;
        pointer-events: none;
    }
}

@media (max-width: 1023px) { .host-mega-menu, .host-mega-menu__backdrop { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .host-mega-menu, .host-mega-menu__link, .host-mega-menu__mobile-panel, .host-mega-menu__mobile-link { transition: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .host-mega-menu, .host-mega-menu__link { transition: none !important; transform: none !important; }
  .host-mega-menu__link { opacity: 1 !important; transition-delay: 0ms !important; }
}


/* Group headings remain static labels; only actionable menu items receive hover surfaces. */

/* V152 — Mega Menu hover contract locked to the approved Footer link treatment.
 * Uses the same compact dimensions and hover treatment as the approved Footer
 * link interaction. This override is intentionally isolated to the desktop
 * Mega Menu link presentation; structure, content, positioning, and mobile
 * drawer behavior remain unchanged.
 */
.host-mega-menu__link {
    box-sizing: border-box;
    min-height: 40px !important;
    height: 40px !important;
    width: fit-content !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
}
.host-mega-menu__copy {
    display: block !important;
    min-width: 0 !important;
}
.host-mega-menu__copy strong {
    font-size: var(--mega-menu-item-size) !important;
    font-weight: var(--mega-menu-item-weight) !important;
    line-height: var(--mega-menu-item-line) !important;
}