/* theme.css — Desert Memories Photo Booths, ported look layered over Bootstrap 5.
 * Tokens derived from capture/theme.json (palette, fonts) and the screenshots.
 */

:root {
  /* --- Brand palette (from theme.json colors.palette) --- */
  --brand-primary: #fe1d25;        /* signature red (rgb 254,29,37) */
  --brand-blue:    #1f6dd0;        /* Reserve / Login action buttons */
  --brand-orange:  #c2410c;        /* "Learn More" button — darkened for WCAG AA on white text */
  --brand-green:   #3f7600;        /* "Pricing" button — darkened for WCAG AA on white text */
  --brand-dark:    #111111;        /* footer / headings */
  --brand-body:    #333333;        /* body text */
  --brand-light:   #f7f7f7;        /* light section background */

  /* --- Typography (from theme.json fonts/samples) --- */
  --font-base:    "Source Sans Pro", system-ui, -apple-system, sans-serif;
  --font-heading: "Open Sans", var(--font-base);
  --font-script:  "Dancing Script", "Brush Script MT", cursive;

  --bs-primary: var(--brand-primary);
  --bs-body-font-family: var(--font-base);
  --bs-body-color: var(--brand-body);
}

body { font-family: var(--font-base); color: var(--brand-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--brand-dark); }

/* Headings inside dark/colored sections must stay legible (override the dark
   default above; the more specific selector wins over the element rule). */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.hero h1, .hero h2, .hero h3 { color: #fff; }

a { color: var(--brand-primary); }
a:hover { color: color-mix(in srgb, var(--brand-primary) 80%, black); }

/* Buttons in the brand colors */
.btn-brand   { --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-color:#fff;
               --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary) 85%, black); --bs-btn-hover-border-color: var(--brand-primary); --bs-btn-hover-color:#fff; }
.btn-action  { --bs-btn-bg: var(--brand-blue); --bs-btn-border-color: var(--brand-blue); --bs-btn-color:#fff;
               --bs-btn-hover-bg: color-mix(in srgb, var(--brand-blue) 85%, black); --bs-btn-hover-border-color: var(--brand-blue); --bs-btn-hover-color:#fff; }
.btn-orange  { --bs-btn-bg: var(--brand-orange); --bs-btn-border-color: var(--brand-orange); --bs-btn-color:#fff;
               --bs-btn-hover-bg: color-mix(in srgb, var(--brand-orange) 85%, black); --bs-btn-hover-border-color: var(--brand-orange); --bs-btn-hover-color:#fff; }
.btn-green   { --bs-btn-bg: var(--brand-green); --bs-btn-border-color: var(--brand-green); --bs-btn-color:#fff;
               --bs-btn-hover-bg: color-mix(in srgb, var(--brand-green) 85%, black); --bs-btn-hover-border-color: var(--brand-green); --bs-btn-hover-color:#fff; }
.btn-pill { border-radius: 50rem; padding-inline: 1.6rem; font-weight: 600; }

/* --- Header / nav --- */
.site-navbar {
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
  padding-block: .25rem;
}
.site-navbar .navbar-brand img { height: 52px; width: auto; }
.site-navbar .nav-link {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .85rem;
  color: var(--brand-dark);
}
.site-navbar .nav-link.active,
.site-navbar .nav-link:hover { color: var(--brand-primary); }

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: #0d1b3e center/cover no-repeat;
  /* Hero image via --hero/--hero-webp (set inline per page); prefer webp,
     fall back to the original. Declarations cascade: browsers without
     image-set keep var(--hero). */
  background-image: var(--hero);
  background-image: -webkit-image-set(var(--hero-webp) type("image/webp"), var(--hero) type("image/jpeg"));
  background-image: image-set(var(--hero-webp) type("image/webp"), var(--hero) type("image/jpeg"));
  color: #fff;
}
.hero::before { content:""; position:absolute; inset:0; background: rgba(13,20,45,.45); }
.hero .hero-inner { position: relative; z-index: 1; padding: 3rem 1rem; max-width: 900px; }
.hero h1 {
  font-family: var(--font-script);
  color: #fff;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.15;
}

/* --- Feature cards (WHAT / WHY / WHEN) --- */
.feature-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; border-radius: 6px; }
.feature-card h2 { font-size: 1.5rem; letter-spacing: .04em; }

/* --- Footer --- */
.site-footer { background: var(--brand-dark); color: #cfcfcf; }
.site-footer h3 { color: #fff; }
.site-footer a { color: #cfcfcf; }
.site-footer a:hover { color: #fff; }
.site-footer .social a { color: var(--brand-primary); font-size: 1.35rem; }
.site-footer .social a:hover { color: #fff; }