/* Destiny Wedding Cars — recreation of the original WordPress theme */

:root {
  --taupe: #6b6261;        /* matches the baked-in logo background */
  --cream: #f1e8dc;
  --gold: #9a8466;
  --text: #5f5756;
  --white: #fff;
  --container: 1170px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--gold); }

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

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 15px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 10px;
  top: 10px;
  z-index: 10;
  background: var(--white);
  padding: 8px 12px;
}

/* Header */
.site-header {
  background: var(--taupe);
  text-align: center;
  padding: 6px 0 12px;
}
.site-header img {
  margin: 0 auto;
  width: 250px;
}

/* Navigation */
.site-nav {
  background: var(--cream);
  padding: 18px 0 14px;
}
.site-nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0 15px;
  max-width: 860px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 52px;
  row-gap: 0;
}
.site-nav a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.75;
}
.site-nav a[aria-current="page"] { color: var(--gold); }

/* Home hero — two images crossfading */
.hero {
  position: relative;
  height: 82vh;
  min-height: 460px;
  overflow: hidden;
  background: var(--taupe);
}
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: crossfade 14s infinite;
}
.hero__slide--1 { background-image: url("../images/hero-car-2000.jpg"); }
.hero__slide--2 { background-image: url("../images/hero-bouquet-2000.jpg"); animation-delay: -7s; }

@keyframes crossfade {
  0%, 43%   { opacity: 1; }
  50%, 93%  { opacity: 0; }
  100%      { opacity: 1; }
}

/* Content */
.content {
  padding: 30px 0 30px;
}
.content .inner {
  max-width: 830px;
}
.content--cream { background: var(--cream); }

h1, h2 {
  font-family: "Rokkitt", Georgia, serif;
  font-weight: 400;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 7px;
  line-height: 1.3;
}
h1 { font-size: 40px; margin: 10px 0 22px; }
h2 { font-size: 26px; letter-spacing: 5px; margin: 40px 0 14px; }

p { margin: 0 0 28px; }

.faq p strong { font-weight: 600; }

/* Awards grid */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 30px;
  align-items: center;
  margin-bottom: 30px;
}

/* Homepage photo row */
.photo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 10px 0 30px;
}
.photo-row figure { margin: 0; }
.photo-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-row figcaption {
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  text-align: center;
}

/* Parallax band above footer */
.parallax {
  height: 130px;
  background: url("../images/hero-bouquet-2000.jpg") center / cover fixed;
  opacity: .75;
}

/* Footer */
.site-footer {
  background: var(--cream);
  padding: 90px 0 100px;
  font-size: 16px;
}
.site-footer p { margin: 0 0 20px; }

@media (max-width: 767px) {
  body { font-size: 16px; }
  .site-nav ul { flex-direction: column; align-items: center; }
  .site-nav a { padding: 4px 0; }
  .hero { height: 60vh; min-height: 320px; }
  .hero__slide--1 { background-image: url("../images/hero-car-1000.jpg"); }
  .hero__slide--2 { background-image: url("../images/hero-bouquet-1000.jpg"); }
  h1 { font-size: 30px; letter-spacing: 5px; }
  .parallax { background-attachment: scroll; }
  .photo-row { grid-template-columns: 1fr; gap: 20px; }
  .site-footer { padding: 50px 0 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide { animation: none; }
  .hero__slide--2 { display: none; }
}