/* Laundry header — transparent bar overlaying the first slide.
   Self-contained: nothing here depends on css/layout/header.css, and every
   selector is nested under .laundry-header so nothing leaks back out. */

.laundry-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
}

.laundry-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
}

.laundry-header__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.laundry-header__brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.laundry-header__logo {
  height: clamp(50px, 3.125vh, 60px);
  width: auto;
  display: block;
}

.laundry-header__logo--wordmark {
  height: 46px;
}

/* Nav */
.laundry-header__nav .menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.13vw, 60px);
  margin: 0;
  padding: 0;
  background: none;
}

.laundry-header__nav .menu li {
  margin: 0;
}

.laundry-header__nav .menu a {
  display: block;
  padding: 0;
  color: #fff;
  font-size: clamp(20px, 2vh, 34px);
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.laundry-header__nav .menu a.is-active {
  font-weight: bold;
}

.page-node-type-laundry-about-us-page .laundry-header__nav .menu a,
.page-node-type-laundry-about-us-page .laundry-header__nav .menu a:hover,
.page-node-type-laundry-about-us-page .laundry-header__nav .menu a:focus,
.page-node-type-coming-soon-page .laundry-header__nav .menu a,
.page-node-type-coming-soon-page .laundry-header__nav .menu a:hover,
.page-node-type-coming-soon-page .laundry-header__nav .menu a:focus {
  color: #3e3e3e;
}

.laundry-header__nav .menu a:hover,
.laundry-header__nav .menu a:focus {
  color: #fff;
  opacity: 0.7;
}

/* Hamburger — mobile only */
.laundry-header__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.page-node-type-laundry-about-us-page .laundry-header__toggle span,
.page-node-type-coming-soon-page .laundry-header__toggle span {
  background: #3e3e3e;
}

.laundry-header__toggle span {
  width: 25px;
  height: 3px;
  background: #fff;
  display: block;
}

.laundry-header__overlay {
  display: none;
}

.laundry-logo {
  color: white;
  line-height: 1.2;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px, min(1.67vh, 0.94vw), 18px);
  margin-bottom: 0;
}

.laundry-logo-white {
  color: white;
}

.laundry-logo-blue {
  color: var(--color-dark-blue);
}

/* Slide-in panel: everything below 1200px. */
@media (max-width: 1199.98px) {
  .laundry-header__nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 350px;
    height: 100vh;
    height: 100dvh;
    background: #f6f6f6;
    padding: 80px 24px;
    transition: right 0.3s ease;
    z-index: 1;
  }

  .laundry-header.nav-is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
    animation: laundry-overlay-fade 0.3s ease;
  }

  @keyframes laundry-overlay-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .laundry-header__nav .menu a {
    color: #3e3e3e;
  }

  .laundry-header__nav .menu a:hover,
  .laundry-header__nav .menu a:focus {
    color: #3e3e3e;
    opacity: 0.7;
  }

  .laundry-header__nav.is-open {
    right: 0;
  }

  .laundry-header__toggle.is-open {
    position: fixed;
    top: 34px;
    right: 20px;
  }

  .laundry-header__toggle.is-open span {
    background: #3e3e3e;
  }
}

@media (min-width: 768px) {
  .laundry-header__inner {
    padding: 24px 40px;
  }

  .laundry-header__toggle.is-open {
    position: fixed;
    top: 38px;
    right: 40px;
  }
}

@media (min-width: 992px) {
  .laundry-header__inner {
    padding: 28px 56px;
  }

  .laundry-header__logo,
  .laundry-header__logo--wordmark {
    height: 54px;
  }

  .laundry-header__toggle.is-open {
    top: 46px;
    right: 56px;
  }
}

/* Full horizontal nav: 1200px and up. */
@media (min-width: 1200px) {
  .laundry-header__toggle {
    display: none;
  }

  .laundry-header__nav .menu {
    flex-direction: row;
  }
}