/*
  GoldenCZ Website Stylesheet — Enhanced Design

  This stylesheet is based on an improved UI template and serves as the new
  visual foundation for the GoldenCZ website. It emphasises modern
  typography, generous spacing, subtle gradients and elegant card layouts
  while retaining brand colours. Additional classes are provided for the
  Gallery and Partners sections as well as for technology card images.
*/

/* Global resets and enhanced typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.7;
  color: #1a202c;
  background-color: #ffffff;
  font-size: 16px;
}

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

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

/* Enhanced typography hierarchy */
h1,
h2,
h3,
h4 {
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 1rem;
}

h1 {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
  color: #4a5568;
}

/* Utility classes */
.content-container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

.section {
  padding: 5rem 0;
  scroll-margin-top: 100px;
}

.section h2 {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.section h2::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  border-radius: 2px;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  z-index: 1000;
  transition: all 0.3s ease;
  background-color: transparent;
  color: #ffffff;
}

.navbar.scrolled {
  background-color: rgba(26, 32, 44, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo a {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  color: #ffffff;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-links li a {
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  padding: 0.5rem 0;
  transition: all 0.3s ease;
  position: relative;
}

.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  transition: width 0.3s ease;
}

.nav-links li a:hover::after {
  width: 100%;
}

/* Mobile nav */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  border: none;
  background: none;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #ffffff;
  transition: all 0.3s ease;
  border-radius: 1px;
}

/* Hero */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #581c87 100%);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 20%, rgba(96, 165, 250, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(167, 139, 250, 0.3) 0%, transparent 50%);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: 0 2rem;
  animation: fadeInUp 1s ease-out;
}

.hero-content h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-content h2 {
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 2rem;
  color: #e0e7ff;
}

.tagline {
  font-size: 1.3rem;
  max-width: 700px;
  margin: 0 auto;
  color: #cbd5e1;
  line-height: 1.6;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* About Section */
.about {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.about-intro {
  max-width: 900px;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 1.2rem;
  color: #475569;
  line-height: 1.8;
}

.capabilities-section {
  margin-top: 3rem;
}

.capabilities-section h3 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #1e293b;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.capability-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.capability-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.capability-card .icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #ffffff;
  font-size: 1.5rem;
}

/* Technology Section */
.technology {
  background-color: #ffffff;
}

.tech-intro {
  max-width: 900px;
  margin: 0 auto 3rem;
  font-size: 1.2rem;
  text-align: center;
  color: #475569;
  line-height: 1.8;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.tech-card {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tech-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
}

.tech-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.tech-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #1e293b;
}

.tech-card p {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.7;
}

/* Allow images within technology cards */
.tech-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

/* Products Section */
.products {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
}

.products-intro {
  max-width: 900px;
  margin: 0 auto 3rem;
  font-size: 1.2rem;
  text-align: center;
  color: #475569;
  line-height: 1.8;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.product-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  /* Use dark text by default for better contrast against translucent card backgrounds */
  color: #1e293b;
  transition: all 0.3s ease;
}

/* Override product card text colours to ensure high contrast against light card backgrounds */
/*
  Use !important to ensure these colours override earlier declarations that
  set white text on product cards. Without !important the later white
  declarations in this file take precedence due to cascading order.
*/
.product-card h3,
.product-card .product-desc,
.product-card ul li,
.product-card ul li strong {
  color: #1e293b !important;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}

.products-bg-backlight {
  background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
}

.products-bg-strips {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
}

.products-bg-displays {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.product-card h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.product-card .product-desc {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}

.product-features {
  list-style: none;
  margin-bottom: 2rem;
}

.product-features li {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  position: relative;
  padding-left: 1.5rem;
  color: rgba(255, 255, 255, 0.95);
}

.product-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #60f6ff;
  font-weight: bold;
}

/* Gallery Section */
.gallery {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.gallery-intro {
  max-width: 900px;
  margin: 0 auto 3rem;
  font-size: 1.2rem;
  text-align: center;
  color: #475569;
  line-height: 1.8;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.gallery-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Ensure embedded videos in the gallery match the size and styling of images */
.gallery-item video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.gallery-item figcaption {
  padding: 1rem;
  text-align: center;
  font-size: 1rem;
  color: #475569;
}

/*
 * LED Strip Lights Page
 * These styles adapt the cards and layout for the dedicated light‑strip
 * product page. Each strip card uses a clean white background with
 * subtle shadows and border treatments to echo the capability cards on the
 * home page, ensuring a cohesive look across the site.
 */

.strips {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  padding-top: 8rem; /* Account for fixed navbar height + extra spacing */
}

.strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.strip-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.strip-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}

.strip-card h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #1e293b;
}

.strip-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.strip-details {
  margin-top: auto;
}

.strip-details h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #1e293b;
}

.strip-details ul {
  list-style: none;
  margin-bottom: 1rem;
}

.strip-details ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: #475569;
}

.strip-details ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #3b82f6;
}

/* Partners Section */
.partners {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

.partner-intro {
  max-width: 900px;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 1.2rem;
  color: #475569;
  line-height: 1.8;
}

.partner-list {
  list-style: none;
  padding-left: 0;
  max-width: 800px;
  margin: 1rem auto 2rem;
}

.partner-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #475569;
}

.partner-list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
  color: #6366f1;
  font-weight: bold;
}

.partner-highlight {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.partner-highlight h3 {
  margin-bottom: 1rem;
  color: #1e293b;
}

.partner-highlight p {
  color: #475569;
  line-height: 1.7;
  font-size: 1.1rem;
}

/* Contact Section */
.contact {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #ffffff;
}

.contact h2 {
  color: #ffffff;
}

.contact-intro {
  max-width: 800px;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 1.2rem;
  color: #cbd5e1;
  line-height: 1.8;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
}

.contact-form {
  background: rgba(255, 255, 255, 0.05);
  padding: 2.5rem;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #e2e8f0;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.btn {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: #ffffff;
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-loading::after {
  content: '';
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.form-message {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-message.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.form-message.success::before {
  content: '✓';
  font-weight: bold;
  font-size: 1.2rem;
}

.form-message.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.form-message.error::before {
  content: '⚠';
  font-weight: bold;
  font-size: 1.2rem;
}

.contact-info {
  padding: 2rem 0;
}

.contact-info h3 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: #ffffff;
}

.contact-info p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.contact-info strong {
  color: #60a5fa;
  min-width: 80px;
}

/* Footer */
.footer {
  background-color: #0f172a;
  color: #94a3b8;
  text-align: center;
  padding: 2rem 0;
  font-size: 0.95rem;
  border-top: 1px solid #1e293b;
}

/* Responsive */
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .tech-grid,
  .product-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    max-width: 300px;
    height: 100vh;
    background-color: rgba(26, 32, 44, 0.95);
    backdrop-filter: blur(10px);
    padding-top: 4rem;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .nav-links.open {
    right: 0;
  }
  .nav-links ul {
    flex-direction: column;
    gap: 2rem;
    text-align: left;
    padding-left: 2rem;
  }
  .nav-toggle {
    display: flex;
  }
  .hero-content h1 {
    font-size: 2.5rem;
  }
  .hero-content h2 {
    font-size: 1.5rem;
  }
  .tagline {
    font-size: 1.1rem;
  }
  .section {
    padding: 3rem 0;
  }
  .strips {
    padding-top: 6rem; /* Extra padding on mobile to account for navbar */
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .capabilities-grid {
    grid-template-columns: 1fr;
  }
}