/*
  Domenick L. Walley – Professional Process Serving Website
  This stylesheet defines the global look and feel of the site.  The goal is
  to mirror the tactical black and gold aesthetic of the business card
  provided by the client while remaining clean and readable on both desktop
  and mobile devices.  All colour values are defined here to make future
  adjustments easy.  Typography uses system fonts for fast loading; if you
  wish to use a custom Google Font simply include it in the HTML head.
*/

:root {
  --bg: #0d0d0d;        /* Primary page background */
  --bg-alt: #1a1a1a;    /* Card backgrounds */
  --text: #f5f5f5;      /* Primary text colour */
  --accent: #f5c512;    /* Gold accent colour */
  --accent-alt: #e8b007;/* Slightly darker gold for hover states */
  --border: #333333;    /* Borders around cards and separators */
  --max-width: 1200px;  /* Maximum width for content */
}

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

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

/* Navigation bar */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem;
  z-index: 1000;
}

nav .logo {
  display: flex;
  align-items: center;
}

nav .logo img {
  height: 40px;
  width: auto;
  margin-right: 10px;
}

nav .logo span {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

nav ul li a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

nav ul li a:hover {
  color: var(--text);
}

/* Hero section */
header.hero {
  width: 100%;
  height: 65vh;
  background-image: url('assets/hero.png');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

header.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 1;
}

header.hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  padding: 1rem;
}

header.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

header.hero p.tagline {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: #ccc;
}

header.hero .cta-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  background-color: var(--accent);
  color: #000;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

header.hero .cta-button:hover {
  background-color: var(--accent-alt);
  color: #000;
}

/* Generic section styling */
section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1rem 3rem 1rem;
}

section h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--accent);
  text-transform: uppercase;
  text-align: center;
}

/* Feature cards */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.card {
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  flex: 1 1 280px;
  max-width: 350px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
}

.card h3 {
  margin-bottom: 0.5rem;
  color: var(--accent);
  font-size: 1.3rem;
}

.card p {
  font-size: 1rem;
  line-height: 1.5;
}

/* Pricing section */
.pricing-table {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
}

.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.pricing-row:nth-child(odd) {
  background-color: #222;
}

.pricing-row span {
  font-size: 1rem;
}

.pricing-row span.label {
  font-weight: 500;
  color: var(--accent);
}

.pricing-row span.price {
  font-weight: 600;
}

/* Form */
.intake-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
  background-color: var(--bg-alt);
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.intake-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--accent);
}

.intake-form input,
.intake-form textarea,
.intake-form select {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: #2a2a2a;
  color: #fff;
  font-size: 0.95rem;
}

.intake-form textarea {
  resize: vertical;
  min-height: 100px;
}

.intake-form input[type="file"] {
  border: none;
  padding: 0.3rem 0;
  color: #aaa;
}

.intake-form button {
  grid-column: 1 / -1;
  padding: 0.75rem 1.5rem;
  background-color: var(--accent);
  color: #000;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.intake-form button:hover {
  background-color: var(--accent-alt);
  color: #000;
}

/* Footer */
footer {
  background-color: #000;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: #777;
  margin-top: 3rem;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
  header.hero h1 {
    font-size: 2.5rem;
  }
  header.hero p.tagline {
    font-size: 1rem;
  }
  nav ul {
    gap: 0.5rem;
  }
  nav .logo span {
    font-size: 1rem;
  }
}