/* ============================================================================
   Better Devices — webinar promotion
   Styles the strip and the exit-intent modal rendered by
   wp-content/mu-plugins/bd-webinar.php. Loaded only on the pages that carry
   the promotion, and only until the event has ended — the plugin's enqueue is
   behind the same date check as the markup.

   Palette is the site's own: #000000 ground, #ffbe0b amber accent, Hanken
   Grotesk. Nothing new is introduced, so the promotion reads as part of the
   site rather than as an ad pasted onto it.

   This file is additive. Deleting it, assets/js/webinar.js and the mu-plugin
   removes the feature completely; no other stylesheet references anything
   declared here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The strip
   --------------------------------------------------------------------------
   #bd-nav is position:fixed at top:0 with z-index 200 (see parts/nav.html). A
   strip above it has to move it down, and the move has to be undone the moment
   the strip is dismissed.

   Doing that by writing `top` straight onto #bd-nav would mean fighting an
   inline style with !important, and would leave the mobile drawer — which is
   separately pinned at top:74px in mobile.css — behind the bar. Instead
   webinar.js sets ONE custom property on <html>, --bd-webinar-h, and
   everything that needs the offset reads it. Dismissing sets it to 0px and
   every offset collapses together, in one place.

   The default of 0px matters: if the JS never runs, the nav is not left
   hanging below a strip that was never revealed.
   -------------------------------------------------------------------------- */
:root { --bd-webinar-h: 0px; }

#bd-nav { top: var(--bd-webinar-h) !important; }

.bd-webinar-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 210;
  display: flex; align-items: stretch;
  background: #0B0C0E;
  border-bottom: 1px solid rgba(255,190,11,0.35);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  /* Rendered hidden so a returning visitor who dismissed it never sees it
     flash before the JS can act. webinar.js flips data-state to "open". */
  transform: translateY(-100%);
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.bd-webinar-bar[data-state="init"],
.bd-webinar-bar[data-state="closed"] { visibility: hidden; }
.bd-webinar-bar[data-state="open"]   { visibility: visible; transform: translateY(0); }

/* A hairline of amber along the top edge, the same accent the site uses to
   mark a live or active thing. */
.bd-webinar-bar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #ffbe0b 0%, rgba(255,190,11,0.25) 55%, rgba(255,190,11,0) 100%);
}

.bd-webinar-bar-link {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 12px 20px;
  text-decoration: none; color: #ffffff;
}
.bd-webinar-bar-link:hover .bd-webinar-bar-cta { color: #ffffff; }
.bd-webinar-bar-link:hover .bd-webinar-bar-cta::after { width: 100%; }

/* The pulsing live dot. Animation is wrapped in a reduced-motion guard at the
   foot of this file along with every other transition here. */
.bd-webinar-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: #ffbe0b; box-shadow: 0 0 0 0 rgba(255,190,11,0.6);
  animation: bd-webinar-pulse 2.4s ease-out infinite;
}
@keyframes bd-webinar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,190,11,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,190,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,190,11,0); }
}

.bd-webinar-flag {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #ffbe0b;
}
.bd-webinar-bar-title {
  min-width: 0;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: #ffffff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-webinar-bar-when {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 400; color: #9aa3ab;
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.16);
}
.bd-webinar-bar-cta {
  position: relative; flex: 0 0 auto;
  font-size: 13.5px; font-weight: 700; color: #ffbe0b;
  transition: color .2s ease;
}
.bd-webinar-bar-cta::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0;
  background: currentColor; transition: width .25s ease;
}

.bd-webinar-bar-x {
  flex: 0 0 auto; width: 44px;
  background: none; border: 0; border-left: 1px solid rgba(255,255,255,0.1);
  color: #7d858d; font-size: 20px; line-height: 1; cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.bd-webinar-bar-x:hover { color: #ffffff; background: rgba(255,255,255,0.06); }

/* --------------------------------------------------------------------------
   The exit-intent modal
   -------------------------------------------------------------------------- */
.bd-webinar-modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;

  /* The cookie banner is fixed at z-index 99999 and stays on top — it is how
     a visitor exercises a legal choice and cannot be buried under an advert.
     So the modal makes room for it rather than fighting it: webinar.js
     measures what the banner occupies and writes it here, and the card is
     capped to what is left so both stay fully usable. The fallback of 0px
     means that with no banner present this is just the base padding. */
  padding: 24px 24px calc(24px + var(--bd-webinar-consent-h, 0px)) 24px;
}
/* [hidden] alone is display:none, which the flex above would override — the
   display declaration wins on source order regardless of specificity here.
   Restate it so the attribute actually hides the dialog. */
.bd-webinar-modal[hidden] { display: none; }

.bd-webinar-scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s ease;
}
.bd-webinar-modal[data-state="open"] .bd-webinar-scrim { opacity: 1; }

