/* ============================================================
   Upgrade — header styles
   Works on top of Bootstrap 3 + Elate theme.
   ============================================================ */

/* ============================================================
   BRAND
   ============================================================ */
#fh5co-header .navbar-brand {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    float:       left;
    height:      50px;          /* match navbar min-height exactly */
    padding:     0;
    color:       #7b5ea7 !important;
    font-size:   18px;
    font-weight: 700;
    font-family: 'Inter', 'Source Sans Pro', Arial, sans-serif;
    text-decoration: none !important;
}

/* Restore Bootstrap float layout — flexbox caused misalignment */
#fh5co-header .navbar-default {
    min-height: 50px;
}
#fh5co-header .navbar-header {
    float: left;
}
#fh5co-header .navbar-collapse {
    padding-left:  0;
    padding-right: 0;
}

.navbar-brand-icon {
    width:       26px;
    height:      26px;
    fill:        #7b5ea7;
    flex-shrink: 0;
    transition:  fill .2s;
}

.navbar-brand-name {
    font-size:      18px;
    font-weight:    700;
    letter-spacing: -.01em;
    color:          inherit;
}

#fh5co-header.navbar-fixed-top .navbar-brand,
#fh5co-header.navbar-fixed-top .navbar-brand-icon {
    color: #7b5ea7 !important;
    fill:  #7b5ea7;
}

/* ============================================================
   BASE NAV LINKS
   ============================================================ */
#fh5co-header .navbar {
    padding-bottom: 0;
    margin-top:     0;
}

/* Nav items float right. Default: aligned with the 50px brand (inner pages). */
#fh5co-header .nav.navbar-nav.navbar-right {
    float:       right;
    margin-top:  0;
    margin-right: 0;
}

/* Home only: nav drops down onto the white frame above the hero robot. */
#fh5co-header.header-home .nav.navbar-nav.navbar-right {
    margin-top: 95px;
}

@media screen and (max-width: 1200px) {
    #fh5co-header.header-home .nav.navbar-nav.navbar-right { margin-top: 70px; }
}
@media screen and (max-width: 992px) {
    #fh5co-header.header-home .nav.navbar-nav.navbar-right { margin-top: 30px; }
}
@media screen and (max-width: 768px) {
    #fh5co-header .nav.navbar-nav.navbar-right { margin-top: 0; float: none; }
}

#fh5co-header #navbar li a {
    display:     inline-flex;
    align-items: center;
    height:      50px;          /* match brand height */
    padding:     0 13px;
    font-family: 'Inter', 'Source Sans Pro', Arial, sans-serif;
    font-size:   15px;
    font-weight: 500;
    color:       rgba(26, 26, 46, 0.75) !important;
    transition:  color .2s;
    line-height: 1;
}

#fh5co-header #navbar li a span {
    position:    relative;
    display:     block;
    padding-bottom: 2px;
}

#fh5co-header #navbar li a span:before {
    content:    "";
    position:   absolute;
    width:      100%;
    height:     2px;
    bottom:     0;
    left:       0;
    background: #7b5ea7;
    visibility: hidden;
    transform:  scaleX(0);
    transition: all .25s ease-in-out 0s;
}

#fh5co-header #navbar li a:hover,
#fh5co-header #navbar li a:focus {
    color: #7b5ea7 !important;
    text-decoration: none !important;
    background: transparent !important;
}

#fh5co-header #navbar li a:hover span:before,
#fh5co-header #navbar li.active a span:before {
    visibility: visible;
    transform:  scaleX(1);
}

#fh5co-header #navbar li.active a {
    color: #7b5ea7 !important;
}

/* ============================================================
   CTA BUTTON — "Знайти майстра"
   ============================================================ */
#fh5co-header #navbar li.nav-cta-item a.nav-btn-find {
    display:       inline-flex !important;
    align-items:   center !important;
    height:        36px !important;
    padding:       0 18px !important;
    margin:        7px 4px 7px 8px !important;
    background:    #7b5ea7 !important;
    color:         #fff !important;
    font-size:     14px !important;
    font-weight:   600 !important;
    border-radius: 20px !important;
    border:        none !important;
    line-height:   1 !important;
    transition:    background .2s, transform .15s;
    white-space:   nowrap;
}

