/* ==========================================================================
   DBN HOMES - drill-down navigation (tablet and mobile)

   Paired with inc/drilldown-nav.php (markup) and the Elementor Custom Code
   snippet "Header Drill-down Menu" (behaviour). Site Settings > Custom CSS
   section 5 points here.

   Colours come from the Elementor Global tokens mirrored in Site Settings >
   Custom CSS section 1, so changing a Global still changes this.

   The component never appears above 1024px: the Shortcode widget carrying it
   is hidden on desktop from the editor, and the mega menu is hidden below it.
   ========================================================================== */

.dbn-nav {
  --dbn-nav-bar-h: 72px;
  --dbn-nav-gutter: 24px;
  --dbn-nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: static;
}

/* Theme Style targets bare `button` elements, so its 15px/26px padding, teal
   background and white text land on every button in here. Each one is restyled
   below, but the padding has to be cleared first: on the 44px toggle it left
   negative room and collapsed the bars to zero width.
   The reset is one class plus one type, matching the Theme Style rule it has to
   beat, and wins on source order. Every component rule below is therefore
   written as `.dbn-nav .dbn-nav__x` - two classes - so it outranks both the
   Theme Style and this reset. Dropping the `.dbn-nav` prefix on any rule here
   will hand that property straight back to the Theme Style. */
.dbn-nav button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* --- Toggle --------------------------------------------------------------
   Three bars that become a cross. Drawn rather than swapped for an X icon so
   the change can be animated, which is what tells you the same control both
   opens and closes the sheet. */

.dbn-nav .dbn-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--dbn-mist);
  border-radius: 2px;
  background: transparent;
  color: var(--dbn-white);
  cursor: pointer;
}

.dbn-nav .dbn-nav__toggle-box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.dbn-nav .dbn-nav__toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentcolor;
  transition:
    transform 260ms var(--dbn-nav-ease),
    opacity 160ms linear;
}

.dbn-nav .dbn-nav__toggle-bar:nth-child(1) { top: 0; }
.dbn-nav .dbn-nav__toggle-bar:nth-child(2) { top: 6px; }
.dbn-nav .dbn-nav__toggle-bar:nth-child(3) { top: 12px; }

.dbn-nav.is-open .dbn-nav__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dbn-nav.is-open .dbn-nav__toggle-bar:nth-child(2) { opacity: 0; }
.dbn-nav.is-open .dbn-nav__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.dbn-nav .dbn-nav__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Sheet ---------------------------------------------------------------
   100dvh, not 100vh: on a phone the dynamic unit matches what is actually on
   screen, or the foot of the sheet ends up under the address bar. */

.dbn-nav .dbn-nav__sheet {
  position: fixed;
  inset: var(--dbn-nav-bar-h) 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--dbn-white);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 220ms var(--dbn-nav-ease),
    transform 220ms var(--dbn-nav-ease),
    visibility 0s linear 220ms;
}

.dbn-nav.is-open .dbn-nav__sheet {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 220ms var(--dbn-nav-ease),
    transform 220ms var(--dbn-nav-ease),
    visibility 0s;
}

body.admin-bar .dbn-nav__sheet { inset-block-start: calc(var(--dbn-nav-bar-h) + 32px); }

.dbn-nav .dbn-nav__nav {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dbn-nav .dbn-nav__list,
.dbn-nav .dbn-nav__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Level one ----------------------------------------------------------- */

.dbn-nav .dbn-nav__item { border-bottom: 1px solid var(--dbn-line); }

.dbn-nav .dbn-nav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 18px var(--dbn-nav-gutter);
  border: 0;
  background: transparent;
  color: var(--dbn-ink);
  font-family: var(--e-global-typography-dbnnav-font-family), sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms var(--dbn-nav-ease);
}

.dbn-nav .dbn-nav__trigger:hover,
.dbn-nav .dbn-nav__trigger:focus-visible { background-color: var(--dbn-mist); }

.dbn-nav .dbn-nav__chevron,
.dbn-nav .dbn-nav__back-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: 0.55;
  transition: transform 200ms var(--dbn-nav-ease);
}

.dbn-nav .dbn-nav__trigger:hover .dbn-nav__chevron { transform: translateX(3px); }

/* Rows arrive in sequence once the sheet is open. The delay is per-row so the
   list reads top-down rather than appearing as one block. */
.dbn-nav .dbn-nav__item {
  opacity: 0;
  transform: translateY(10px);
}

.dbn-nav.is-open .dbn-nav__item {
  opacity: 1;
  transform: none;
  transition:
    opacity 260ms var(--dbn-nav-ease),
    transform 260ms var(--dbn-nav-ease);
}

