/*
  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;
}

* {
  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);
  /* Full-page background image with parallax offset */
  background-image: url('assets/hero-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center var(--bg-offset, 0px);
  background-attachment: scroll;
  will-change: background-position;
  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;
}

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;
  }
}