/* css/style.css */

/* 1) ManufacturingConsent (original font for all headers/titles) */
@font-face {
  font-family: 'ManufacturingConsent';
  src: url('../ManufacturingConsent-Regular.ttf') format('truetype');
}
/* 2) SectionHeader (for button text only) */
@font-face {
  font-family: 'SectionHeader';
  src: url('../Anton-Regular.ttf') format('truetype');
}

:root {
  --background:   #000;
  --surface:      #1a1a1a;
  --accent:       #444;
  --text:         #ccc;
  --text-strong:  #fff;
  --hover-bg:     #e63946;
}

html { font-size: 18px; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--background);
  color: var(--text);
  line-height: 1.6;
  padding-top: 80px; /* keep content clear of fixed nav */
}

/* Make in-page anchor jumps land below the fixed nav */
main, header, section, .about-section, .contact-section { scroll-margin-top: 90px; }

/* =========================
   NAVIGATION (desktop default)
   ========================= */
.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  padding: 0.75rem 2rem;
  background: var(--surface);
  box-shadow: 0 2px 5px rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center; /* center the UL on desktop */
  z-index: 1000;
}

/* Logo anchored left; links centered */
.nav .logo {
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'ManufacturingConsent', sans-serif;
  font-size: 2.5rem;
  color: var(--text-strong);
  text-decoration: none;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}
.nav-links a {
  font-family: 'ManufacturingConsent', sans-serif;
  font-size: 1.6rem;
  color: var(--text-strong);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
/* red sweep hover fill */
.nav-links a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hover-bg);
  border-radius: 50px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
  z-index: -1;
}
.nav-links a:hover::after { transform: scaleX(1); }

/* Hide any hamburger button element if present */
.nav-toggle { display: none !important; }

/* =========================
   HERO SECTION
   ========================= */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hero-images {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  justify-content: flex-start;
  opacity: 0; /* GSAP will fade in */
}
.hero-images img {
  width: 50%;
  height: 150%;
  object-fit: cover;
}
.hero-images .left-img {
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
}
.headline {
  font-family: 'ManufacturingConsent', sans-serif;
  font-size: 4rem;
  opacity: 0.3;
  transform: scale(0.8);
  position: relative;
  z-index: 1;
}
.hero .btn {
  margin-top: 4rem;
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  background: var(--accent);
  color: var(--text-strong);
  border-radius: 2rem;
}

/* =========================
   GLOBAL .btn (hero/apply/submit)
   ========================= */
.btn {
  font-family: 'SectionHeader', sans-serif;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: inline-block;
  transition: color 0.3s ease;
}
.btn::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--hover-bg);
  border-radius: 2rem;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
  z-index: -1;
}
.btn:hover::after { transform: scaleX(1); }
.btn:hover { color: var(--text-strong); }

/* =========================
   TESTIMONIALS — single row horizontal scroll
   ========================= */
.testimonials {
  padding: 5rem 2rem;
  background: var(--surface);
  text-align: center;
}
.testimonials h2 {
  font-family: 'ManufacturingConsent', sans-serif;
  font-size: 2.5rem;
  color: var(--text-strong);
  margin-bottom: 2rem;
}
.testimonials-container {
  position: relative;
  overflow: hidden;     /* keeps arrows inside the section */
  padding: 0 4rem;      /* space for arrows */
}
.testimonials-track {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap !important;  /* one line only */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  gap: 2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;         /* Firefox hide */
  -ms-overflow-style: none;      /* IE hide */
}
.testimonials-track::-webkit-scrollbar { height: 8px; }
.testimonials-track::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}
.testimonial-card {
  flex: 0 0 85%;       /* phones: mostly one at a time */
  background: var(--background);
  padding: 1.25rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.7);
  scroll-snap-align: start;
}
@media (min-width: 600px) { .testimonial-card { flex: 0 0 65%; } }
@media (min-width: 900px) { .testimonial-card { flex: 0 0 45%; } }
@media (min-width: 1200px){ .testimonial-card { flex: 0 0 33.333%; } } /* ~3 visible */
.testimonial-card p {
  font-size: 1rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--text-strong);
  margin-bottom: 1rem;
}
.testimonial-card span {
  font-size: 0.95rem;
  color: var(--accent);
}
.testimonial-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-strong);
  border: none;
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.testimonial-btn.prev { left: 1rem; }
.testimonial-btn.next { right: 1rem; }
.testimonial-btn:hover {
  background: var(--hover-bg);
  transform: translateY(-50%) scale(1.1);
}