.bd-webinar-card {
  position: relative; width: 100%; max-width: 760px;
  /* With the consent banner up on a phone there may not be room for the card
     at its natural height. Capping it and letting it scroll keeps the
     Register button reachable instead of pushing it off the viewport. */
  max-height: calc(100dvh - 48px - var(--bd-webinar-consent-h, 0px));
  /* A column, so that when the cap above bites the ARTWORK gives up the
     height and the footer keeps its own. Making the card scroll instead was
     the first attempt and it is worse: the Register button ends up below the
     fold of a box the visitor has no reason to think scrolls. */
  display: flex; flex-direction: column;
  background: #0B0C0E;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,0.85);
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.bd-webinar-modal[data-state="open"] .bd-webinar-card {
  opacity: 1; transform: translateY(0) scale(1);
}

.bd-webinar-card-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18);
  color: #ffffff; font-size: 19px; line-height: 1; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.bd-webinar-card-x:hover { background: rgba(255,190,11,0.9); border-color: #ffbe0b; color: #000000; }

/* The artwork is the supplied 1200x627 card and already carries the title,
   date and speakers, so the modal does not repeat them in text. aspect-ratio
   plus the width/height attributes on the <img> reserve the box before the
   file arrives, so opening the modal does not shift its own footer. */
.bd-webinar-art {
  display: block; line-height: 0;
  /* Shrinks first, and min-height:0 is what lets it: a flex item will not go
     below its content's intrinsic size without it, which would push the
     footer out of the capped card rather than shrink the picture. */
  flex: 0 1 auto; min-height: 0;
}
.bd-webinar-art img {
  display: block; width: 100%; height: 100%; max-height: 100%;
  aspect-ratio: 1200 / 627; object-fit: contain; object-position: center top;
}

.bd-webinar-foot { flex: 0 0 auto; }

.bd-webinar-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 22px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.bd-webinar-when {
  margin: 0; min-width: 0;
  font-size: 14px; font-weight: 500; color: #c9ccd1; letter-spacing: -0.01em;
}
.bd-webinar-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.bd-webinar-go {
  display: inline-block; padding: 12px 24px; border-radius: 999px;
  background: #ffbe0b; color: #000000;
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bd-webinar-go:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(255,190,11,0.65); }

.bd-webinar-no {
  background: none; border: 0; padding: 6px 2px;
  color: #8a9299; font-size: 13.5px; font-weight: 500; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s ease;
}
.bd-webinar-no:hover { color: #ffffff; }

/* Visible to a screen reader, not on screen. The modal needs a heading for
   aria-labelledby, but the artwork already shows the title in pixels and a
   second one on screen would read as a duplicate. */
.bd-webinar-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Keyboard focus must stay visible: several controls here are deliberately
   chrome-less, and the site's default outline is removed on buttons. */
.bd-webinar-bar-link:focus-visible,
.bd-webinar-bar-x:focus-visible,
.bd-webinar-card-x:focus-visible,
.bd-webinar-go:focus-visible,
.bd-webinar-no:focus-visible {
  outline: 2px solid #ffbe0b; outline-offset: 3px; border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------
   This file is NOT media-gated at the <link> (mobile.css is), so the mobile
   rules live here behind their own query at the same 900px breakpoint the rest
   of the site uses.

   The drawer offset is the reason a plain `top:74px` in mobile.css is not
   enough: with the strip up, the bar starts at --bd-webinar-h, so the drawer
   has to start 74px below THAT and lose the same height off its own. Both
   terms collapse to the existing values when the property is 0px.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bd-drawer {
    top: calc(74px + var(--bd-webinar-h)) !important;
    height: calc(100dvh - 74px - var(--bd-webinar-h)) !important;
  }

  /* The full sentence does not fit beside a date and a CTA on a phone. The
     title carries the message; the date is already on the LinkedIn page one
     tap away, and repeating it here costs more than it adds. */
  .bd-webinar-bar-when { display: none; }
  .bd-webinar-bar-link { gap: 10px; padding: 11px 12px; }
  .bd-webinar-flag { display: none; }
  .bd-webinar-bar-title { font-size: 13.5px; }
  .bd-webinar-bar-cta { font-size: 12.5px; }
  .bd-webinar-bar-x { width: 40px; }

  .bd-webinar-modal { padding: 16px 16px calc(16px + var(--bd-webinar-consent-h, 0px)) 16px; }
  .bd-webinar-foot { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .bd-webinar-when { font-size: 13px; text-align: center; }
  .bd-webinar-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .bd-webinar-go { text-align: center; padding: 13px 20px; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------
   Everything here moves: the strip slides, the card rises and scales, the dot
   pulses on a loop. A loop in particular is the kind of thing prefers-reduced-
   motion exists for. States are preserved, only the travel is removed.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bd-webinar-bar,
  .bd-webinar-scrim,
  .bd-webinar-card,
  .bd-webinar-go,
  .bd-webinar-bar-cta::after { transition: none !important; }
  .bd-webinar-bar[data-state="open"] { transform: none; }
  .bd-webinar-card { transform: none; }
  .bd-webinar-dot { animation: none; }
  .bd-webinar-go:hover { transform: none; }
}