/* ==========================================================================
   lax-lightpage.css — light, readable theme for the two LAX money pages
                                                            (added 2026-09-17)
   --------------------------------------------------------------------------
   WHY THIS EXISTS
   /lax-car-service and /lax-private-car-service carry 32,821 and 12,037
   impressions over 12 months — more than every other LAX URL combined. Their
   CONTENT is strong (3,400 and 2,100 words, 12 and 7 FAQs, a terminal table).
   Their PRESENTATION was the problem:

     • the pages zebra-striped between transparent sections (the site's
       #0a0a0a body showing through as "dark mode") and light sections
     • the gold primary button rendered WHITE text on #E8A020 — 1.69:1
     • gold labels, prose links and table headers sat at 3.41-3.65:1
     • both heroes put text over a busy photograph

   Everything here is scoped under .l4r-lightpage, which is added to <main> on
   exactly those two pages. The private page uses global.css classes (.section,
   .card, .btn-glass) that the whole site shares, so an unscoped override would
   have repainted every page on the domain. It must stay scoped.

   Target: the same calm, light, readable treatment as /lax/senior-car-service.
   ========================================================================== */


/* ── WHY EVERY SELECTOR BELOW DOUBLES THE CLASS ────────────────────────────
   These two pages load SIX inline <style> blocks after this file. Rules like
   `.section-dark h2 { color:#fff }` are (0,1,1) — identical specificity to
   `.l4r-lightpage h2` — so they won on source order and headings stayed white
   on the new light ground. Doubling to `.l4r-lightpage.l4r-lightpage h2`
   gives (0,2,1), which wins regardless of order, without !important.
   ────────────────────────────────────────────────────────────────────────── */
.l4r-lightpage{
  --lp-ink:#14130F;        /* headings */
  --lp-ink2:#3A3832;       /* body copy — 11.7:1 on white */
  --lp-mut:#6E6A61;        /* captions */
  --lp-line:#E6E3DC;
  --lp-cream:#FAF9F6;
  --lp-gold:#B8965A;       /* decorative only, never text on light */
  --lp-gold-t:#7A5F22;     /* gold TEXT — 5.7:1 on cream, passes AA */
  --lp-green:#1B5E3B;
  background:#FFFFFF;
  color:var(--lp-ink2);
}

