/**
 * Scoped Our Offers nav dropdown — does not restyle other nav items.
 * Mobile accordion uses native <details> inside the existing drawer.
 */

.ws-nav-offers {
  position: relative;
  display: none;
}

@media (min-width: 1024px) {
  .ws-nav-offers {
    display: inline-flex;
    align-items: center;
  }
}

.ws-nav-offers__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-height: var(--dv-touch-min, 44px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-nav-offers__trigger .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--dv-motion, 0.2s) var(--dv-ease, ease);
}

.ws-nav-offers.is-open .ws-nav-offers__trigger .material-symbols-outlined {
  transform: rotate(180deg);
}

.ws-nav-offers__panel {
  position: absolute;
  /* Flush to trigger; padding-top bridges the visual gap so the pointer never “falls through”. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(22rem, calc(100vw - 2rem));
  padding: 0.85rem 1.1rem 1.1rem;
  margin-top: 0;
  border-radius: var(--dv-radius-md, 0.75rem);
  background: #fff;
  border: 1px solid rgba(26, 72, 131, 0.12);
  box-shadow: var(--dv-shadow-2, 0 12px 28px rgba(15, 23, 42, 0.12));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Above header (50) and chat FAB (55) within the header stacking context. */
  z-index: 90;
}

.ws-nav-offers__panel::before {
  content: "";
  display: block;
  height: 0.65rem;
  margin: -0.85rem -1.1rem 0.65rem;
}

.ws-nav-offers.is-open .ws-nav-offers__panel,
.ws-nav-offers:focus-within .ws-nav-offers__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Pure-CSS open on fine pointers (JS still sets aria-expanded / is-open). */
@media (hover: hover) and (pointer: fine) {
  .ws-nav-offers:hover .ws-nav-offers__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.ws-nav-offers__panel-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ws-nav-offers__panel-lede {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.ws-nav-offers__panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.ws-nav-offers__panel-list a {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.45rem;
  border-radius: var(--dv-radius-sm, 0.5rem);
  text-decoration: none;
  min-height: var(--dv-touch-min, 44px);
}

.ws-nav-offers__panel-list a:hover,
.ws-nav-offers__panel-list a:focus-visible {
  background: #f4f9fd;
}

.ws-nav-offers__panel-list a:focus-visible {
  outline: 2px solid var(--dv-focus, #2563eb);
  outline-offset: 2px;
}

.ws-nav-offers__panel-t {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;
}

.ws-nav-offers__panel-foot {
  display: inline-flex;
  margin-top: 0.75rem;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  min-height: var(--dv-touch-min, 44px);
  align-items: center;
}

.ws-nav-offers__panel-foot:hover {
  text-decoration: underline;
}

/*
 * Header chrome paints ALL nav `a` / `span` yellow with !important.
 * Match or exceed that specificity so the white panel stays readable.
 * Site blue: --dv-navy / rgb(26, 72, 131).
 */
#ws-index-header nav .ws-nav-offers__panel a:not(.bg-primary-container):not(.ws-sign-in-pill):not(.ws-book-now-btn),
#ws-index-header nav .ws-nav-offers__panel a:not(.bg-primary-container):not(.ws-sign-in-pill):not(.ws-book-now-btn):hover,
#ws-index-header nav .ws-nav-offers__panel a:not(.bg-primary-container):not(.ws-sign-in-pill):not(.ws-book-now-btn):focus-visible,
#ws-index-header .ws-header-desktop-nav .ws-nav-offers__panel a:not(.bg-primary-container):not(.ws-sign-in-pill):not(.ws-book-now-btn),
#ws-index-header .ws-header-desktop-nav .ws-nav-offers__panel a:not(.bg-primary-container):not(.ws-sign-in-pill):not(.ws-book-now-btn):hover {
  color: rgb(26, 72, 131) !important;
}

#ws-index-header nav .ws-nav-offers__panel .ws-nav-offers__panel-t,
#ws-index-header nav .ws-nav-offers__panel .ws-nav-offers__panel-kicker,
#ws-index-header nav .ws-nav-offers__panel span.ws-nav-offers__panel-t {
  color: rgb(26, 72, 131) !important;
}

#ws-index-header nav .ws-nav-offers__panel .ws-nav-offers__panel-lede,
#ws-index-header nav .ws-nav-offers__panel p.ws-nav-offers__panel-lede {
  color: #565e74 !important;
}

#ws-index-header nav .ws-nav-offers__panel .ws-nav-offers__panel-foot,
#ws-index-header nav .ws-nav-offers__panel a.ws-nav-offers__panel-foot:not(.bg-primary-container):not(.ws-sign-in-pill):not(.ws-book-now-btn),
#ws-index-header nav .ws-nav-offers__panel a.ws-nav-offers__panel-foot:not(.bg-primary-container):not(.ws-sign-in-pill):not(.ws-book-now-btn):hover {
  color: rgb(26, 72, 131) !important;
}

/* Mobile drawer accordion — existing drawer only */
.ws-nav-offers-mobile {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .ws-nav-offers-mobile {
    display: none;
  }
}

.ws-mobile-drawer__nav .ws-nav-offers-mobile > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--dv-touch-min, 44px);
  padding: 0.35rem 0.5rem;
  border-radius: var(--dv-radius-sm);
  color: var(--dv-gold) !important;
  font-family: var(--dv-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
}

.ws-mobile-drawer__nav .ws-nav-offers-mobile > summary::-webkit-details-marker {
  display: none;
}

.ws-mobile-drawer__nav .ws-nav-offers-mobile > summary .material-symbols-outlined {
  font-size: 1.25rem;
  color: inherit;
}

.ws-mobile-drawer__nav .ws-nav-offers-mobile[open] > summary,
.ws-mobile-drawer__nav .ws-nav-offers-mobile > summary.ws-nav-active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
}

.ws-nav-offers-mobile__list {
  list-style: none;
  margin: 0 0 0.35rem;
  padding: 0 0 0 0.75rem;
  display: grid;
  gap: 0.15rem;
}

html.dv-reduce-motion .ws-nav-offers__trigger .material-symbols-outlined {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .ws-nav-offers__trigger .material-symbols-outlined {
    transition: none;
  }
}