/* =========================================================================
   Kia site navigation — clean rebuild (replaces GroovyMenu shell)
   Scoped under .kia-header / .kia-nav / .kia-mega / .kia-drawer
   ========================================================================= */

:root {
    --kia-ink: #05141f;
    --kia-muted: #697279;
    --kia-line: #e4e7e9;
    --kia-accent: #515151;
    --kia-header-h: 72px;
}

/* ---- Header shell ------------------------------------------------------- */
.kia-header {
    position: relative;
    z-index: 200;
    width: 100%;
    background: #fff;
    color: var(--kia-ink);
    border-bottom: 1px solid var(--kia-line);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.kia-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--kia-header-h);
    padding: 0 48px;
    max-width: 1920px;
    margin: 0 auto;
}

/* Logo */
.kia-header__logo {
    display: inline-flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.kia-header__logo-img {
    display: block;
    width: auto;
}

.kia-header__logo-img--default { display: none; }
.kia-header__logo-img--solid { display: block; }

/* ---- Desktop nav -------------------------------------------------------- */
.kia-nav {
    flex: 1 1 0%;
    min-width: 0;
}

.kia-nav--left {
    display: flex;
    justify-content: flex-start;
    padding-right: 48px;
}

.kia-nav--right {
    display: flex;
    justify-content: flex-end;
    padding-left: 48px;
}

.kia-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kia-nav__item {
    position: static; /* mega panel spans full width */
}

.kia-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: var(--kia-header-h);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.18s ease, opacity 0.18s ease;
}

.kia-nav__link::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 3px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.kia-nav__link:hover::after,
.kia-nav__item:hover > .kia-nav__link::after,
.kia-nav__item--open > .kia-nav__link::after {
    transform: scaleX(1);
}

.kia-nav__link:hover,
.kia-nav__item:hover > .kia-nav__link,
.kia-nav__item--open > .kia-nav__link {
    background: transparent !important;
    color: inherit;
}

.kia-nav__caret {
    transition: transform 0.2s ease;
}

.kia-nav__item--open > .kia-nav__link .kia-nav__caret {
    transform: rotate(180deg);
}

/* Actions (lang + burger) */
.kia-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    margin-left: auto;
}

.kia-lang-dropdown {
    position: relative;
    display: inline-block;
}

.kia-lang-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.85;
    transition: opacity 0.18s ease, color 0.18s ease;
}

.kia-lang-dropdown__toggle:hover {
    opacity: 1;
    color: var(--kia-accent);
}

.kia-lang-dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100px;
    background: #fff;
    color: var(--kia-ink);
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 0;
    border: 1px solid var(--kia-line);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(5, 20, 31, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease;
    z-index: 220;
}

