/* ============================================================
   post-538.css  —  Header section styles
   Updated to match hyundaigujrat.com Elementor settings
   ============================================================ */

/* CSS Variables from target site */
.elementor-kit-36 {
    --e-global-color-primary: #6EC1E4;
    --e-global-color-secondary: #54595F;
    --e-global-color-text: #7A7A7A;
    --e-global-color-accent: #61CE70;
    --e-global-color-41c4b2a: #002C5F;
    --e-global-color-ef48103: #F6F3F2;
    --e-global-typography-primary-font-family: "Roboto";
    --e-global-typography-primary-font-weight: 600;
    --e-global-typography-secondary-font-family: "Roboto Slab";
    --e-global-typography-secondary-font-weight: 400;
    --e-global-typography-text-font-family: "Roboto";
    --e-global-typography-text-font-weight: 400;
    --e-global-typography-accent-font-family: "Roboto";
    --e-global-typography-accent-font-weight: 500;
}

/* ---- HEADER SECTION (elementor-538) ---- */

/* Outer section — white bg, border bottom like target site */
.elementor-538 .elementor-element.elementor-element-ec9420f:not(.elementor-motion-effects-element-type-background),
.elementor-538 .elementor-element.elementor-element-ec9420f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #FFFFFF;
}
.elementor-538 .elementor-element.elementor-element-ec9420f {
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-color: #E4DCD3;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 0px 10px 0px 10px;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.elementor-538 .elementor-element.elementor-element-ec9420f > .elementor-background-overlay {
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

/* Align columns vertically centered */
.elementor-538 .elementor-element.elementor-element-ec9420f > .elementor-container > .elementor-column > .elementor-widget-wrap {
    align-content: center;
    align-items: center;
}

/* ---- NAV MENU (b8887e3) ---- */

/* Mobile toggle */
.elementor-538 .elementor-element.elementor-element-b8887e3 .hfe-nav-menu__toggle {
    margin: 0 auto;
}

/* Nav item padding */
.elementor-538 .elementor-element.elementor-element-b8887e3 .menu-item a.hfe-menu-item {
    padding-left: 15px;
    padding-right: 15px;
}
.elementor-538 .elementor-element.elementor-element-b8887e3 .menu-item a.hfe-sub-menu-item {
    padding-left: calc(15px + 20px);
    padding-right: 15px;
}
.elementor-538 .elementor-element.elementor-element-b8887e3 .hfe-nav-menu__layout-vertical .menu-item ul ul a.hfe-sub-menu-item {
    padding-left: calc(15px + 40px);
    padding-right: 15px;
}
.elementor-538 .elementor-element.elementor-element-b8887e3 .hfe-nav-menu__layout-vertical .menu-item ul ul ul a.hfe-sub-menu-item {
    padding-left: calc(15px + 60px);
    padding-right: 15px;
}
.elementor-538 .elementor-element.elementor-element-b8887e3 .hfe-nav-menu__layout-vertical .menu-item ul ul ul ul a.hfe-sub-menu-item {
    padding-left: calc(15px + 80px);
    padding-right: 15px;
}

/* Top & bottom padding for nav items */
.elementor-538 .elementor-element.elementor-element-b8887e3 .menu-item a.hfe-menu-item,
.elementor-538 .elementor-element.elementor-element-b8887e3 .menu-item a.hfe-sub-menu-item {
    padding-top: 22px;
    padding-bottom: 22px;
}

/* Font styling */
.elementor-538 .elementor-element.elementor-element-b8887e3 a.hfe-menu-item,
.elementor-538 .elementor-element.elementor-element-b8887e3 a.hfe-sub-menu-item {
    font-family: "Roboto", Sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}

/* Normal nav item color — Hyundai navy */
.elementor-538 .elementor-element.elementor-element-b8887e3 .menu-item a.hfe-menu-item,
.elementor-538 .elementor-element.elementor-element-b8887e3 .sub-menu a.hfe-sub-menu-item {
    color: #002C5F;
}

/* Hover / active / focus states */
.elementor-538 .elementor-element.elementor-element-b8887e3 .menu-item a.hfe-menu-item:hover,
.elementor-538 .elementor-element.elementor-element-b8887e3 .sub-menu a.hfe-sub-menu-item:hover,
.elementor-538 .elementor-element.elementor-element-b8887e3 .menu-item.current-menu-item a.hfe-menu-item,
.elementor-538 .elementor-element.elementor-element-b8887e3 .menu-item a.hfe-menu-item.highlighted,
.elementor-538 .elementor-element.elementor-element-b8887e3 .menu-item a.hfe-menu-item:focus {
    color: #000000;
}

.elementor-538 .elementor-element.elementor-element-b8887e3 .menu-item.current-menu-item a.hfe-menu-item,
.elementor-538 .elementor-element.elementor-element-b8887e3 .menu-item.current-menu-ancestor a.hfe-menu-item {
    color: #000000;
    border-bottom: 3px solid #002C5F;
}

/* Dropdown / sub-menu background */
.elementor-538 .elementor-element.elementor-element-b8887e3 .sub-menu,
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown,
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown-expandible,
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown .menu-item a.hfe-menu-item,
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown .menu-item a.hfe-sub-menu-item {
    background-color: #fff;
}

/* Dropdown top border accent */
.elementor-538 .elementor-element.elementor-element-b8887e3 .sub-menu {
    border-top: 3px solid #002C5F;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* Dropdown width */
.elementor-538 .elementor-element.elementor-element-b8887e3 ul.sub-menu {
    width: 220px;
}

/* Sub-menu item padding */
.elementor-538 .elementor-element.elementor-element-b8887e3 .sub-menu a.hfe-sub-menu-item,
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown li a.hfe-menu-item,
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown li a.hfe-sub-menu-item,
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown-expandible li a.hfe-menu-item,
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown-expandible li a.hfe-sub-menu-item {
    padding-top: 12px;
    padding-bottom: 12px;
    color: #333;
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
}

.elementor-538 .elementor-element.elementor-element-b8887e3 .sub-menu a.hfe-sub-menu-item:hover,
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown li a.hfe-menu-item:hover,
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown li a.hfe-sub-menu-item:hover {
    background: #F6F3F2;
    color: #002C5F;
    padding-left: 26px;
}

/* Sub-menu dividers */
.elementor-538 .elementor-element.elementor-element-b8887e3 .sub-menu li.menu-item:not(:last-child),
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown li.menu-item:not(:last-child),
.elementor-538 .elementor-element.elementor-element-b8887e3 nav.hfe-dropdown-expandible li.menu-item:not(:last-child) {
    border-bottom-style: solid;
    border-bottom-color: #E4DCD3;
    border-bottom-width: 1px;
}

/* ---- DEALER NAME HEADING (8aede0f) ---- */
.elementor-538 .elementor-element.elementor-element-8aede0f {
    text-align: right;
}
.elementor-538 .elementor-element.elementor-element-8aede0f .elementor-heading-title {
    color: #002C5F;
    font-family: "Roboto", Sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    border-left: 3px solid #002C5F;
    padding-left: 10px;
}

/* Tooltip */
.elementor-widget .tippy-tooltip .tippy-content {
    text-align: center;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 767px) {
    .elementor-538 .elementor-element.elementor-element-2ecad28 { width: 80%; }
    .elementor-538 .elementor-element.elementor-element-8568fa4 { width: 20%; }
    .elementor-538 .elementor-element.elementor-element-8aede0f { text-align: center; }
    .elementor-538 .elementor-element.elementor-element-8aede0f > .elementor-widget-container {
        margin: -21px 0px 0px 0px;
    }
    .elementor-538 .elementor-element.elementor-element-ec9420f {
        position: relative;
    }
}

@media (min-width: 768px) {
    .elementor-538 .elementor-element.elementor-element-2ecad28 { width: 21.452%; }
    .elementor-538 .elementor-element.elementor-element-8568fa4 { width: 58.415%; }
    .elementor-538 .elementor-element.elementor-element-3ccc732 { width: 19.787%; }
}