/* ==========================================================================
   Delta Waste sitewide header
   Loaded right after wostin-responsive.css on every page that carries the
   theme header (header.main-header-two). It restyles the existing markup only:
   no page's links change. wostin.js still builds the phone drawer from
   .main-menu__list and the sticky bar from .main-menu, and dws-analytics.js
   still classifies taps by header, .stricky-header and .mobile-nav__wrapper.

   Desktop (1200px and up): a slim black strip (phone, Employment Application,
   social) above one full-width yellow bar with the black logo, the menu and a
   Pay My Bill button. Phones and tablets: one compact bar with the logo, a
   call button, Pay My Bill and the menu button.

   Brand guide (DWS-002, 5.2025): black #000, yellow #FFBE00, white, grey
   #6E6E6E only. The logo is black straight on the yellow bar, an approved
   pairing (Austin chose it over a yellow logo on a black tab, 2026-09-30).
   Every page's markup carries the yellow logo file, so a filter turns it
   black here: no markup change, no extra download, the alt text unchanged.
   The logo files are 200px wide, so the logo never shows wider than 190px.
   The phone drawer stays black with the yellow logo (also approved). The
   orders@ email stays in the markup (and in the phone drawer) but is hidden
   in the strip.

   Change this file? Bump ?v= on every page that links it (CSS is cached for
   a month).
   ========================================================================== */

:root {
  --dws-yellow: #ffbe00;
  --dws-ink: #000;
  --dws-grey: #6e6e6e;
  --dws-strip: 40px;
  --dws-bar: 80px;
  --dws-logo: 190px;
}

/* The orders@ email is off the header at every width (the phone drawer keeps it) */
.main-header-two .main-header-two__contact-list li + li { display: none; }

/* ---------- The bar: full width, logo layer over menu layer ---------- */
.main-header-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--dws-yellow);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .06);
}
.main-header-two > .main-header-two__top,
.main-header-two > .main-menu-two__main-menu { grid-area: 1 / 1; }
.main-header-two .main-header-two__top {
  position: relative;
  z-index: 2;
  background: transparent;
  pointer-events: none;
}
.main-header-two .main-header-two__logo,
.main-header-two .main-header-two__top-right { pointer-events: auto; }
.main-header-two .main-menu-two__main-menu { position: relative; z-index: 1; }

.main-header-two .main-header-two__top-inner {
  height: var(--dws-bar);
  padding: 0;
  align-items: stretch;
}

/* The logo, black straight on the yellow bar (an approved pairing) */
.main-header-two .main-header-two__logo {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding-right: 18px;
  background: transparent;
  text-align: left;
}
.main-header-two .main-header-two__logo a { display: block; }
.main-header-two .main-header-two__logo img {
  display: block;
  width: var(--dws-logo);
  height: auto;
  filter: brightness(0);
}

/* ---------- Menu ---------- */
.main-header-two .main-menu-two__main-menu-inner,
.stricky-header .main-menu-two__main-menu-inner {
  min-height: var(--dws-bar);
  padding-left: calc(var(--dws-logo) + 90px);
  background: transparent;
}
.main-header-two .main-menu-two__main-menu-box,
.stricky-header .main-menu-two__main-menu-box {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0;
}
.main-header-two .main-menu-two__main-menu-box-inner,
.stricky-header .main-menu-two__main-menu-box-inner {
  display: flex;
  align-items: center;
  width: 100%;
}
.main-header-two .main-menu .main-menu__list,
.stricky-header.main-menu .main-menu__list { flex: 1 1 auto; }

.main-header-two .main-menu .main-menu__list > li,
.stricky-header.main-menu .main-menu__list > li {
  display: flex;
  align-items: center;
  min-height: var(--dws-bar);
  padding-top: 0;
  padding-bottom: 0;
}
.main-header-two .main-menu .main-menu__list > li + li,
.stricky-header.main-menu .main-menu__list > li + li { margin-left: 28px; }

