/* ===========================================
   RESPONSIVE DESIGN - MOBILE FIRST APPROACH
   =========================================== */

/* ===========================================
   LARGE TABLETS & SMALL LAPTOPS (1200px)
   =========================================== */
@media (max-width: 1200px) {
   html {
      font-size: 58%; /* 9.28px base */
   }

   .featured-content,
   .about-featured-content,
   .services-featured-content,
   .contact-container {
      padding: 3rem;
      margin: 3rem auto;
   }

   header {
      padding: 1.5rem 2rem;
   }

   .footer-content {
      padding: 4rem 3rem 3rem;
      gap: 3rem;
   }
}

/* ===========================================
   TABLETS (992px)
   =========================================== */
@media (max-width: 992px) {
   html {
      font-size: 56%; /* 8.96px base */
   }

   /* Navigation */
   nav ul {
      gap: 0.5rem;
   }

   .nav-links {
      font-size: 1.6rem;
      padding: 0.8rem 1.4rem;
   }

   /* Video optimization for tablets */
   .hero-video video {
      /* Reduce quality slightly on tablets to improve performance */
      image-rendering: auto;
   }

   /* Grid layouts to single column */
   .featured-content,
   .about-featured-content,
   .services-featured-content {
      grid-template-columns: 1fr;
      gap: 3rem;
   }

   .services-featured-content img,
   .about-featured-content img {
      order: -1; /* Image first on mobile */
   }

   .contact-container {
      grid-template-columns: 1fr;
      gap: 4rem;
   }

   /* Footer */
   .footer-content {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 3rem;
   }

   .footer-bottom {
      flex-direction: column;
      text-align: center;
      gap: 2rem;
      padding: 2rem;
   }

   .footer-nav {
      width: 100%;
   }

   .footer-bottom .social {
      margin-left: 0;
   }
}

/* ===========================================
   MOBILE LANDSCAPE (768px)
   =========================================== */
@media (max-width: 768px) {
   html {
      font-size: 54%; /* 8.64px base */
   }

   /* Header adjustments */
   header {
      flex-direction: column;
      gap: 2rem;
      min-height: auto;
      padding: 2rem;
   }

   .logo-container {
      width: 100%;
      display: flex;
      justify-content: center;
   }

   .dcs-logo {
      max-height: 7rem;
   }

   nav {
      width: 100%;
      justify-content: center;
   }

   nav ul {
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.8rem;
   }

   /* Top bar */
   .top-bar {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      padding: 1.5rem 1rem;
      text-align: center;
   }

   .top-bar .social {
      margin-left: 0;
   }

   /* Content sections */
   .featured-content,
   .about-featured-content,
   .services-featured-content,
   .contact-container {
      padding: 2.5rem 2rem;
      margin: 2rem 1rem;
   }

   .call-out {
      padding: 3rem 2rem;
      margin: 3rem 1rem;
   }

   /* Footer */
   .footer-content {
      grid-template-columns: 1fr;
      padding: 3rem 2rem 2rem;
      text-align: center;
   }

   .footer-content section {
      align-items: center;
   }

   .footer-content a::after {
      left: 50%;
      transform: translateX(-50%);
   }

   .footer-content iframe {
      width: 100%;
      max-width: 400px;
   }
}

/* ===========================================
   MOBILE PORTRAIT (576px)
   =========================================== */
@media (max-width: 576px) {
   html {
      font-size: 52%; /* 8.32px base */
   }

   /* Navigation becomes more compact */
   nav ul {
      gap: 0.5rem;
   }

   .nav-links {
      font-size: 1.5rem;
      padding: 0.8rem 1.2rem;
   }

   .nav-links::after {
      display: none; /* Remove underline effect on very small screens */
   }

   /* Video optimization for mobile */
   .hero-video {
      min-height: 40vh; /* Reduce height on mobile */
   }

   .hero-video video {
      /* Optimize video performance on mobile */
      object-position: center center;
      /* Prevent excessive repainting */
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
   }

   /* Buttons */
   .learn-more-cta,
   .call-out a {
      width: 100%;
      text-align: center;
      justify-content: center;
      padding: 1.6rem 2rem;
   }

   .contact-form button {
      width: 100%;
   }

   /* Content spacing */
   .featured-content,
   .about-featured-content,
   .services-featured-content,
   .contact-container {
      padding: 2rem 1.5rem;
      margin: 1.5rem 1rem;
      border-radius: var(--radius-lg);
   }

   .call-out {
      padding: 2.5rem 1.5rem;
      margin: 2rem 1rem;
   }

   /* Services list */
   .services-featured-content li {
      font-size: 1.5rem;
      padding-left: 2.5rem;
   }

   .services-featured-content li::before {
      width: 2rem;
      height: 2rem;
      font-size: 1.2rem;
   }

   /* Footer */
   .footer-bottom {
      padding: 1.5rem 1rem;
   }

   .footer-nav ul {
      flex-direction: column;
      gap: 0.5rem;
   }
}

/* ===========================================
   SMALL MOBILE (400px)
   =========================================== */
@media (max-width: 400px) {
   html {
      font-size: 50%; /* 8px base */
   }

   .top-bar {
      font-size: 1.4rem;
   }

   .dcs-logo {
      max-height: 6rem;
   }

   .featured-content,
   .about-featured-content,
   .services-featured-content,
   .contact-container,
   .call-out {
      padding: 1.5rem 1rem;
      margin: 1rem 0.5rem;
   }

   .footer-content {
      padding: 2rem 1.5rem 1.5rem;
   }
}

/* ===========================================
   LANDSCAPE ORIENTATION
   =========================================== */
@media (max-height: 600px) and (orientation: landscape) {
   .hero-video {
      min-height: 80vh;
   }

   header {
      min-height: auto;
   }
}

/* ===========================================
   PRINT STYLES
   =========================================== */
@media print {
   *,
   *::before,
   *::after {
      background: transparent !important;
      color: #000 !important;
      box-shadow: none !important;
      text-shadow: none !important;
   }

   a,
   a:visited {
      text-decoration: underline;
   }

   a[href]::after {
      content: " (" attr(href) ")";
   }

   img {
      page-break-inside: avoid;
   }

   h2,
   h3 {
      page-break-after: avoid;
   }

   .header-container,
   .top-bar,
   .footer-bottom,
   video,
   iframe {
      display: none;
   }
}

/* ===========================================
   HIGH CONTRAST MODE (Accessibility)
   =========================================== */
@media (prefers-contrast: high) {
   :root {
      --color-primary: #1a2440;
      --color-text-primary: #000000;
      --color-text-secondary: #1a1a1a;
   }

   .nav-links,
   .footer-content a,
   .contact-info a {
      text-decoration: underline;
   }
}

/* ===========================================
   DARK MODE SUPPORT (Future-proofing)
   =========================================== */
@media (prefers-color-scheme: dark) {
   /* Keep light theme for now, but structure is here for future dark mode */
}