/* ============================================
   AIZNEX — TARGETED MOBILE FIXES v2
   Add this at the END of public/css/style.css
   (or link as a separate file after all other CSS)
   ============================================ */

/* ============================================
   1. NAVBAR — Fix mobile menu not showing
   ============================================ */

/* The existing style.css already handles mobile nav correctly.
   The problem is mobile-fixes.css overrides it with wrong rules.
   These rules restore the correct behavior. */

@media (max-width: 768px) {

  /* CRITICAL: nav-links must NOT use max-height transition
     style.css uses transform+opacity which works correctly */
  .nav-links {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    width: 100% !important;
    background: var(--nav-bg) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    flex-direction: column !important;
    padding: 16px 20px 24px !important;
    gap: 4px !important;
    border-bottom: 1px solid var(--border-color) !important;
    transform: translateY(-110%) !important;
    opacity: 0 !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 998 !important;
    max-height: none !important; /* override mobile-fixes.css */
    overflow: visible !important;
  }

  .nav-links.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
    max-height: none !important;
  }

  /* Ensure navbar itself never hides on mobile */
  .navbar {
    transform: translateY(0) !important;
  }
}

/* ============================================
   2. HERO SECTION — Mobile tweaks
   ============================================ */

@media (max-width: 768px) {

  /* Hide scroll indicator on mobile */
  .scroll-indicator { display: none !important; }

  /* Show hero visual on mobile */
  .hero-container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px 20px 48px !important;
    text-align: center;
  }

  .hero-container--centered {
    padding-top: 24px !important;
  }

  .hero-marquee {
    padding-bottom: 32px !important;
    gap: 10px !important;
  }

  .marquee-card { width: 150px !important; height: 105px !important; }

  .hero-badge    { margin: 0 auto; }
  .hero-subtitle { margin: 0 auto; }
  .hero-typed    { justify-content: center; }
  .hero-trust    { justify-content: center; }
  .hero-cta      { justify-content: center; }

  /* Hero headline smaller on mobile */
  .hero-headline {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    letter-spacing: -1px;
    white-space: normal !important;
  }

  .hero-subtitle--oneline {
    white-space: normal !important;
  }

  /* CTA buttons stack on very small screens */
  @media (max-width: 420px) {
    .hero-cta {
      flex-direction: column;
      align-items: center;
    }
    .hero-cta .btn,
    .hero-cta .btn-pill {
      width: 100%;
      justify-content: center;
    }
  }
}

/* ============================================
   3. ABOUT SECTION — Text above image on mobile
   ============================================ */

@media (max-width: 768px) {

  .home-about-container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: center;
  }

  /* Content (right column) moves ABOVE image (left column) */
  .home-about-content { order: 1; }
  .home-about-img     { order: 2; }

  .home-about-img {
    display: flex;
    justify-content: center;
  }

  .about-img-frame {
    height: 300px;
    max-width: 240px;
    margin: 0 auto;
  }

  .about-img-inner {
    width: 200px !important;
    height: 260px !important;
  }

  .ring-spin     { width: 240px !important; height: 240px !important; }
  .ring-spin-rev { width: 290px !important; height: 290px !important; }

  .home-about-points { text-align: left; }
  .home-about-desc   { margin: 0 auto 20px; }

  .home-about-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 16px;
  }

  .has-div { display: none; }
  .has-num { font-size: 1.2rem; }
}

/* ============================================
   4. CTA VISUAL — Show on mobile
   ============================================ */

@media (max-width: 900px) {

  .home-cta-container {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 40px !important;
  }

  .cta-desc    { margin: 0 auto 24px !important; }
  .cta-buttons { justify-content: center !important; }
  .cta-note    { justify-content: center !important; }
  .cta-badge   { margin: 0 auto 16px !important; }

  /* SHOW the CTA visual on mobile */
  .cta-visual {
    display: flex !important;
    justify-content: center;
    order: -1; /* show visual above text on mobile */
  }

  .cta-visual-wrap {
    width: 220px !important;
    height: 220px !important;
  }

  .cta-ring-1 { width: 80px !important;  height: 80px !important; }
  .cta-ring-2 { width: 140px !important; height: 140px !important; }
  .cta-ring-3 { width: 200px !important; height: 200px !important; }

  .cta-orbit-item {
    transform: translateX(90px) !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 0.75rem !important;
  }

  @keyframes ctaCounterSpin {
    to { transform: translateX(90px) rotate(-360deg); }
  }

  .cta-center-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.2rem !important;
  }
}

/* ============================================
   5. OTHER SECTIONS — Mobile layout
   ============================================ */

