/* ==========================================================================
   Site header (template-parts/header/site-header.php) — ported from the
   Jetour Header plugin stylesheet. Every class is prefixed `jt-`; the resets
   are scoped to the header / mobile-menu roots. Tokens come from base.css
   (--jt-teal, --jt-header-h, --jt-logo-w, --jt-ease-std).
   ========================================================================== */


/* ---- scoped reset (only inside our roots) ---- */
.jt-header,
.jt-header *,
.jt-mobile-menu,
.jt-mobile-menu *{ margin:0; padding:0; box-sizing:border-box; }

/* The bar's own text colour follows the state variable, so every descendant that inherits
   (the logo <a>, the WhatsApp <a>, the language button) turns white over a photo hero and
   dark again once the bar is solid. Hard-coding #1a1a1a here used to beat .jt-logo, because
   `.jt-header a { color:inherit }` is more specific than a single class. */
.jt-header{
  font-family:var(--jt-font-sans);
  color:var(--fg-strong);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:color .6s var(--jt-ease-std);
}
.jt-mobile-menu{
  font-family:var(--jt-font-sans);
  color:#1a1a1a;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.jt-header img,
.jt-mobile-menu img{ display:block; }
.jt-header a,
.jt-mobile-menu a{ text-decoration:none; color:inherit; }
.jt-header button{ font-family:inherit; }

/* body scroll-lock when the mobile menu is open */
body.jt-no-scroll{ overflow:hidden; }

/* ============================================================
   HEADER — state-driven via CSS custom properties.
   ============================================================ */
.jt-header{
  position:fixed; top:0; left:0; right:0; width:100%; z-index:100;

  /* default (top of page) = solid white */
  --bg:#ffffff;
  --fg:#4D4D4D;          /* nav item text   */
  --fg-strong:#1a1a1a;   /* logo/lang/icons */
  --btn-bg:#111111;
  --btn-fg:#ffffff;
  --hover-bg:#F2F2F2;
  --logo-dark:1;
  --logo-light:0;

  background-color:var(--bg);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  transition:
    background-color .6s var(--jt-ease-std),
    backdrop-filter .6s var(--jt-ease-std),
    -webkit-backdrop-filter .6s var(--jt-ease-std),
    box-shadow .6s ease;
}

/* Popovers (language menu, mega menu) paint their own surface, so they cannot inherit the
   bar's text colour — that colour follows the bar's state and is white over a hero. They get
   their own token pair instead, flipped to dark glass exactly when the bar's own content is
   white, so the panel always reads against whatever is behind it. */
.jt-header{
  --panel-bg:rgba(255,255,255,.94);
  --panel-ink:#111111;
  --panel-ink-soft:rgba(17,17,17,.55);
  --panel-hover:rgba(0,0,0,.05);
}
body.jt-overlay-header .jt-header:not(.jt-scrolled):not(.jt-mega-open):not(.jt-menu-open),
.jt-header.jt-scrolled:not(:hover):not(.jt-mega-open):not(.jt-menu-open){
  --panel-bg:rgba(20,22,26,.88);
  --panel-ink:#ffffff;
  --panel-ink-soft:rgba(255,255,255,.6);
  --panel-hover:rgba(255,255,255,.12);
}

/* scrolled = blurred glass, white content.
   The scrim has to carry white text over WHITE page sections too, not only over photography,
   so it is dark enough to keep the logo and nav legible anywhere on the page. */
.jt-header.jt-scrolled{
  --bg:rgba(14,16,20,.58);
  --fg:rgba(255,255,255,.82);
  --fg-strong:#ffffff;
  --btn-bg:#ffffff;
  --btn-fg:#111111;
  --hover-bg:rgba(255,255,255,.14);
  --logo-dark:0;
  --logo-light:1;
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 8px 30px rgba(0,0,0,.12);
}

/* hovering the header while scrolled, or a menu open, forces solid white */
.jt-header.jt-mega-open,
.jt-header.jt-menu-open,
.jt-header.jt-scrolled:hover{
  --bg:#ffffff;
  --fg:#4D4D4D;
  --fg-strong:#1a1a1a;
  --btn-bg:#111111;
  --btn-fg:#ffffff;
  --hover-bg:#F2F2F2;
  --logo-dark:1;
  --logo-light:0;
  -webkit-backdrop-filter:blur(0) saturate(100%);
  backdrop-filter:blur(0) saturate(100%);
  box-shadow:0 16px 40px rgba(0,0,0,.07);
}

.jt-header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;  /* keeps logo dead-center */
  align-items:stretch;
  height:var(--jt-header-h);           /* FIXED height — identical on desktop & mobile */
  padding-left:20px;
  padding-right:40px;
}