.kia-lang-dropdown:hover .kia-lang-dropdown__menu,
.kia-lang-dropdown__toggle[aria-expanded="true"] + .kia-lang-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kia-lang-dropdown__link {
    display: block;
    padding: 6px 16px;
    font-size: 14px;
    color: var(--kia-ink);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.kia-lang-dropdown__link:hover {
    background-color: var(--kia-background, #f5f5f5);
    color: var(--kia-accent);
}

.kia-lang-dropdown__link.is-active {
    font-weight: 700;
    color: var(--kia-accent);
}

/* Burger (hidden on desktop) */
.kia-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.kia-burger__line {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

body.kia-drawer-open .kia-burger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.kia-drawer-open .kia-burger__line:nth-child(2) {
    opacity: 0;
}
body.kia-drawer-open .kia-burger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Mega panel --------------------------------------------------------- */
.kia-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    color: var(--kia-ink);
    border-top: 1px solid var(--kia-line);
    box-shadow: 0 24px 40px rgba(5, 20, 31, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 210;
}

.kia-nav__item--open > .kia-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Page overlay when mega menu is open */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(5, 20, 31, 0.5);
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s;
}

body:has(.kia-nav__item--open)::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.kia-mega__inner {
    display: flex;
    gap: 48px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 40px 48px 48px;
}

.kia-mega__main {
    flex: 1 1 auto;
    min-width: 0;
}

.kia-mega__columns {
    display: flex;
    flex-wrap: wrap;
    gap: 48px 64px;
}

.kia-mega__columns--brand {
    gap: 40px 72px;
}

.kia-mega__col {
    min-width: 180px;
}

.kia-mega__heading {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kia-muted);
}

.kia-mega__links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kia-mega__link {
    display: inline-block;
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: var(--kia-ink);
    text-decoration: none;
    transition: color 0.18s ease;
}

.kia-mega__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.kia-mega__link:hover {
    color: var(--kia-accent);
}

.kia-mega__link:hover::after {
    transform: scaleX(1);
}

.kia-mega__link--flat {
    font-weight: 600;
}

/* Simple (single-level) dropdown */
.kia-mega--simple .kia-mega__inner {
    padding: 24px 48px 28px;
}

.kia-mega--simple .kia-mega__links {
    gap: 14px;
}

/* Mega Tabs (Hover interaction) */
.kia-mega__tabs {
    display: flex;
    gap: 80px;
}

.kia-mega__tabs-nav {
    flex: 0 0 240px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    position: relative;
}

.kia-mega__tab, .kia-mega__tab-flat {
    position: relative;
}

.kia-mega__tab-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--kia-ink);
    text-decoration: none;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    text-align: left;
    transition: color 0.18s ease;
}

.kia-mega__tab-btn span {
    position: relative;
    display: inline-block;
}

.kia-mega__tab-btn span::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.kia-mega__tab-btn:hover {
    color: var(--kia-accent);
}

.kia-mega__tab-btn:hover span::after,
.kia-mega__tab.is-active .kia-mega__tab-btn span::after {
    transform: scaleX(1);
}

.kia-mega__tab.is-active .kia-mega__tab-btn {
    color: var(--kia-ink);
}

.kia-mega__tab-icon {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.kia-mega__tabs-panels {
    flex: 1 1 auto;
    position: relative;
}

.kia-mega__tab-panel {
    display: none;
    padding-top: 8px;
    animation: megaTabFadeIn 0.3s ease;
}

.kia-mega__tab-panel.is-active {
    display: block;
}

@keyframes megaTabFadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Footer icon cards (standard) */
.kia-mega__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--kia-line);
}

.kia-mega__card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--kia-ink);
    text-decoration: none;
}

.kia-mega__card:hover { color: var(--kia-accent); }

.kia-mega__card-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Aside (sidebar) */
.kia-mega__aside {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 48px;
    border-left: 1px solid var(--kia-line);
}

.kia-mega__phone {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kia-mega__phone-label {
    font-size: 13px;
    color: var(--kia-muted);
}

.kia-mega__phone-number {
    font-size: 18px;
    font-weight: 600;
    color: var(--kia-ink);
    text-decoration: none;
}

.kia-mega__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--kia-ink);
    border-radius: 2px;
    text-decoration: none;
    transition: background-color 0.18s ease;
}

.kia-mega__cta:hover { background: var(--kia-accent); }

/* Social icons */
.kia-social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kia-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--kia-ink);
    border: 1px solid var(--kia-line);
    border-radius: 50%;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.kia-social__link:hover {
    color: var(--kia-accent);
    border-color: var(--kia-accent);
}

/* Brand featured cards */
.kia-mega__aside--brand {
    flex: 0 0 420px;
    flex-direction: row;
    gap: 20px;
    padding-left: 48px;
    border-left: 1px solid var(--kia-line);
}

.kia-mega__feature {
    display: block;
    flex: 1 1 0;
    text-decoration: none;
    color: var(--kia-ink);
}

.kia-mega__feature-img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 4px;
}

.kia-mega__feature-label {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 600;
}

