/*
 * app.css — Poplin-owned widget skeletons, forked from the structural
 * Webflow rules in poplin-2.webflow.shared.min.css as widgets migrate
 * off webflow.js (w-nav → pop-nav). Driven by /js/app.js.
 *
 * Load order matters: link this BEFORE poplin-2.webflow.shared.min.css.
 * The original w-* rules sit at the top of that file, so later site
 * (.c-*) rules of equal specificity override them — these forks must
 * keep losing those same cascade fights.
 *
 * State markers keep their Webflow names (.w--open, .w--current,
 * [data-nav-menu-open], .w--nav-link-open, .w--nav-dropdown-*-open):
 * no script binds to them, and the shared stylesheet's rules for them
 * keep applying to our markup for free.
 *
 * Scope: only the configuration this site uses — data-animation
 * "over-left" with data-collapse "all". Other Webflow nav variants
 * (underline animations, medium/small/tiny collapse breakpoints,
 * over-right) were intentionally not ported.
 */

/* ── pop-nav (fork of .w-nav) ─────────────────────────────────────── */

.pop-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}
.pop-nav:before,
.pop-nav:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}
.pop-nav:after {
  clear: both;
}
.pop-nav-brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}
.pop-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}
.pop-nav-link.w--current {
  color: #0082f3;
}
.pop-nav-menu {
  float: right;
  position: relative;
}
.pop-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}
.pop-nav-overlay [data-nav-menu-open] {
  top: 0;
}
.pop-nav[data-animation="over-left"] .pop-nav-overlay {
  width: auto;
}
.pop-nav[data-animation="over-left"] .pop-nav-overlay,
.pop-nav[data-animation="over-left"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}
.pop-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}
.pop-nav-button:focus {
  outline: 0;
}
.pop-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}
.pop-nav[data-collapse="all"] .pop-nav-menu {
  display: none;
}
.pop-nav[data-collapse="all"] .pop-nav-button {
  display: block;
}

/* ── pop-dropdown (fork of .w-dropdown) ───────────────────────────── */
/* Only the click-toggle config the site uses (data-hover="false",
   data-delay="0" — the two nav "Laundry Help" menus). Driven by app.js
   initDropdowns. State classes keep Webflow names: .w--open here, and
   the generic .w--nav-dropdown-*-open rules in the shared css keep
   applying while the nav menu is open. */

.pop-dropdown {
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}
.pop-dropdown-toggle {
  vertical-align: top;
  /* every page's head normalize block overrode Webflow's #222 with
     `.w-dropdown-toggle { color: inherit }` — fold that net result in */
  color: inherit;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding: 20px 40px 20px 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}
.pop-dropdown-toggle:focus {
  outline: 0;
}
.pop-dropdown-list {
  background: #ddd;
  min-width: 100%;
  display: none;
  position: absolute;
}
.pop-dropdown-list.w--open {
  display: block;
}

/* ── pop-form (fork of .w-form) ───────────────────────────────────── */
/* Wrapper only (ZipCheck.astro). The inner w-input / w-form-done /
   w-form-fail classes are pure shared-css styling and keep their names —
   the pages' zip script drives all visible feedback. */

.pop-form {
  margin: 0 0 15px;
}

/* ── pop-background-video (fork of .w-background-video) ───────────── */
/* No JS: the videos carry native autoplay/loop/muted/playsinline.
   (webflow.js only bound .w-background-video--control play/pause
   buttons, which this site never renders.) */

.pop-background-video {
  color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;
}
.pop-background-video > video {
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}
.pop-background-video > video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

/* ── IX2 forks (pure CSS — IX2 is retired) ────────────────────────── */

/* nav dropdown chevron (fork of IX2 a-201/a-202: rotate 180° when open).
   Scoped to the two nav menus only: #sidemenu = NavBar's menu wrapper,
   .pop-nav = the migrated hero navs. */
#sidemenu .c-nav_menu-dropdown_toggle.w--open .c-nav_menu-dropdown_icon,
.pop-nav .c-nav_menu-dropdown_toggle.w--open .c-nav_menu-dropdown_icon {
  transform: rotate(180deg);
}

/* hamburger hover (fork of IX2 a-8/a-9: lines grow to full width).
   Scoped to the navs' menu buttons by their existing id (NavHero and
   NavBar both carry id="menu-button" — Webflow legacy duplicate, fine
   for CSS matching). */
