/*
  Holloway Creative Holdings website styles
  ---------------------------------------
  This stylesheet defines the colour scheme, typography and layout for
  hollowaycreativeholdings.com.  The design takes inspiration from dark
  interfaces like Stripe's CLI while introducing an elegant blue palette.

  Colours are defined as CSS custom properties for easy theming.  Sections
  are spaced generously to give the content room to breathe.  The layout
  scales gracefully across screen sizes with responsive grids and mobile
  navigation.
*/

:root {
  --primary-color: #0a84ff;
  --secondary-color: #021c33;
  --accent-color: #1372d4;
  --text-color: #f5f7fa;
  --muted-color: #c3cfe0;
  --background-color: #0f172a;
  --surface-color: rgba(3, 28, 51, 0.6);
  --border-radius: 0.5rem;
  --nav-h: 64px;
  /* Parallax offset for fixed background layer */
  --bg-offset: 0px;
}

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

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-color);
  background-color: var(--background-color);
  padding-top: var(--nav-h);
  line-height: 1.6;
}

/* Typography overrides */
h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
}

/* Readability overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 28, 51, 0.4), rgba(2, 28, 51, 0.6));
  pointer-events: none;
}

/* Fixed, overscanned background layer for smooth parallax */
.bg-hero {
  position: fixed;
  inset: -8vmax; /* overscan to avoid edges during movement */
  z-index: -1;
  pointer-events: none;
  will-change: transform, background-position;
  background:
    linear-gradient(135deg, #7fe9ff 12.5%, #2da7ff 37%, #1457a6 75%, #07172b 87.5%),
    url('assets/hero-bg.png'); /* PNG fallback; keep existing asset */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: translate3d(0, var(--bg-offset), 0);
  animation: bg-drift 28s ease-in-out infinite alternate;
}

@keyframes bg-drift {
  from { background-position: 50% 50%; }
  to   { background-position: 58% 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-hero { animation: none; transform: none; }
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  text-decoration: underline;
  color: var(--accent-color);
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(1, 21, 38, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 100;
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}
/* Logo image sizing */
.logo { display: inline-block; height: 32px; width: auto; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 1px, 1px);
  white-space: nowrap; border: 0;
}

.nav-links a {
  color: var(--text-color);
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links .active {
  color: var(--text-color);
  text-decoration: underline;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 15;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  background: var(--text-color);
  height: 2px;
  width: 22px;
  border-radius: 2px;
  position: relative;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}

.hamburger::before {
  top: -7px;
}

.hamburger::after {
  top: 7px;
}

/* Hero section */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 12rem;
  text-align: center;
  max-width: 650px;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 3.5rem);
  margin-bottom: 1rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.2;
}

.hero p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  color: #ffffff; /* match h2 color */
}

.btn-primary {
  display: inline-block;
  background: var(--primary-color);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: background 0.3s ease;
  text-align: center;
}

.btn-primary:hover {
  background: var(--accent-color);
}

/* Sections */
.section {
  padding: 5rem 0;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.section p {
  max-width: 800px;
  margin: 0 auto 2rem auto;
  text-align: center;
  color: #ffffff; /* match h2 color */
  font-size: 1.0625rem;
}

/* Services */
.services {
  background: var(--background-color);
}

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

.service-item {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: var(--border-radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.service-item h3 {
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-size: 1.5rem;
  font-weight: 600;
}

.service-item p {
  color: #ffffff; /* match h2 color */
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Contact */
.contact {
  background: var(--secondary-color);
}

.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-form .form-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: var(--border-radius);
  background: #0f263e;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #8fa3bf;
}

.contact-form textarea {
  resize: vertical;
  grid-column: span 2;
}

.contact-form button {
  align-self: flex-start;
  margin-top: 1rem;
}

/* Footer */
.footer {
  background: #011526;
  padding: 2rem 0;
}

.footer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer p {
  color: #6b7c93;
  font-size: 0.875rem;
  text-align: center;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.footer-links a {
  color: #6b7c93;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--primary-color);
}

/* Responsive */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(1, 21, 38, 0.95);
    flex-direction: column;
    align-items: flex-start;
    width: 220px;
    padding: 1rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .nav-links.open {
    transform: translateX(0);
  }
  .nav-links li {
    margin-bottom: 1rem;
  }
  .nav-toggle {
    display: block;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .hero-content {
    padding-top: 8rem;
  }
  .hero h1 {
    font-size: 2.2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .contact-form .form-grid {
    grid-template-columns: 1fr;
  }
  .contact-form textarea {
    grid-column: span 1;
  }
}