/* =========================================================
   APOLLO GROUP TV — HEADER (Luxury) — Optimized
========================================================= */

.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  padding: 14px 0;
  background: transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.site-header.scrolled{
  background: rgba(10,10,10,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

/* backdrop-filter only when supported */
@supports ((-webkit-backdrop-filter: blur(18px)) or (backdrop-filter: blur(18px))){
  .site-header.scrolled{
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* Logo */
.logo{
  display:flex;
  align-items:center;
  gap: .75rem;
  text-decoration: none;
}

.site-header .logo-icon{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display:grid;
  place-items:center;
}

.site-header .logo-icon svg{
  width: 44px !important;
  height: 44px !important;
  display:block;
  max-width: 44px !important;
  max-height: 44px !important;
}

.logo-text{
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.1rem;
  color: rgba(255,255,255,.92);
}

/* Focus-visible for accessibility */
.logo:focus-visible,
.nav-menu a:focus-visible,
.mobile-nav-menu a:focus-visible,
.menu-toggle:focus-visible,
.chat-button:focus-visible{
  outline: 2px solid rgba(14,165,233,.8);
  outline-offset: 4px;
  border-radius: 14px;
}

/* Desktop nav */
.main-nav{
  display:flex;
  align-items:center;
  gap: 18px;
}

.nav-menu{
  display:flex;
  align-items:center;
  gap: 1.6rem;
}

.nav-menu a{
  color: rgba(255,255,255,.72);
  font-weight: 600;
  font-size: .95rem;
  padding: .45rem 0;
  position:relative;
  text-decoration:none;
}

/* Hover only on hover-capable devices */
@media (hover:hover) and (pointer:fine){
  .nav-menu a:hover{ color: rgba(255,255,255,.92); }
  .nav-menu a:hover::after{ width:100%; }
}

.nav-menu a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  height:2px; width:0;
  background: var(--color-primary);
  transition: width .22s ease;
}

.nav-cta{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* Mobile toggle */
.menu-toggle{
  display:none;
  flex-direction:column;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.menu-toggle span{
  width: 26px;
  height: 2px;
  background: #fff;
  transition: transform .22s ease, opacity .22s ease;
  transform-origin: center;
}

.menu-toggle.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity: 0; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile overlay */
.mobile-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  z-index: 998;
}

.mobile-overlay.active{
  opacity: 1;
  visibility: visible;
}

/* Mobile nav — use transform for better performance */
.mobile-nav{
  position: fixed;
  top:0; right:0;
  width: min(420px, 92vw);
  height: 100vh;
  background: rgba(17,17,17,.98);
  border-left: 1px solid rgba(255,255,255,.08);
  z-index: 999;
  padding: 88px 22px 22px;
  overflow-y:auto;

  transform: translateX(110%);
  transition: transform .25s ease;
  will-change: transform;
}

.mobile-nav.active{
  transform: translateX(0);
}

.mobile-nav-menu{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.mobile-nav-menu a{
  color: rgba(255,255,255,.92);
  font-size: 1.2rem;
  font-weight: 800;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-decoration:none;
}

/* Hover only when supported */
@media (hover:hover) and (pointer:fine){
  .mobile-nav-menu a:hover{ color: rgba(245,158,11,.95); }
}

.mobile-nav-buttons{ margin-top: 18px; }

/* Floating WhatsApp button */
.chat-button{
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: calc(24px + env(safe-area-inset-right));
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  z-index: 997;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.chat-button svg{
  width: 30px;
  height: 30px;
  color: #fff;
}

.chat-button--whatsapp{
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow: 0 12px 30px rgba(18,140,126,0.35);
}

@media (hover:hover) and (pointer:fine){
  .chat-button:hover{
    transform: translateY(-3px) scale(1.02);
  }
  .chat-button--whatsapp:hover{
    box-shadow: 0 18px 42px rgba(18,140,126,0.55);
  }
}

/* Smaller phones: avoid covering CTA */
@media (max-width: 420px){
  .chat-button{
    width: 54px;
    height: 54px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    right: calc(18px + env(safe-area-inset-right));
  }
  .chat-button svg{ width: 28px; height: 28px; }
}

/* Responsive */
@media(max-width: 900px){
  .menu-toggle{ display:flex; }
  .nav-menu, .nav-cta{ display:none; }
}

/* Anchor offset: header covers sections */
#home,
#services,
#pricing,
#testimonials,
#guides,
#coverage{
  scroll-margin-top: 110px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-header,
  .mobile-overlay,
  .mobile-nav,
  .chat-button,
  .menu-toggle span{
    transition: none !important;
  }
}