/* ----------------------------------------------------------------
   Site logo
   Two images are rendered; the visible one is chosen by header state.
   Class names avoid the "logo-" prefix so the template's
   [class*="logo-"] rules in style.css don't hide them.
-----------------------------------------------------------------*/
#header #logo {
    display: flex;
    align-items: center;
    line-height: 1;
}

#header #logo .brand-mark {
    display: block;
    height: 56px;
    width: auto;
    transition: opacity .3s ease;
}

#header #logo .brand-mark--on-dark {
    display: none;
}

@media (max-width: 991px) {
    #header #logo {
        justify-content: center;
    }

    #header #logo .brand-mark {
        height: 48px;
    }
}

/* ----------------------------------------------------------------
   Language switch
   Segmented TR / EN control; replaces the template's hover dropdown
   so the active language is visible and switching takes one click.
-----------------------------------------------------------------*/
#header .lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(35, 31, 32, .18);
    border-radius: 999px;
    line-height: 1;
    vertical-align: middle;
    transition: border-color .35s ease;
}

#header .lang-switch__item {
    display: inline-block;
    min-width: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-align: center;
    color: #231F20;
    transition: background-color .2s ease, color .2s ease;
}

#header .lang-switch__item:hover {
    background-color: rgba(35, 31, 32, .08);
    color: #231F20;
}

#header .lang-switch__item.is-active {
    background-color: #231F20;
    color: #ffffff;
}

#header .lang-switch__item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ----------------------------------------------------------------
   Main menu hover
   The template bolds links on hover (600 -> 700), which widens the
   text and pushes the right-aligned menu sideways. Keep the weight
   fixed and mark the active link with an underline instead.
-----------------------------------------------------------------*/
#mainMenu nav > ul > li.hover-active > a,
#mainMenu nav > ul > li.current > a,
#mainMenu nav > ul > li:hover > a,
#mainMenu nav > ul > li:focus > a {
    font-weight: 600;
}

@media (min-width: 992px) {
    #mainMenu nav > ul > li > a::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 2px;
        height: 2px;
        background-color: currentColor;
        transform: scaleX(0);
        transition: transform .25s ease;
    }

    #mainMenu nav > ul > li.hover-active > a::after,
    #mainMenu nav > ul > li.current > a::after,
    #mainMenu nav > ul > li:hover > a::after,
    #mainMenu nav > ul > li:focus-within > a::after {
        transform: scaleX(1);
    }
}

/* ----------------------------------------------------------------
   Overlay header (homepage)
   Transparent over the full-screen slider with a white logo; turns
   solid white with the original logo once the page is scrolled
   (.is-solid is toggled by js/header.js) or the mobile menu is open.
-----------------------------------------------------------------*/
#header.header-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

#header.header-overlay .header-inner {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    transition: background-color .35s ease, box-shadow .35s ease;
}

#header.header-overlay:not(.is-solid) #logo .brand-mark--on-light {
    display: none;
}

#header.header-overlay:not(.is-solid) #logo .brand-mark--on-dark {
    display: block;
}

#header.header-overlay:not(.is-solid) .lang-switch {
    border-color: rgba(255, 255, 255, .45);
}

#header.header-overlay:not(.is-solid) .lang-switch__item {
    color: #ffffff;
}

#header.header-overlay:not(.is-solid) .lang-switch__item:hover {
    background-color: rgba(255, 255, 255, .15);
    color: #ffffff;
}

#header.header-overlay:not(.is-solid) .lang-switch__item.is-active {
    background-color: #ffffff;
    color: #231F20;
}

#header.header-overlay:not(.is-solid) .lines,
#header.header-overlay:not(.is-solid) .lines:before,
#header.header-overlay:not(.is-solid) .lines:after {
    background-color: #ffffff;
}

@media (min-width: 992px) {
    #header.header-overlay:not(.is-solid) #mainMenu nav > ul > li > a,
    #header.header-overlay:not(.is-solid) #mainMenu nav > ul > li.dropdown:before {
        color: #ffffff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    }

    #header.header-overlay:not(.is-solid) #mainMenu nav > ul > li:hover > a,
    #header.header-overlay:not(.is-solid) #mainMenu nav > ul > li.current > a {
        color: #e2e2e2;
    }
}

#header.header-overlay.is-solid .header-inner {
    background-color: #ffffff;
    background-image: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
}

@media (prefers-reduced-motion: reduce) {
    #header.header-overlay .header-inner,
    #header #logo .brand-mark,
    #mainMenu nav > ul > li > a::after {
        transition: none;
    }
}

/* ----------------------------------------------------------------
   Full-screen slider (homepage)
   svh keeps the slider inside the visible area on mobile browsers
   whose address bar collapses; vh is the fallback.
-----------------------------------------------------------------*/
.inspiro-slider.slider-fullscreen {
    height: 100vh;
    height: 100svh;
    min-height: 420px;
}