/**
 * Umzug-247.de Website Header Styles
 * Standalone CSS for the main website header integrated into portals
 *
 * Last Updated: 2026-01-29
 * All selectors prefixed with 'wh-' to avoid conflicts with portal styles
 */

/* ============================================
   Variables & Base
   ============================================ */
:root {
    --wh-header-bg: #ffffff;
    --wh-header-height: 75px;
    --wh-header-padding: 12px 0;
    --wh-text-color: #000000;
    --wh-text-secondary: #595959;
    --wh-link-hover: #0077b6;
    --wh-menu-font-size: 18px;
    --wh-menu-font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --wh-submenu-bg: #ffffff;
    --wh-submenu-border: #e0e0e0;
    --wh-submenu-hover-bg: #f5f5f5;
    --wh-transition-speed: 0.25s;
    --wh-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Load Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ============================================
   Main Container
   ============================================ */
#umzug247-website-header {
    position: relative;
    z-index: 9999;
    font-family: var(--wh-menu-font-family);
    font-size: var(--wh-menu-font-size);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#umzug247-website-header *,
#umzug247-website-header *::before,
#umzug247-website-header *::after {
    box-sizing: border-box;
}

.wh-header-outer {
    background: var(--wh-header-bg);
    padding: var(--wh-header-padding);
    border-bottom: 1px solid #e5e5e5;
    box-shadow: var(--wh-shadow);
}

.wh-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.wh-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--wh-header-height);
}

/* ============================================
   Logo Section
   ============================================ */
.wh-logo-col {
    flex: 0 0 auto;
}

#wh-logo {
    display: inline-block;
    text-decoration: none;
}

.wh-logo-img {
    display: block;
    height: 50px;
    width: auto;
    max-width: 250px;
}

/* ============================================
   Navigation Section
   ============================================ */
.wh-nav-col {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.wh-nav {
    display: block;
}

.wh-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wh-menu-item {
    position: relative;
}

.wh-menu-item > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    color: var(--wh-text-color);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--wh-menu-font-size);
    text-transform: capitalize;
    transition: color var(--wh-transition-speed);
    white-space: nowrap;
}

.wh-menu-item > a:hover {
    color: var(--wh-link-hover);
}

.wh-menu-text {
    display: inline;
}

.wh-menu-arrow {
    font-size: 10px;
    transition: transform var(--wh-transition-speed);
}

.wh-menu-item:hover > a .wh-menu-arrow {
    transform: rotate(180deg);
}

/* ============================================
   Social Icons
   ============================================ */
.wh-social-icons {
    display: flex;
    gap: 0;
    margin-left: 10px;
}

.wh-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--wh-text-color);
    text-decoration: none;
    transition: color var(--wh-transition-speed);
}

.wh-social-icons a:hover {
    color: var(--wh-link-hover);
}

.wh-social-icons i {
    font-size: 18px;
}

/* Ensure Font Awesome brand icons display */
.wh-social-icons .fab {
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", FontAwesome;
    font-weight: 400;
}

/* ============================================
   Submenus (Dropdowns)
   ============================================ */
.wh-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--wh-submenu-bg);
    border: 1px solid var(--wh-submenu-border);
    border-radius: 4px;
    box-shadow: var(--wh-shadow);
    min-width: 200px;
    padding: 8px 0;
    list-style: none;
    margin: 0;
    z-index: 1000;
}

/* Show submenu on hover (desktop) */
.wh-menu-item.wh-has-submenu:hover > .wh-submenu {
    display: block;
}

.wh-submenu-item {
    position: relative;
    display: block;
}

.wh-submenu-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    color: var(--wh-text-color);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background-color var(--wh-transition-speed);
}

.wh-submenu-item > a:hover {
    background: var(--wh-submenu-hover-bg);
    color: var(--wh-link-hover);
}

.wh-submenu-arrow {
    font-size: 10px;
    margin-left: 10px;
}

/* Level 2 Submenus (nested) */
.wh-submenu-level2 {
    display: none;
    position: absolute;
    top: -8px;
    left: 100%;
    background: var(--wh-submenu-bg);
    border: 1px solid var(--wh-submenu-border);
    border-radius: 4px;
    box-shadow: var(--wh-shadow);
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px 0;
    list-style: none;
    margin: 0;
    z-index: 1001;
}

.wh-submenu-item.wh-has-submenu:hover > .wh-submenu-level2 {
    display: block;
}