/* Optional in-flow spacer ([jetour_header spacer="true"]) — reserves the exact
   header height so following content isn't hidden under the fixed bar. */
.jt-header-spacer{ width:100%; height:var(--jt-header-h); }

/* ---- groups ---- */
.jt-hi-left  { display:flex; align-items:stretch; justify-self:start; }
.jt-hi-center{ display:flex; align-items:center;  justify-self:center; }
.jt-hi-right { display:flex; align-items:center;  justify-self:end; gap:22px; }

/* ---- LEFT: desktop nav ---- */
.jt-nav-left{ display:flex; height:100%; }
.jt-nav-item{
  position:relative;
  display:inline-flex; align-items:center; height:100%;
  padding:0 20px;
  font-size:14px; color:var(--fg);
  background-color:transparent;
  cursor:pointer; white-space:nowrap;
  transition:color .5s ease, background-color .3s ease;
}
.jt-nav-item:hover{ background-color:var(--hover-bg); }
/* bottom border fills left -> right on hover (exits to the right) */
.jt-nav-item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--fg-strong);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .35s var(--jt-ease-std);
}
.jt-nav-item:hover::after{ transform:scaleX(1); transform-origin:left center; }

/* ---- CENTER: logo ----
   One inline SVG that inherits the bar's state colour (see the .jt-logo rules further
   down). The <img> rule stays for the legacy shortcode markup, which still passes two
   raster logos. */
.jt-logo img{
  position:absolute; inset:0; margin:auto;
  width:auto; height:auto; max-width:100%; max-height:62%;
}

/* ---- RIGHT: language + button ---- */

/* ---- language switch: globe + custom dropdown ------------------------- */
.jt-lang{ position:relative; display:flex; align-items:center; }
.jt-lang__btn{
  display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 10px;
  background:transparent; border:0; border-radius:999px;
  color:var(--fg-strong); font-family:inherit; font-size:13px; font-weight:500; line-height:1;
  cursor:pointer;
  transition:background-color .35s var(--jt-ease-std), color .35s var(--jt-ease-std);
}
.jt-lang__btn:hover{ background:var(--hover-bg); }
.jt-lang__globe{ display:inline-flex; opacity:.75; transition:transform .5s var(--jt-ease-out), opacity .35s ease; }
.jt-lang__btn:hover .jt-lang__globe{ opacity:1; transform:rotate(22deg); }
.jt-lang__current{ letter-spacing:.04em; }
.jt-lang__chev{ display:inline-flex; opacity:.55; transition:transform .4s var(--jt-ease-out); }
.jt-lang.is-open .jt-lang__chev{ transform:rotate(180deg); }

.jt-lang__menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:20;
  min-width:168px; padding:6px;
  background:var(--panel-bg);
  -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
  border-radius:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.06) inset, 0 18px 40px -16px rgba(0,0,0,.35);
  /* animated open/close: the panel eases down and fades, never snaps */
  opacity:0; transform:translateY(-6px) scale(.97); transform-origin:top right;
  transition:opacity .28s var(--jt-ease-out), transform .34s var(--jt-ease-out), visibility 0s linear .34s;
  visibility:hidden;
}
.jt-lang__menu[hidden]{ display:block; }        /* animate instead of vanishing */
.jt-lang.is-open .jt-lang__menu{
  opacity:1; transform:none; visibility:visible;
  transition:opacity .28s var(--jt-ease-out), transform .34s var(--jt-ease-out), visibility 0s;
}
.jt-lang .jt-lang__opt{
  display:flex; align-items:baseline; gap:8px;
  padding:9px 12px; border-radius:9px;
  color:var(--panel-ink); text-decoration:none; font-size:13px; line-height:1;
  transition:background-color .3s var(--jt-ease), color .3s var(--jt-ease);
}
.jt-lang .jt-lang__opt:hover, .jt-lang .jt-lang__opt:focus-visible{ background:var(--panel-hover); color:var(--panel-ink); }
.jt-lang .jt-lang__opt.is-active{ color:var(--jt-teal); font-weight:600; }
.jt-lang__opt-full{ font-size:12px; color:var(--panel-ink-soft); }
.jt-lang__opt.is-active .jt-lang__opt-full{ color:var(--jt-teal); opacity:.75; }

