/* ── Elevate "attend" skin ────────────────────────────────────────────────
   Published NHS attendee landing pages (/attend/<slug>/) share the block
   renderer and structural CSS in elevate.css with the marketing site, but
   must NOT carry its dark denim/orange branding, header, or navbar - these
   pages are shared inside the NHS trust, not the supplier-facing marketing
   site. Loaded AFTER elevate.css, scoped entirely under body.attend so it
   never leaks onto core/event/intel pages.

   Approach: elevate.css is built almost entirely on CSS custom-property
   tokens (--denim*, --orange*, --text-*, --border*, --f-*), so redeclaring
   them on body.attend re-themes the vast majority of block markup for free
   (custom properties are inherited, including into inline style="color:
   var(--text-2)" attributes emitted by the renderer). The handful of
   elevate.css rules that hardcode a literal colour instead of a token (a
   handful of dark-photo/dark-band treatments where a fixed light-on-dark
   pairing is structurally required regardless of site theme) are called out
   and overridden explicitly below - see "Theme-vulnerable overrides".

   Palette: reuses the .exb-wrap tokens verbatim (lib/render.mjs EXB_STYLE)
   so the exhibitors block - which is already hardened to these exact NHS
   values - looks native, not bolted on.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Token re-theme ───────────────────────────────────────────────────────
   Same custom-property names elevate.css defines on :root, redeclared with
   the light/NHS palette and scoped to body.attend. Everything downstream
   that reads var(--denim)/var(--orange)/var(--text-1) etc. re-themes
   automatically - block backgrounds, borders, headings, body copy, icons,
   links, form focus rings, the FAQ accordion, category cards, and so on. */
body.attend {
  --denim:          #FFFFFF;   /* page ground (was darkest -> now lightest) */
  --denim-mid:      #F4F7F9;   /* subtle alternating band */
  --denim-raised:   #E8F0F9;   /* pale-blue "raised" card / hover surface */
  --denim-deep:     #003087;   /* NHS dark blue - reserved for the handful of intentionally-dark bands (stats, .btn-dark) */

  --orange:         #005EB8;   /* NHS blue - primary accent */
  --orange-light:   #2E7DC9;   /* hover tint */
  --orange-dim:     #5B8FC4;   /* muted accent */

  --text-1:         #212B32;   /* ink */
  --text-2:         #4C6272;   /* ink-2 */
  --text-3:         #6B7F8C;   /* ink-3 (tertiary) */

  --border:         #D8DDE0;   /* line */
  --border-light:   #E8EDEE;   /* line-2 */

  --f-display: Arial, Helvetica, "Liberation Sans", sans-serif;
  --f-body:    Arial, Helvetica, "Liberation Sans", sans-serif;
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   .btn-primary and .btn-dark pair an accent background with a token-driven
   text colour that assumed the old dark-theme luminance relationship
   (light-orange bg + near-black text, or near-black bg + light-orange text).
   NHS blue does not have that same contrast headroom against denim-deep, so
   both need an explicit white label rather than the inherited token. */
body.attend .btn-primary,
body.attend .btn-dark {
  color: #FFFFFF;
}
body.attend .btn-dark:hover {
  background: #004494;
  border-color: #004494;
  color: #FFFFFF;
}
/* Border on the outline button is a hardcoded orange rgba, not a token. */
body.attend .btn-outline-orange {
  border-color: rgba(0, 94, 184, 0.45);
}
body.attend .btn-outline-orange:hover {
  background: rgba(0, 94, 184, 0.08);
}

/* ── Theme-vulnerable overrides ───────────────────────────────────────────
   elevate.css rules that hardcode a literal colour (not a token) or that
   pair a token with a fixed dark background where the light theme would
   otherwise create a dark-on-dark or light-on-light collision. */

/* Hero (variant "attend"/"event"): copy sits over a photograph with a fixed
   dark scrim (.hero-grad uses literal oklch values, unrelated to the page
   theme) - the copy must stay light regardless of the token re-theme above,
   exactly as it did on the marketing site. */
body.attend .hero-content,
body.attend .page-hero-content {
  color: #FFFFFF;
}
body.attend .hero-h1,
body.attend .hero-sub,
body.attend .page-hero h1,
body.attend .page-hero-sub {
  color: #FFFFFF;
}
body.attend .hero-h1 em,
body.attend .page-hero h1 em {
  color: #BFDDF7;
}
body.attend .hero-badge,
body.attend .event-hero-date {
  color: #FFFFFF;
}
body.attend .hero-badge {
  border-color: rgba(255, 255, 255, 0.45);
}
body.attend .hero-badge::before {
  background: #FFFFFF;
}
body.attend .event-hero-venue,
body.attend .event-hero-past {
  color: rgba(255, 255, 255, 0.85);
}
body.attend .event-hero-past {
  border-color: rgba(255, 255, 255, 0.45);
}
body.attend .event-hero-sep {
  background: rgba(255, 255, 255, 0.45);
}
body.attend .hero-content .crumbs a,
body.attend .page-hero-content .crumbs a {
  color: rgba(255, 255, 255, 0.85);
}
body.attend .hero-content .crumbs a:hover,
body.attend .page-hero-content .crumbs a:hover {
  color: #FFFFFF;
}
body.attend .hero-content .crumbs span[aria-hidden],
body.attend .page-hero-content .crumbs span[aria-hidden] {
  color: rgba(255, 255, 255, 0.5);
}
/* Secondary/outline CTAs, if placed in the hero, must stay light too - the
   global .btn-ghost / .btn-outline-orange re-theme above targets page
   content sitting on the (now white) ground, not a photo. */
body.attend .hero-content .btn-ghost,
body.attend .page-hero-content .btn-ghost {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.55);
}
body.attend .hero-content .btn-ghost:hover,
body.attend .page-hero-content .btn-ghost:hover {
  border-color: #FFFFFF;
}
body.attend .hero-content .btn-outline-orange,
body.attend .page-hero-content .btn-outline-orange {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.55);
}
body.attend .hero-content .btn-outline-orange:hover,
body.attend .page-hero-content .btn-outline-orange:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #FFFFFF;
}