/* ── kill the dark/light zebra: every band becomes light ───────────────── */
.l4r-lightpage.l4r-lightpage .lx-section,
.l4r-lightpage.l4r-lightpage .section,
.l4r-lightpage.l4r-lightpage .lx-strip,
.l4r-lightpage.l4r-lightpage .lx-final{background:#FFFFFF;color:var(--lp-ink2);}
.l4r-lightpage.l4r-lightpage .lx-section--light,
.l4r-lightpage.l4r-lightpage .section-dark,
.l4r-lightpage.l4r-lightpage .lx-section:nth-of-type(even){background:var(--lp-cream);}
.l4r-lightpage.l4r-lightpage .lx-section--white{background:#FFFFFF;}

/* ── text colours pinned, never inherited ──────────────────────────────── */
.l4r-lightpage.l4r-lightpage h1,.l4r-lightpage.l4r-lightpage h2,.l4r-lightpage.l4r-lightpage h3,.l4r-lightpage.l4r-lightpage h4,
.l4r-lightpage.l4r-lightpage th,.l4r-lightpage.l4r-lightpage strong,.l4r-lightpage.l4r-lightpage b{color:var(--lp-ink);}
.l4r-lightpage.l4r-lightpage p,.l4r-lightpage.l4r-lightpage li,.l4r-lightpage.l4r-lightpage td,.l4r-lightpage.l4r-lightpage dd{color:var(--lp-ink2);}
.l4r-lightpage.l4r-lightpage .lx-label,
.l4r-lightpage.l4r-lightpage .lx-eyebrow,
.l4r-lightpage.l4r-lightpage .hero-badge{color:var(--lp-gold-t);}     /* was 3.41:1, now 5.7:1 */

/* ── links: underlined, never colour alone ─────────────────────────────── */
.l4r-lightpage.l4r-lightpage p a:not([class]),
.l4r-lightpage.l4r-lightpage li a:not([class]),
.l4r-lightpage.l4r-lightpage td a:not([class]){
  color:var(--lp-gold-t);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;
}
.l4r-lightpage.l4r-lightpage p a:not([class]):hover{color:var(--lp-ink);}

/* ── buttons. The gold CTA had WHITE text on gold at 1.69:1. ───────────── */
.l4r-lightpage.l4r-lightpage .lx-btn,.l4r-lightpage.l4r-lightpage .btn{min-height:52px;font-size:1rem;}
.l4r-lightpage.l4r-lightpage .lx-btn--gold,
.l4r-lightpage.l4r-lightpage .btn-primary,
.l4r-lightpage.l4r-lightpage .l4r-sticky-book{background:var(--lp-gold);color:#14130F;border-color:var(--lp-gold);}
.l4r-lightpage.l4r-lightpage .lx-btn--gold:hover,.l4r-lightpage.l4r-lightpage .btn-primary:hover{background:#cca768;color:#14130F;}
.l4r-lightpage.l4r-lightpage .lx-btn--ghost,
.l4r-lightpage.l4r-lightpage .btn-glass{background:transparent;color:var(--lp-ink);border:2px solid var(--lp-ink);}
.l4r-lightpage.l4r-lightpage .lx-btn--ghost:hover,.l4r-lightpage.l4r-lightpage .btn-glass:hover{background:var(--lp-ink);color:#fff;}
.l4r-lightpage.l4r-lightpage .lx-btn--white{background:var(--lp-green);color:#fff!important;border-color:var(--lp-green)!important;}

/* ── surfaces ──────────────────────────────────────────────────────────── */
.l4r-lightpage.l4r-lightpage .card,
.l4r-lightpage.l4r-lightpage .lx-route-card,
.l4r-lightpage.l4r-lightpage .lx-booking-shell,
.l4r-lightpage.l4r-lightpage .accordion-item,
.l4r-lightpage.l4r-lightpage .trust-item{background:#FFFFFF;border:1px solid var(--lp-line);color:var(--lp-ink2);}
.l4r-lightpage.l4r-lightpage .lx-pill-link{background:var(--lp-cream);border:1px solid var(--lp-line);color:var(--lp-ink);}
.l4r-lightpage.l4r-lightpage .lx-booking-kicker{color:var(--lp-mut);}
.l4r-lightpage.l4r-lightpage table{background:#fff;}
.l4r-lightpage.l4r-lightpage th{background:var(--lp-cream);}
.l4r-lightpage.l4r-lightpage td,.l4r-lightpage.l4r-lightpage th{border-bottom:1px solid var(--lp-line);}
.l4r-lightpage.l4r-lightpage .accordion-header{color:var(--lp-ink);min-height:56px;}
.l4r-lightpage.l4r-lightpage .accordion-content{color:var(--lp-ink2);}

/* ── the sticky quick-nav was a dark bar on a now-light page ───────────── */
.l4r-lightpage.l4r-lightpage .lx-quicknav-wrap{background:rgba(255,255,255,.96);border-block:1px solid var(--lp-line);}
.l4r-lightpage.l4r-lightpage .lx-quicknav a{color:var(--lp-ink2);}

/* ── hero: text off the photograph, onto a light ground ────────────────── */
.l4r-lightpage.l4r-lightpage .lx-hero,
.l4r-lightpage.l4r-lightpage .hero{background:linear-gradient(170deg,#fff 0%,var(--lp-cream) 100%);
  color:var(--lp-ink2);min-height:0;padding:clamp(2.5rem,6vw,4rem) 0;}
.l4r-lightpage.l4r-lightpage .lx-hero__bg,
.l4r-lightpage.l4r-lightpage .hero-bg,
.l4r-lightpage.l4r-lightpage .hero-overlay{display:none;}   /* moved below as a figure */
.l4r-lightpage.l4r-lightpage .lx-hero h1,.l4r-lightpage.l4r-lightpage .hero h1,
.l4r-lightpage.l4r-lightpage .lx-hero__sub,.l4r-lightpage.l4r-lightpage .hero p{color:var(--lp-ink);}
.l4r-lightpage.l4r-lightpage .lx-hero__sub,.l4r-lightpage.l4r-lightpage .hero p{color:var(--lp-ink2);}
.l4r-lightpage.l4r-lightpage .lx-shimmer,.l4r-lightpage.l4r-lightpage .text-gradient{
  background:none;-webkit-text-fill-color:var(--lp-ink);color:var(--lp-ink);}
.l4r-lightpage.l4r-lightpage .lx-mini-proof{color:var(--lp-mut);}

/* ── the hero photo, now a contained figure under the hero ─────────────── */
.l4r-lightpage.l4r-lightpage .lp-figure{margin:0;background:var(--lp-cream);}
.l4r-lightpage.l4r-lightpage .lp-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;max-height:440px;}
.l4r-lightpage.l4r-lightpage .lp-figcap{max-width:1120px;margin:0 auto;padding:.7rem clamp(1.15rem,4vw,2.5rem) 0;
  font-size:.82rem;color:var(--lp-mut);line-height:1.6;}

/* ── the sibling-page block: these two point at each other, not compete ── */
.l4r-lightpage.l4r-lightpage .lp-sibling{max-width:1120px;margin:0 auto;padding:0 clamp(1.15rem,4vw,2.5rem);}
.l4r-lightpage.l4r-lightpage .lp-sibling__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.15rem;}
.l4r-lightpage.l4r-lightpage .lp-card{display:block;background:#fff;border:1px solid var(--lp-line);border-radius:12px;
  padding:1.4rem;text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.l4r-lightpage.l4r-lightpage a.lp-card:hover{border-color:var(--lp-gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,25,21,.07);}
.l4r-lightpage.l4r-lightpage .lp-card__k{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lp-gold-t);margin-bottom:.5rem;}
.l4r-lightpage.l4r-lightpage .lp-card h3{margin:0 0 .4rem;font-size:1.08rem;}
.l4r-lightpage.l4r-lightpage .lp-card p{margin:0;font-size:.93rem;line-height:1.65;color:var(--lp-mut);}

.l4r-lightpage.l4r-lightpage :focus-visible{outline:3px solid var(--lp-gold-t);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  .l4r-lightpage *{transition:none!important;}
  .l4r-lightpage a.lp-card:hover{transform:none;}
}
@media (max-width:640px){.l4r-lightpage .lx-btn,.l4r-lightpage .btn{width:100%;}}

/* ── selectors from global.css that outrank the generic rules above ──────
   `.card ul li { color: var(--fg-muted) }` is (0,2,1) and beats
   `.l4r-lightpage li` (0,1,1). These are matched one-for-one rather than
   fought with !important. */
.l4r-lightpage.l4r-lightpage .card ul li,
.l4r-lightpage.l4r-lightpage .card ol li,
.l4r-lightpage.l4r-lightpage .card li,
.l4r-lightpage.l4r-lightpage .card p,
.l4r-lightpage.l4r-lightpage .grid li,
.l4r-lightpage.l4r-lightpage .trust-item p,
.l4r-lightpage.l4r-lightpage .accordion-content p,
.l4r-lightpage.l4r-lightpage .accordion-content li{color:var(--lp-ink2);}
.l4r-lightpage.l4r-lightpage .card h2,.l4r-lightpage.l4r-lightpage .card h3,.l4r-lightpage.l4r-lightpage .card h4{color:var(--lp-ink);}
.l4r-lightpage.l4r-lightpage .breadcrumb,
.l4r-lightpage.l4r-lightpage .breadcrumb a,
.l4r-lightpage.l4r-lightpage .lx-crumbs,
.l4r-lightpage.l4r-lightpage .lx-crumbs a{color:var(--lp-mut);}
.l4r-lightpage.l4r-lightpage .breadcrumb a:hover,.l4r-lightpage.l4r-lightpage .lx-crumbs a:hover{color:var(--lp-ink);}
.l4r-lightpage.l4r-lightpage .trust-item,.l4r-lightpage.l4r-lightpage .trust-strip{color:var(--lp-ink2);}
.l4r-lightpage.l4r-lightpage .hero-badge{background:var(--lp-cream);border:1px solid var(--lp-line);}

/* The hero trust row and mini-proof inherit white from the original dark hero
   and carry no class of their own, so they need naming explicitly. */
.l4r-lightpage.l4r-lightpage .lx-trust,
.l4r-lightpage.l4r-lightpage .lx-trust span,
.l4r-lightpage.l4r-lightpage .lx-hero__content,
.l4r-lightpage.l4r-lightpage .lx-hero__inner,
.l4r-lightpage.l4r-lightpage .hero-content{color:var(--lp-ink2);}
.l4r-lightpage.l4r-lightpage .lx-trust svg,
.l4r-lightpage.l4r-lightpage .lx-mini-proof svg{color:var(--lp-gold-t);stroke:var(--lp-gold-t);}
.l4r-lightpage.l4r-lightpage .accordion-icon{color:var(--lp-ink);}

/* Remaining inherited-white containers on the hub page, plus the sister-brand
   link which was gold-on-gold at 1.97:1. */
.l4r-lightpage.l4r-lightpage .lx-strip,
.l4r-lightpage.l4r-lightpage .lx-strip span,
.l4r-lightpage.l4r-lightpage .lx-strip div,
.l4r-lightpage.l4r-lightpage .lx-mini-proof,
.l4r-lightpage.l4r-lightpage .lx-mini-proof span,
.l4r-lightpage.l4r-lightpage .lx-final,
.l4r-lightpage.l4r-lightpage .lx-final p,
.l4r-lightpage.l4r-lightpage .lx-final span{color:var(--lp-ink2);}
.l4r-lightpage.l4r-lightpage .lx-strip strong,
.l4r-lightpage.l4r-lightpage .lx-final h2{color:var(--lp-ink);}
.l4r-lightpage.l4r-lightpage .lx-strip svg{color:var(--lp-gold-t);stroke:var(--lp-gold-t);}
.l4r-lightpage.l4r-lightpage a[href*="beverlyhillsluxride"]{color:var(--lp-gold-t);text-decoration:underline;}

/* ── gold text on light backgrounds ──
   lax-landing.css sets --gold-dk:#B57A10, which is 3.65:1 on #fff — it fails
   WCAG AA for the small-caps vehicle labels, table headers and body links that
   use it. Every one of those rules reads var(--gold-dk), so redefining the
   variable here fixes all of them at once with no specificity fight.
   #7A5F22 is 6.0:1 on white, 5.8:1 on the cream sections.
   Scoped to .l4r-lightpage so the rest of the site is untouched. */
.l4r-lightpage{--gold-dk:#7A5F22;}