#fh5co-header .nav-cta-item a.nav-btn-find span:before {
    display: none !important;
}

#fh5co-header .nav-cta-item a.nav-btn-find:hover,
#fh5co-header .nav-cta-item a.nav-btn-find:focus {
    background:    #5d3f8f !important;
    color:         #fff !important;
    transform:     translateY(-1px);
    text-decoration: none !important;
}

/* ============================================================
   LOGIN / AUTH DROPDOWN
   ============================================================ */
.navbar .dropdown-auth { position: relative; }
.navbar .dropdown-auth .dropdown-menu { min-width: 140px; z-index: 1050; }
.navbar .dropdown-auth .dropdown-toggle .caret { margin-left: 4px; }

/* ============================================================
   LANGUAGE DROPDOWN (custom — no Bootstrap JS dependency)
   ============================================================ */
#fh5co-header .lang-switcher-dropdown {
    position: relative;
}

#fh5co-header #lang-switcher-toggle {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    height:      50px;          /* match brand/nav height */
    padding:     0 10px !important;
    font-size:   13px !important;
    font-weight: 600 !important;
    color:       rgba(26, 26, 46, 0.65) !important;
    letter-spacing: .04em;
    cursor:      pointer;
    background:  transparent;
    border:      none;
    text-decoration: none !important;
    font-family: inherit;
    line-height: 1;
    transition:  color .2s;
}

#fh5co-header #lang-switcher-toggle:hover {
    color: #7b5ea7 !important;
    text-decoration: none !important;
}

/* Dropdown menu — hidden by default */
#fh5co-header .lang-switcher-menu {
    display:       none;
    position:      absolute;
    top:           100%;
    right:         0;
    left:          auto;
    min-width:     155px;
    background:    #fff;
    border-radius: 10px;
    border:        1px solid rgba(123,94,167,.15);
    box-shadow:    0 6px 20px rgba(80,50,140,.14);
    padding:       6px 0;
    list-style:    none;
    margin:        0;
    z-index:       1050;
}

/* Shown when JS adds .lang-open to <li> */
#fh5co-header .lang-switcher-dropdown.lang-open .lang-switcher-menu {
    display: block;
}

#fh5co-header .lang-switcher-menu li a {
    display:     block;
    padding:     9px 18px !important;
    font-size:   14px !important;
    font-weight: 500 !important;
    color:       rgba(26, 26, 46, 0.75) !important;
    white-space: nowrap;
    transition:  background .15s, color .15s;
    text-decoration: none !important;
}

#fh5co-header .lang-switcher-menu li.active a,
#fh5co-header .lang-switcher-menu li a:hover {
    color:      #7b5ea7 !important;
    background: rgba(123,94,167,.07) !important;
    text-decoration: none !important;
}

/* ============================================================
   LOGOUT BUTTON
   ============================================================ */
#fh5co-header .nav-logout-wrap { float: left; }
#fh5co-header .nav-logout-form { margin: 0; padding: 0; display: inline; }

#fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn {
    display:     inline-block;
    padding:     15px 13px;
    background:  none;
    border:      none;
    font-family: 'Inter', 'Source Sans Pro', Arial, sans-serif;
    font-size:   15px;
    font-weight: 500;
    color:       rgba(26, 26, 46, 0.75);
    cursor:      pointer;
    line-height: 20px;
    box-shadow:  none;
    outline:     none;
    position:    relative;
    transition:  color .2s;
}

#fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn span {
    position:    relative;
    display:     block;
    padding-bottom: 2px;
}

#fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn span:before {
    content:    "";
    position:   absolute;
    width:      100%;
    height:     2px;
    bottom:     0;
    left:       0;
    background: rgba(26,26,46,.2);
    visibility: hidden;
    transform:  scaleX(0);
    transition: all .25s ease-in-out 0s;
}

#fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn:hover,
#fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn:focus {
    background:      transparent;
    color:           #7b5ea7;
    text-decoration: none;
    outline:         none;
}

#fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn:hover span:before,
#fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn:focus span:before {
    background:  #7b5ea7;
    visibility:  visible;
    transform:   scaleX(1);
}

