/*
  KarmaFlix Main Stylesheet
  Theme: dark with subtle warm accents (red, orange, gold)
  Author: KarmaFlix
*/

:root {
  /* Colour palette for the dark/premium theme */
  --color-bg: #0f172a;
  --color-bg-alt: #111827;
  --color-text: #ffffff;
  --color-primary: #3b82f6; /* bleu accent principal */
  --color-secondary: #f97316; /* orange accent secondaire */
  --color-tertiary: #7dd3fc; /* couleur tertiaire lumineuse */
  --color-muted: #9ca3af;
  --max-width: 1200px;
  /* Increase section padding slightly for a more premium, spacious feel */
  --section-padding: 100px 20px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-text);
  scroll-behavior: smooth;
}

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

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Navigation */
.nav-wrapper {
  background-color: var(--color-bg-alt);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}
.logo {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.nav-menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.nav-menu a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  transition: color 0.3s;
}
.nav-menu a:hover {
  color: var(--color-primary);
}
/* Responsive nav toggle */
.nav-toggle {
  display: none;
}
.nav-toggle-label {
  display: none;
}
/* Language switch */
.lang-switch {
  display: flex;
  gap: 0.5rem;
}
.lang-switch button {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-text);
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.lang-switch button.active,
.lang-switch button:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Hero section */
.hero-section {
  /* Hero background: apply a subtle coloured gradient from left to right over the image.  
     The left side uses the primary accent colour with transparency to create depth, while the right remains dark.
     This enhances the premium feel and improves legibility of the hero content. */
  /* Updated hero gradient to use the primary accent colour instead of the old red hue.
     This creates a more cohesive look with the rest of the palette and eliminates the pink/purple tone. */
  background-image: linear-gradient(to right, rgba(59, 130, 246, 0.7), rgba(0, 0, 0, 0.7)), url('../img/hero-bg.png');
  background-size: cover;
  background-position: center;
  padding: 120px 20px;
  text-align: center;
}
.hero-content h1 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s;
}
.btn.primary {
  background: var(--color-primary);
  color: #fff;
}
.btn.primary:hover {
  transform: translateY(-3px);
}
.btn.secondary {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.btn.secondary:hover {
  background: var(--color-primary);
  color: #fff;
}
.btn.tertiary {
  background: var(--color-tertiary);
  color: #fff;
}
.btn.tertiary:hover {
  filter: brightness(1.2);
}

/* Generic Section */
.section {
  padding: var(--section-padding);
}
.dark-bg {
  background-color: var(--color-bg-alt);
}
.section-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--color-primary);
  text-transform: uppercase;
}
.section-text {
  max-width: 800px;
  margin: 0 auto 2rem;
  text-align: center;
  color: var(--color-muted);
}
.section-text.small {
  font-size: 0.85rem;
}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background-color: #1d1d1d;
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.service-icon {
  font-size: 2rem;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}