.wh-submenu-level2 li {
    display: block;
}

.wh-submenu-level2 li a {
    display: block;
    padding: 8px 16px;
    color: var(--wh-text-color);
    text-decoration: none;
    font-size: 14px;
    transition: background-color var(--wh-transition-speed);
}

.wh-submenu-level2 li a:hover {
    background: var(--wh-submenu-hover-bg);
    color: var(--wh-link-hover);
}

/* Mega Menu Styling - Shows country columns side by side */
.wh-mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--wh-submenu-bg);
    border: 1px solid var(--wh-submenu-border);
    border-radius: 4px;
    box-shadow: var(--wh-shadow);
    min-width: 200px;
    padding: 8px 0;
    list-style: none;
    margin: 0;
    z-index: 1000;
}

.wh-menu-item.wh-has-submenu:hover > .wh-mega-menu {
    display: block;
}

.wh-mega-menu > .wh-submenu-item {
    display: block;
}

.wh-mega-menu > .wh-submenu-item > a {
    font-weight: 500;
    color: var(--wh-text-color);
}

/* ============================================
   Mobile Toggle
   ============================================ */
.wh-mobile-toggle {
    display: none;
}

.wh-mobile-toggle button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.wh-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
}

.wh-hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--wh-text-color);
    border-radius: 2px;
    transition: transform var(--wh-transition-speed), opacity var(--wh-transition-speed);
}

/* Hamburger animation when open */
#umzug247-website-header.wh-mobile-open .wh-hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#umzug247-website-header.wh-mobile-open .wh-hamburger-line:nth-child(2) {
    opacity: 0;
}

#umzug247-website-header.wh-mobile-open .wh-hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ============================================
   Mobile Responsive Styles
   ============================================ */
@media screen and (max-width: 999px) {
    .wh-mobile-toggle {
        display: block;
    }

    .wh-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--wh-header-bg);
        border-bottom: 1px solid var(--wh-submenu-border);
        box-shadow: var(--wh-shadow);
        z-index: 9998;
    }

    #umzug247-website-header.wh-mobile-open .wh-nav {
        display: block;
    }

    .wh-menu {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 0;
    }

    .wh-menu-item > a {
        padding: 12px 20px;
        border-bottom: 1px solid var(--wh-submenu-border);
    }

    .wh-menu-arrow {
        margin-left: auto;
    }

    /* Mobile submenus */
    .wh-submenu,
    .wh-mega-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        min-width: 100%;
        max-width: 100%;
        padding: 0;
        background: #f8f8f8;
    }

    .wh-submenu-level2 {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        max-height: none;
        background: #f0f0f0;
    }

    .wh-submenu-item > a,
    .wh-submenu-level2 li a {
        padding-left: 32px;
    }

    .wh-submenu-level2 li a {
        padding-left: 48px;
    }

    /* Hide submenus by default on mobile */
    .wh-menu-item.wh-has-submenu:hover > .wh-submenu,
    .wh-menu-item.wh-has-submenu:hover > .wh-mega-menu,
    .wh-submenu-item.wh-has-submenu:hover > .wh-submenu-level2 {
        display: none;
    }

    /* Show submenus when open class is added */
    .wh-menu-item.wh-has-submenu.wh-open > .wh-submenu,
    .wh-menu-item.wh-has-submenu.wh-open > .wh-mega-menu {
        display: block;
    }

    .wh-submenu-item.wh-has-submenu.wh-open > .wh-submenu-level2 {
        display: block;
    }

    .wh-mega-menu {
        flex-direction: column;
    }

    .wh-mega-menu > .wh-submenu-item {
        flex: none;
        min-width: 100%;
    }

    /* Social icons on mobile */
    .wh-social-icons {
        justify-content: center;
        padding: 16px 0;
        border-top: 1px solid var(--wh-submenu-border);
    }

    .wh-social-icons a {
        width: 44px;
        height: 44px;
    }
}

/* Extra small screens */
@media screen and (max-width: 575px) {
    .wh-container {
        padding: 0 12px;
    }

    .wh-logo-img {
        height: 40px;
    }

    .wh-row {
        min-height: 60px;
    }
}

/* ============================================
   Utility Classes
   ============================================ */
.wh-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hide on specific breakpoints */
@media screen and (max-width: 767px) {
    .wh-hide-mobile {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    .wh-hide-desktop {
        display: none !important;
    }
}