/* Hover guard — the `@media (hover: hover)` blocks below.
 *
 * A touch screen has no pointer to hover with, so the browser synthesises a
 * hover on the first tap. Every :hover rule then fires on that tap, the
 * browser counts it as "the page changed", and the click that would have
 * followed the link is swallowed: the button plays its animation and you have
 * to tap a second time to actually go anywhere. `hover: hover` matches only
 * devices with a real hovering pointer, so these rules are skipped entirely on
 * phones and tablets and one tap is enough. Desktop is unaffected — a
 * conditional group rule changes neither specificity nor source order.
 */

/* ============================================================
   ViDiPiXs — Editorial sticky nav & dropdown
   Scoped to .header-area to avoid bleeding into other pages.
   ============================================================ */

.header-area {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: transparent;
  transition: background 0.35s ease, backdrop-filter 0.35s ease,
              padding 0.3s ease, border-color 0.35s ease;
  border-bottom: 0.5px solid transparent;
  padding: 8px 0;
}

/* Both .scrolled (added by sleek/js/home.js on the homepage) and .sticky
   (added by the legacy website/js/active.js on every page) get the same
   editorial black-glass treatment. This overrides the legacy
   .header-area.sticky { background:#232323 } from website/style.css. */
.header-area.scrolled,
.header-area.sticky {
  background: rgba(10, 10, 10, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: #1f1f1f;
  padding: 4px 0;
}

/* Wordmark area */
.header-area .logo-area img {
  max-height: 150px;
  width: auto !important;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  filter: brightness(1);
}
.header-area.scrolled .logo-area img,
.header-area.sticky .logo-area img {
  max-height: 120px;
}

/* Top-level links */
.header-area .navmenu {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-area .navmenu > a,
.header-area .navmenu .dropdown > a {
  position: relative;
  font-size: 11px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ecebe6 !important;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  padding: 8px 0;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s ease;
}
.header-area .navmenu > a::after,
.header-area .navmenu .dropdown > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: #FFCC01;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.header-area .navmenu > a:hover,
.header-area .navmenu .dropdown:hover > a {
  color: #FFCC01 !important;
}
.header-area .navmenu > a:hover::after,
.header-area .navmenu .dropdown:hover > a::after {
  transform: scaleX(1);
}

/* Hide the Bootstrap caret arrow — replace with our own subtle one */
.header-area .navmenu .dropdown-toggle::before,
.header-area .navmenu .dropdown-toggle::after {
  display: none !important;
}
.header-area .navmenu .dropdown > a .nav-caret,
.header-area .navmenu .dropdown > a::before {
  /* nothing — we'll add a small chevron via content below */
}
.header-area .navmenu .dropdown > a {
  padding-right: 14px;
}
.header-area .navmenu .dropdown > a span.tg-caret {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 8px;
  transition: transform 0.25s ease;
}
.header-area .navmenu .dropdown:hover > a span.tg-caret {
  transform: rotate(-135deg) translateY(0);
}

/* The dropdown panel itself */
.header-area .navmenu .dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0.5px solid rgba(255, 204, 1, 0.18);
  border-radius: 0;
  padding: 8px 0;
  margin: 12px 0 0;
  min-width: 200px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  position: absolute;
}
/* Invisible bridge so the hover survives the gap between the link and the panel */
.header-area .navmenu .dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
  background: transparent;
}
.header-area .navmenu .dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Items inside the dropdown */
.header-area .navmenu .dropdown-menu .dropdown-item {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ecebe6 !important;
  padding: 12px 22px;
  background: transparent !important;
  border: 0;
  position: relative;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.header-area .navmenu .dropdown-menu .dropdown-item::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 0;
  height: 1px;
  background: #FFCC01;
  transition: width 0.25s ease;
  transform: translateY(-50%);
}
.header-area .navmenu .dropdown-menu .dropdown-item:hover {
  color: #FFCC01 !important;
  padding-left: 32px;
}
.header-area .navmenu .dropdown-menu .dropdown-item:hover::before {
  width: 12px;
}

/* Social icons */
.header-area .header-social-area {
  gap: 12px;
}
.header-area .header-social-area a {
  color: #ecebe6 !important;
  font-size: 13px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid transparent;
  border-radius: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .header-area .header-social-area a:hover {
    color: #FFCC01 !important;
    border-color: #FFCC01;
  }
}

/* Login button — replaces the social icons on redesigned (paid) pages only.
   Uses :has() to detect the paid-page wrapper class in the current document. */
.header-area .tg-nav-login { display: none; }

