/* ============================================================
   JETOUR HEADER  —  plugin stylesheet
   Every class is prefixed `jt-` and every reset is scoped to the
   header / mobile-menu roots so nothing leaks into the live theme.
   ============================================================ */

/* ---- tokens (namespaced so they can't clobber theme vars) ---- */
:root{
  --jt-teal:#39AEB1;
  --jt-header-h:65px;   /* min-height of header bar (kept in sync by JS) */
  --jt-logo-w:140px;    /* logo width (height auto), 100px on mobile     */
  --jt-ease:cubic-bezier(.4,0,.2,1);
}

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

.jt-header,
.jt-mobile-menu{
  font-family:'Noto Sans Georgian', system-ui, -apple-system, sans-serif;
  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),
    backdrop-filter .6s var(--jt-ease),
    -webkit-backdrop-filter .6s var(--jt-ease),
    box-shadow .6s ease;
}

/* scrolled = transparent, blurry, white content */
.jt-header.jt-scrolled{
  --bg:rgba(14,16,20,.28);
  --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);
}
.jt-nav-item:hover::after{ transform:scaleX(1); transform-origin:left center; }

/* ---- CENTER: logo (cross-fade dark<->light) ----
   Both images are absolutely centered inside a fixed logo box and capped by
   max-width/height so a tall logo can never change the bar height. */
.jt-logo{ position:relative; display:block; width:var(--jt-logo-w); height:var(--jt-header-h); }
.jt-logo img{
  position:absolute; inset:0; margin:auto;
  width:auto; height:auto; max-width:100%; max-height:62%;
}
.jt-logo .jt-logo-dark { opacity:var(--logo-dark);  transition:opacity .6s ease; }
.jt-logo .jt-logo-light{ opacity:var(--logo-light); transition:opacity .6s ease; }

/* ---- RIGHT: language + button ---- */
.jt-lang{ display:flex; align-items:center; gap:8px; font-size:14px; }
.jt-lang a{
  color:var(--fg-strong); font-weight:400; opacity:.72;
  transition:color .5s ease, opacity .3s ease;
}
.jt-lang a.jt-active{ font-weight:600; opacity:1; }
.jt-lang a:hover{ color:var(--jt-teal); opacity:1; }
.jt-lang .jt-sep{ color:var(--fg); opacity:.4; }

.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 ease, color .5s ease, border-color .3s ease;
}
.jt-btn-td:hover{ background-color:var(--jt-teal); color:#fff; border-color:var(--jt-teal); }

/* ---- 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), transform .35s var(--jt-ease), 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), 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), 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), visibility 0s linear .4s;
}
.jt-mobile-menu.jt-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .35s ease, transform .4s var(--jt-ease), 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-logo img{
  width:auto !important; height:auto !important;
  max-width:100% !important; max-height:62% !important;
}
.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; }
.jt-header-root .jt-lang a{ color:var(--fg-strong) !important; }
.jt-header-root .jt-lang a:hover{ color:var(--jt-teal) !important; }
.jt-header-root .jt-lang .jt-sep{ color:var(--fg) !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; }
.jt-header-root .jt-burger span{ background:var(--fg-strong) !important; }