/*
 * overrides.css — approved CSS overrides for Ridgecrest Designs
 * Loaded after main.css on every page. Never edit main.css directly
 * for layout-only responsive adjustments. Theme changes belong in source files.
 *
 * Last rebuilt: 2026-04-12 (cleaned by PX — theme rules moved to source files)
 */

/* ── Nav dark overlay (pre-scroll) ──────────────────────────────────────────
   At rest (before scrolling), nav background is a dark translucent overlay
   so hero text stays readable over light images.
   Approved: 2026-04-08 — opacity 0.6 after testing 0.95 (too heavy) and 0.4 (too light)
*/
.nav:not(.nav--scrolled) {
  background: rgba(0, 0, 0, var(--nav-band-opacity, 0.6));
  padding: 1rem clamp(1rem, calc(10vw - 112px), 2rem);
}

/* ── Mobile hero height + anchor ─────────────────────────────────────────────
   Reduce hero height on tablet/phone so content below the fold is visible.
   Hero text anchors to bottom (was vertically centered).
   Approved: 2026-04-07
*/
@media (max-width: 1023px) {
  .hero {
    height: 88svh;
  }
  .hero__content {
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: 3rem;
  }
}

@media (max-width: 767px) {
  .hero {
    height: 85svh;
  }
}

/* ── iPad breakpoint fix ─────────────────────────────────────────────────────
   iPad is exactly 768px wide — use 767px so iPad gets desktop styles, not phone.
   Approved: 2026-04-08
*/
@media (max-width: 767px) {
  .nav__links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    padding: 1rem 0;
  }

  .nav__links.nav__links--open {
    display: flex;
  }

  .hero__content h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

/* ── Image rendering hint ─────────────────────────────────────────────────────
   Tells browser to use highest quality downscaling for card background images.
   Prevents stair-stepping artifacts on fine detail images.
   Added: 2026-04-12
*/
.service-card {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

/* ── Hero T-panel: extend CTA/alignment controls to .page-hero__actions ──────
   services/ pages use .page-hero__actions instead of .hero__actions.
   These rules mirror the hero CTA visibility / alignment rules in main.css
   so the T button panel works identically on services pages.
   Added: 2026-04-21
*/
[data-hero-cta="hide"] .page-hero__actions           { display: none !important; }
[data-hero-cta-primary="hide"]   .page-hero__actions [data-cta-id="primary"]   { display: none !important; }
[data-hero-cta-secondary="hide"] .page-hero__actions [data-cta-id="secondary"] { display: none !important; }
[data-hero-cta-align="left"]   .page-hero__actions { justify-content: flex-start  !important; width: 100% !important; }
[data-hero-cta-align="center"] .page-hero__actions { justify-content: center      !important; width: 100% !important; }
[data-hero-cta-align="right"]  .page-hero__actions { justify-content: flex-end    !important; width: 100% !important; }
[data-hero-cta-align="split"]  .page-hero__actions { justify-content: space-between !important; width: 100% !important; }

/* ── Service area city links ─────────────────────────────────────────────────
   locations__list items were <span> elements. Replaced with <a> links pointing
   to each city's service hub page. These rules replicate the span appearance
   and add a gold hover state matching the site accent colour.
   Added: 2026-04-27
*/
.locations__list a {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--charcoal);
  padding: 0.6rem 1.5rem;
  position: relative;
  font-style: italic;
  text-decoration: none;
  transition: color 0.2s;
}
.locations__list a::after {
  content: '·';
  position: absolute;
  right: -0.3rem;
  color: var(--light);
}
.locations__list a:last-child::after { display: none; }
.locations__list a:hover { color: var(--gold); }