/* ============================================================
   JDM RACING MOTORS — HEADER
   Figma: node 84:1934
   Author: 360 App Services Inc.
   ============================================================ */
:root {
    --hdr-red:    #E53734;
    --hdr-dark:   #2B2B2B;
    --hdr-white:  #FFFFFF;
    --hdr-font:   'Inter', -apple-system, sans-serif;
    --hdr-h:      100px; /* main header height */
    --topbar-h:   60px;
}

/* ══════════════════════════════════════════════════════════
   STICKY FIX — prevent ancestors from killing position:sticky
   overflow-x:clip hides horizontal scrollbar without breaking sticky
   (overflow:hidden breaks sticky, clip does not)
══════════════════════════════════════════════════════════ */
html {
    overflow-x: clip !important;
    overflow-y: auto !important;
}
body {
    overflow-x: clip;
}
/* Common WP theme wrappers — override if they set overflow:hidden */
.site, .page, #page, #wrapper, #content, .site-content,
.main-content, #main, .site-inner {
    overflow: visible !important;
}

/* ══════════════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════════════ */
.jdm-hdr-topbar {
    background: var(--hdr-red);
    height: var(--topbar-h);
    width: 100%;
    position: relative;
    z-index: 200;
}
.jdm-hdr-topbar__inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 312px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Social icons */
.jdm-hdr-topbar__social {
    display: flex;
    gap: 14px;
    align-items: center;
}
.jdm-hdr-topbar__social-link {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background .2s;
    text-decoration: none;
    flex-shrink: 0;
}
.jdm-hdr-topbar__social-link:hover { background: rgba(255,255,255,.15); }

/* Currency switcher */


.jdm-hdr-currency-switcher { position: relative; }
.jdm-hdr-currency-btn {
    display: flex; align-items: center; gap: 10px;
    background: none; border: none; cursor: pointer;
    font-family: var(--hdr-font);
    font-size: 12px; font-weight: 500;
    color: var(--hdr-white);
    padding: 6px 8px; border-radius: 6px;
    transition: background .2s;
    white-space: nowrap;
}
.jdm-hdr-currency-btn:hover { background: rgba(255,255,255,.15); }
.jdm-hdr-currency-flag { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; }
.jdm-hdr-currency-label { color: var(--hdr-white); }
.jdm-hdr-currency-arrow {
    transition: transform .2s;
    flex-shrink: 0;
}
.jdm-hdr-currency-switcher.is-open .jdm-hdr-currency-arrow { transform: rotate(180deg); }