/* Geometry, restored from the original header stylesheet — it was dropped in the port, and
   the scoped `.jt-header *` reset then flattened the button to a bare line of text. */
.jt-btn-td{
  display:inline-flex; align-items:center; height:38px; padding:0 22px;
  font-size:14px; font-weight:600; border-radius:0;
  background-color:var(--btn-bg); color:var(--btn-fg);
  border:1px solid transparent; white-space:nowrap; cursor:pointer;
  transition:background-color .5s var(--jt-ease-std), color .5s var(--jt-ease-std), border-color .3s ease;
}
.jt-btn-td:hover{ background-color:var(--jt-teal); color:#fff; border-color:var(--jt-teal); }

/* ---- WhatsApp (mobile): black, not brand green ------------------------ */
.jt-wa-btn{ color:var(--fg-strong); transition:color .35s var(--jt-ease-std), transform .35s var(--jt-ease-out); }
.jt-wa-btn svg{ width:22px; height:22px; display:block; }
.jt-wa-btn:hover{ transform:scale(1.08); }
/* ---- MOBILE controls (hidden on desktop) ---- */
.jt-mobile-left, .jt-mobile-right{ display:none; align-items:center; }
.jt-mobile-right{ gap:14px; }

.jt-wa-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; }
.jt-wa-btn svg{ width:25px; height:25px; }

.jt-burger{
  position:relative; width:26px; height:14px;
  background:none; border:none; cursor:pointer; padding:0;
}
.jt-burger span{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background:var(--fg-strong);
  transition:top .35s var(--jt-ease-std), transform .35s var(--jt-ease-std), background-color .5s ease;
}
.jt-burger span:nth-child(1){ top:3px; }
.jt-burger span:nth-child(2){ top:9px; }
.jt-header.jt-menu-open .jt-burger span:nth-child(1){ top:6px; transform:rotate(45deg); }
.jt-header.jt-menu-open .jt-burger span:nth-child(2){ top:6px; transform:rotate(-45deg); }

/* ============================================================
   MEGA MENU (desktop) — smoothly expands from header bottom
   ============================================================ */
.jt-mega{
  position:absolute; top:100%; left:0; right:0;
  background:#fff;
  display:grid; grid-template-rows:0fr;       /* animatable height */
  opacity:0; visibility:hidden;
  box-shadow:0 24px 40px rgba(0,0,0,.10);
  transition:grid-template-rows .45s var(--jt-ease-std), opacity .35s ease, visibility 0s linear .45s;
}
.jt-header.jt-mega-open .jt-mega{
  grid-template-rows:1fr; opacity:1; visibility:visible;
  transition:grid-template-rows .45s var(--jt-ease-std), opacity .35s ease, visibility 0s;
}
.jt-mega-clip{ overflow:hidden; min-height:0; }
.jt-mega-pad{ padding:40px 56px 40px 56px; }

.jt-model-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(5,1fr);        /* 5 on a regular screen */
}
@media (min-width:1700px){ .jt-model-grid{ grid-template-columns:repeat(6,1fr); } }
@media (max-width:1280px){ .jt-model-grid{ grid-template-columns:repeat(4,1fr); } }