/* CTA band: background stays the accent colour (now NHS blue) by design -
   the heading/body pairing (var(--denim-deep) / a fixed dark oklch) assumed
   a light-orange background and needs to flip to white text on NHS blue. */
body.attend .cta-inner h2,
body.attend .cta-inner p {
  color: #FFFFFF;
}

/* Stats band: background stays var(--denim-deep) (NHS dark blue) by design
   - the big numbers and labels need light text/grid-lines, not the ink
   tokens the re-theme above gives every other (light) section. */
body.attend .stats-band .stat-num {
  color: #FFFFFF;
}
body.attend .stats-band .stat-label {
  color: rgba(255, 255, 255, 0.78);
}
body.attend .stats-grid {
  background: rgba(255, 255, 255, 0.15);
}
body.attend .stats-band .stat {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Video block placeholder: also keeps a fixed dark (denim-deep) surface. */
body.attend .video-placeholder {
  color: rgba(255, 255, 255, 0.78);
}
body.attend .video-placeholder svg {
  color: #FFFFFF;
}

/* Steps: the big background step-number is a literal 25%-alpha orange, not
   a token - swap it for a matching-weight NHS-blue tint. */
body.attend .step-num {
  color: rgba(0, 94, 184, 0.18);
}

/* Logo strip: images/inline-SVG wordmarks are forced to a white silhouette
   via filter (brightness(0) invert(1)) for the dark theme - drop the invert
   so the same filter chain produces a dark silhouette on white instead. */
body.attend .logos-row img,
body.attend .logos-row svg {
  filter: brightness(0);
}

/* Contact / lead-capture form fields: input background is a hardcoded
   var(--denim-deep) (near-black on the dark theme) with ink-coloured text -
   unreadable once --text-1 becomes dark ink. Give fields a light surface. */
body.attend .field input,
body.attend .field select,
body.attend .field textarea {
  background: #FFFFFF;
  border-color: var(--border);
}
/* The select's dropdown chevron is a literal orange (#ED8B00) data-URI. */
body.attend .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005EB8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Minimal attend footer ────────────────────────────────────────────────
   No nav columns, no social row - a single quiet contact/legal line under
   the Highland wordmark (see renderFooter(site, { variant: 'attend' })). */
.attend-footer {
  border-top: 1px solid var(--border);
  padding-block: clamp(2rem, 5vh, 3rem);
}
.attend-footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
.attend-footer-logo {
  height: 26px;
  width: auto;
}
.attend-footer-line {
  font-size: 0.82rem;
  color: var(--text-3);
  line-height: 1.6;
  max-width: none;
}
.attend-footer-line a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.attend-footer-line a:hover {
  color: var(--orange);
}