@media (max-width: 768px) {

  /* Tech section */
  .home-tech-visual {
    grid-template-columns: 1fr !important;
  }

  .home-orbit-wrap { display: none !important; }

  .tech-pill-row {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px;
  }

  .tech-pill-item {
    padding: 10px 6px;
    font-size: 0.65rem;
  }

  /* Projects grid */
  .home-projects-grid {
    grid-template-columns: 1fr !important;
  }

  .home-project-skeleton { height: 260px; }

  /* Why section */
  .why-layout {
    grid-template-columns: 1fr !important;
  }

  .why-visual { display: none !important; }

  .why-card:hover { transform: none !important; }

  .home-tech-sub { font-size: 0.88rem; padding: 0 12px; }

  /* Section titles */
  .section-title { font-size: clamp(1.8rem, 6vw, 2.4rem) !important; }

  /* Footer */
  .footer-container {
    grid-template-columns: 1fr !important;
    gap: 32px;
    padding: 48px 20px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ============================================
   6. CONTACT PAGE — Mobile responsive
   ============================================ */

@media (max-width: 768px) {

  /* Hero */
  .contact-hero { min-height: 55vh; }

  .contact-hero-content { padding: 40px 20px 20px; }

  .contact-hero-title {
    font-size: clamp(2.2rem, 10vw, 3.5rem) !important;
    letter-spacing: -1px;
  }

  .contact-hero-sub {
    font-size: 0.9rem;
    padding: 0 8px;
  }

  /* 3 contact boxes */
  .direct-contact-boxes {
    grid-template-columns: 1fr !important;
    padding: 0 20px 36px !important;
    gap: 12px !important;
  }

  .direct-box { padding: 14px 16px; border-radius: 16px; }
  .direct-box-value { font-size: 0.85rem; }

  /* Profile + Form */
  .contact-main-section { padding: 40px 20px; }

  .contact-main-container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Hide profile image on mobile — form only */
  .contact-profile-wrap { display: none !important; }

  .contact-form-wrap {
    padding: 24px 18px;
    border-radius: 16px;
  }

  .form-row { grid-template-columns: 1fr !important; }

  .form-header { margin-bottom: 18px; padding-bottom: 14px; }
  .form-header h3 { font-size: 1rem; }

  /* Social + FAQ */
  .social-faq-section { padding: 40px 20px; }

  .social-faq-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .social-col, .faq-col { padding: 22px 18px; }

  .social-hex-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }

  .social-hex-card { padding: 14px 8px; }
  .shc-name   { font-size: 0.78rem; }
  .shc-handle { font-size: 0.62rem; }

  /* FAQ */
  .faq-item { padding-left: 40px; }
  .faq-list::before { left: 12px; }
  .faq-question { font-size: 0.82rem; }
}

/* ============================================
   7. LIGHT MODE FIXES
   ============================================ */

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5 {
  color: var(--text-primary);
}

[data-theme="light"] .hero-headline,
[data-theme="light"] .home-about-title,
[data-theme="light"] .section-title,
[data-theme="light"] .cta-title,
[data-theme="light"] .page-hero-title {
  color: var(--text-primary) !important;
}

/* White icons invisible on light mode */
[data-theme="light"] .trust-item i { color: #16a34a; }

[data-theme="light"] .hero-badge {
  background: rgba(255,255,255,0.85);
  border-color: rgba(124,58,237,0.2);
}

[data-theme="light"] .about-float,
[data-theme="light"] .profile-float {
  background: rgba(255,255,255,0.95);
  border-color: rgba(124,58,237,0.25);
}

[data-theme="light"] .skill-orb {
  background: rgba(255,255,255,0.95);
  border-color: rgba(124,58,237,0.2);
}

[data-theme="light"] .tech-pill-item {
  background: rgba(255,255,255,0.85);
  border-color: rgba(124,58,237,0.15);
  color: var(--text-secondary);
}

[data-theme="light"] .why-card {
  background: rgba(255,255,255,0.85);
}

[data-theme="light"] .why-feat-card {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 24px rgba(124,58,237,0.1);
}

[data-theme="light"] .footer {
  background: #e8e4f8;
}

[data-theme="light"] .footer-tagline,
[data-theme="light"] .footer-link,
[data-theme="light"] .footer-copy,
[data-theme="light"] .footer-made {
  color: var(--text-secondary);
}

[data-theme="light"] .home-about-stats {
  background: rgba(255,255,255,0.85);
}

[data-theme="light"] .about-point {
  background: rgba(255,255,255,0.85);
}

[data-theme="light"] .cta-orbit-item {
  background: rgba(255,255,255,0.9);
  border-color: rgba(124,58,237,0.2);
}

/* SVG text in light mode */
[data-theme="light"] .hero-svg text[fill="white"],
[data-theme="light"] .hero-svg text[fill="#ffffff"] {
  fill: rgba(30,30,60,0.8) !important;
}

[data-theme="light"] .hero-svg text[fill="rgba(255,255,255,0.6)"] {
  fill: rgba(30,30,60,0.5) !important;
}

[data-theme="light"] .hero-svg text[fill="rgba(255,255,255,0.8)"] {
  fill: rgba(30,30,60,0.7) !important;
}

/* ============================================
   8. PREVENT HORIZONTAL SCROLL (root fix)
   ============================================ */

html, body {
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-width: 100vw;
}
*  { box-sizing: border-box; }

/* Prevent wide absolute elements from causing overflow */
.orb, .hero-bg, .contact-particles,
.portfolio-particles, .srv-particles {
  max-width: 100vw;
  overflow: hidden;
}