/* ============================================================
   JET ATLAS — ht-nav (white sticky header + premium offcanvas)
   Ported from home-two.css. Page chrome (progress bar + cursor) lives
   in ht-core.css; this file owns the bar + mobile menu only.
   ============================================================ */

/* ---- NAV — white bar, centred menu (3-col grid) ---- */
.ht-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--ht-white); transition: box-shadow .4s var(--ht-ease); }
.admin-bar .ht-nav { top: 32px; }
.ht-nav__inner { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; width: min(100% - 2 * clamp(16px,4vw,48px), var(--ht-nav-max, 1440px)); margin-inline: auto; height: 78px; transition: height .4s var(--ht-ease); }
.ht-nav__brand { justify-self: start; line-height: 0; }
.ht-nav__logo { height: 42px; width: auto; transition: height .4s ease; }
/* Prod hardening: out-specify Elementor's kit/image rules that otherwise drop
   the height constraint and blow the square logo up to its intrinsic size. */
.ht-nav .ht-nav__brand img.ht-nav__logo { height: 42px !important; width: auto !important; max-height: 42px; }
.ht-nav.is-scrolled .ht-nav__brand img.ht-nav__logo { height: 38px !important; }
.ht-nav__menu { justify-self: center; }
.ht-nav__menu ul { display: flex; gap: 30px; }
.ht-nav__menu a { position: relative; font-family: var(--ht-ui); font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ht-ink); padding: 6px 0; transition: color .3s ease; }
.ht-nav__menu a::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--ht-lime); border-radius: 2px; transition: width .35s var(--ht-ease); }
.ht-nav__menu a:hover::after { width: 100%; }
.ht-nav__right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.ht-nav.is-scrolled { box-shadow: 0 1px 0 var(--ht-line), 0 12px 30px -22px rgba(10,10,10,0.35); }
.ht-nav.is-scrolled .ht-nav__inner { height: 64px; }
.ht-nav.is-scrolled .ht-nav__logo { height: 38px; }
.ht-burger { display: none; width: 46px; height: 46px; border: 1px solid var(--ht-line); background: transparent; border-radius: 50%; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.ht-burger span { display: block; width: 20px; height: 1.6px; background: var(--ht-ink); transition: transform .3s var(--ht-ease), opacity .3s; }

/* ---- MOBILE MENU — premium sport-luxury fullscreen ---- */
/* Viewport-unit sizing (not inset:0) so the panel covers the full screen even
   though it lives inside the Elementor header, which acts as its containing
   block for position:fixed. */
.ht-mobile { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 1500; background: var(--ht-ink); color: var(--ht-white); display: flex; flex-direction: column; padding: clamp(20px,5vw,40px) clamp(24px,8vw,60px) clamp(28px,6vh,48px); transform: translateY(-100%); transition: transform .6s var(--ht-ease); overflow-y: auto; isolation: isolate; }
.ht-mobile.is-open { transform: translateY(0); }
.ht-mobile__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(62% 38% at 50% 100%, rgba(220,255,0,0.2), transparent 62%), radial-gradient(50% 30% at 82% 2%, rgba(220,255,0,0.08), transparent 60%); }
.ht-mobile__bar { display: flex; align-items: center; justify-content: space-between; }
.ht-mobile__brand { font-family: var(--ht-serif); font-weight: 600; font-size: 22px; letter-spacing: 0.02em; color: var(--ht-white); }
.ht-mobile__brand b { color: var(--ht-lime); font-weight: 600; }
.ht-mobile__close { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ht-line-d); background: transparent; color: var(--ht-white); font-size: 18px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.ht-mobile__close:hover { background: var(--ht-lime); color: var(--ht-ink); border-color: var(--ht-lime); }
.ht-mobile__nav { flex: 1; display: flex; align-items: center; }
.ht-mobile__nav ul { width: 100%; display: flex; flex-direction: column; gap: clamp(2px,1.2vh,12px); text-align: center; }
.ht-mobile__nav a { display: inline-flex; align-items: baseline; justify-content: center; gap: 14px; padding: 4px 0; opacity: 0; transform: translateY(18px); }
.ht-mobile.is-open a { opacity: 1; transform: none; transition: opacity .5s var(--ht-ease), transform .5s var(--ht-ease); transition-delay: calc(var(--i) * 0.06s + 0.2s); }
.ht-mobile__idx { font-family: var(--ht-data); font-size: 13px; font-weight: 700; color: var(--ht-lime); letter-spacing: 1px; }
.ht-mobile__name { font-family: var(--ht-serif); font-weight: 500; font-size: clamp(30px,9vw,46px); line-height: 1; color: var(--ht-white); transition: color .3s; }
.ht-mobile__nav a:hover .ht-mobile__name { color: var(--ht-lime); }
.ht-mobile__foot { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ht-mobile__note { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ht-ui); font-size: 12px; letter-spacing: 0.4px; color: rgba(255,255,255,0.7); }
.ht-mobile__social { display: flex; gap: 12px; }
.ht-mobile__social a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ht-line-d); border-radius: 50%; color: var(--ht-white); transition: background .3s, color .3s, border-color .3s; }
.ht-mobile__social a:hover { background: var(--ht-lime); color: var(--ht-ink); border-color: var(--ht-lime); }
.ht-mobile__foot .ht-btn { width: 100%; max-width: 320px; }

/* ---- Responsive: burger range (<=1024) ---- */
@media (max-width: 1024px) {
  .ht-nav__inner { grid-template-columns: 1fr auto; }
  .ht-nav__menu { display: none; }
  .ht-nav__right .ht-btn--sm { display: none; }
  .ht-burger { display: flex; }
}