/* ============================================
   IMAPAC Floating Navbar
   ============================================ */

.imapac-navbar {
  font-family: inherit;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
}

.imapac-navbar *,
.imapac-navbar *::before,
.imapac-navbar *::after {
  box-sizing: border-box;
}

/* ============ BAR ============ */
.imapac-navbar .in-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--navbar-height, 72px);
  padding: 0 var(--navbar-padding-x, 32px);
  background: var(--navbar-bg, #FFFFFF);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}

/* Apply opacity to background only when --navbar-bg-op < 1 */
.imapac-navbar .in-bar {
  background-color: var(--navbar-bg, #FFFFFF);
}

.imapac-navbar.in-scrolled .in-bar.in-with-shadow {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.imapac-navbar .in-bar.in-with-shadow {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* ============ LOGO ============ */
.imapac-navbar .in-logo-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.imapac-navbar .in-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.imapac-navbar .in-logo-img {
  width: auto;
  display: block;
  object-fit: contain;
}

.imapac-navbar .in-logo-placeholder {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--menu-text, #2C2C2A);
}

/* ============ DESKTOP MENU ============ */
.imapac-navbar .in-menu-desktop {
  display: flex;
  align-items: center;
  gap: var(--menu-gap, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.imapac-navbar .in-menu-item {
  margin: 0;
  padding: 0;
}

.imapac-navbar .in-menu-link {
  font-size: var(--menu-size, 14px);
  font-weight: var(--menu-weight, 600);
  color: var(--menu-text, #2C2C2A);
  text-decoration: none;
  letter-spacing: 0.3px;
  padding: 6px 0;
  position: relative;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.imapac-navbar .in-uppercase .in-menu-link,
.imapac-navbar .in-uppercase .in-drawer-link {
  text-transform: uppercase;
}

.imapac-navbar .in-menu-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--menu-hover, #C8221A);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.imapac-navbar .in-menu-link:hover {
  color: var(--menu-hover, #C8221A);
}

.imapac-navbar .in-menu-link:hover::after {
  transform: scaleX(1);
  background: var(--menu-hover, #C8221A);
}

/* ============ ACTIVE MENU STATE ============ */
.imapac-navbar .in-menu-link.in-active {
  color: var(--menu-active, #C8221A);
}

.imapac-navbar.in-active-underline .in-menu-link.in-active::after {
  transform: scaleX(1);
  background: var(--menu-active, #C8221A);
}

/* Drawer (mobile) active state */
.imapac-navbar .in-drawer-link.in-active {
  color: var(--menu-active, #C8221A);
  font-weight: 700;
}

/* ============ FOCUS OUTLINE CLEANUP ============ */
/* Remove default browser focus outline on click (mouse interaction) but keep
   visible outline for keyboard navigation (Tab key) — accessibility-friendly */
.imapac-navbar a:focus {
  outline: none;
}

.imapac-navbar a:focus-visible {
  outline: 2px solid var(--menu-hover, #C8221A);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Ensure CTA button also clean on click */
.imapac-navbar .in-cta:focus {
  outline: none;
}

.imapac-navbar .in-cta:focus-visible {
  outline: 2px solid var(--cta-bg, #C8221A);
  outline-offset: 3px;
}

/* ============ NO TEXT UNDERLINE ON LINKS ============ */
/* Override default browser anchor underline + parent theme CSS for all states */
.imapac-navbar a,
.imapac-navbar a:hover,
.imapac-navbar a:focus,
.imapac-navbar a:active,
.imapac-navbar a:visited {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* ============ CTA BUTTON ============ */
.imapac-navbar .in-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cta-bg, #C8221A);
  color: var(--cta-text, #FFFFFF);
  text-decoration: none;
  font-size: var(--menu-size, 14px);
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 10px 22px;
  border-radius: var(--cta-radius, 999px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

/* Make sure anchor variant is also clickable */
.imapac-navbar a.in-cta {
  cursor: pointer;
  pointer-events: auto;
}

.imapac-navbar .in-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  filter: brightness(1.08);
}

.imapac-navbar .in-cta-desktop {
  margin-left: 16px;
  flex-shrink: 0;
}

/* span variant (no link) should still look like button */
.imapac-navbar span.in-cta {
  cursor: default;
}

/* ============ HAMBURGER (mobile only) ============ */
.imapac-navbar .in-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.imapac-navbar .in-hamburger:hover {
  background: rgba(0, 0, 0, 0.05);
}

.imapac-navbar .in-hamburger span {
  display: block;
  width: 100%;
  height: 2.5px;
  background: var(--hamburger-color, #2C2C2A);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ============ DRAWER (mobile) ============ */
.imapac-navbar .in-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9001;
}

.imapac-navbar .in-drawer-overlay.in-open {
  opacity: 1;
  pointer-events: auto;
}

.imapac-navbar .in-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--drawer-bg, #FFFFFF);
  z-index: 9002;
  padding: 4rem 1.5rem 2rem;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
}

.imapac-navbar .in-drawer.in-open {
  transform: translateX(0);
}

/* ============ DRAWER TEXT COLOR (SMART, decoupled from desktop menu) ============
   --drawer-text and --drawer-link-border are auto-set by JS based on drawer bg luminance.
   Fallback chain: if JS hasn't run yet, use menu-text, then black. */
.imapac-navbar .in-drawer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: var(--drawer-text, var(--menu-text, #2C2C2A));
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.imapac-navbar .in-drawer-close:hover {
  background: var(--drawer-close-hover-bg, rgba(0, 0, 0, 0.05));
}

.imapac-navbar .in-drawer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.imapac-navbar .in-drawer-item {
  margin: 0;
}

.imapac-navbar .in-drawer-link {
  display: block;
  padding: 14px 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--drawer-text, var(--menu-text, #2C2C2A));
  text-decoration: none;
  border-bottom: 1px solid var(--drawer-link-border, rgba(0, 0, 0, 0.06));
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.imapac-navbar .in-drawer-link:hover {
  color: var(--menu-hover, #C8221A);
  padding-left: 12px;
}

.imapac-navbar .in-cta-mobile {
  margin-top: 1rem;
  padding: 14px 24px;
  font-size: 15px;
  width: 100%;
}

/* ============ SPACER ============ */
.imapac-navbar-spacer {
  width: 100%;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .imapac-navbar .in-menu-desktop,
  .imapac-navbar .in-cta-desktop {
    display: none;
  }

  .imapac-navbar .in-hamburger {
    display: flex;
  }

  .imapac-navbar .in-bar {
    padding: 0 1rem;
  }
}

@media (min-width: 901px) {
  .imapac-navbar .in-drawer,
  .imapac-navbar .in-drawer-overlay {
    display: none;
  }
}

/* ============ CTA AS A BUTTON (download mode) ============
   A <button> does not inherit the page font the way an <a> does, so the two
   CTA variants would otherwise render in different typefaces. */
.imapac-navbar button.in-cta {
  font-family: inherit;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}

/* ============ DOWNLOAD POP-UP ============
   Rendered as a sibling of <nav>, not inside it, so the fixed navbar cannot
   clip it. It carries its own --cta-bg because the CSS vars are set on the
   navbar element and do not reach outside it. */
.in-dl {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 20px;
  font-family: inherit;
}
.in-dl[hidden] { display: none; }
.in-dl *, .in-dl *::before, .in-dl *::after { box-sizing: border-box; }

/* The dialog sits OUTSIDE <nav>, so `.imapac-navbar a { text-decoration: none }` never
   reaches it and the page theme's own a:hover rule puts an underline back on the cards.
   Repeat the reset here, for every state and for the spans inside the card too. */
.in-dl a,
.in-dl a:link,
.in-dl a:visited,
.in-dl a:hover,
.in-dl a:focus,
.in-dl a:active,
.in-dl a span,
.in-dl a:hover span {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none;
}

.in-dl-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 28, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.in-dl.in-dl-open .in-dl-backdrop { opacity: 1; }

.in-dl-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: 0 30px 70px rgba(15, 18, 28, 0.28);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.in-dl.in-dl-open .in-dl-box { opacity: 1; transform: none; }

.in-dl-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: #6B7280;
  cursor: pointer;
}
.in-dl-x:hover { background: rgba(0, 0, 0, 0.06); color: #1F1F1F; }

.in-dl-title { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: #16233D; }
.in-dl-note  { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: #6B7280; }

.in-dl-list { display: grid; gap: 10px; }

/* Each choice is a SOLID card, not a white one, and the two carry different hues so the
   reader tells them apart before reading the label. --c comes from the module's colour
   field; the gradient's dark end is derived from it, so one picker drives the whole card.
   The flat `background` is declared first as the fallback: a browser without color-mix
   drops the gradient line and keeps the solid fill rather than rendering nothing. */
.in-dl-item {
  --c: #1F3D7A;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: none;
  border-radius: 14px;
  text-decoration: none;
  color: #FFFFFF;
  background: var(--c);
  background-image: linear-gradient(102deg, var(--c), color-mix(in srgb, var(--c) 58%, #000));
  box-shadow: 0 10px 26px rgba(15, 18, 28, 0.20);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.in-dl-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(15, 18, 28, 0.30);
  filter: brightness(1.08) saturate(1.05);
}
.in-dl-item:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: -5px;
}

.in-dl-ico {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
.in-dl-ico svg { width: 22px; height: 22px; display: block; }

.in-dl-txt  { flex: 1 1 auto; min-width: 0; }
.in-dl-lab  { display: block; font-size: 16px; font-weight: 700; color: #FFFFFF; }
.in-dl-desc { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.90); }

.in-dl-go { flex: none; color: rgba(255, 255, 255, 0.88); }
.in-dl-go svg { width: 18px; height: 18px; display: block; }
.in-dl-item:hover .in-dl-go { color: #FFFFFF; }

@media (max-width: 480px) {
  .in-dl-box { padding: 24px 20px 20px; }
}


/* ============================================
   LOUD DOWNLOAD CHIP  (cta_group.cta_emphasis)
   Roohi, 22 Sep 2026: the download CTA "should be big and prominent like poppin on
   the screen so people dont miss it". Everything below is scoped to
   .imapac-navbar.in-dlx-on, so a page with the field off renders exactly as before.
   ============================================ */
/* ======================================================================
   VARIANT 1 - "loud chip on the bar"
   Additional CSS only. Goes at the END of imapac-navbar.module/module.css.

   Everything is scoped to .imapac-navbar.in-dlx-on, which the module only
   prints when the new editor field cta_emphasis is set to loud / loud_proud.
   With the field off (the default) not one selector below matches, so every
   existing page renders byte for byte as it does today.

   The treatment also requires .in-cta-dl, the class the module only puts on
   the CTA when it is in download mode with at least one file attached, so a
   page with no documents keeps its plain Register link untouched.
   ====================================================================== */

/* ---------- tunables, with plain fallbacks first ---------- */
.imapac-navbar.in-dlx-on {
  --dlx-size: 17px;          /* label size, against the 14px menu */
  --dlx-pad-y: 15px;
  --dlx-pad-x: 30px;
  --dlx-ico: 19px;
  --dlx-top: var(--cta-bg, #C8221A);
  --dlx-bot: var(--cta-bg, #C8221A);
  --dlx-glow: 0 10px 26px rgba(0, 0, 0, 0.30);
  --dlx-drop: 17px;          /* how far the chip hangs below the bar */
}

/* Browsers that can mix colours get the real gradient and an accent glow.
   Everything is derived from the event's own --cta-bg, so each page keeps
   its palette and no new colour has to be picked in the editor. */
@supports (color: color-mix(in srgb, red, blue)) {
  .imapac-navbar.in-dlx-on {
    --dlx-top: color-mix(in srgb, var(--cta-bg, #C8221A) 78%, #FFFFFF);
    --dlx-bot: color-mix(in srgb, var(--cta-bg, #C8221A) 74%, #000000);
    --dlx-glow: 0 10px 28px color-mix(in srgb, var(--cta-bg, #C8221A) 52%, transparent);
  }
}

/* ---------- the chip itself ---------- */
.imapac-navbar.in-dlx-on .in-cta-dl {
  gap: 10px;
  font-size: var(--dlx-size);
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: var(--dlx-pad-y) var(--dlx-pad-x);
  background: var(--cta-bg, #C8221A);
  background-image: linear-gradient(135deg, var(--dlx-top) 0%, var(--cta-bg, #C8221A) 52%, var(--dlx-bot) 100%);
  box-shadow: var(--dlx-glow), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  z-index: 3;
}

.imapac-navbar.in-dlx-on .in-cta-dl:hover {
  filter: brightness(1.06) saturate(1.04);
  box-shadow: var(--dlx-glow), 0 4px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* keyboard ring stays visible against both the chip and the bar */
.imapac-navbar.in-dlx-on .in-cta-dl:focus-visible {
  outline: 3px solid var(--cta-text, #FFFFFF);
  outline-offset: 3px;
  box-shadow: var(--dlx-glow), 0 0 0 6px rgba(0, 0, 0, 0.35);
}

/* ---------- the download icon ---------- */
.imapac-navbar .in-dlx-ico {
  display: none;             /* only the loud variant shows it */
}

.imapac-navbar.in-dlx-on .in-dlx-ico {
  display: block;
  flex: none;
  width: var(--dlx-ico);
  height: var(--dlx-ico);
  color: currentColor;
}

.imapac-navbar.in-dlx-on .in-dlx-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* the arrow nudges down on hover: a one-off hint at what the chip does */
.imapac-navbar.in-dlx-on .in-dlx-ico .in-dlx-arrow {
  transition: transform 0.18s ease;
}

.imapac-navbar.in-dlx-on .in-cta-dl:hover .in-dlx-ico .in-dlx-arrow {
  transform: translateY(2px);
}

/* ---------- the attention ring ---------- */
/* Two or three pulses when the bar first appears, and at most one more run if
   the reader gets past the sponsorship block without opening it. The class is
   added and removed by the module's script, never by CSS, so once the script
   has spent its two runs the ring can never come back. */
.imapac-navbar.in-dlx-on .in-cta-dl::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2.5px solid var(--cta-text, #FFFFFF);
  opacity: 0;
  pointer-events: none;
  /* a hairline shadow keeps a white ring readable on a white navbar */
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.45));
}

.imapac-navbar.in-dlx-on .in-cta-dl.in-dlx-ping::after {
  animation: in-dlx-ping 1.15s cubic-bezier(0.25, 0.8, 0.3, 1) 3;
}

@keyframes in-dlx-ping {
  0%   { transform: scale(0.97); opacity: 0; }
  12%  { transform: scale(1);    opacity: 0.9; }
  75%  { transform: scale(1.26); opacity: 0; }
  100% { transform: scale(1.26); opacity: 0; }
}

/* ---------- optional: the chip sits proud of the bar ---------- */
.imapac-navbar.in-dlx-proud .in-cta-dl.in-cta-desktop {
  transform: translateY(var(--dlx-drop));
  box-shadow: var(--dlx-glow), 0 6px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* the shared .in-cta:hover lifts by 1px, which would cancel the drop */
.imapac-navbar.in-dlx-proud .in-cta-dl.in-cta-desktop:hover {
  transform: translateY(calc(var(--dlx-drop) - 2px));
}

/* ---------- narrow desktop: 901px to 1279px ----------
   The chip is wider than the old button, so in this band the menu tightens
   rather than wrapping: smaller gap, 13px labels, no extra letter spacing,
   and the chip itself steps down one size. The menu stays on one line and
   never runs under the chip because .in-menu-desktop may shrink (min-width:0)
   while the chip keeps flex-shrink: 0 from the base rule. */
@media (min-width: 901px) and (max-width: 1279px) {
  .imapac-navbar.in-dlx-on .in-menu-desktop {
    gap: 16px;
    min-width: 0;
  }
  .imapac-navbar.in-dlx-on .in-menu-link {
    font-size: 13px;
    letter-spacing: 0;
  }
  .imapac-navbar.in-dlx-on .in-cta-dl.in-cta-desktop {
    --dlx-size: 15px;
    --dlx-pad-y: 13px;
    --dlx-pad-x: 22px;
    --dlx-ico: 17px;
    /* the chip is shorter here, so it needs a bigger drop to hang the same
       7px below the bar as it does at full width */
    --dlx-drop: 21px;
    margin-left: 12px;
  }
}

/* Below 1100px the longest labels still fight the chip on some events, so the
   menu drops its letter spacing entirely and the gap tightens once more. */
@media (min-width: 901px) and (max-width: 1099px) {
  .imapac-navbar.in-dlx-on .in-menu-desktop { gap: 12px; }
  .imapac-navbar.in-dlx-on .in-menu-link { font-size: 12.5px; }
}

/* ---------- mobile: the chip comes out of the drawer ----------
   Today the CTA is hidden below 900px and only exists inside the burger
   drawer, which is the single easiest way to miss it. The loud variant keeps
   a compact chip in the bar next to the burger. It never sits proud here, so
   it cannot overlap the page, and it is a normal flow item inside .in-bar,
   so nothing is covered when the drawer opens over it.

   The full label plus the logo plus the burger does not fit a 390px bar, so
   the chip swaps to the short label, which is carried as a data attribute and
   printed by CSS. It is deliberately NOT a text node: backend/extractor-browser.js
   reads the text of .in-cta for the PDF's QR code, and generated content never
   reaches textContent. The button carries aria-label with the full wording, so
   the accessible name stays "Download PDF" whichever label is on screen. */

@media (max-width: 900px) {
  .imapac-navbar.in-dlx-on .in-cta-dl.in-cta-desktop {
    display: inline-flex;
    --dlx-size: 13px;
    --dlx-pad-y: 10px;
    --dlx-pad-x: 15px;
    --dlx-ico: 16px;
    gap: 7px;
    /* the desktop menu is hidden here, so space-between would park the chip in
       the middle of the bar: auto pushes it up against the burger instead */
    margin-left: auto;
    transform: none;
    letter-spacing: 0.2px;
  }
  .imapac-navbar.in-dlx-on .in-cta-dl.in-cta-desktop:hover {
    transform: none;
  }
  .imapac-navbar.in-dlx-on .in-bar {
    gap: 10px;
  }
  /* long label out, short label in, on the bar chip only: the drawer twin
     keeps the full wording */
  .imapac-navbar.in-dlx-on .in-cta-desktop .in-dlx-lab {
    display: none;
  }
  .imapac-navbar.in-dlx-on .in-cta-desktop[data-dlx-short]::before {
    content: attr(data-dlx-short);
    /* ::before is the first flex item by default, which would put the word
       ahead of the icon: order keeps the icon on the left */
    order: 1;
  }
  /* the drawer twin is now a duplicate, but a useful one: it keeps the
     full-width button for readers who opened the menu first */
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .imapac-navbar.in-dlx-on .in-cta-dl.in-dlx-ping::after {
    animation: none;
  }
  .imapac-navbar.in-dlx-on .in-cta-dl,
  .imapac-navbar.in-dlx-on .in-dlx-ico .in-dlx-arrow {
    transition: none;
  }
  /* the chip keeps its size, gradient and glow: nothing that shouted with
     motion is lost, because none of the loudness depended on motion */
}


/* ============================================
   FLOATING DOWNLOAD BUTTON  (cta_group.dl_float_enabled)
   A second copy of the same CTA that slides in once the reader is past the hero:
   bottom right on desktop, a bar across the bottom on phones. Opens the same
   pop-up; no element here carries .in-cta, which backend/extractor-browser.js
   reads to find the Register link for the PDF QR code.
   ============================================ */
/* ============================================================
   VARIANT 2 — floating download button ("in-fab")
   Everything here is NEW css, meant to be appended to
   imapac-navbar.module/module.css. Nothing above it changes.

   Deliberately no `.in-cta` class anywhere: extractor-browser.js
   line 96 reads `.imapac-navbar .in-cta` to find the event's
   Register CTA for the PDF QR code.

   The element is rendered OUTSIDE <nav> (same reason as the
   download dialog: the navbar is position:fixed and forms its own
   stacking context), so the navbar's CSS variables do not reach it.
   HubL therefore re-declares --cta-bg / --cta-text / --cta-radius
   on the wrapper, exactly the way `.in-dl` already does.
   ============================================================ */

.in-fab {
  --fab-gap: 24px;               /* distance from the viewport edges, desktop */
  --fab-bg: var(--cta-bg, #C8221A);
  --fab-fg: var(--cta-text, #FFFFFF);

  position: fixed;
  right: var(--fab-gap);
  bottom: var(--fab-gap);
  z-index: 8900;                 /* under the bar (9000), the drawer (9002) and the dialog (9500) */
  display: flex;
  align-items: center;
  font-family: inherit;

  /* hidden until the reader is past the hero; visibility keeps it out of the
     tab order while it is away, and it still transitions */
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0.28s linear;
}

.in-fab.in-fab-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.in-fab *,
.in-fab *::before,
.in-fab *::after { box-sizing: border-box; }

/* ---------- the button itself ---------- */
.in-fab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 15px 26px 15px 20px;
  border: none;
  border-radius: var(--cta-radius, 999px);
  background: var(--fab-bg);
  color: var(--fab-fg);
  font-family: inherit;
  font-size: calc(var(--menu-size, 14px) + 2px);
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 14px 34px rgba(15, 18, 28, 0.32), 0 0 0 3px rgba(255, 255, 255, 0.72);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.in-fab-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 20px 44px rgba(15, 18, 28, 0.38), 0 0 0 3px rgba(255, 255, 255, 0.85);
}

.in-fab-btn:focus { outline: none; }
.in-fab-btn:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: -6px;
  box-shadow: 0 14px 34px rgba(15, 18, 28, 0.32), 0 0 0 3px var(--fab-bg);
}

.in-fab-ico {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
}
.in-fab-ico svg { width: 17px; height: 17px; display: block; }

.in-fab-lab { white-space: nowrap; }

/* ---------- attention ring: three soft pulses, then it stops ---------- */
.in-fab.in-fab-on .in-fab-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: in-fab-ring 1.9s ease-out 0.45s 3;
}

@keyframes in-fab-ring {
  0%   { box-shadow: 0 0 0 0 var(--fab-bg); opacity: 0.55; }
  100% { box-shadow: 0 0 0 20px var(--fab-bg); opacity: 0; }
}

/* ---------- dismiss ---------- */
.in-fab-x {
  position: absolute;            /* the wrapper is position:fixed, so this anchors to it */
  top: -7px;
  right: -7px;                   /* tucked on the pill's top-right corner */
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #4A4A55;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(15, 18, 28, 0.3);
  transition: background 0.18s ease, transform 0.18s ease;
}
.in-fab-x:hover { background: #1F1F1F; transform: scale(1.08); }
.in-fab-x:focus { outline: none; }
.in-fab-x:focus-visible { outline: 3px solid var(--fab-bg); outline-offset: 2px; }

/* ---------- mobile: full-width bar pinned to the bottom ----------
   Measured against a compact round FAB at 390px: the bar carries the
   words, so the reader never has to guess what the circle does, and it
   still leaves the whole screen above it readable. */
@media (max-width: 900px) {
  .in-fab {
    right: 0;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
  }
  .in-fab.in-fab-on { transform: none; }

  .in-fab-btn {
    flex: 1 1 auto;
    justify-content: center;
    border-radius: 16px 16px 0 0;
    padding: 15px 56px calc(15px + env(safe-area-inset-bottom, 0px));
    font-size: 16px;
    box-shadow: 0 -8px 28px rgba(15, 18, 28, 0.28);
  }
  .in-fab-btn:hover { transform: none; }
  .in-fab-btn:focus-visible { box-shadow: 0 -8px 28px rgba(15, 18, 28, 0.28); }

  /* the pulse ring would bleed off three edges on a full-bleed bar */
  .in-fab.in-fab-on .in-fab-btn::after { animation: none; }

  .in-fab-x {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    margin-top: calc(env(safe-area-inset-bottom, 0px) / 2);
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: none;
  }
  .in-fab-x:hover { transform: translateY(-50%) scale(1.08); }
}

/* ---------- states where it must get out of the way ---------- */
/* mobile drawer open, download dialog open, footer CTA in view, dismissed */
.in-fab.in-fab-away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.96);
}
@media (max-width: 900px) {
  .in-fab.in-fab-away { transform: translateY(100%); }
}

/* ---------- reduced motion: it appears, it just does not perform ---------- */
@media (prefers-reduced-motion: reduce) {
  .in-fab,
  .in-fab-btn,
  .in-fab-x {
    transition: none;
  }
  .in-fab,
  .in-fab.in-fab-away { transform: none; }
  .in-fab.in-fab-on .in-fab-btn::after { animation: none; }
  .in-fab-btn:hover { transform: none; }
  .in-fab-x:hover { transform: none; }
  @media (max-width: 900px) {
    .in-fab-x, .in-fab-x:hover { transform: translateY(-50%); }
  }
}

/* Long menus push the chip off the right edge on a laptop: BMA 2027 carries ten items, so at
   1440px the button sat at x 1522 and nobody could see it (which is part of why it was missed).
   The script measures the bar and adds these in order: first tighten the menu, then, if the chip
   still does not fit, hand the menu to the burger, which already holds every item and the CTA. */
.imapac-navbar.in-dlx-tight .in-menu-desktop { gap: 16px; }
.imapac-navbar.in-dlx-tight .in-menu-link {
  font-size: 12.5px;
  letter-spacing: 0;
}
.imapac-navbar.in-dlx-burger .in-menu-desktop { display: none; }
@media (min-width: 901px) {
  .imapac-navbar.in-dlx-burger .in-hamburger { display: flex; }
}

/* The HubSpot chat launcher owns the bottom-right corner of every event page and sits above
   everything, so the floating button takes the opposite corner instead of hiding under it.
   On phones the button is a full-width bar, so it keeps its label clear of the launcher and
   moves its close control to the left. */
.in-fab {
  left: var(--fab-gap);
  right: auto;
}
@media (max-width: 900px) {
  .in-fab { left: 0; right: 0; }
  .in-fab-btn { padding-right: 92px; padding-left: 56px; }
  .in-fab-x { left: 12px; right: auto; }
}


/* ============================================
   EDGE DOWNLOAD TAB  (cta_group.dl_edge_tab)
   Joyboy picked this over the loud chip and the floating pill: it reads as its own object on
   the page edge, it can be closed, and with it on the bar carries no download button at all.
   ============================================ */
/* ============================================================================
   VARIANT 3 — "edge tab plus one-time invitation"
   ADDITIONAL css only. Loaded after navbar.css; nothing here overrides an
   existing navbar rule, so every page renders exactly as today until the new
   editor field switches the tab on.

   Everything is prefixed .in-et- (edge tab). The class `in-cta` is NEVER used,
   so backend/extractor-browser.js keeps reading the real Register CTA.

   Colours come from the module's own vars: --cta-bg, --cta-text, --cta-radius,
   --menu-size. New vars, all with defaults:
     --et-appear-shadow   drop shadow under the tab
     --et-ink             card heading colour
   ============================================================================ */

/* ---------- container: right edge, vertically centred, under the navbar ---------- */
.in-et {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 8900;              /* below the bar (9000), the overlay (9001), the
                                 drawer (9002) and the dialog (9500) */
  display: flex;
  flex-direction: row;        /* card first in the DOM, tab last => card sits left */
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
  font-family: inherit;
  visibility: hidden;
  transition: visibility 0s linear 0.42s;
}
.in-et.in-et-on {
  visibility: visible;
  transition: visibility 0s;
}
.in-et *,
.in-et *::before,
.in-et *::after { box-sizing: border-box; }

/* ---------- the tab ---------- */
.in-et-tab {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 11px 22px;
  background: var(--cta-bg, #C8221A);
  color: var(--cta-text, #FFFFFF);
  border-radius: min(var(--cta-radius, 999px), 18px) 0 0 min(var(--cta-radius, 999px), 18px);
  box-shadow: var(--et-appear-shadow, -6px 0 24px rgba(15, 18, 28, 0.30));
  font-family: inherit;
  font-size: var(--menu-size, 14px);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(calc(100% + 10px));
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.28s ease, filter 0.2s ease;
}
.in-et.in-et-on .in-et-tab { opacity: 1; transform: none; }

.in-et-tab:hover { filter: brightness(1.08); transform: translateX(-3px); }
.in-et-tab:focus { outline: none; }
.in-et-tab:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: -6px;
}

.in-et-ico { display: block; width: 20px; height: 20px; flex: none; }
.in-et-ico svg { width: 100%; height: 100%; display: block; }

/* vertical-rl + rotate(180deg) makes the words read bottom to top */
.in-et-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

/* one gentle nudge when the tab first arrives, twice, then it sits still */
@keyframes in-et-nudge {
  0%, 100% { transform: none; }
  50%      { transform: translateX(-7px); }
}
.in-et.in-et-on .in-et-tab.in-et-nudge { animation: in-et-nudge 1.1s ease-in-out 2; }

/* ---------- the one-time invitation card ---------- */
.in-et-card {
  position: relative;
  width: 326px;
  max-width: calc(100vw - 108px);
  padding: 18px 18px 16px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 18, 28, 0.26);
  opacity: 0;
  transform: translateX(26px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.in-et-card[hidden] { display: none; }
.in-et-card.in-et-card-on { opacity: 1; transform: none; }

.in-et-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  color: #8A8F9C;
  cursor: pointer;
}
.in-et-x:hover { background: rgba(0, 0, 0, 0.06); color: #1F1F1F; }
.in-et-x:focus-visible { outline: 2px solid var(--cta-bg, #C8221A); outline-offset: 2px; }

.in-et-eyebrow {
  margin: 0 34px 6px 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cta-bg, #C8221A);
}
.in-et-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.28;
  color: var(--et-ink, #16233D);
}

.in-et-docs { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.in-et-doc {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #4B5263;
}
.in-et-doc-ico {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #EEF0F6;                                              /* fallback first */
  background: color-mix(in srgb, var(--cta-bg, #C8221A) 13%, #FFFFFF);
  color: var(--cta-bg, #C8221A);
}
.in-et-doc-ico svg { width: 15px; height: 15px; display: block; }
.in-et-doc b { color: var(--et-ink, #16233D); font-weight: 700; }

.in-et-actions { display: flex; align-items: center; gap: 10px; }
.in-et-go {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  flex: 1 1 auto;
  padding: 11px 16px;
  background: var(--cta-bg, #C8221A);
  color: var(--cta-text, #FFFFFF);
  border-radius: var(--cta-radius, 999px);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.in-et-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.in-et-go:focus-visible { outline: 3px solid var(--cta-bg, #C8221A); outline-offset: 2px; }


/* ---------- mobile: the tab becomes a bottom bar ---------- */
/* 900px matches the breakpoint already hardcoded in the module's own media
   queries, so the bar takes over at exactly the width where the desktop CTA
   disappears into the drawer. */
@media (max-width: 900px) {
  .in-et {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    transform: none;
  }
  .in-et-tab {
    width: 100%;
    min-height: 52px;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 15px 18px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    font-size: 15px;
    letter-spacing: 0.1em;
    transform: translateY(100%);
    box-shadow: 0 -6px 24px rgba(15, 18, 28, 0.26);
  }
  .in-et.in-et-on .in-et-tab { transform: none; }
  .in-et-tab:hover { transform: none; }
  .in-et.in-et-on .in-et-tab.in-et-nudge { animation: none; }
  .in-et-label { writing-mode: horizontal-tb; transform: none; }

  .in-et-card {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    transform: translateY(18px);
  }
  .in-et-card.in-et-card-on { transform: none; }

  /* the bar never eats the last line of the page: the script adds this class
     while the bar is up on a narrow screen and removes it again */
  body.in-et-barpad { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- readers who ask for less movement get none ---------- */
@media (prefers-reduced-motion: reduce) {
  .in-et,
  .in-et-tab,
  .in-et-card,
  .in-et-go { transition: none !important; }
  .in-et-tab,
  .in-et-card { transform: none !important; opacity: 1 !important; }
  .in-et-tab:hover { transform: none !important; }
  .in-et.in-et-on .in-et-tab.in-et-nudge { animation: none !important; }
}

/* On a phone the bottom bar runs the full width and the HubSpot chat launcher parks on its right
   end, so the label sits clear of it rather than under it. */
@media (max-width: 900px) {
  .in-et-tab { padding-right: 84px; }
}

/* with "Not now" gone the primary button fills the card's action row */
.in-et-actions .in-et-go { width: 100%; }

/* Scrolling back up to the hero tucks the tab away, but an open invitation card stays on screen
   until the reader closes it or takes a document. */
.in-et.in-et-has-card {
  visibility: visible;
  transition: visibility 0s;
}

/* On a phone the bottom-right corner belongs to HubSpot's chat: its proactive greeting panel
   (about 166 x 274px) landed straight on top of the invitation card, hiding the document lines and
   half the button. The card therefore sits under the navbar instead, where nothing competes. */
@media (max-width: 900px) {
  .in-et-card {
    top: calc(var(--navbar-height, 72px) + 12px);
    bottom: auto;
    transform: translateY(-14px);
  }
  .in-et-card.in-et-card-on { transform: none; }
}