.main-header-two .main-menu .main-menu__list > li > a,
.stricky-header.main-menu .main-menu__list > li > a {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dws-ink);
}
.main-header-two .main-menu .main-menu__list > li:hover > a,
.main-header-two .main-menu .main-menu__list > li.current > a,
.stricky-header.main-menu .main-menu__list > li:hover > a,
.stricky-header.main-menu .main-menu__list > li.current > a { color: var(--dws-ink); }

/* Underline that grows on hover and marks the current section */
.main-header-two .main-menu .main-menu__list > li > a::before,
.stricky-header.main-menu .main-menu__list > li > a::before {
  top: auto;
  bottom: -9px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background-color: var(--dws-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}
.main-header-two .main-menu .main-menu__list > li:hover > a::before,
.main-header-two .main-menu .main-menu__list > li.current > a::before,
.stricky-header.main-menu .main-menu__list > li:hover > a::before,
.stricky-header.main-menu .main-menu__list > li.current > a::before {
  background-color: var(--dws-ink);
  transform: scaleX(1);
}

/* A small chevron on the items that open a list */
.main-header-two .main-menu .main-menu__list > li.dropdown > a::after,
.stricky-header.main-menu .main-menu__list > li.dropdown > a::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
  margin-left: 7px;
  transition: transform .25s ease;
}
.main-header-two .main-menu .main-menu__list > li.dropdown:hover > a::after,
.stricky-header.main-menu .main-menu__list > li.dropdown:hover > a::after { transform: rotate(180deg); }

/* Drop-down panels */
.main-header-two .main-menu .main-menu__list li > ul,
.stricky-header.main-menu .main-menu__list li > ul {
  min-width: 250px;
  padding: 8px 0;
  background: #fff;
  border-top: 3px solid var(--dws-ink);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}
.main-header-two .main-menu .main-menu__list li ul > li + li,
.stricky-header.main-menu .main-menu__list li ul > li + li { border-top: 1px solid #e6e6e6; }
.main-header-two .main-menu .main-menu__list > li > ul > li > a,
.stricky-header.main-menu .main-menu__list > li > ul > li > a {
  padding: 9px 22px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dws-ink);
}
.main-header-two .main-menu .main-menu__list > li > ul > li:hover > a,
.stricky-header.main-menu .main-menu__list > li > ul > li:hover > a {
  background-color: var(--dws-yellow);
  color: var(--dws-ink);
}

/* ---------- Pay My Bill: a dark button at the end of the bar ---------- */
/* Most pages carry it as the last menu item; some carry it as a separate button. */
.main-header-two .main-menu .main-menu__list > li > a[href*="navusoft"],
.stricky-header.main-menu .main-menu__list > li > a[href*="navusoft"],
.main-header-two .main-menu-two__btn.thm-btn,
.stricky-header .main-menu-two__btn.thm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 6px;
  background-color: var(--dws-ink);
  color: var(--dws-yellow);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.main-header-two .main-menu .main-menu__list > li:hover > a[href*="navusoft"],
.stricky-header.main-menu .main-menu__list > li:hover > a[href*="navusoft"],
.main-header-two .main-menu-two__btn.thm-btn:hover,
.stricky-header .main-menu-two__btn.thm-btn:hover {
  background-color: var(--dws-ink);
  color: #fff;
  transform: translateY(-1px);
}
.main-header-two .main-menu .main-menu__list > li > a[href*="navusoft"]::before,
.stricky-header.main-menu .main-menu__list > li > a[href*="navusoft"]::before {
  content: "\f09d";
  position: static;
  height: auto;
  margin-right: 8px;
  border-radius: 0;
  background: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
  transform: none;
  transition: none;
}
.main-header-two .main-menu-two__btn.thm-btn::after,
.stricky-header .main-menu-two__btn.thm-btn::after { display: none; }
.main-header-two .main-menu-two__btn.thm-btn::before,
.stricky-header .main-menu-two__btn.thm-btn::before {
  content: "\f09d";
  display: inline-block;
  position: static;
  width: auto;
  height: auto;
  margin-right: 8px;
  background: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
  transform: none;
}
.main-header-two .main-menu .main-menu__list > li:has(> a[href*="navusoft"]),
.stricky-header.main-menu .main-menu__list > li:has(> a[href*="navusoft"]) { margin-left: auto; }
.main-header-two .main-menu-two__btn-box,
.stricky-header .main-menu-two__btn-box {
  display: flex;
  align-items: center;
  margin-left: 24px;
}
.stricky-header.main-menu-two .main-menu-two__btn-box::after { display: none; }

