/* B2C Signup - the little that Tailwind utilities cannot express in this
   project's Tailwind 2 setup.

   Palette used (theme tokens only):
     #FFFFFF white   #E6F1F8 light-blue   #121212 dark-gray
     #006FBA blue
     #E6E8EA neutral card border (same value the FAQ module uses) */

/* The wizard's headings run at weight 700; theme-overrides.css loads after
   main.css and re-asserts 600 on .h1-.h6, so .font-bold alone loses. The
   double-class selector out-ranks the theme's single-class rules. */
.b2c-signup .b2c-signup__heading {
  font-weight: 700;
}

/* ---- Category cards (plain links) ----
   Background and text color come from Tailwind classes on the markup
   (bg-white, text-dark-gray); this block only carries what utilities
   cannot express. NOTE on the pulse animation below: while it runs it
   owns border-color, transform and box-shadow outright (animations beat
   ALL normal declarations, inline styles included - verified in
   browser), so hover/active states deliberately change only
   background-color and color. */
.b2c-signup__card {
  min-height: 72px;
  border: 1px solid #E6E8EA;
  text-decoration: none;
  transition: background-color 300ms ease, border-color 300ms ease,
              color 300ms ease,
              transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 300ms ease;
}
/* The theme's global link hover underline must never appear on cards. */
.b2c-signup__card:hover,
.b2c-signup__card:focus,
.b2c-signup__card:active {
  text-decoration: none;
}
/* Pressed state doubles as touch feedback where hover doesn't exist. */
.b2c-signup__card:active {
  background-color: #006FBA;
  color: #FFFFFF;
}
/* Selected state, stamped by module.js: on a category card from click
   until the navigation lands, and on the other-areas card while its
   dialog is open. Same engaged look as hover. The pulse must be OFF, not
   paused - its keyframes animate border-color/box-shadow and would
   override the blue for as long as the animation exists. The .b2c-signup
   prefix keeps this above the later .b2c-signup__card animation rule
   even when the entrance-animation context classes are absent (setting
   "Enable entrance animation" off). */
.b2c-signup .b2c-signup__card--selected {
  background-color: #006FBA;
  border-color: #006FBA;
  color: #FFFFFF;
  animation: none;
}

/* ---- Idle attention pulse (smooth variant of the pflegia.de pattern) ----
   A soft wave walks across the cards every 10 seconds (staggered 1s per
   card): 104% scale, blue border, faint glow ring, ease-in-out. Hovering
   a card pauses its pulse so it never fights the hover lift. */
/* #00548C is the theme blue darkened ~25% - developer-approved,
   module-scoped shade for the pulse border (no dark blue exists in
   tailwind.config.js). */
/* The inset ring doubles the visible border to ~2px at the pulse peak
   without touching border-width, so the layout never shifts a pixel. */
