/*
 * Landing-page content styles. Served as an EXTERNAL stylesheet from our origin
 * so the content block works under a strict customer CSP (no inline styles).
 * Dynamic per-collection colours come from CSS custom properties defined by the
 * per-collection /theme.css route (--lp-primary, --lp-cta-*). This file only
 * references those variables; it never hard-codes a brand colour.
 */

/* Brand primary colour — headings, links, accents. */
.lp-text-primary { color: var(--lp-primary, #003765); }
.lp-bg-primary { background: var(--lp-primary, #003765); }
.lp-border-primary { border-color: var(--lp-primary, #003765); }

/* Service check-circle fill (was inline fill= on the SVG). */
.lp-check-fill { fill: var(--lp-cta, #077a4d); }

/* ── Booking action buttons ──────────────────────────────────────────────
 * Filled primary (web booking) + outline secondary (phone/email). Colour +
 * readable text colour come from the per-type theme variables. */
.lp-btn { transition: opacity 0.15s; }
.lp-btn:hover { opacity: 0.9; }

/* These buttons are <a> elements embedded into a customer page whose own
 * stylesheet styles links (e.g. Synlab's `a { color: #0077AD }`). A single
 * class ties on specificity with a bare `a`, and the host CSS can load last and
 * win — which turned the filled "Boka online" button's text the host link
 * colour instead of white. Double the class selector to raise specificity so
 * our CTA text/border colours hold inside a hostile-CSS embed. */
.lp-btn-link.lp-btn-link {
  background: var(--lp-cta-link, var(--lp-cta, #077a4d));
  color: var(--lp-cta-link-text, #fff);
}
.lp-btn-phone.lp-btn-phone {
  color: var(--lp-cta-phone, var(--lp-cta, #077a4d));
  border-color: var(--lp-cta-phone, var(--lp-cta, #077a4d));
}
.lp-btn-email.lp-btn-email {
  color: var(--lp-cta-email, var(--lp-cta, #077a4d));
  border-color: var(--lp-cta-email, var(--lp-cta, #077a4d));
}

/* ── Booking-channel chips (outline, per type) ──────────────────────────── */
.lp-chip { box-shadow: inset 0 0 0 1.5px currentColor; }
.lp-chip-link { color: var(--lp-cta-link, var(--lp-cta, #077a4d)); }
.lp-chip-phone { color: var(--lp-cta-phone, var(--lp-cta, #077a4d)); }
.lp-chip-email { color: var(--lp-cta-email, var(--lp-cta, #077a4d)); }
.lp-chip-dropin { color: var(--lp-cta-dropin, var(--lp-cta, #077a4d)); }

/* Body text colour for the shell (was an inline <style> body{color}). */
.lp-body { color: #1e4463; }

/* Visible keyboard-focus indicator (WCAG 2.4.7). Only shows for keyboard focus
 * (:focus-visible), so mouse clicks don't get an outline — no change to the
 * normal visual appearance. Applied to our interactive elements by class so it
 * works in embed mode regardless of the host's focus styles. */
/* Scoped to .lp-content so we style OUR links only and never the host page's.
   Covers every link in the block, including the map/entrance image links that
   have no text and so were previously uncovered by the class-based rules. */
.lp-content a:focus-visible,
.lp-btn:focus-visible,
.lp-text-primary:focus-visible,
a.lp-chip:focus-visible {
  outline: 2px solid var(--lp-primary, #003765);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Whole content block width cap. In embed the customer's content column can be
 * very wide (Synlab ~1250px on a large screen); without a cap the two 3:2 media
 * images scaled up too large AND the CTA/text/boxes ran full-width, so the
 * (previously capped) images looked narrower than everything below them. Cap the
 * entire block at one width so images, CTA, text and boxes share the same
 * left/right edge and line up. At ~1040px the two media images are ~510px each →
 * ~340px tall at 3:2. Below this width the block is already full-width, so
 * laptop/mobile are unaffected — only wide embeds are reined in. In standalone
 * the layout's <main> (max-w-5xl, 1024px) already caps width; this is slightly
 * wider but harmless there since <main> wins. */
/* Cap the block but hug the LEFT edge of the host column, like Synlab's own
   content and breadcrumb, so our left edge lines up with theirs.

   Historical note: the "wide preprod template" this originally compensated for
   was our own bug — Tailwind's `.container` utility (1280px at xl) was
   overriding the host's `.container` (1140px) and widening THEIR navbar,
   breadcrumb and footer too. That is fixed at the source now (corePlugins
   container: false in tailwind.config.js). This cap stays purely for line
   length: at ~1040px the two 3:2 media images are ~510px each, and body text
   stays readable. */
.lp-content { max-width: 1040px; margin-inline: 0; }