/* The older area pages push their first section down to clear the old, taller
   header. Match the new height so no gap opens under the bar. */
.main-slider.mt-40 { margin-top: calc(var(--dws-bar) + var(--dws-strip)); }
@media (max-width: 1199px) {
  .main-slider.mt-40 { margin-top: var(--dws-bar); }
}

/* The service-areas hub has a plain title band (no photo) with only 120px of top
   padding, so the old, taller header covered its heading. Clear the bar. */
section.page-header:not(.cs-hero):not(:has(.page-header-bg)) { padding-top: calc(var(--dws-bar) + var(--dws-strip) + 48px); }
@media (max-width: 1199px) {
  section.page-header:not(.cs-hero):not(:has(.page-header-bg)) { padding-top: calc(var(--dws-bar) + 40px); }
}

/* ---------- Desktop: black strip with phone, Employment Application and social ---------- */
@media (min-width: 1200px) {
  .main-header-two { padding-top: var(--dws-strip); }
  .main-header-two::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dws-strip);
    background: var(--dws-ink);
  }
  .main-header-two .main-header-two__top-right {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--dws-strip));
    height: var(--dws-strip);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .main-header-two .main-header-two__top-right { pointer-events: none; }
  .main-header-two .main-header-two__contact-box { order: 1; margin-left: 0; pointer-events: auto; }
  .main-header-two .main-header-two__social { order: 2; pointer-events: auto; }

  /* Employment Application moves up into the strip, beside the social links */
  .main-header-two .main-menu-two__main-menu-inner { position: relative; }
  .main-header-two .main-menu .main-menu__list > li:has(> a[href*="employment-application"]) {
    position: absolute;
    top: calc(-1 * var(--dws-strip));
    right: 128px;
    min-height: var(--dws-strip);
    margin: 0;
  }
  /* Only where :has() works, since only then does the item actually sit in the dark strip */
  @supports selector(:has(a)) {
    .main-header-two .main-menu .main-menu__list > li > a[href*="employment-application"] {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .04em;
      color: #fff;
    }
    .main-header-two .main-menu .main-menu__list > li:hover > a[href*="employment-application"] { color: var(--dws-yellow); }
    .main-header-two .main-menu .main-menu__list > li > a[href*="employment-application"]::before { display: none; }
    .main-header-two .main-menu .main-menu__list > li > a[href*="employment-application"]::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -20px;
      width: 1px;
      height: 16px;
      margin-top: -8px;
      background: var(--dws-grey);
    }
    .main-header-two .main-menu .main-menu__list > li > a[href*="employment-application"]:focus-visible { outline-color: var(--dws-yellow); }
  }
  /* The sticky bar is a copy made by wostin.js; it has no strip, so it leaves this item out
     (the header at the top of the page still carries the link). */
  .stricky-header.main-menu .main-menu__list > li:has(> a[href*="employment-application"]) { display: none; }
  .main-header-two .main-header-two__contact-list li .icon span { font-size: 14px; color: var(--dws-yellow); }
  .main-header-two .main-header-two__contact-list li .text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-left: 9px;
  }
  .main-header-two .main-header-two__contact-list li .text p {
    margin: 0;
    font-size: 13px;
    line-height: 1;
    color: #fff;
  }
  .main-header-two .main-header-two__contact-list li .text h5 {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
  }
  .main-header-two .main-header-two__contact-list li .text a { color: #fff; }
  .main-header-two .main-header-two__contact-list li .text a:hover { color: var(--dws-yellow); }
  .main-header-two .main-header-two__contact-list li .text a[href^="tel:"] { color: var(--dws-yellow); }
  .main-header-two .main-header-two__contact-list li .text a[href^="tel:"]:hover { color: #fff; }
  .main-header-two .main-header-two__social a {
    width: 28px;
    height: 28px;
    font-size: 13px;
    color: #fff;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--dws-grey);
    isolation: isolate;
  }
  .main-header-two .main-header-two__social a:hover { color: var(--dws-ink); box-shadow: none; }
  .main-header-two .main-header-two__social a + a { margin-left: 8px; }

  /* Sticky bar after scrolling: the same yellow bar, a little shorter, with the logo */
  .stricky-header ~ .stricky-header { display: none !important; }
  .stricky-header {
    background-color: var(--dws-yellow);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
  }
  .stricky-header .main-menu-two__main-menu-inner { position: relative; min-height: 64px; }
  .stricky-header.main-menu .main-menu__list > li { min-height: 64px; }
  .stricky-header .main-menu-two__main-menu-inner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(100% - var(--dws-logo) - 62px);
    width: 100vw;
    background: transparent url("../images/dws_logo.webp") no-repeat right 62px center / var(--dws-logo) auto;
    filter: brightness(0);
  }
}