/* Dropdown */
.jdm-hdr-currency-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--hdr-white);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 220px;
    max-width: calc(100vw - 32px); /* prevent overflow on small screens */
    overflow: hidden;
    opacity: 0; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s;
    z-index: 999;
}
.jdm-hdr-currency-switcher.is-open .jdm-hdr-currency-dropdown {
    opacity: 1; pointer-events: all; transform: translateY(0);
}
.jdm-hdr-currency-option {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 16px;
    background: none; border: none; cursor: pointer;
    font-family: var(--hdr-font); font-size: 14px;
    color: var(--hdr-dark); text-align: left;
    transition: background .15s;
}
.jdm-hdr-currency-option:hover { background: #FFF0F0; }
.jdm-hdr-currency-option.active { background: #FFF0F0; color: var(--hdr-red); font-weight: 700; }
.jdm-hdr-currency-option__flag { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.jdm-hdr-currency-option__name { flex: 1; }
.jdm-hdr-currency-option__code { font-size: 12px; color: #94A3B8; font-weight: 600; }

/* ══════════════════════════════════════════════════════════
   MAIN HEADER
══════════════════════════════════════════════════════════ */
.jdm-hdr {
    background: var(--hdr-white);
    height: var(--hdr-h);
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    position: sticky;
    top: 0;
    z-index: 199;
    width: 100%;
    overflow: visible; /* FIX 3: allows absolute mobile nav to show outside header bounds */
}
.jdm-hdr__inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 312px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Logo */
.jdm-hdr__logo {
    flex-shrink: 0;
    display: block;
    text-decoration: none;
}
.jdm-hdr__logo img {
    height: 76px;
    width: auto;
    display: block;
}

/* Navigation */
.jdm-hdr__nav { flex: 1; display: flex; justify-content: center; }
.jdm-hdr-nav-list {
    display: flex; align-items: center; gap: 30px;
    list-style: none; margin: 0; padding: 0;
}
.jdm-hdr-nav-item { position: relative; }
.jdm-hdr-nav-link {
    font-family: var(--hdr-font);
    font-size: 18px; font-weight: 500;
    color: var(--hdr-dark);
    text-decoration: none;
    display: flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    padding: 0; line-height: 20px;
    transition: color .2s;
    white-space: nowrap;
}
.jdm-hdr-nav-link:hover { color: var(--hdr-red); }
.jdm-hdr-nav-item.active .jdm-hdr-nav-link,
.jdm-hdr-nav-link--active { color: var(--hdr-red); font-weight: 700; }

/* Services dropdown */
.jdm-hdr-nav-link--dropdown svg { transition: transform .2s; }
.jdm-hdr-nav-item--dropdown.is-open .jdm-hdr-nav-link--dropdown svg { transform: rotate(180deg); }
.jdm-hdr-nav-dropdown {
    position: absolute; top: calc(100% + 16px); left: 50%;
    background: var(--hdr-white);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 220px;
    list-style: none; margin: 0; padding: 8px 0;
    opacity: 0; pointer-events: none;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity .2s, transform .2s;
    z-index: 100;
}
.jdm-hdr-nav-item--dropdown.is-open .jdm-hdr-nav-dropdown {
    opacity: 1; pointer-events: all;
    transform: translateX(-50%) translateY(0);
}
.jdm-hdr-nav-dropdown li a {
    display: block; padding: 10px 20px;
    font-family: var(--hdr-font); font-size: 15px; font-weight: 500;
    color: var(--hdr-dark); text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.jdm-hdr-nav-dropdown li a:hover { background: #FFF0F0; color: var(--hdr-red); }

/* Right icons */
.jdm-hdr__right {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.jdm-hdr__icon-btn {
    width: 36px; height: 36px;
    background: var(--hdr-red);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    position: relative;
    transition: opacity .2s;
    flex-shrink: 0;
}
.jdm-hdr__icon-btn:hover { opacity: .85; }

/* Cart count badge */
.jdm-hdr-cart-count {
    position: absolute; top: -6px; right: -6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--hdr-dark); color: var(--hdr-white);
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

/* Hamburger */
.jdm-hdr__hamburger {
    display: none;
    flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer;
    padding: 8px; border-radius: 6px;
    transition: background .2s;
}
.jdm-hdr__hamburger:hover { background: #FFF0F0; }
.jdm-hdr__hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--hdr-dark); border-radius: 2px;
    transition: all .3s;
}
.jdm-hdr__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jdm-hdr__hamburger.is-open span:nth-child(2) { opacity: 0; }
.jdm-hdr__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile Nav ─────────────────────────────────────────────
   FIX 1: position:absolute (not fixed) so top:100% always
           sits flush under the sticky header regardless of scroll.
   FIX 2: visibility instead of display:none so opacity
           transition actually animates (display kills transitions).
─────────────────────────────────────────────────────────── */
.jdm-hdr-mobile-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--hdr-white);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 198;
    padding: 16px 0 24px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
    pointer-events: none;
}
.jdm-hdr-mobile-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
.jdm-hdr-mobile-nav__list {
    list-style: none; margin: 0; padding: 0;
}
.jdm-hdr-mobile-nav__list li a {
    display: block; padding: 12px 24px;
    font-family: var(--hdr-font); font-size: 16px; font-weight: 500;
    color: var(--hdr-dark); text-decoration: none;
    border-bottom: 1px solid #F1F5F9;
    transition: color .2s, background .2s;
}
.jdm-hdr-mobile-nav__list li a:hover { color: var(--hdr-red); background: #FFF8F8; }
.jdm-hdr-mobile-nav__list li:last-child a { border-bottom: none; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
    .jdm-hdr-topbar__inner,
    .jdm-hdr__inner { padding: 0 80px; }
}
@media (max-width: 1200px) {
    .jdm-hdr-topbar__inner,
    .jdm-hdr__inner { padding: 0 40px; }
    .jdm-hdr-nav-list { gap: 20px; }
    .jdm-hdr-nav-link { font-size: 16px; }
}
@media (max-width: 1024px) {
    .jdm-hdr__nav { display: none; }
    .jdm-hdr__hamburger { display: flex; }
    .jdm-hdr__inner { gap: 16px; }
    .jdm-hdr__right { margin-left: auto; } /* FIX 3: push icons+hamburger to right edge */
}
@media (max-width: 640px) {
    .jdm-hdr-topbar__inner { padding: 0 16px; }
    .jdm-hdr__inner { padding: 0 16px; }
    :root { --hdr-h: 70px; }
    .jdm-hdr__logo img { height: 52px; }
    .jdm-hdr-topbar__social { gap: 8px; }
    .jdm-hdr-topbar__social-link { width: 32px; height: 32px; }
    .jdm-hdr-currency-label { display: none; }
    .jdm-hdr-mobile-nav__list li a { padding: 12px 16px; } /* match 640px header padding */
}