/*
  CQBits Website - Global Styles
  Defines the overall look and feel of the site, including responsive design.
  Colour palette drawn from the CQBits logo with contrasting dark and light
  sections. CSS variables make it easy to adjust colours and fonts across the
  entire project.
*/

/* CSS reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', Arial, sans-serif;
  color: #102a43; /* dark slate for readability */
  background-color: #f5f8fa; /* light grey background */
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;        /* add */
  overscroll-behavior-x: none; /* nice-to-have */
  touch-action: pan-y;         /* avoids horizontal pan revealing off-canvas */
}

/* Colour variables for easy theming */
:root {
  --primary: #00b4d8; /* vibrant teal */
  --primary-dark: #0077b6; /* darker variant for hover */
  --dark: #0a192f; /* deep navy used for headers */
  --light: #ffffff;
  --muted: #6b7b8f;
  --section-bg: #eaf4fb;
}

/* Containers to constrain content width */
.container {
  width: 90%;
  /* Allow more horizontal space so that multiple cards can sit on the same line
     when needed. Increasing the max-width helps fit all service cards on a
     single row on larger screens. */
  max-width: 1600px;
  margin: 0 auto;
}

/* Header styles */
.header {
  background-color: var(--dark);
  color: var(--light);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0;
  position: relative;
}
.logo img {
  height: 48px;
}
.nav ul {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.nav a {
  font-weight: 600;
  color: var(--light);
  transition: color 0.3s ease;
}
.nav a:hover,
.nav a.active {
  color: var(--primary);
}
/* Mobile navigation toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  width: 30px;
  height: 24px;
}
.nav-toggle span {
  height: 3px;
  width: 100%;
  background-color: var(--light);
  margin-bottom: 5px;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle span:last-child {
  margin-bottom: 0;
}
/* Style when toggle is open */
.nav-toggle.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
/* Responsive nav menu */
@media (max-width: 768px) {
  .nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .nav {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--dark);
    width: 220px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    border-radius: 0 0 0 6px;
  }
  .nav.open {
    transform: translateX(0);
  }
  .nav li {
    width: 100%;
  }
  .nav li a {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-toggle {
    display: flex;
  }
}

/* Hero section */
.hero {
  position: relative;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  background-image: url('images/hero-bg.png');
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* A semi‑transparent overlay to ensure text remains legible on top of the
     network background. Lower opacity lets more of the pattern show through. */
  background: rgba(0, 13, 34, 0.5);
}
.hero-content {
  position: relative;
  text-align: center;
  max-width: 800px;
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #eaf4fb;
}

/* Wordplay tagline emphasising the CQBits name */
.wordplay {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: var(--primary);
  font-weight: 600;
}
/* Buttons */
.btn,
.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn {
  background-color: var(--primary);
  color: var(--light);
}
.btn:hover {
  background-color: var(--primary-dark);
}
.btn-secondary {
  background-color: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-secondary:hover {
  background-color: var(--primary);
  color: var(--light);
}

/* General section spacing */
.section {
  padding: 4rem 0;
}
.section-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--dark);
}

/* About preview */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: center;
}
.about-text h2 {
  margin-bottom: 1rem;
  color: var(--dark);
  font-size: 2rem;
}
.about-text p {
  margin-bottom: 1rem;
  color: var(--muted);
}
.about-image .image-box {
  width: 100%;
  padding-top: 60%; /* Aspect ratio */
  background-image: url('images/hero-bg.png');
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Services preview grid on home */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.service-card {
  background-color: var(--light);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.service-card h3 {
  margin-bottom: 1rem;
  color: var(--dark);
}
.service-card p {
  color: var(--muted);
}

/* Bullet list inside service cards for quick feature highlights */
.card-points {
  margin-top: 1rem;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.card-points li {
  margin-bottom: 0.35rem;
  list-style: disc;
}
.services-action {
  text-align: center;
  margin-top: 2rem;
}

/* How We Work section */
.how-we-work {
  background-color: var(--section-bg);
}
.how-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2rem;
  color: var(--muted);
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.how-card {
  background-color: var(--light);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.how-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.how-card h3 {
  margin-bottom: 1rem;
  color: var(--dark);
  font-size: 1.5rem;
}
.how-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Full services page styling */
.services-details .services-grid.full {
  gap: 2rem;
  /* Force five columns on wide screens so all cards appear on one line. On
     narrower screens the grid will wrap naturally. */
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
  .services-details .services-grid.full {
    /* On smaller screens, revert to automatic fitting to maintain readability */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
.services-details .service-card.large {
  padding: 2rem;
}

/* CTA section */
.cta {
  background-color: var(--primary);
  color: var(--light);
  text-align: center;
  padding: 4rem 0;
}
.cta h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.cta p {
  margin-bottom: 2rem;
  color: #e6f7fc;
}

/* Footer */
.footer {
  background-color: var(--dark);
  color: var(--light);
  padding: 1rem 0;
}
.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.footer-container a {
  color: var(--primary);
}
.footer-container a:hover {
  text-decoration: underline;
}

/* Page hero (about, services, contact) */
.page-hero {
  background-color: var(--section-bg);
  padding: 4rem 0 3rem;
  text-align: center;
  color: var(--dark);
}
.page-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.page-hero p {
  color: var(--muted);
}

/* About page specifics */
.about-details {
  background-color: var(--light);
}
.about-details h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.75rem;
  color: var(--dark);
}
.about-details p {
  margin-bottom: 1rem;
  color: var(--muted);
}
.about-list {
  padding-left: 1.5rem;
  color: var(--muted);
}
.about-list li {
  margin-bottom: 0.5rem;
}
.about-list strong {
  color: var(--dark);
}

/* Contact page specifics */
.contact-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: start;
}
.contact-info h2 {
  margin-bottom: 0.5rem;
  color: var(--dark);
}
.contact-info p {
  margin-bottom: 1rem;
  color: var(--muted);
}
.contact-form {
  display: grid;
  gap: 1rem;
}
.contact-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--dark);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #c3d9eb;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.2);
}
.contact-form button {
  align-self: start;
}

/* Utility classes */
.section.dark {
  background-color: var(--dark);
  color: var(--light);
}
@media (max-width: 600px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .section {
    padding: 3rem 0;
  }
  
@media (max-width: 768px) {
  .header-container { position: relative; } /* keep this */

  .nav {
    position: absolute;
    top: 100%;
    right: -260px;          /* width(220) + safety */
    width: 220px;
    background: var(--dark);
    border-radius: 0 0 0 6px;
    transition: right 0.3s ease-in-out;   /* animate right */
    z-index: 1000;
  }
  .nav.open { right: 0; }

  .nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .nav li a {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .nav-toggle { z-index: 1100; }
}
  
}