body:has(> .tg-home),
body:has(> .tg-pf),
body:has(> .tg-sv),
body:has(> .tg-gal),
body:has(.tg-home),
body:has(.tg-pf),
body:has(.tg-sv),
body:has(.tg-gal) {
  /* scoped rules below */
}
body:has(.tg-home) .header-area .header-social-area,
body:has(.tg-pf)   .header-area .header-social-area,
body:has(.tg-sv)   .header-area .header-social-area,
body:has(.tg-gal)  .header-area .header-social-area { display: none !important; }

body:has(.tg-home) .header-area .tg-nav-login,
body:has(.tg-pf)   .header-area .tg-nav-login,
body:has(.tg-sv)   .header-area .tg-nav-login,
body:has(.tg-gal)  .header-area .tg-nav-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  color: var(--tg-fg) !important;
  /* Same animated flowing-gold border + glow as the .tg-btn-ghost buttons —
     see tg-btn.css for why the sweep lives on a rotating ::before instead of
     an animated custom property. */
  position: relative;
  z-index: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow:
    0 0 18px 1px rgba(255, 204, 1, 0.40),
    0 0 40px 6px rgba(255, 204, 1, 0.18);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
  margin-left: 8px;
}
@media (hover: hover) {
  body:has(.tg-home) .header-area .tg-nav-login:hover,
  body:has(.tg-pf)   .header-area .tg-nav-login:hover,
  body:has(.tg-sv)   .header-area .tg-nav-login:hover,
  body:has(.tg-gal)  .header-area .tg-nav-login:hover {
    color: var(--tg-fg) !important;
    text-decoration: none;
  }
}
/* The rotating gradient sheet + interior fill that make up the moving ring.
   Declared here (not only in tg-btn.css) so the login pill works regardless of
   stylesheet load order. tg-btn-sweep is defined in tg-btn.css and re-declared
   below for the same reason. */
body:has(.tg-home) .header-area .tg-nav-login::before,
body:has(.tg-pf)   .header-area .tg-nav-login::before,
body:has(.tg-sv)   .header-area .tg-nav-login::before,
body:has(.tg-gal)  .header-area .tg-nav-login::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  z-index: -2;
  transform: translate(-50%, -50%) rotate(0turn);
  background: conic-gradient(
    #3d2b00 0%, #ffcc01 12%, #fff6c4 20%, #ffcc01 28%, #3d2b00 45%,
    #3d2b00 55%, #ffcc01 62%, #fff6c4 70%, #ffcc01 78%, #3d2b00 95%, #3d2b00 100%
  );
  animation: tg-btn-sweep 2.8s linear infinite;
  pointer-events: none;
}
body:has(.tg-home) .header-area .tg-nav-login::after,
body:has(.tg-pf)   .header-area .tg-nav-login::after,
body:has(.tg-sv)   .header-area .tg-nav-login::after,
body:has(.tg-gal)  .header-area .tg-nav-login::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: #0a0a0a;
  pointer-events: none;
}
@keyframes tg-btn-sweep {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) {
  .header-area .tg-nav-login::before { animation: none; }
}
.header-area .tg-nav-login .tg-nav-login-icon { font-size: 16px; line-height: 1; display: none; }
.header-area .tg-nav-login .tg-nav-login-label { display: inline; }

/* Mobile: show a compact "Login" text pill (the icon alone is unclear) */
@media (max-width: 992px) {
  body:has(.tg-home) .header-area .tg-nav-login,
  body:has(.tg-pf)   .header-area .tg-nav-login,
  body:has(.tg-sv)   .header-area .tg-nav-login,
  body:has(.tg-gal)  .header-area .tg-nav-login {
    padding: 8px 16px;
    margin-right: 10px;
    border-radius: 999px;
    /* keep the animated ghost look on mobile (glow + spin inherited from above) */
    color: var(--tg-fg) !important;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  @media (hover: hover) {
    body:has(.tg-home) .header-area .tg-nav-login:hover,
    body:has(.tg-pf)   .header-area .tg-nav-login:hover,
    body:has(.tg-sv)   .header-area .tg-nav-login:hover,
    body:has(.tg-gal)  .header-area .tg-nav-login:hover {
      color: var(--tg-fg) !important;
    }
  }
  .header-area .tg-nav-login .tg-nav-login-label { display: inline; }
  .header-area .tg-nav-login .tg-nav-login-icon { display: none; }
}

/* Hide the burger by default (we show it on mobile) */
.header-area #menuIcon { display: none; }

@media (max-width: 992px) {
  .header-area .navmenu { display: none; }
  .header-area #menuIcon { display: inline-block; }
}