/* Narrow desktops: tighten so the menu fits beside the logo */
@media (min-width: 1200px) and (max-width: 1379px) {
  :root { --dws-logo: 160px; }
  .main-header-two .main-menu-two__main-menu-inner,
  .stricky-header .main-menu-two__main-menu-inner { padding-left: calc(var(--dws-logo) + 80px); }
  .main-header-two .main-menu .main-menu__list > li + li,
  .stricky-header.main-menu .main-menu__list > li + li { margin-left: 20px; }
  .main-header-two .main-menu .main-menu__list > li > a,
  .stricky-header.main-menu .main-menu__list > li > a { font-size: 12.5px; letter-spacing: .03em; }
}

/* ---------- Phones and tablets: one compact bar ---------- */
@media (max-width: 1199px) {
  :root { --dws-bar: 72px; --dws-logo: 170px; }
  .main-header-two .main-header-two__logo { padding-right: 10px; }

  /* Call button: the header phone link, shown as a round icon */
  .main-header-two .main-header-two__top-right {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 164px;
    align-items: center;
  }
  .main-header-two .main-header-two__social,
  .main-header-two .main-header-two__contact-list li + li,
  .main-header-two .main-header-two__contact-list li .icon,
  .main-header-two .main-header-two__contact-list li .text p { display: none; }
  .main-header-two .main-header-two__contact-box { margin: 0; }
  .main-header-two .main-header-two__contact-list li .text { margin: 0; }
  .main-header-two .main-header-two__contact-list li .text h5 { margin: 0; line-height: 1; }
  .main-header-two .main-header-two__contact-list li .text a[href^="tel:"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--dws-ink);
    color: var(--dws-yellow);
    font-size: 0;
  }
  .main-header-two .main-header-two__contact-list li .text a[href^="tel:"]::before {
    content: "\f095";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
  }

  /* Menu layer: Pay My Bill and the menu button at the right end */
  .main-header-two .main-menu-two__main-menu-inner {
    justify-content: flex-end;
    padding-left: 0;
  }
  .main-header-two .main-menu-two__main-menu-box {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    overflow: visible;
    order: 2;
  }
  .main-header-two .main-menu-two__main-menu-box-inner {
    float: none;
    width: auto;
    gap: 8px;
  }
  .main-header-two .main-menu .mobile-nav__toggler {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -6px;
    padding: 0;
    font-size: 22px;
    color: var(--dws-ink);
  }
  /* Only Pay My Bill shows from the menu list; the other links wait in the drawer.
     The other items stay in place but empty, so this works without :has(). */
  .main-header-two .main-menu .main-menu__list { display: flex; order: 2; }
  .main-header-two .main-menu .main-menu__list > li,
  .main-header-two .main-menu .main-menu__list > li + li {
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  .main-header-two .main-menu .main-menu__list > li > a:not([href*="navusoft"]) { display: none; }
  .main-header-two .main-menu .main-menu__list > li > a[href*="navusoft"],
  .main-header-two .main-menu-two__btn.thm-btn {
    width: 106px;
    padding: 11px 8px;
    font-size: 12px;
    letter-spacing: .04em;
  }
  .main-header-two .main-menu .main-menu__list > li > a[href*="navusoft"]::before { margin-right: 6px; font-size: 12px; }
  .main-header-two .main-menu-two__btn-box { display: flex; order: 1; margin: 0; }
  .main-header-two .main-menu-two__btn.thm-btn::before { margin-right: 6px; font-size: 12px; }
}