/* =========================
   ABOUT SECTION
   ========================= */
.about-section {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.about-section:nth-of-type(even) { flex-direction: row-reverse; }

.about-content { flex: 1; max-width: 560px; }
.about-content h1 {
  font-family: 'ManufacturingConsent', sans-serif;
  font-size: 3rem;
  color: var(--text-strong);
  margin-bottom: 1rem;
}
.about-content p { font-size: 1.125rem; line-height: 1.5; }

/* Smaller images (desktop) */
.about-image {
  flex: 0 0 420px;      /* fixed column, smaller than before */
  max-width: 420px;     /* was 600px */
  overflow: hidden;
}
.about-image img {
  width: 100%;
  height: auto;
  display: block;
  mask-image: radial-gradient(circle at center, black 80%, transparent 100%);
}

/* APPLY SECTION (About page) */
.apply-section { text-align: center; padding: 3rem 2rem; }
.apply-section .btn {
  background: var(--accent);
  color: var(--text-strong);
  border-radius: 2rem;
  padding: 1rem 2.5rem;
  font-size: 2rem;
  display: inline-block;
}

/* =========================
   CONTACT SECTION
   ========================= */
.contact-section {
  padding: 5rem 2rem;
  max-width: 600px;
  margin: 0 auto;
}
.contact-section h1 {
  font-family: 'ManufacturingConsent', sans-serif;
  font-size: 2.5rem;
  color: var(--text-strong);
  text-align: center;
  margin-bottom: 2rem;
}
.contact-form .form-group { margin-bottom: 1.5rem; }
.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-strong);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--hover-bg); }
button.btn {
  background: var(--accent);
  color: var(--text-strong);
  border: none;
  border-radius: 2rem;
  padding: 1rem 2.5rem;
  font-family: 'SectionHeader', sans-serif;
  font-size: 1.5rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  z-index: 0;
}
button.btn::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--hover-bg);
  border-radius: 2rem;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
  z-index: -1;
}
button.btn:hover::after { transform: scaleX(1); }

/* =========================
   FOOTER — centered social buttons
   ========================= */
.footer {
  background: var(--surface);
  padding: 2rem 0;
  text-align: center;
  margin-top: 4rem;
}
.footer .social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border-radius: 999px;          /* pill */
  background: var(--accent);     /* gray pill bg */
  color: var(--text-strong);
  text-decoration: none;
  font-family: 'ManufacturingConsent', sans-serif;
  font-size: 1.1rem;
  transition: background 0.25s ease;
}
.social-btn:hover {
  background: var(--hover-bg);
  color: var(--text-strong);
}

/* =========================
   MOBILE TWEAKS
   ========================= */
@media (max-width: 768px) {
  body { padding-top: 64px; }

  /* Mobile nav: simple centered bar, no logo, smaller text */
  .nav { justify-content: center; padding: 0.5rem 1rem; }
  .nav .logo { display: none; }
  .nav-links {
    display: flex !important;
    position: static;
    gap: 1rem;
    flex-wrap: nowrap;
  }
  .nav-links a {
    font-size: 1.05rem;
    padding: 0.25rem 0.5rem;
  }

  /* About: stack and cap image smaller on phones */
  .about-section {
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    padding: 2rem 1rem;
  }
  .about-content, .about-image { width: 100%; max-width: none; margin: 0; }
  .about-section:nth-of-type(even) .about-content { order: 1; }
  .about-section:nth-of-type(even) .about-image   { order: 2; }
  .about-image {
    flex: 0 0 320px;
    max-width: 320px;
  }
  .about-image img { width: 100%; height: auto; mask-image: none; }
}

/* Smaller phones */
@media (max-width: 420px) {
  .nav { padding: 0.45rem 0.75rem; }
  .nav-links { gap: 0.5rem; }
  .nav-links a { font-size: 0.95rem; }
}