.jt-model-card{
  position:relative; height:200px;
  border:1px solid #EBEBEB; border-radius:5px;
  overflow:hidden; background:#fff;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.jt-model-card:hover{ border-color:var(--jt-teal); box-shadow:0 8px 24px rgba(57,174,177,.12); }

.jt-model-logo{ position:absolute; top:12px; left:12px; height:16px; width:auto; max-width:none; z-index:2; filter:brightness(0); }
.jt-model-car{
  position:absolute; bottom:0; height:180px; width:auto; max-width:none; margin-left:-30px; z-index:1;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.jt-model-card:hover .jt-model-car{ transform:scale(1.05); }

/* ============================================================
   MOBILE MENU — expands below header, white even when scrolled
   ============================================================ */
.jt-mobile-menu{
  position:fixed; left:0; right:0; top:var(--jt-header-h); bottom:0;
  background:#fff; z-index:90;
  padding:30px 22px 44px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .35s ease, transform .4s var(--jt-ease-std), visibility 0s linear .4s;
}
.jt-mobile-menu.jt-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .35s ease, transform .4s var(--jt-ease-std), visibility 0s;
}
.jt-mm-links{ display:flex; flex-direction:column; gap:18px; }
.jt-mm-link{ font-size:18px; font-weight:500; color:#111; }
.jt-mm-link.jt-active{ color:var(--jt-teal); }

.jt-mm-divider{ height:1px; background:#EBEBEB; margin:28px 0 22px; }
.jt-mm-label{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#9a9a9a; margin-bottom:16px; }
.jt-mm-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ============================================================
   RESPONSIVE SWITCH
   ============================================================ */
@media (max-width:1024px){
  .jt-header-inner{ padding-left:16px; padding-right:16px; }
  .jt-nav-left, .jt-nav-right{ display:none; }
  .jt-mobile-left, .jt-mobile-right{ display:flex; }
  .jt-mega{ display:none; }
  :root{ --jt-logo-w:100px; }
  /* compact model cards inside the mobile menu */
  .jt-mm-card-grid .jt-model-card{ height:150px; }
  .jt-mm-card-grid .jt-model-car{ height:90%; }
}

@media (prefers-reduced-motion:reduce){
  .jt-header *, .jt-mobile-menu *{ transition-duration:.01ms !important; }
}

/* ============================================================
   WP ADMIN BAR — push the fixed header/menu below the toolbar
   so logged-in users don't lose the top strip behind it.
   ============================================================ */
.admin-bar .jt-header{ top:32px; }
.admin-bar .jt-mobile-menu{ top:calc(var(--jt-header-h) + 32px); }
@media screen and (max-width:782px){
  .admin-bar .jt-header{ top:46px; }
  .admin-bar .jt-mobile-menu{ top:calc(var(--jt-header-h) + 46px); }
}
@media screen and (max-width:600px){
  /* below 600px WP makes the toolbar scroll away (position:absolute) */
  .admin-bar .jt-header{ top:0; }
  .admin-bar .jt-mobile-menu{ top:var(--jt-header-h); }
}

/* ============================================================
   BUILDER / THEME OVERRIDE GUARD  (Elementor, etc.)
   Page builders & themes inject img-sizing, link-colour and
   background rules with high specificity / source-order. We
   re-assert the essentials, scoped under .jt-header-root and
   flagged !important, so the header renders identically when
   dropped inside an Elementor widget. Values still read the
   state variables, so scroll/hover/mega transitions keep working.
   ============================================================ */

/* — images: never resized by theme/builder `img{max-width;height}` rules — */

.jt-header-root .jt-model-car{
  width:auto !important; height:180px !important; max-width:none !important;
}
.jt-header-root .jt-model-logo{
  width:auto !important; height:16px !important; max-width:none !important;
}
@media (max-width:1024px){
  .jt-header-root .jt-mm-card-grid .jt-model-car{ height:90% !important; }
}

/* — link / text colours follow the header STATE vars, not the kit palette — */
.jt-header-root .jt-nav-item{ color:var(--fg) !important; background-color:transparent !important; }
.jt-header-root .jt-nav-item:hover{ background-color:var(--hover-bg) !important; }
/* The switch used to be two inline Geo/Eng links, and this forced them to the bar's colour.
   It now has a trigger plus a panel: the TRIGGER follows the bar, the panel's options must
   keep their own ink or they turn white-on-white inside a light panel. Do not widen this
   back to `.jt-lang a`. */
.jt-header-root .jt-lang__btn{ color:var(--fg-strong) !important; }
.jt-header-root .jt-btn-td{ color:var(--btn-fg) !important; background-color:var(--btn-bg) !important; }
.jt-header-root .jt-btn-td:hover{ color:#fff !important; background-color:var(--jt-teal) !important; }
.jt-header-root .jt-mm-link{ color:#111 !important; }
.jt-header-root .jt-mm-link.jt-active{ color:var(--jt-teal) !important; }

/* — wrapper / surface backgrounds across states — */
.jt-header-root .jt-header{ background-color:var(--bg) !important; }
.jt-header-root .jt-mega,
.jt-header-root .jt-mobile-menu,
.jt-header-root .jt-model-card{ background:#fff !important; }
/* …and because they are white, they carry their own ink rather than inheriting the bar's,
   which is white whenever the bar sits on a photograph. */
.jt-mega, .jt-model-card{ color:#1a1a1a; }
/* burger — strip builder/theme <button> styling and lock the bars + X-morph */
.jt-header-root .jt-burger{
  position:relative !important; display:inline-block !important;
  width:26px !important; height:14px !important; min-height:0 !important; min-width:0 !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important; outline:none !important;
  -webkit-appearance:none !important; appearance:none !important; line-height:0 !important;
}
.jt-header-root .jt-burger:hover,
.jt-header-root .jt-burger:focus,
.jt-header-root .jt-burger:active{ background:none !important; box-shadow:none !important; outline:none !important; }
.jt-header-root .jt-burger span{
  position:absolute !important; left:0 !important; width:100% !important; height:2px !important;
  border-radius:2px !important; background:var(--fg-strong) !important;
}
.jt-header-root .jt-burger span:nth-child(1){ top:3px !important; }
.jt-header-root .jt-burger span:nth-child(2){ top:9px !important; }
.jt-header-root .jt-header.jt-menu-open .jt-burger span:nth-child(1){ top:6px !important; transform:rotate(45deg) !important; }
.jt-header-root .jt-header.jt-menu-open .jt-burger span:nth-child(2){ top:6px !important; transform:rotate(-45deg) !important; }

/* ---- logo: one inline SVG that inherits the header state colour -------- */
.jt-logo{ display:flex; align-items:center; height:var(--jt-header-h); color:var(--fg-strong); }
.jt-logo__svg{
  display:block; width:var(--jt-logo-w); height:auto; color:inherit;
  transition:color .6s var(--jt-ease-std), opacity .4s var(--jt-ease-std);
}
.jt-logo:hover .jt-logo__svg{ opacity:.75; }

/* ---- mobile menu: rows arrive one after another ------------------------ */
.jt-mobile-menu .jt-mm-link,
.jt-mobile-menu .jt-mm-label,
.jt-mobile-menu .jt-mm-divider,
.jt-mobile-menu .jt-mm-card-grid .jt-model-card{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--jt-ease-out) var(--mm-delay,0ms), transform .55s var(--jt-ease-out) var(--mm-delay,0ms);
}
.jt-mobile-menu.jt-open .jt-mm-link,
.jt-mobile-menu.jt-open .jt-mm-label,
.jt-mobile-menu.jt-open .jt-mm-divider,
.jt-mobile-menu.jt-open .jt-mm-card-grid .jt-model-card{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .jt-mobile-menu .jt-mm-link,
  .jt-mobile-menu .jt-mm-label,
  .jt-mobile-menu .jt-mm-divider,
  .jt-mobile-menu .jt-mm-card-grid .jt-model-card{ opacity:1; transform:none; transition:none; }
}

/* ---- header over a full-bleed hero ------------------------------------
   On pages that open with a photograph the bar has no surface of its own: it
   floats over the image in white, and only materialises (blur + dark) once the
   visitor scrolls past the hero, or while a menu is open. Handing the state
   machine new values is enough — everything downstream already reads them. */
body.jt-overlay-header .jt-header:not(.jt-scrolled):not(.jt-mega-open):not(.jt-menu-open){
  --bg:transparent;
  --fg:rgba(255,255,255,.86);
  --fg-strong:#ffffff;
  --btn-bg:#ffffff;
  --btn-fg:#111111;
  --hover-bg:rgba(255,255,255,.16);
  background-color:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* a soft scrim keeps white text legible over a bright photo */
body.jt-overlay-header .jt-header::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.34), rgba(0,0,0,0));
  opacity:0; transition:opacity .6s var(--jt-ease-std);
}
body.jt-overlay-header .jt-header:not(.jt-scrolled):not(.jt-mega-open):not(.jt-menu-open)::after{ opacity:1; }
body.jt-overlay-header .jt-header{ isolation:isolate; }