/* Phones: tighter still, so logo, Call, Pay My Bill and the menu button share one row */
@media (max-width: 575px) {
  :root { --dws-bar: 64px; --dws-logo: 128px; }
  .main-header-two .container { padding-left: 12px; padding-right: 12px; }
  .main-header-two .main-header-two__logo { padding-right: 6px; }
  .main-header-two .main-header-two__top-right { right: 138px; }
  .main-header-two .main-header-two__contact-list li .text a[href^="tel:"] { width: 40px; height: 40px; }
  .main-header-two .main-menu-two__main-menu-box-inner { gap: 6px; }
  .main-header-two .main-menu .mobile-nav__toggler { width: 40px; margin-right: -8px; }
  .main-header-two .main-menu .main-menu__list > li > a[href*="navusoft"],
  .main-header-two .main-menu-two__btn.thm-btn { width: 92px; padding: 11px 6px; font-size: 11.5px; }
  .main-header-two .main-menu .main-menu__list > li > a[href*="navusoft"]::before,
  .main-header-two .main-menu-two__btn.thm-btn::before { display: none; }
}

@media (max-width: 359px) {
  :root { --dws-logo: 112px; }
  .main-header-two .main-header-two__logo { padding-right: 2px; }
  .main-header-two .main-header-two__top-right { right: 132px; }
  .main-header-two .main-header-two__contact-list li .text a[href^="tel:"] { width: 36px; height: 36px; }
  .main-header-two .main-menu .main-menu__list > li > a[href*="navusoft"],
  .main-header-two .main-menu-two__btn.thm-btn { width: 88px; font-size: 11px; }
}

/* ---------- Phone drawer: black, so its yellow logo sits on an approved pairing ---------- */
.mobile-nav__content { background-color: var(--dws-ink); }
.mobile-nav__content .main-menu__list li a.expanded,
.mobile-nav__contact li a:hover,
.mobile-nav__social a:hover { color: var(--dws-yellow); }
.mobile-nav__content .main-menu__list li a button,
.mobile-nav__contact li > i {
  background-color: var(--dws-yellow);
  color: var(--dws-ink);
}
.mobile-nav__content .main-menu__list li a button.expanded { background-color: #fff; color: var(--dws-ink); }

/* ---------- Keyboard ---------- */
.main-header-two a:focus-visible,
.stricky-header a:focus-visible { outline: 3px solid var(--dws-ink); outline-offset: 3px; }
/* On black (the drawer) the ring is yellow */
.mobile-nav__content a:focus-visible { outline: 3px solid var(--dws-yellow); outline-offset: 3px; }
.main-header-two .main-menu .main-menu__list li > ul a:focus-visible,
.stricky-header.main-menu .main-menu__list li > ul a:focus-visible { outline-offset: -3px; }
/* The theme removes outlines from .thm-btn, so the separate Pay button gets a ring instead */
.main-header-two .main-menu-two__btn.thm-btn:focus-visible,
.stricky-header .main-menu-two__btn.thm-btn:focus-visible { box-shadow: 0 0 0 3px var(--dws-yellow), 0 0 0 6px var(--dws-ink); }
@media (min-width: 1200px) {
  .main-header-two .main-header-two__top-right a:focus-visible { outline-color: var(--dws-yellow); }
  .main-header-two .main-menu .main-menu__list li:focus-within > ul,
  .stricky-header.main-menu .main-menu__list li:focus-within > ul { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .main-header-two .main-menu .main-menu__list > li > a::before,
  .stricky-header.main-menu .main-menu__list > li > a::before,
  .main-header-two .main-menu .main-menu__list > li.dropdown > a::after,
  .stricky-header.main-menu .main-menu__list > li.dropdown > a::after { transition: none; }
}