/* Glass look — the style of the map view (/?mapdemo=1), as one shared, opt-in layer.
   Nothing here changes layout or text; it only re-skins existing cards and the page backdrop.
   Turned on by <html class="glass"> (preview: add ?glass=1 to any page on the local server).
   To make it the site default later: add the class to every page in one place, no per-page edits. */

html.glass {
  --g-ink: #0f1319;
  --g-green: #008A00;
  --g-forest: #005A36;
  --g-fill: linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.44));
  --g-fill-soft: linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.30));
  --g-border: 1px solid rgba(255,255,255,.85);
  --g-shadow: 0 16px 40px rgba(0,60,30,.13), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);
  --g-shadow-hover: 0 22px 52px rgba(0,60,30,.20), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);
  --g-blur: blur(22px) saturate(180%);
  --g-radius: 20px;
}

/* A soft green backdrop: glass only reads as glass when there is something behind it to blur. */
html.glass body {
  background:
    radial-gradient(1100px 620px at 8% -6%, rgba(173,222,184,.85) 0, transparent 62%),
    radial-gradient(900px 560px at 100% 18%, rgba(196,232,214,.80) 0, transparent 58%),
    radial-gradient(1000px 720px at 28% 108%, rgba(168,214,190,.75) 0, transparent 62%),
    #eef4ef;
  background-attachment: fixed;
}
html.glass .lr-section, html.glass .lr-why, html.glass .lr-how, html.glass .lr-reviews, html.glass .lr-phone,
html.glass .lr-faq, html.glass .lr-city-info, html.glass .lr-veh, html.glass .lr-pop { background: transparent; }

/* Every card-shaped block on the site, one rule. */
html.glass :is(.lr-why-card, .lr-how-col, .lr-review-card, .lr-veh-card, .lr-phone-card, .lr-faq-item, .lr-nearby, .info-card, .lr-pop-card, .pf) {
  background: var(--g-fill);
  border: var(--g-border);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
html.glass .lr-how-col--in { background: var(--g-fill-soft); }
html.glass :is(.lr-why-card, .lr-review-card, .lr-veh-card, .lr-phone-card, .info-card):hover {
  transform: translateY(-3px);
  box-shadow: var(--g-shadow-hover);
}
/* The coloured strip on top of the "why" cards stays, but follows the new rounded corners. */
html.glass .lr-why-card { overflow: hidden; }
html.glass .lr-faq-item { padding: 18px 22px; margin: 0 0 12px; }
html.glass .lr-faq-item h3 { margin-top: 0; }
html.glass .lr-faq-item p:last-child { margin-bottom: 0; }
html.glass .lr-nearby { padding: 20px 24px; }
html.glass .lr-city-info .wrap { background: var(--g-fill); border: var(--g-border); border-radius: calc(var(--g-radius) + 4px); box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); padding: 34px 38px; }

/* Marketing pages: the white title band becomes part of the backdrop instead of a flat white strip. */
html.glass .page-hero { background: transparent; }
/* Text-only pages (pricing, fleet, about, terms…): the page content sits on one glass panel. Town pages already
   have card sections, so they are left alone. */
html.glass .page-hero ~ .lr-section:not(.lr-price-finder) { background: var(--g-fill); border: var(--g-border); border-radius: calc(var(--g-radius) + 4px); box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); padding: 44px 48px; margin: 24px auto; }
html.glass .page-hero ~ .lr-section .info-card { background: var(--g-fill-soft); }
html.glass .pf-car { background: var(--g-fill-soft); border: var(--g-border); border-radius: 14px; }

/* Headings and links pick up the forest green; body text stays dark and readable on the light glass. */
html.glass .lr-section h2 { color: var(--g-ink); }
html.glass .lr-section h3 { color: var(--g-forest); }
html.glass .lr-section p, html.glass .lr-section li { color: #33403a; }

/* Phones: slightly smaller radius and lighter blur (cheaper to draw, same look). */
@media (max-width: 700px) {
  html.glass { --g-radius: 16px; --g-blur: blur(14px) saturate(170%); }
  html.glass .lr-city-info .wrap { padding: 24px 20px; }
  html.glass .lr-faq-item { padding: 14px 16px; }
  html.glass .page-hero ~ .lr-section:not(.lr-price-finder) { padding: 26px 20px; margin: 14px 12px; }
}
/* Browsers without backdrop-filter get a solid white card instead of a see-through one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.glass :is(.lr-why-card, .lr-how-col, .lr-review-card, .lr-veh-card, .lr-phone-card, .lr-faq-item, .lr-nearby, .info-card, .lr-pop-card, .pf) { background: rgba(255,255,255,.92); }
}
@media (prefers-reduced-motion: reduce) {
  html.glass :is(.lr-why-card, .lr-review-card, .lr-veh-card, .lr-phone-card, .info-card):hover { transform: none; }
}