/* ==========================================================================
   Waydee custom overrides — layered on top of the Webflow stylesheet.
   ========================================================================== */

/* ---- Logo (top-left), always visible ---- */
/* The template hides the desktop navbar below 991px in favour of a mobile
   menu we removed, so force it visible at every breakpoint. */
.navbar-desktop { display: flex !important; }
.waydee-logo { height: 1.4em; width: auto; display: block; }

/* ---- Reliable infinite marquee (the scrolling banners) ----
   Driven purely by CSS + a tiny JS that duplicates the content so each half
   is always at least as wide as the screen (no gaps for short text like
   "Coming Soon"). */
.marquee-wrapper.comming-soon {
  /* NOTE: no overflow:hidden here. The tight line-height (70%) on the big
     headers makes the glyphs taller than the line box, so clipping here would
     shave the tops/bottoms of the letters. Like the original template, we let
     the (24em-tall) .section-wrapper clip the horizontal overflow instead. */
  overflow: visible;
  width: 100%;
  /* !important beats the template's more-specific, responsive
     `.left-to-right.page-5 { justify-content: flex-end }` rules that
     otherwise push the "Coming Soon" content off-screen and break the loop. */
  justify-content: flex-start !important;
  flex-wrap: nowrap;
}
.marquee-wrapper.comming-soon .marquee-half {
  animation: waydee-marquee-left 24s linear infinite;
  will-change: transform;
}
.marquee-wrapper.comming-soon.left-to-right .marquee-half {
  animation: waydee-marquee-right 24s linear infinite;
}
@keyframes waydee-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes waydee-marquee-right {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-wrapper.comming-soon .marquee-half { animation: none; }
}

/* ---- Signup form feedback ---- */
.form-button { cursor: pointer; }

.w-form-done,
.w-form-fail {
  border-radius: .6em;
  padding: .6em .8em !important;
  margin-top: .4em;
  font-size: .5em;
  line-height: 1.3;
}
.w-form-done {
  color: #10240a;
  background-color: #cdeeb0;
}
.w-form-fail {
  color: #5a1414;
  background-color: #ffdede;
}

/* ---- Slogan + centred middle stack ---- */
/* The stack takes over the vertical-centring the middle row used to do, and
   places the slogan just above the countdown card. */
.middle-stack {
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4em;
}
.page-5-middle-items {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.waydee-slogan {
  margin: 0;
  color: #000;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  /* Sized in em so it scales with the vw-based root: stays on ONE line at
     every screen width. white-space:nowrap guarantees no wrapping. */
  font-size: 2em;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}

/* ==========================================================================
   Responsive — the template already ships a mobile layout tuned for its
   2.06vw base font, so we DON'T rescale the base (that caused overflow).
   We only make the (logo-only) navbar span the screen nicely and enlarge the
   logo enough to be legible at each breakpoint.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .navbar-desktop { width: 92%; }
  .waydee-logo { height: 1.7em; }
}

@media screen and (max-width: 767px) {
  .navbar-desktop { width: 92%; margin-top: 1.6em; }
  .waydee-logo { height: 3.2em; }
  .middle-stack { gap: 2.4em; }
}

@media screen and (max-width: 479px) {
  .navbar-desktop { width: 90%; }
  .waydee-logo { height: 4em; }
}