.dbn-nav.is-open .dbn-nav__item:nth-child(1) { transition-delay: 60ms; }
.dbn-nav.is-open .dbn-nav__item:nth-child(2) { transition-delay: 100ms; }
.dbn-nav.is-open .dbn-nav__item:nth-child(3) { transition-delay: 140ms; }
.dbn-nav.is-open .dbn-nav__item:nth-child(4) { transition-delay: 180ms; }
.dbn-nav.is-open .dbn-nav__item:nth-child(5) { transition-delay: 220ms; }
.dbn-nav.is-open .dbn-nav__item:nth-child(6) { transition-delay: 260ms; }
.dbn-nav.is-open .dbn-nav__item:nth-child(7) { transition-delay: 300ms; }

/* --- Level two -----------------------------------------------------------
   The panel covers the list rather than pushing it, so the sheet never grows
   taller than the screen and the visitor's place in level one is preserved. */

.dbn-nav .dbn-nav__panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--dbn-white);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateX(16px);
  transition:
    opacity 200ms var(--dbn-nav-ease),
    transform 200ms var(--dbn-nav-ease),
    visibility 0s linear 200ms;
}

.dbn-nav .dbn-nav__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 200ms var(--dbn-nav-ease),
    transform 200ms var(--dbn-nav-ease),
    visibility 0s;
}

/* Pinned so the way back stays reachable however far the section is scrolled. */
.dbn-nav .dbn-nav__back {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 14px var(--dbn-nav-gutter);
  border: 0;
  border-bottom: 1px solid var(--dbn-line);
  background: var(--dbn-mist);
  color: var(--dbn-muted);
  font-family: var(--e-global-typography-accent-font-family), monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.dbn-nav .dbn-nav__back:hover .dbn-nav__back-chevron,
.dbn-nav .dbn-nav__back:focus-visible .dbn-nav__back-chevron { transform: translateX(-3px); }

.dbn-nav .dbn-nav__sublist li { border-bottom: 1px solid var(--dbn-line); }

.dbn-nav .dbn-nav__sublink {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 16px var(--dbn-nav-gutter);
  color: var(--dbn-body);
  font-size: 16px;
  text-decoration: none;
  transition:
    padding-left 150ms var(--dbn-nav-ease),
    background-color 150ms var(--dbn-nav-ease),
    color 150ms var(--dbn-nav-ease);
}

.dbn-nav .dbn-nav__sublink:hover,
.dbn-nav .dbn-nav__sublink:focus-visible {
  padding-left: calc(var(--dbn-nav-gutter) + 8px);
  background-color: var(--dbn-mist);
  color: var(--dbn-teal);
}

/* --- Foot -----------------------------------------------------------------
   Two buttons, and only the two appearances the design system defines:
   the Theme Style button (Teal fill, white label) and .dbn-btn-outline
   (transparent, Ink hairline, filling with Ink on hover). Repeated here rather
   than reused because these are plain anchors from a WordPress menu, not Button
   widgets - but the values are the same Global tokens, so a change to a Global
   still reaches them.

   The phone previously used the quiet link treatment from the header bar, which
   works on teal but leaves it barely visible on the white sheet. It is the
   outline button now, which is the system's answer for a secondary action. */

.dbn-nav .dbn-nav__foot {
  display: grid;
  gap: 12px;
  padding: 24px var(--dbn-nav-gutter) 32px;
}

.dbn-nav .dbn-nav__action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--e-global-typography-dbnbtn-font-family), sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 200ms var(--dbn-nav-ease),
    border-color 200ms var(--dbn-nav-ease),
    color 200ms var(--dbn-nav-ease);
}

.dbn-nav .dbn-nav__action--primary {
  background: var(--dbn-teal);
  border-color: var(--dbn-teal);
  color: var(--dbn-white);
}

.dbn-nav .dbn-nav__action--primary:hover,
.dbn-nav .dbn-nav__action--primary:focus-visible {
  background: var(--dbn-teal-deep);
  border-color: var(--dbn-teal-deep);
  color: var(--dbn-white);
}

.dbn-nav .dbn-nav__action--outline {
  background: transparent;
  border-color: var(--dbn-ink);
  color: var(--dbn-ink);
}

.dbn-nav .dbn-nav__action--outline:hover,
.dbn-nav .dbn-nav__action--outline:focus-visible {
  background: var(--dbn-ink);
  border-color: var(--dbn-ink);
  color: var(--dbn-white);
}

/* Wider than a phone: a single control 700px wide stops reading as a button. */
@media (min-width: 600px) {
  .dbn-nav .dbn-nav__foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    max-width: 34rem;
  }
}

/* Locks the page behind the sheet without the layout jumping as the scrollbar
   goes. The width is measured in JS and handed over as a custom property. */
body.dbn-nav-open {
  overflow: hidden;
  padding-right: var(--dbn-scrollbar, 0px);
}

@media (prefers-reduced-motion: reduce) {
  .dbn-nav .dbn-nav__sheet,
  .dbn-nav .dbn-nav__panel,
  .dbn-nav .dbn-nav__item,
  .dbn-nav .dbn-nav__toggle-bar,
  .dbn-nav .dbn-nav__chevron,
  .dbn-nav .dbn-nav__back-chevron,
  .dbn-nav .dbn-nav__sublink,
  .dbn-nav .dbn-nav__trigger {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}