.kia-mega__feature:hover .kia-mega__feature-label { color: var(--kia-accent); }

/* =========================================================================
   Home: transparent bar over hero, solid on scroll / mega-open.
   body.home is set by the layout; .kia-hero is the hero wrapper.
   ========================================================================= */
body.kia-site.home .kia-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 108%);
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

body.kia-site.home .kia-header .kia-header__logo-img--default { display: block; }
body.kia-site.home .kia-header .kia-header__logo-img--solid { display: none; }

body.kia-site.home .kia-header .kia-nav__link:hover,
body.kia-site.home .kia-header .kia-nav__item:hover > .kia-nav__link,
body.kia-site.home .kia-header .kia-nav__item--open > .kia-nav__link,
body.kia-site.home .kia-header .kia-lang__link:hover {
    /*color: #fff !important;*/
    background: transparent !important;
    opacity: 1;
}

/* Solid state (JS toggles .is-solid; also whenever a panel is open) */
body.kia-site.home .kia-header.is-solid,
body.kia-site.home .kia-header:has(.kia-nav__item--open) {
    background: #fff;
    color: var(--kia-ink);
    border-bottom-color: var(--kia-line);
}

body.kia-site.home .kia-header.is-solid .kia-header__logo-img--default,
body.kia-site.home .kia-header:has(.kia-nav__item--open) .kia-header__logo-img--default { display: none; }

body.kia-site.home .kia-header.is-solid .kia-header__logo-img--solid,
body.kia-site.home .kia-header:has(.kia-nav__item--open) .kia-header__logo-img--solid { display: block; }

body.kia-site.home .kia-header.is-solid .kia-nav__link:hover,
body.kia-site.home .kia-header.is-solid .kia-nav__item:hover > .kia-nav__link,
body.kia-site.home .kia-header.is-solid .kia-nav__item--open > .kia-nav__link,
body.kia-site.home .kia-header:has(.kia-nav__item--open) .kia-nav__link:hover,
body.kia-site.home .kia-header:has(.kia-nav__item--open) .kia-nav__item:hover > .kia-nav__link,
body.kia-site.home .kia-header:has(.kia-nav__item--open) .kia-nav__item--open > .kia-nav__link {
    background: transparent !important;
}

/* Home content sits below the absolute header */
body.kia-site.home .kia-hero {
    position: relative;
    z-index: 1;
}

/* Mobile-only items never show in the desktop bar */
.kia-nav__item--mobile-only { display: none; }

/* ---- Mobile drawer ------------------------------------------------------ */
.kia-drawer {
    position: fixed;
    top: var(--kia-header-h);
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-start;
}

.kia-drawer[hidden] { display: none; }

.kia-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 20, 31, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.kia-drawer.is-open .kia-drawer__overlay { opacity: 1; }

.kia-drawer__panel {
    position: relative;
    width: min(92vw, 400px);
    height: 100%;
    background: #fff;
    color: var(--kia-ink);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    overflow: hidden;
    touch-action: auto;
}

.kia-drawer.is-open .kia-drawer__panel { transform: translateX(0); }

.kia-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--kia-line);
}

.kia-drawer__logo img { height: 24px; width: auto; display: block; }

.kia-drawer__close {
    display: inline-flex;
    padding: 8px;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--kia-ink);
    cursor: pointer;
}

.kia-drawer__nav { flex: 1 1 auto; padding: 8px 0; overflow-y: auto; }

.kia-drawer__list { margin: 0; padding: 0; list-style: none; }

.kia-drawer__item { border-bottom: 1px solid var(--kia-line); }

.kia-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--kia-ink);
    text-decoration: none;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    text-align: left;
}

.kia-drawer__caret { flex: 0 0 auto; }

.kia-drawer__sub {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 10;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.kia-drawer__sub.is-active {
    transform: translateX(0);
}

.kia-drawer__back {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--kia-ink);
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--kia-line) !important;
    outline: none !important;
    cursor: pointer;
    text-align: left;
    flex: 0 0 auto;
}

