/* Header & Navigation — brand compliant, responsive */
header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: #4eb9d3;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: calc(1rem * var(--header-scale, 1));
}

body.menu-open { overflow: hidden; }

.header-container { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }

.logo { display: inline-flex; align-items: center; gap: 12px; background: black; border-radius: var(--radius-8); padding: calc(var(--logo-clear-space) / 4); }
.logo img { height: 80px; width: auto; min-width: var(--logo-min-width-web); object-fit: contain; }

/* Desktop nav */
.desktop-nav { display: flex; align-items: center; }
.desktop-nav ul { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.desktop-nav a { color: rgba(0, 0, 0, 0.9); padding: 8px 10px; border-radius: var(--radius-8); font-weight: 800; }
.desktop-nav a:hover { background: rgb(255, 152, 18); color: #1d1af1; }

.header-buttons { display: flex; align-items: center; gap: 10px; margin-left: 16px; }
.login-button { color: #fff; font-weight: 700; border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-8); padding: 8px 12px; background: transparent; }
.login-button:hover { background: rgba(255,255,255,0.1); }
.cta-button { color: #fff; background: var(--tg-gradient-cta); border-radius: var(--radius-8); padding: 10px 14px; font-weight: 700; box-shadow: var(--shadow-1); }

/* Mobile menu trigger */
.mobile-menu-btn { display: none; background: transparent; border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 22px; padding: 6px 10px; border-radius: var(--radius-8); }

/* Mobile menu and overlay */
.mobile-menu { position: fixed; top: 0; right: 0; width: 300px; max-width: 80%; height: 100vh; background: var(--tg-navy); color: #fff; box-shadow: -12px 0 30px rgba(0,0,0,0.35); transform: translateX(100%); transition: transform 0.3s ease; padding: 24px; display: flex; flex-direction: column; overflow: hidden; z-index: 10002; }
.mobile-menu .close-menu { position: absolute; top: 10px; right: 10px; font-size: 20px; background: transparent; border: none; color: #fff; }
.mobile-menu ul { list-style: none; padding: 48px 0 0; margin: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.mobile-menu li { margin-bottom: 8px; }
.mobile-menu a { display: block; color: rgba(255,255,255,0.95); padding: 10px 12px; border-radius: var(--radius-8); }
.mobile-menu a:hover { background: rgba(255,255,255,0.12); }
.mobile-menu-buttons { display: grid; gap: 10px; margin-top: 16px; }

.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 10001; }

/* State when menu is open (to be toggled by JS later) */
body.menu-open .mobile-menu { transform: translateX(0); }
body.menu-open .menu-overlay { opacity: 1; visibility: visible; }

/* JS-driven collapse when content doesn't fit or at md and below */
body.header-collapsed .desktop-nav { display: none !important; }
body.header-collapsed .mobile-menu-btn { display: inline-flex !important; }

/* Condensed states to fit content above 768px without hamburger */
body.header-condensed .header-container { padding: 8px 12px; }
body.header-condensed .desktop-nav ul { gap: 6px; }
body.header-condensed .desktop-nav a { padding: 6px 8px; font-size: 0.95em; }
body.header-condensed .header-buttons { gap: 8px; }
body.header-condensed .login-button { padding: 6px 10px; font-size: 0.95em; }
body.header-condensed .cta-button { padding: 8px 12px; font-size: 0.95em; }
body.header-condensed .logo { padding: 6px; }

body.header-ultra-condensed .header-container { padding: 6px 10px; }
body.header-ultra-condensed .desktop-nav ul { gap: 4px; }
body.header-ultra-condensed .desktop-nav a { padding: 4px 6px; font-size: 0.9em; }
body.header-ultra-condensed .header-buttons { gap: 6px; }
body.header-ultra-condensed .login-button { padding: 5px 8px; font-size: 0.92em; }
body.header-ultra-condensed .cta-button { padding: 7px 10px; font-size: 0.92em; }
body.header-ultra-condensed .logo { padding: 4px; }

/* Breakpoints */
@media (max-width: 1024px) { .header-container { padding: 8px 12px; } }
/* Reduce logo width around 906px to improve fit */
@media (max-width: 906px) {
  .logo { padding: 6px; }
  .logo img { height: 36px; min-width: 0; }
}
/* At exactly 768px we keep desktop nav visible but shrink logo */
@media (max-width: 768px) {
  .logo img { height: 34px; min-width: 0; }
}
/* Below 768px, switch to hamburger */
@media (max-width: 767px) {
  .desktop-nav { display: none; }
  .mobile-menu-btn { display: inline-flex; }
}
@media (max-width: 576px) {
  .logo { padding: 8px; }
  .logo img { height: 32px; min-width: 120px; }
}

/* Beautiful 3D Hamburger — icon and button styling */
.mobile-menu-btn {
  position: relative;
  width: 44px; height: 44px;
  padding: 0;
  /* display intentionally controlled by breakpoints; do not force inline-flex here */
  align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 6px 6px 14px rgba(0,0,0,0.35), inset 2px 2px 4px rgba(255,255,255,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.mobile-menu-btn:hover {
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  box-shadow: 8px 8px 18px rgba(0,0,0,0.38), inset 2px 2px 5px rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.mobile-menu-btn:active {
  transform: translateY(0);
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.35), 3px 3px 6px rgba(0,0,0,0.28);
}
.mobile-menu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35), 6px 6px 14px rgba(0,0,0,0.35);
}

@supports (backdrop-filter: blur(4px)) {
  .mobile-menu-btn {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
  }
}

.hamburger-3d {
  position: relative;
  width: 24px; height: 18px;
  display: inline-block;
}
.hamburger-3d .bar {
  position: absolute; left: 0; right: 0;
  height: 3px; border-radius: 3px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(220,220,220,0.95));
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.28);
  transform-origin: center;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease, width 260ms cubic-bezier(.2,.8,.2,1);
}
.hamburger-3d .bar:nth-child(1) { top: 0; }
.hamburger-3d .bar:nth-child(2) { top: calc(50% - 1.5px); }
.hamburger-3d .bar:nth-child(3) { bottom: 0; }

/* Morph into an "X" when menu is open */
body.menu-open .mobile-menu-btn {
  background: linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.10));
}
body.menu-open .hamburger-3d .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.menu-open .hamburger-3d .bar:nth-child(2) {
  opacity: 0; transform: scaleX(0.6);
}
body.menu-open .hamburger-3d .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hide mobile menu components on ≥768px to prevent unintended visibility */
@media (min-width: 768px) {
  .mobile-menu, .menu-overlay { display: none !important; }
}