/* A Quality v2 visual fix, 2026-10-24.
   Layered over the built bundle, bundle untouched.
   Goal: Idaho-style restraint (proportional type, tighter rhythm)
   + Maxferd-style density (real photo, real place), no new pages. */

/* --- Type scale: stop the huge-to-tiny jump --- */
h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
}
h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.15rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}
h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem) !important;
  line-height: 1.25 !important;
}
p {
  line-height: 1.6 !important;
}

/* --- Spacing: cavernous sections become rhythmic --- */
.py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.mb-12 { margin-bottom: 2rem !important; }
.mb-10 { margin-bottom: 1.75rem !important; }
.mb-8 { margin-bottom: 1.5rem !important; }
.gap-8 { gap: 1.25rem !important; }

/* --- Hero: shorter, photo-led, title readable, not floating --- */
.h-\[90vh\] {
  height: 74vh !important;
  min-height: 520px !important;
  max-height: 680px !important;
}
/* The storefront photo, swapped in by override.js */
.aq-hero-photo {
  object-position: 50% 28% !important;
}
/* Hero is now the filtered, light photo (Maxferd-style), so the dark
   overlay is gone and the hero text goes dark, like the second pic. */
.aq-hero-overlay {
  background: linear-gradient(to bottom, rgba(246,240,224,.10) 0%, rgba(246,240,224,.25) 100%) !important;
}
/* Title in near-black, not green: the green on beige was muddy and
   did not sit right. Subtitle dark grey, buttons solid, not washed. */
.aq-hero h1 {
  color: #111111 !important;
}
.aq-hero p {
  color: #222222 !important;
}
/* Secondary hero button: solid white, dark text, dark outline */
.aq-hero a[class*="border"] {
  border-color: #111111 !important;
  color: #111111 !important;
  background: #ffffff !important;
}
/* Hero height is set by override.js to fill the screen exactly, so the
   green trust bar below it lands at the bottom edge, with no white
   peek of the next section. Fallback if JS has not run yet. */
.aq-hero {
  height: calc(100svh - 76px) !important;
  min-height: 520px !important;
  max-height: none !important;
}
/* Header sits over the light hero on home, so it goes dark too.
   Only while the filtered hero is on screen. */
body.aq-hero-light header, body.aq-hero-light nav {
  background: rgba(246,240,224,.92) !important;
}
body.aq-hero-light header a, body.aq-hero-light nav a, body.aq-hero-light header span, body.aq-hero-light header button {
  color: #123524 !important;
}
body.aq-hero-light header svg, body.aq-hero-light nav svg {
  color: #123524 !important;
  stroke: #123524 !important;
}
/* Hero eyebrow + buttons in proportion to the new headline */
.aq-hero .aq-eyebrow {
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  padding: 0.35rem 0.75rem !important;
  margin-bottom: 1.25rem !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #f3d27a !important;
  border-color: rgba(243, 210, 122, 0.5) !important;
}

/* --- Cards: less template, quieter borders and shadows --- */
.shadow-xl { box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; }
.shadow-lg { box-shadow: 0 6px 18px rgba(0,0,0,.07) !important; }
.rounded-sm { border-radius: 6px !important; }

/* --- Buttons: smaller, calmer, same labels --- */
a[class*="bg-secondary"], button[class*="bg-secondary"] {
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
  font-size: 0.95rem !important;
}

/* --- Header: keep it legible over the photo --- */
header, nav {
  backdrop-filter: none;
}

/* --- Faded storefront section background, Maxferd-style --- */
/* Applied by override.js to the home "We Buy Gold" section only. */
.aq-faded-section {
  background-image: linear-gradient(rgba(246, 240, 224, 0.72), rgba(246, 240, 224, 0.72)), url("/media/storefront-faded.jpg") !important;
  background-size: cover !important;
  background-position: center 35% !important;
  background-repeat: no-repeat !important;
}
/* Keep cards readable over the faded photo */
.aq-faded-section .bg-white, .aq-faded-section [class*="bg-card"] {
  background-color: rgba(255, 255, 255, 0.92) !important;
}

/* --- Footer credit: present, but quiet, not a template stamp --- */
.aq-footer-credit {
  opacity: 0.55 !important;
  font-size: 0.75rem !important;
}

@media (max-width: 640px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.5rem !important; }
  .h-\[90vh\] { height: 62vh !important; min-height: 440px !important; }
  /* Phone fallback, JS inline height wins when it runs. This must come
     after the .h rule above, or it loses on phone. */
  .aq-hero { height: calc(100svh - 190px) !important; min-height: 0 !important; max-height: none !important; }
  .py-24 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}