.kia-drawer__sub-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 20px 24px;
}

.kia-drawer__group {
    margin: 16px 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kia-muted);
}

.kia-drawer__sublink {
    display: block;
    padding: 10px 0;
    font-size: 15px;
    color: var(--kia-ink);
    text-decoration: none;
}

.kia-drawer__sublink:hover { color: var(--kia-accent); }

.kia-drawer__foot {
    padding: 20px;
    border-top: 1px solid var(--kia-line);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kia-drawer__lang { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.kia-drawer__lang-link { font-size: 15px; font-weight: 500; color: var(--kia-ink); text-decoration: none; }

.kia-drawer__phone { font-size: 16px; font-weight: 600; color: var(--kia-ink); text-decoration: none; }

.kia-drawer__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--kia-ink);
    border-radius: 2px;
    text-decoration: none;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
    :root { --kia-header-h: 64px; }

    .kia-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #fff;
        color: var(--kia-ink);
        border-bottom-color: var(--kia-line);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    body.kia-site.home .kia-header {
        position: fixed;
    }

    .kia-header.is-unpinned {
        transform: translateY(-100%);
    }

    .kia-header__bar { padding: 0 16px; justify-content: flex-start; }

    .kia-nav { display: none; }

    .kia-header__logo { position: static; transform: none; order: 0; }
    .kia-header__actions { order: -1; margin-left: 0; margin-right: 16px; position: static; }
    .kia-lang-dropdown { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

    .kia-burger { display: flex; color: inherit; }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .kia-header__bar { padding: 0 24px; }
    .kia-lang-dropdown { right: 24px; }
}

/* Body scroll lock while drawer open */
html.kia-drawer-open,
body.kia-drawer-open { overflow: hidden !important; touch-action: none; }

/* Force solid header when mobile drawer is open */
body.kia-drawer-open .kia-header {
    background: #fff !important;
    color: var(--kia-ink) !important;
    border-bottom-color: var(--kia-line) !important;
}
body.kia-drawer-open .kia-header .kia-header__logo-img--default { display: none !important; }
body.kia-drawer-open .kia-header .kia-header__logo-img--solid { display: block !important; }
body.kia-drawer-open .kia-burger { color: var(--kia-ink) !important; }

/* Fix for Elementor slider images not displaying if swiper-slide-bg css is missing */
.kia-hero .swiper-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.kia-hero .swiper-slide-inner {
    z-index: 1;
}

.kia-hero .elementor-slides .swiper-slide-inner .elementor-slide-button {
    display: inline-block;
    border: none;
    border-radius: 0;
    padding: 15px 40px;
    color: #05141F;
    background-color: #FFFFFF;
    font-family: "Noto Sans Armenian", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.kia-hero .elementor-slides .swiper-slide-inner .elementor-slide-button:hover {
    color: #05141F;
    background-color: #FFFFFF;
    text-decoration: none;
}

.kia-hero .swiper-slide {
    position: relative;
    overflow: hidden;
    height: 628px;
}

@media (max-width: 1100px) {
    .kia-hero .swiper-slide {
        height: 460px;
    }
}

@media (max-width: 767px) {
    .kia-hero .swiper-slide {
        height: 330px;
    }
}

/* ---- Admin toolbar: keep site header below fixed bar -------------------- */
body.kia-site.home.admin-toolbar-active .kia-header {
    top: var(--kia-admin-toolbar-height, 32px);
}

@media (max-width: 1100px) {
    body.kia-site.admin-toolbar-active .kia-header {
        top: var(--kia-admin-toolbar-height, 32px);
    }

    body.kia-site.admin-toolbar-active .kia-drawer {
        top: calc(var(--kia-admin-toolbar-height, 32px) + var(--kia-header-h));
    }
}