/* ============================================================
   H+M Main Navigation Theme
   Bootstrap 4.6 — custom overrides
   ============================================================ */


/* ------------------------------------------------------------
   Level 1 — navbar items
   ------------------------------------------------------------ */

/* position: static lets the absolutely-placed level-2 panel
   use the <nav> as its containing block → full viewport width */
.navbar .nav-item.level-1 {
    position: static;
}


/* ------------------------------------------------------------
   Level 2 — full-width mega-menu panel
   ------------------------------------------------------------ */

.dropdown-menu.level-2 {
    /* Full-width stretch */
    left: 0;
    right: 0;
    width: 100%;

    /* Background & spacing */
    background-color: #f6f6f6;
    padding: 2rem 2.5rem;
    border: none;
    border-radius: 0;
    margin-top: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

/* Only flex-layout when Bootstrap opens the panel (.show class) */
.dropdown-menu.level-2.show {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2rem;
}


/* ------------------------------------------------------------
   Level 2 — column items (with children = headline column)
   ------------------------------------------------------------ */

/* Each dropdown-submenu wrapper is one column */
.dropdown-submenu.level-2 {
    position: static;           /* no flyout needed anymore */
}

/* Mobile: single column for both column types */
.dropdown-submenu.level-2,
.dropdown-menu.level-2 > a.dropdown-item.level-2 {
    flex: 0 0 100%;
    min-width: 0;
}

/* Desktop: all columns grow equally to fill the full panel width */
@media (min-width: 768px) {
    .dropdown-submenu.level-2,
    .dropdown-menu.level-2 > a.dropdown-item.level-2 {
        flex: 1 0 0;
    }
}

/* The level-2 link acts as the column headline */
.dropdown-submenu.level-2 > a.dropdown-item.level-2 {
    display: block;
    padding: 0 0 0.5rem 0;
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #222;
    border-bottom: 2px solid #d0d0d0;
    white-space: nowrap;
}

.dropdown-submenu.level-2 > a.dropdown-item.level-2:hover {
    background: transparent;
    color: #000;
}

/* Remove Bootstrap's generated caret arrow on the headline */
.dropdown-submenu.level-2 > a.dropdown-toggle::after {
    display: none;
}


/* ------------------------------------------------------------
   Level 2 — plain items (no children)
   ------------------------------------------------------------ */

/* Plain level-2 links (no sub-pages) sit as their own column */
.dropdown-menu.level-2 > a.dropdown-item.level-2 {
    align-self: flex-start;
    padding: 0;
    margin-top: 0;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #222;
    white-space: nowrap;
    background: transparent;
}

.dropdown-menu.level-2 > a.dropdown-item.level-2:hover {
    background: transparent;
    color: #000;
}


/* ------------------------------------------------------------
   Level 3 — inline list below the headline
   ------------------------------------------------------------ */

/* Pull level-3 out of flyout mode → always visible in flow */
.dropdown-submenu.level-2 > .dropdown-menu.level-3 {
    position: static;
    display: block;
    float: none;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    width: auto;
}

.dropdown-item.level-3 {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.875rem;
    color: #555;
    white-space: normal;
    background: transparent;
}

.dropdown-item.level-3:hover,
.dropdown-item.level-3:focus {
    background: transparent;
    color: #000;
    text-decoration: underline;
}


/* ------------------------------------------------------------
   Language switcher — compact dropdown (not mega-menu)
   ------------------------------------------------------------ */

/* Re-anchor to the li so it positions under the button, not the nav */
.navbar .nav-item.lang-selector {
    position: relative;
}

/* Reset all mega-menu panel overrides */
.nav-item.lang-selector .dropdown-menu.level-2 {
    left: auto;
    right: 0;
    width: auto;
    min-width: 6rem;
    padding: 0.5rem 0;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Override the mega-menu flex-display when open */
.nav-item.lang-selector .dropdown-menu.level-2.show {
    display: block;
    gap: unset;
}

/* Lang items: normal stacked links, no column behaviour */
.nav-item.lang-selector .dropdown-menu.level-2 > a.dropdown-item.level-2 {
    flex: none;
    padding: 0.4rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #333;
    white-space: nowrap;
}

.nav-item.lang-selector .dropdown-menu.level-2 > a.dropdown-item.level-2:hover {
    background-color: #f0f0f0;
    color: #000;
    text-decoration: none;
}