@keyframes b2c-signup-pulse {
  0%   { border-color: #E6E8EA; transform: scale(1);    box-shadow: inset 0 0 0 0 rgba(0, 84, 140, 0), 0 0 0 0 rgba(0, 84, 140, 0); }
  10%  { border-color: #00548C; transform: scale(1.04); box-shadow: inset 0 0 0 1px #00548C, 0 0 0 4px rgba(0, 84, 140, 0.12); }
  20%  { border-color: #E6E8EA; transform: scale(1);    box-shadow: inset 0 0 0 0 rgba(0, 84, 140, 0), 0 0 0 0 rgba(0, 84, 140, 0); }
  100% { border-color: #E6E8EA; transform: scale(1);    box-shadow: inset 0 0 0 0 rgba(0, 84, 140, 0), 0 0 0 0 rgba(0, 84, 140, 0); }
}
/* 7s loop with a wider pulse window (0-20%): each card swells for ~1.4s,
   so with the 1s stagger neighbouring pulses overlap slightly and the
   wave flows instead of ticking. Last card settles ~5.4s in, next wave
   starts at 8s - a short breather, never a stall. */
.b2c-signup__card {
  animation: b2c-signup-pulse 7s ease-in-out infinite;
}
.b2c-signup__card:nth-child(1) { animation-delay: 1s; }
.b2c-signup__card:nth-child(2) { animation-delay: 2s; }
.b2c-signup__card:nth-child(3) { animation-delay: 3s; }
.b2c-signup__card:nth-child(4) { animation-delay: 4s; }

/* While the entrance reveal is still pending, the pulse must not run: its
   transform keyframes would override the reveal's translateY and the card
   would never travel. Once .is-revealed lands, the pulse starts counting
   its own delay - the entrance (max ~950ms) is done before the first
   pulse (1s) begins. Without the reveal context (animation toggled off or
   scripts blocked) this selector never matches and the pulse simply runs. */
.crn-js [data-b2c-signup-animate] .b2c-signup__card[data-reveal]:not(.is-revealed) {
  animation: none;
}

/* hover: hover keeps the fill from sticking after a tap on touch screens.
   Only background/color here: the running pulse owns border-color,
   transform and box-shadow (see the note on the card block), so
   declaring them would be dead code. Pausing the pulse keeps the wave
   from repainting the hovered card. */
@media (hover: hover) {
  .b2c-signup__card:hover {
    background-color: #006FBA;
    color: #FFFFFF;
    animation-play-state: paused;
  }
}
.b2c-signup__card:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* ---- "Other areas" popover ----
   Positioning and backdrop are Tailwind classes on the markup (fixed
   overlay + centered max-w-xl panel, borderless with the base shadow,
   like the wizard's modal). The z-index must clear the theme header
   (nav: fixed, z-index 100; its mobile overlay: 9999) or the header
   stays undimmed above the backdrop. */
.b2c-signup__popover {
  z-index: 10000;
}

/* Same 700-weight deviation as the section heading (see above). */
.b2c-signup__popover h2,
.b2c-signup__popover h3 {
  font-weight: 700;
}

/* Padding + negative margin grow the hit area to 40x40px without moving
   the 16px icon - the bare SVG alone is far below touch-target guidance. */
.b2c-signup__close {
  padding: 12px;
  margin: -12px;
}
.b2c-signup__close:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Initial focus lands on the panel itself (tabindex="-1") so the dialog
   announces without arming a control; no ring needed on the container. */
.b2c-signup__popover-panel:focus {
  outline: none;
}

/* iOS Safari: 100vh overshoots the visual viewport (browser chrome), which
   can center the panel partly behind the bottom toolbar. Dynamic viewport
   units track the real visible height. */
@supports (min-height: 100dvh) {
  .b2c-signup__popover-centering {
    min-height: 100dvh;
  }
}

/* ---- Pills ----
   Wizard-parity: 8px 12px 8px 8px padding, 6px radius, 100px min-width,
   16px selection circle. One-click buttons now, so the circle is a
   decorative span; it fills blue the moment the pill is chosen, right
   before navigation. lineHeight utilities are disabled in this Tailwind
   build, hence the explicit 20px. */
.b2c-signup__pill {
  display: inline-flex;
  align-items: center;
  min-width: 100px;
  padding: 8px 12px 8px 8px;
  background-color: #FFFFFF;
  border: 1px solid #E6E8EA;
  border-radius: 6px;
  color: #121212;
  /* Most pills are links, and the theme's global `a` rule sets weight 700.
     Reset it here so link pills and the 'other' button pill match. */
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease;
}
/* Most pills are links now - the theme's global link underline must
   never appear on them. */
.b2c-signup__pill:hover,
.b2c-signup__pill:focus,
.b2c-signup__pill:active {
  text-decoration: none;
  color: #121212;
}
.b2c-signup__pill-circle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 1px solid #E6E8EA;
  border-radius: 9999px;
  background-color: #FFFFFF;
  transition: background-color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) {
  .b2c-signup__pill:hover {
    border-color: #006FBA;
  }
}
.b2c-signup__pill--selected {
  background-color: #E6F1F8;
  border-color: #006FBA;
}
.b2c-signup__pill--selected .b2c-signup__pill-circle {
  border-color: #006FBA;
  background-color: #006FBA;
  box-shadow: inset 0 0 0 3px #FFFFFF;
}
.b2c-signup__pill:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* ---- Free-text block ----
   Developer-approved error red, deliberately module-scoped: the theme
   palette has no red and tailwind.config.js / main.css must stay
   untouched. #DC2626 passes WCAG small-text contrast on white. */
.b2c-signup__error {
  color: #DC2626;
}
/* 16px input font: anything smaller triggers iOS Safari's auto-zoom on
   focus, which is disorienting inside a fixed-position dialog. */
.b2c-signup__input {
  border: 1px solid #E6E8EA;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  color: #121212;
  background-color: #FFFFFF;
}
.b2c-signup__input:focus {
  outline: none;
  border-color: #006FBA;
}
.b2c-signup__input:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 1px;
}

/* Stop all motion for visitors who opt out (rule 10). */
@media (prefers-reduced-motion: reduce) {
  .b2c-signup__card,
  .b2c-signup__pill,
  .b2c-signup__pill-circle {
    animation: none;
    transition: none;
  }
}

/* =========================================================================
   Scroll reveal (module.js companion, theme convention - see
   content-and-media.module for the reference implementation)

   Gated behind .crn-js, stamped on <html> by the inline script in
   module.html only while the animation setting is on. Scripts blocked =
   class absent = these rules never match = content renders visible.

   Elements carry data-reveal="fade-up" and a unitless --reveal-index;
   everything releases from the single moment the card grid trips the
   observer, sequenced purely by index. 550ms travel, 80ms stagger.
   ========================================================================= */
.crn-js [data-b2c-signup-animate] [data-reveal] {
  --reveal-step: calc(var(--reveal-index, 0) * 80ms);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 330ms ease-out var(--reveal-step),
    transform 550ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-step);
}
.crn-js [data-b2c-signup-animate] [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* module.js stamps .is-settled ~1.1s after the reveal, once the entrance
   travel is over: the reveal's opacity/transform-only transition (which
   overrides the base one) is swapped back for the full interactive set,
   so the hover fill, text color, lift and shadow all glide again. */
.crn-js [data-b2c-signup-animate] .b2c-signup__card[data-reveal].is-settled {
  transition: background-color 300ms ease, border-color 300ms ease,
              color 300ms ease,
              transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 300ms ease;
}

/* Visitors who ask for reduced motion get the finished state immediately.
   module.js applies the same short-circuit, so nothing depends on timing. */
@media (prefers-reduced-motion: reduce) {
  .crn-js [data-b2c-signup-animate] [data-reveal],
  .crn-js [data-b2c-signup-animate] [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}