/* 
 * responsive.css
 * Responsive styles for Code 3Dynamics (code3d.dev)
 * Cyberpunk/Futuristic theme
 */

/* ===== MEDIA QUERIES ===== */

/* Extra large devices (large desktops, 1400px and up) */
@media (max-width: 1400px) {
    html {
      font-size: 60%; /* 1rem = 9.6px */
    }
    
    .hero-content {
      max-width: 65%;
    }
  }
  
  /* Large devices (desktops, 1200px and down) */
  @media (max-width: 1200px) {
    html {
      font-size: 56.25%; /* 1rem = 9px */
    }
    
    .hero-content {
      max-width: 70%;
    }
    
    .hero-title {
      font-size: 6.5rem;
    }
    
    .footer-content {
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }
    
    .footer-brand {
      grid-column: 1 / -1;
    }
  }
  
  /* Medium devices (tablets, 992px and down) */
  @media (max-width: 992px) {
    html {
      font-size: 50%; /* 1rem = 8px */
    }
    
    h1 {
      font-size: 4.8rem;
    }
    
    h2 {
      font-size: 3.6rem;
    }
    
    h3 {
      font-size: 2.8rem;
    }
    
    .header {
      height: 70px;
    }
    
    .mobile-toggle {
      display: block;
      width: 30px;
      height: 25px;
      position: relative;
      z-index: 2000;
    }
    
    .mobile-toggle span {
      display: block;
      width: 100%;
      height: 2px;
      background-color: var(--neon-blue);
      position: absolute;
      left: 0;
      transition: all 0.3s ease;
    }
    
    .mobile-toggle span:first-child {
      top: 0;
    }
    
    .mobile-toggle span:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }
    
    .mobile-toggle span:last-child {
      bottom: 0;
    }
    
    .mobile-toggle.active span:first-child {
      transform: rotate(45deg);
      top: 10px;
    }
    
    .mobile-toggle.active span:nth-child(2) {
      opacity: 0;
    }
    
    .mobile-toggle.active span:last-child {
      transform: rotate(-45deg);
      bottom: 11px;
    }
    
    .nav-menu {
      position: fixed;
      top: 0;
      right: -100%;
      width: 70%;
      max-width: 400px;
      height: 100vh;
      background: rgba(3, 0, 30, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 1500;
      transition: right 0.4s ease;
      border-left: 1px solid rgba(0, 249, 255, 0.2);
    }
    
    .nav-menu.active {
      right: 0;
    }
    
    .nav-item {
      margin: 2rem 0;
    }
    
    .nav-link {
      font-size: 2rem;
    }
    
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 1400;
      display: none;
    }
    
    .overlay.active {
      display: block;
    }
    
    .hero {
      min-height: 600px;
    }
    
    .hero-content {
      max-width: 80%;
    }
    
    .hero-title {
      font-size: 5.5rem;
    }
    
    .hero-description {
      max-width: 100%;
    }
    
    .about-content {
      flex-direction: column;
      gap: 5rem;
    }
    
    .about-image,
    .about-text {
      width: 100%;
    }
    
    .services-grid {
      grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    }
    
    .contact-content {
      flex-direction: column;
      gap: 5rem;
    }
    
    .contact-info,
    .contact-form {
      width: 100%;
    }
  }
  
  /* Small devices (landscape phones, 768px and down) */
  @media (max-width: 768px) {
    section {
      padding: 8rem 0;
    }
    
    .hero {
      min-height: 550px;
    }
    
    .hero-content {
      max-width: 95%;
      text-align: center;
    }
    
    .hero-description {
      margin-left: auto;
      margin-right: auto;
    }
    
    .hero-buttons {
      justify-content: center;
    }
    
    .services::before {
      height: 6rem;
      top: -6rem;
    }
    
    .section-title {
      margin-bottom: 4rem;
    }
    
    .services-grid,
    .team-grid {
      grid-template-columns: 1fr;
      max-width: 45rem;
      margin: 0 auto;
      gap: 3rem;
    }
    
    .about-stats {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    
    .about-image::before {
      display: none;
    }
    
    .footer-content {
      grid-template-columns: 1fr;
      text-align: center;
    }
    
    .footer-brand {
      align-items: center;
    }
    
    .footer-title::after {
      left: 50%;
      transform: translateX(-50%);
    }
    
    .footer-social {
      justify-content: center;
    }
    
    .footer-links {
      align-items: center;
    }
    
    .copyright {
      padding-top: 2rem;
    }
  }
  
  /* Extra small devices (phones, 576px and down) */
  @media (max-width: 576px) {
    html {
      font-size: 45%; /* 1rem = 7.2px */
    }
    
    .logo img {
      height: 35px;
    }
    
    .logo-text {
      font-size: 2rem;
    }
    
    .hero {
      min-height: 500px;
    }
    
    .hero-title {
      font-size: 4.8rem;
      margin-bottom: 2rem;
    }
    
    .hero-subtitle {
      font-size: 1.8rem;
    }
    
    .hero-buttons {
      flex-direction: column;
      gap: 1.5rem;
    }
    
    .btn {
      width: 100%;
      text-align: center;
    }
    
    .section-title::after {
      width: 10rem;
    }
    
    .service-card,
    .team-card,
    .contact-form {
      padding: 3rem 2rem;
    }
    
    .contact-item {
      flex-direction: column;
      text-align: center;
      gap: 1rem;
    }
    
    .form-submit {
      margin-top: 1.5rem;
    }
    
    .about-image-container {
      max-width: 30rem;
      margin: 0 auto;
    }
  }
  
  /* Very small devices (small phones, 400px and down) */
  @media (max-width: 400px) {
    html {
      font-size: 40%; /* 1rem = 6.4px */
    }
    
    .container {
      padding: 0 1.5rem;
    }
    
    .header {
      height: 60px;
    }
    
    .logo img {
      height: 30px;
    }
    
    .hero {
      min-height: 450px;
    }
    
    .hero-title {
      font-size: 4.2rem;
    }
    
    .nav-menu {
      width: 85%;
    }
    
    .scroll-down {
      bottom: 3rem;
    }
    
    .service-icon {
      width: 6rem;
      height: 6rem;
      margin-bottom: 2rem;
    }
    
    .contact-form {
      padding: 2.5rem 1.5rem;
    }
    
    .form-control {
      padding: 1.2rem;
    }
    
    textarea.form-control {
      min-height: 12rem;
    }
  }
  
  /* Height-based media queries for shorter screens */
  @media (max-height: 700px) {
     
    .scroll-down {
      display: none;
    }
  }
  
  /* Landscape orientation fixes for mobile devices */
  @media (max-width: 992px) and (orientation: landscape) {
    
    .nav-menu {
      padding: 2rem 0;
      overflow-y: auto;
      justify-content: flex-start;
    }
    
    .nav-item {
      margin: 1.5rem 0;
    }
  }
  
  /* ===== PRINT STYLES ===== */
  @media print {
    body {
      background: #fff;
      color: #000;
      font-size: 12pt;
    }
    
    .header,
    .footer,
    .scroll-down,
    .hero::before,
    .about::after,
    .contact::before,
    .floating-element,
    .btn,
    .form-submit {
      display: none;
    }
    
    .container {
      width: 100%;
      max-width: none;
      padding: 0;
      margin: 0;
    }
    
    section {
      padding: 20pt 0;
      page-break-inside: avoid;
    }
    
    h1, h2, h3, h4, h5, h6 {
      color: #000;
      background: none;
      -webkit-text-fill-color: initial;
      text-shadow: none;
      margin-bottom: 10pt;
    }
    
    p, li {
      color: #000;
    }
    
    .logo-text,
    .contact-value,
    .team-name,
    .service-title {
      color: #000;
      text-shadow: none;
    }
    
    .service-card,
    .team-card,
    .contact-form {
      border: 1px solid #ccc;
      box-shadow: none;
      background: #fff;
      break-inside: avoid;
    }
    
    a {
      color: #000;
      text-decoration: underline;
    }
    
    .services-grid,
    .team-grid,
    .about-content,
    .contact-content {
      display: block;
    }
    
    .service-card,
    .team-card {
      margin-bottom: 20pt;
    }
    
    .about-image,
    .about-text,
    .contact-info,
    .contact-form {
      width: 100%;
      margin-bottom: 20pt;
    }
    
    .about-stats {
      display: flex;
      justify-content: space-between;
    }
    
    /* Add page breaks where appropriate */
    .hero,
    .services,
    .about,
    .team,
    .contact {
      page-break-before: always;
    }
  }
  
  /* ===== DARK MODE OVERRIDES ===== */
  @media (prefers-color-scheme: dark) {
    /* Already dark theme, no changes needed */
  }
  
  /* ===== REDUCED MOTION ===== */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    
    .floating-element,
    .glitch-text::before,
    .glitch-text::after,
    .particle,
    .matrix-rain,
    .scanner-line,
    .energy-line,
    .glitch-overlay::before,
    .digital-noise::before,
    .cyber-button::before,
    .pulse-glow,
    .circle-pulse::before {
      display: none;
    }
    
    html {
      scroll-behavior: auto;
    }
  }
  
  /* ===== HIGH CONTRAST MODE ===== */
  @media (prefers-contrast: high) {
    :root {
      --neon-blue: #00f9ff;
      --neon-pink: #ff00e5;
      --neon-purple: #8a2be2;
      --deep-blue: #000;
      --cyberpunk-yellow: #ffff00;
      --neon-green: #00ff00;
      --dark-purple: #000;
      --midnight-blue: #000;
      --tech-gray: #111;
      --bright-teal: #00ffff;
    }
    
    body {
      background-color: #000;
      background-image: none;
    }
    
    a, .btn, .nav-link, h1, h2, h3, h4, h5, h6 {
      text-shadow: none;
    }
    
    .hero::before,
    .about::after,
    .contact::before,
    .service-card::before,
    .floating-element,
    .matrix-rain,
    .scanner-line,
    .digital-noise::before,
    .glitch-overlay::before {
      display: none;
    }
    
    .btn,
    .nav-link,
    .social-link,
    .service-card,
    .team-card,
    .contact-form,
    .form-control {
      border: 2px solid #fff;
    }
    
    .text-gradient {
      background: none;
      -webkit-text-fill-color: #fff;
      color: #fff;
    }
  }
  
  /* ===== SUPPORT FOR OLDER BROWSERS ===== */
  @supports not (backdrop-filter: blur()) {
    .header {
      background: rgba(3, 0, 30, 0.95);
    }
    
    .nav-menu {
      background: rgba(3, 0, 30, 0.98);
    }
  }
  
  @supports not (display: grid) {
    .services-grid,
    .team-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .service-card,
    .team-card {
      width: 30%;
      margin: 1.5%;
    }
    
    .footer-content {
      display: flex;
      flex-wrap: wrap;
    }
    
    .footer-brand {
      width: 100%;
      margin-bottom: 3rem;
    }
    
    .footer-nav,
    .footer-services,
    .footer-newsletter {
      width: 30%;
      margin: 0 1.5%;
    }
    
    @media (max-width: 992px) {
      .service-card,
      .team-card {
        width: 45%;
        margin: 2.5%;
      }
      
      .footer-nav,
      .footer-services,
      .footer-newsletter {
        width: 45%;
        margin: 2.5%;
      }
    }
    
    @media (max-width: 768px) {
      .service-card,
      .team-card,
      .footer-nav,
      .footer-services,
      .footer-newsletter {
        width: 100%;
        margin: 1rem 0;
      }
    }
  }