/* ============================================================
   AstroKamya™ — MOBILE FIXES v5 (2026-05-22)
   mobile-fixes-v5.css
   
   Fixes:
   1. Hide "Reveal My Future" CTA on ALL pages (all nav versions)
   2. Hide ".v3-sticky-cta" (Explore Collection / Shop Now bar)
   3. Hide empty hero space on Blog page mobile
   4. Hide empty hero space on About page mobile
   5. Modern 2026 mobile drawer redesign
   6. Remove drawer footer Shop Crystals remnants
   ============================================================ */

/* ═══════════════════════════════════════════════════════
   1. HIDE "REVEAL MY FUTURE" ON ALL MOBILE SIZES
   Target: ALL navbar versions (unified + legacy)
   ════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Unified navbar CTA */
  .ak-nav-cta,
  #ak-unified-nav .ak-nav-cta,
  
  /* Legacy homepage navbar CTA */
  .nav-cta-wrap,
  .cta-btn,
  .nav-r .cta-btn-glow,
  
  /* Any element with "Reveal My Future" text */
  a[href*="birth-input"].ak-nav-cta,
  a[href*="birth-input"].cta-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   2. HIDE STICKY "EXPLORE COLLECTION / SHOP NOW" BAR
   Only hide on mobile (≤768px) — it's useful on desktop
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Static HTML sticky bar */
  #v3-sticky-cta,
  .v3-sticky-cta {
    display: none !important;
  }
  
  /* JS-injected bar (shop-v3.js) */
  [id="v3-sticky-cta"],
  [class="v3-sticky-cta"],
  [class="v3-sticky-cta visible"] {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   3. BLOG HERO — REMOVE EMPTY SPACE ON MOBILE
   The hero has a large height that creates blank space
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Blog hero section — compact it */
  .ak-hero-v2,
  #ak-blog-hero,
  .blog-hero,
  header.ak-hero-v2 {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 48px !important;
    padding-bottom: 32px !important;
  }
  
  /* Blog hero BG image — hide on mobile (saves space + data) */
  .ak-hero-bg,
  .ak-hero-bg-img {
    display: none !important;
  }
  
  /* Blog hero content — solid dark background */
  .ak-hero-content {
    position: relative !important;
    padding: 24px 16px !important;
    background: linear-gradient(180deg, rgba(4,2,14,0.95), rgba(8,4,20,0.92)) !important;
    border-radius: 0 !important;
  }
  
  /* Blog hero particles and astrolabe — hide heavy graphics */
  .ak-hero-astrolabe,
  .ak-hero-particles,
  .ak-hero-bg-overlay {
    display: none !important;
  }
  
  /* Blog hero title */
  .ak-hero-title {
    font-size: clamp(24px, 6.5vw, 36px) !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }
  
  /* Blog hero subtitle */
  .ak-hero-subtitle {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }
  
  /* Blog hero stats row */
  .ak-hero-stats {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   4. ABOUT HERO — REMOVE EMPTY SPACE ON MOBILE
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* About hero section */
  .about-hero,
  section.about-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 60px 0 32px !important;
    overflow: hidden !important;
  }
  
  /* Hide heavy BG elements */
  .about-hero-imgwrap,
  .about-hero-bgimg,
  .about-hero-rings,
  .about-hero-particles {
    display: none !important;
  }
  
  /* About hero overlay — minimal solid bg */
  .about-hero-overlay {
    display: none !important;
  }
  
  /* Hero inner content */
  .about-hero-inner,
  .about-wrap.about-hero-inner {
    position: relative !important;
    padding: 0 16px !important;
    background: none !important;
  }
  
  /* Pill badge */
  .about-hero-pill {
    margin-bottom: 12px !important;
    font-size: 11px !important;
  }
  
  /* About hero title */
  .about-hero h1,
  .about-hero .about-title {
    font-size: clamp(28px, 7.5vw, 42px) !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }
  
  /* About hero subtitle */
  .about-hero-sub,
  .about-hero p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════
   5. MODERN 2026 MOBILE DRAWER REDESIGN
   ════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  
  /* Drawer container — tighter, more modern */
  .ak-nav-drawer {
    width: min(300px, 86vw) !important;
    background: rgba(8, 4, 20, 0.99) !important;
    border-left: 1px solid rgba(124,58,237,0.12) !important;
    box-shadow: -20px 0 60px rgba(0,0,0,0.6) !important;
  }
  
  /* Header — cleaner */
  .ak-drawer-header {
    padding: 16px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    background: rgba(124,58,237,0.04) !important;
  }
  
  /* Logo in drawer */
  .ak-drawer-logo span {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
  }
  
  /* Close button — modern X */
  .ak-drawer-close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 16px !important;
    color: rgba(196,181,253,0.7) !important;
    transition: background 0.2s, color 0.2s !important;
  }
  .ak-drawer-close:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #F0EAFF !important;
  }
  
  /* Links container — tighter */
  .ak-drawer-links {
    padding: 8px 10px !important;
    gap: 1px !important;
    flex: 1;
    overflow-y: auto;
  }
  
  /* Section labels — more subtle */
  .ak-drawer-section-label {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    color: rgba(74,63,107,0.8) !important;
    padding: 10px 14px 4px !important;
    margin-top: 4px !important;
  }
  
  /* Nav links — more compact + modern */
  .ak-drawer-link {
    padding: 11px 14px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(184,176,212,0.85) !important;
    gap: 12px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    min-height: 44px !important; /* WCAG tap target */
  }
  .ak-drawer-link:hover,
  .ak-drawer-link:active {
    background: rgba(124,58,237,0.1) !important;
    color: #F0EAFF !important;
  }
  .ak-drawer-link.active {
    background: rgba(250,204,21,0.07) !important;
    color: #FACC15 !important;
    border: 1px solid rgba(250,204,21,0.1) !important;
  }
  .ak-drawer-link svg {
    opacity: 0.5 !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
  }
  .ak-drawer-link:hover svg,
  .ak-drawer-link.active svg {
    opacity: 0.85 !important;
  }
  
  /* Divider */
  .ak-drawer-divider {
    margin: 6px 0 !important;
    background: rgba(255,255,255,0.05) !important;
  }
  
  /* Footer — REMOVE the "Shop Crystals" footer area styling */
  .ak-drawer-footer,
  .ak-drawer-cta,
  .ak-drawer-cta-sub {
    display: none !important;
  }
  
  /* Sign in button — full-width, pill style */
  .ak-drawer-guest {
    padding: 8px 10px 12px !important;
    margin-top: auto !important;
  }
  .ak-drawer-signin-btn {
    border-radius: 12px !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 4px 20px rgba(255,184,0,0.25) !important;
  }
  
  /* Backdrop — subtle */
  .ak-nav-backdrop {
    background: rgba(0,0,0,0.6) !important;
  }
  
  /* Slide animation improvement */
  .ak-nav-drawer {
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   6. SHOP PAGE — HERO SECTION MOBILE OPTIMIZATION
   The hero is fine but slightly compact on mobile
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Shop hero — more compact */
  .v3-hero {
    min-height: 70vw !important;
    max-height: 90vw !important;
  }
  
  /* Hero text block — better sizing */
  .v3-hero-title {
    font-size: clamp(26px, 7vw, 38px) !important;
    line-height: 1.15 !important;
  }
  .v3-hero-sub {
    font-size: 13px !important;
    line-height: 1.6 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* "Explore Collection" hero button — full width, more compact */
  .v3-hero-cta {
    font-size: 14px !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    width: auto !important;
    min-width: 0 !important;
  }
  
  /* Hero meta items */
  .v3-hero-meta {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .v3-hero-meta-item {
    font-size: 11px !important;
  }
  
  /* Scroll hint — hide on mobile */
  .v3-hero-scroll-hint {
    display: none !important;
  }
  
  /* Cosmic strip — single line */
  .v3-cosmic-strip {
    font-size: 11px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ═══════════════════════════════════════════════════════
   7. SHOP NAVBAR — Force hide CTA (older navbar.css)
   The shop page loads navbar.css?v=20260413d (old version)
   This ensures the CTA is hidden regardless of version
   ════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Aggressive override for all nav CTA variants */
  nav .ak-nav-cta,
  #ak-unified-nav .ak-nav-cta,
  .ak-nav-actions > a.ak-nav-cta,
  .ak-nav-actions > [class*="cta"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   8. GLOBAL MOBILE NAVBAR POLISH
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Ensure nav pill is always properly padded */
  .ak-nav-inner {
    padding: 0 8px 0 14px !important;
    height: 50px !important;
    gap: 8px !important;
  }
  
  /* Logo text — hide on very small screens */
  @media (max-width: 380px) {
    .ak-nav-logo-text { display: none !important; }
  }
  
  /* Profile button sizing */
  .ak-nav-profile-btn {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
  }
  
  /* Hamburger sizing */
  .ak-hamburger {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
  }
  
  /* Nav wrapper padding */
  #ak-unified-nav {
    padding: 8px 12px 0 !important;
  }
}