/* assets/css/hero.css — Hero section styling
   Colors harmonized with logo.png: deep navy/brown + warm gold
   Palette is defined in theme.css, this only handles layout & image binding
*/

/* Hero base with background image binding */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0; /* sits behind scrim and content */
}

/* Scrim overlay (overlay color already in theme.css) */
.hero__scrim {
  z-index: 1;
}

/* Ensure content sits above everything */
.hero__inner,
.hero__brand,
.hero__title,
.hero__tagline,
.hero__cta,
.hero__skip {
  position: relative;
  z-index: 2;
}

/* Responsive spacing */
.hero__inner {
  padding-block: clamp(3rem, 6vw, 6rem);
}

/* Logo sizing */
.hero__brand img {
  height: auto;
  max-width: 96px; /* mobile */
}
@media (min-width: 768px) {
  .hero__brand img {
    max-width: 112px;
  }
}

/* Title styling */
.hero__title {
  color: var(--brand-500); /* gold */
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.hero__tagline {
  color: var(--brand-50);  /* ivory tone */
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* CTA (buttons) */
.hero__cta {
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__cta .btn-primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.hero__cta .btn-primary:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
}
.hero__cta .btn-outline-primary {
  border-color: var(--brand-500);
  color: var(--brand-500);
}
.hero__cta .btn-outline-primary:hover {
  background: var(--brand-50);
  border-color: var(--brand-700);
  color: var(--brand-700);
}
.hero__cta .btn-link {
  color: var(--brand-500);
}
.hero__cta .btn-link:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

/* Skip button */
.hero__skip {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  color: var(--brand-500); /* gold accent */
  font-size: 1.5rem;
  opacity: 0.7;
  cursor: pointer;
}
.hero__skip:hover {
  opacity: 1;
  color: var(--brand-700);
}