/* ============================================================
   MOBILE
   ============================================================ */
@media screen and (max-width: 768px) {
    /* Expanded mobile menu: solid panel so it does not blend with the hero. */
    #fh5co-header #navbar.navbar-collapse.in,
    #fh5co-header #navbar.navbar-collapse.collapsing {
        margin-top:    10px;
        padding:       6px 0;
        background:    #fff;
        border-radius: 14px;
        border:        1px solid rgba(123,94,167,.14);
        box-shadow:    0 12px 34px rgba(80,50,140,.16);
        position:      relative;
        z-index:       1040;
        overflow:      hidden;   /* keep row highlights inside the rounded corners */
    }

    /* Stack every entry as a full-width row with hairline separators. */
    #fh5co-header #navbar .navbar-nav { margin: 0; }
    #fh5co-header #navbar .navbar-nav > li {
        float:      none;
        border-top: 1px solid rgba(123,94,167,.08);
    }
    #fh5co-header #navbar .navbar-nav > li:first-child { border-top: 0; }

    /* Left-aligned, comfortably tappable rows (>=48px). */
    #fh5co-header #navbar li a {
        display:     flex;
        align-items: center;
        height:      auto;
        min-height:  48px;
        padding:     12px 18px;
        font-size:   16px;
        font-weight: 500;
        line-height: 1.2;
    }

    /* Replace the desktop sliding underline with a full-row highlight + accent. */
    #fh5co-header #navbar li a span { padding-bottom: 0; }
    #fh5co-header #navbar li a span:before { display: none; }
    #fh5co-header #navbar li a:hover,
    #fh5co-header #navbar li.active > a {
        background: rgba(123,94,167,.08) !important;
        box-shadow: inset 3px 0 0 #7b5ea7;
    }

    /* "Знайти майстра" — full-width primary action, set a touch apart. */
    #fh5co-header #navbar li.nav-cta-item {
        border-top: 0;
        padding:    8px 14px;
    }
    #fh5co-header #navbar li.nav-cta-item a.nav-btn-find {
        display:         flex !important;
        justify-content: center !important;
        width:           100%;
        margin:          0 !important;
        height:          46px !important;
        border-radius:   12px !important;
    }
    #fh5co-header #navbar li.nav-cta-item a.nav-btn-find:hover {
        box-shadow: none;
    }

    /* Logout row mirrors the link rows (drop the desktop float). */
    #fh5co-header .nav-logout-wrap { float: none; }
    #fh5co-header .nav-logout-form { display: block; }
    #fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn {
        display:     flex;
        align-items: center;
        width:       100%;
        min-height:  48px;
        padding:     12px 18px;
        font-size:   16px;
        line-height: 1.2;
    }
    #fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn span { padding-bottom: 0; }
    #fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn span:before { display: none; }
    #fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn:hover {
        background: rgba(123,94,167,.08);
        box-shadow: inset 3px 0 0 #7b5ea7;
    }

    /* Login / language toggles: row with caret pushed to the right edge. */
    #fh5co-header #navbar .dropdown-auth .dropdown-toggle,
    #fh5co-header #lang-switcher-toggle {
        justify-content: space-between;
    }
    #fh5co-header #lang-switcher-toggle {
        display:     flex !important;
        align-items: center;
        height:      auto !important;
        min-height:  48px;
        padding:     12px 18px !important;
        font-size:   14px !important;
    }

    /* Nested sub-options (languages, login/register) indent under their toggle. */
    #fh5co-header .lang-switcher-menu,
    #fh5co-header #navbar .dropdown-auth .dropdown-menu {
        position:      static;
        float:         none;
        width:         100%;
        box-shadow:    none;
        border:        none;
        border-radius: 0;
        padding:       0;
        margin:        0;
        background:    rgba(123,94,167,.04);
    }
    #fh5co-header .lang-switcher-dropdown.lang-open .lang-switcher-menu { display: block; }
    #fh5co-header .lang-switcher-menu li a,
    #fh5co-header #navbar .dropdown-auth .dropdown-menu > li > a {
        display:     flex;
        align-items: center;
        min-height:  44px;
        padding:     11px 18px 11px 32px !important;
        font-size:   15px !important;
    }
}