#menu-button .c-line-hamburguer {
  transition: width 300ms ease;
}
#menu-button:hover .c-line-hamburguer.cc-s,
#menu-button:hover .c-line-hamburguer.cc-m {
  width: 1rem;
}

/* FAQ toggle hover (fork of IX2 a-5/a-6 + a-28/a-29 + the a-52/53,
   a-162/163, a-168/169 clones): while hovering a question row, its +/−
   circle turns dark green (--green-500) with a white glyph (the svgs
   stroke currentColor) and a matching border; revert on unhover.
   Scoped to #home-faq (FaqSection.astro) and the pop-faq container
   marker (the migrated inline-FAQ pages) — IX2 bound this class-wide
   on .c-faq_toggle, so every migrated FAQ gets it. Careers is inside
   pop-faq too but its icon wraps are c-dropdow_icon-wrap-careers:
   never matched by IX2, correctly not matched here.
   IX2 timings: hover-in 300ms both levels; hover-out 300ms top-level,
   500ms child rows — the base rule carries the out-duration, the
   :hover rule overrides to the in-duration. */
#home-faq .c-faq_toggle .c-dropdow_icon-wrap.cc-bg_white,
.pop-faq .c-faq_toggle .c-dropdow_icon-wrap.cc-bg_white {
  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    color 300ms ease;
}
#home-faq .c-faq_toggle .c-dropdow_icon-wrap-child,
.pop-faq .c-faq_toggle .c-dropdow_icon-wrap-child {
  transition:
    background-color 500ms ease,
    border-color 500ms ease,
    color 500ms ease;
}
.pop-faq .c-faq_toggle .c-dropdow_icon-wrap-child {
  /* home-v3/business-v3 baked IX2's initial state as inline color:#000
     on these wraps (stripped when the hover was forked — inline styles
     would beat the :hover rule); the black glyph rest state lives here.
     pop-faq scope only: index's FaqSection children rest at the
     inherited #4b4b4b and must stay that way. */
  color: #000;
}
#home-faq .c-faq_toggle:hover .c-dropdow_icon-wrap.cc-bg_white,
#home-faq .c-faq_toggle:hover .c-dropdow_icon-wrap-child,
.pop-faq .c-faq_toggle:hover .c-dropdow_icon-wrap.cc-bg_white,
.pop-faq .c-faq_toggle:hover .c-dropdow_icon-wrap-child {
  background-color: rgb(40, 86, 82);
  border-color: rgb(40, 86, 82);
  color: #fff;
  transition-duration: 300ms;
}

/* Start Order arrow rest state (fork of IX2 a-22 group 0, which was
   applied at load via useFirstGroupAsInitialState): cc-2/cc-3 park
   off-circle at -3em. Opt-in via the pop-cta marker class — only
   MainCTA.astro instances get the relay; inline Webflow CTAs are left
   alone until each page migrates. The hover relay itself is serial
   multi-step and lives in app.js (initCtaArrowRelays) — inline styles
   take over from here on first hover. */
.pop-cta .c-button_icon.cc-2,
.pop-cta .c-button_icon.cc-3 {
  transform: translateX(-3em);
}

/* pop-slider (step-form) — fork of the w-slider skeleton for the pricing
   calculator. The real container/step layout comes from the page's
   .c-pricing-calculator_* classes; the generic slider only needed a
   show-one-step-at-a-time rule. Self-driving pages (pricing / lpc /
   how-it-works) also style their own steps via .cc-force-visible /
   .cc-force-hidden with !important, which override these. Scoped to
   pop-slider-auto so the self-driving pages (which own their .pop-slide
   display via .cc-force-visible/.cc-force-hidden) are untouched. */
.pop-slider-auto .pop-slide {
  display: none;
}
.pop-slider-auto .pop-slide.pop-slide-active {
  display: block;
}

/* pop-lightbox — minimal modal (fork of w-lightbox). Built in app.js
   (initPopLightbox); only how-it-works uses it (one YouTube embed). */
.pop-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  background: rgba(0, 0, 0, 0.9);
}
.pop-lightbox-content {
  position: relative;
  width: min(940px, 92vw);
}
.pop-lightbox-content iframe,
.pop-lightbox-content img {
  display: block;
  width: 100%;
  aspect-ratio: 940 / 528;
  height: auto;
  border: 0;
}
.pop-lightbox-close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
}