/* Shared submenu component. Modules provide only items/state; geometry lives here. */
:root {
    --submenu-height:           46px;
    --submenu-bg-color:         var(--main-bg);
    --submenu-font-size:        var(--font-size-s);
    --submenu-font-weight:      var(--font-weight-medium);
    --submenu-font-color:       var(--font-color-dark);
    --submenu-font-color-hover: var(--font-color-extradark);
    --submenu-font-color-active:var(--accent-dark);
    --submenu-font-line-height: 1.3;
    --site-submenu-offset:      0px;
}

.__submenu__container {
    box-sizing:     border-box;
    height:         var(--submenu-height);
    border-bottom:  1px solid var(--border-color);
    background:     var(--submenu-bg-color);
    font-size:      var(--submenu-font-size);
    color:          var(--submenu-font-color);
    box-shadow:     0 3px 8px rgba(0, 0, 0, .06);
}

.__submenu__inner {
    display:flex;
    align-items:stretch;
    gap:20px;
    height:100%;
    margin:0 auto;
    overflow-x:auto;
}

.__submenu__link {
    box-sizing:border-box;
    display:inline-flex;
    flex:none;
    align-items:center;
    position:relative;
    padding:3px;
    color:inherit;
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
    text-decoration:none;
    white-space:nowrap;
    border-bottom:2px solid transparent;
}

.__submenu__link:hover { 
    color:var(--submenu-font-color-hover); 
}

.__submenu__link.site_state__active {
    color:var(--submenu-font-color-active);
    font-weight:550;
    border-bottom-color:currentColor;
}

.__submenu__link:focus-visible {
    outline:2px solid var(--submenu-font-color-active);
    outline-offset:-4px;
    border-radius:3px;
    padding:5px;
}

/* A fixed submenu contributes its own height to the shared page top offset. */
body.header_menu__enabled.site_submenu__enabled {
    --site-submenu-offset:var(--submenu-height);
}

body.header_menu__enabled .__submenu__container {
    position:fixed;
    inset-inline:0;
    top:calc(var(--site-header-offset) + var(--ei-menu-admin-offset, 0px));
    z-index:calc(var(--ei-menu-z-overlay, 9997) - 1);
}

@media (max-width:868px) {
    .__submenu__container { padding:0 12px; }
}