.service-card h3 {
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.service-card p {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.pricing-card {
  background-color: #1d1d1d;
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pricing-card h3 {
  margin-bottom: 0.5rem;
  color: var(--color-primary);
  font-size: 1.2rem;
}
.pricing-card .price {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-secondary);
}
.pricing-card ul {
  list-style: none;
  text-align: left;
  padding-left: 0;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.pricing-card ul li {
  margin-bottom: 0.5rem;
  color: var(--color-muted);
}

/* Portfolio */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.portfolio-item {
  border-radius: 8px;
  overflow: hidden;
  background-color: #1d1d1d;
  transition: transform 0.3s, box-shadow 0.3s;
}
.portfolio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.portfolio-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.portfolio-info {
  padding: 1.2rem;
}
.portfolio-info h3 {
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}
.portfolio-info p {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

/* Why Section */
.why-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
  /* Default to three equal columns on large screens for a balanced 3x2 layout */
  grid-template-columns: repeat(3, 1fr);
}
/* Adjust the number of columns on smaller viewports for the Why section */
@media (max-width: 991px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}
.why-item {
  text-align: center;
  padding: 1.5rem;
  background-color: #1d1d1d;
  border-radius: 8px;
  transition: transform 0.3s;
}
.why-item:hover {
  transform: translateY(-5px);
}
.why-icon {
  font-size: 2rem;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}
.why-item h3 {
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
}
.why-item p {
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Process */
.process-list {
  list-style: none;
  counter-reset: step-counter;
  max-width: 800px;
  margin: 2rem auto 0;
  padding: 0;
}
.process-list li {
  margin-bottom: 1.5rem;
  padding-left: 3rem;
  position: relative;
}
.process-list li::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-secondary);
  color: #0e0e0e;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-list h3 {
  margin-bottom: 0.3rem;
  color: var(--color-primary);
}
.process-list p {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* FAQ */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.faq-item h3 {
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.faq-item p {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Contact */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
}
.form-group {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}
.form-group label {
  margin-bottom: 0.3rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  background-color: #1d1d1d;
  border: 1px solid #333;
  padding: 0.6rem;
  color: var(--color-text);
  border-radius: 4px;
  font-size: 0.9rem;
}
.form-group select {
  appearance: none;
}

/* Ensure options in selects are visible on dark backgrounds */
.form-group select option {
  background-color: #1d1d1d;
  color: var(--color-text);
}

/* Offers (services + pricing) */
/* Offers (services + pricing) grid layout. 3 cards per row on large screens for an orderly, premium look */
.offers-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
  .offers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .offers-grid {
    grid-template-columns: 1fr;
  }
}
.offer-card {
  background-color: #1d1d1d;
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.offer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.offer-card h3 {
  margin-bottom: 0.5rem;
  color: var(--color-primary);
  font-size: 1.2rem;
}
.offer-card .price {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-secondary);
}
.offer-card ul {
  list-style: none;
  text-align: left;
  padding-left: 0;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.offer-card ul li {
  margin-bottom: 0.5rem;
  color: var(--color-muted);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Footer */
.footer {
  background-color: var(--color-bg-alt);
  padding: 40px 20px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.footer-brand h3 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.footer-brand p {
  color: var(--color-muted);
  font-size: 0.9rem;
}
.footer-links h4,
.footer-contact h4 {
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.footer-links ul {
  list-style: none;
}
.footer-links li {
  margin-bottom: 0.5rem;
}
.footer-links a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-links a:hover {
  color: var(--color-primary);
}
.footer-contact p {
  color: var(--color-muted);
  font-size: 0.9rem;
}
.social-links {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.8rem;
}
.social-links a {
  color: var(--color-muted);
  font-size: 1.2rem;
  transition: color 0.3s;
}
.social-links a:hover {
  color: var(--color-primary);
}
.copyright {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-muted);
}

/*
 * Ensure in-page anchor links (e.g. #presentation, #services) are not hidden
 * behind the sticky navigation bar. The scroll-margin-top property offsets
 * the scroll position so that section titles are fully visible after
 * navigation. Different values are used for desktop and mobile for better
 * alignment.
 */
section {
  scroll-margin-top: 80px;
}
@media (max-width: 768px) {
  section {
    scroll-margin-top: 120px;
  }
}

/* Style for media in the portfolio (images or future videos) – fills the
 * available width, keeps its aspect ratio and has rounded corners similar
 * to other cards on the site. */
.portfolio-media {
  width: 100%;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

/* Media Queries */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
  .nav-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-bg-alt);
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    /* Hide the menu by default on mobile. The menu will be displayed when the checkbox is checked. */
    display: none;
    overflow: hidden;
  }
  .nav-menu li {
    margin-bottom: 1rem;
  }
  .nav-toggle-label {
    display: block;
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
  }
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    content: '';
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.3s, top 0.3s;
  }
  .nav-toggle-label span {
    top: 50%;
    transform: translateY(-50%);
  }
  .nav-toggle-label span::before {
    top: -8px;
  }
  .nav-toggle-label span::after {
    top: 8px;
  }
  #nav-toggle:checked + .nav-toggle-label span {
    background: transparent;
  }
  #nav-toggle:checked + .nav-toggle-label span::before {
    top: 0;
    transform: rotate(45deg);
  }
  #nav-toggle:checked + .nav-toggle-label span::after {
    top: 0;
    transform: rotate(-45deg);
  }
  /* When the hamburger checkbox is checked, reveal the menu */
  #nav-toggle:checked ~ .nav-menu {
    display: flex;
    max-height: 500px;
  }
}