/* vedika-navbar.css — the static mobile drawer.
 *
 * Pairs with the [data-vnav-drawer] markup and js/mobile-nav.js.
 *
 * The links inside the drawer are real <a href> in the initial HTML. Nothing
 * here uses display:none on them: closed state is a transform plus
 * visibility:hidden, so the text stays in the document for crawlers that read
 * HTML without executing JS, and `document.body.textContent` is unchanged.
 */

[data-vnav-backdrop] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  z-index: 9998;
}

[data-vnav-drawer] {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 18rem;
  max-width: 85vw;
  background: #0d0d0d;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
  z-index: 9999;
  padding: 1rem 0.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html[data-vnav-open] [data-vnav-backdrop] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}

html[data-vnav-open] [data-vnav-drawer] {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.25s ease;
}

.vnav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.vnav-drawer__x {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: #d1d5db;
  font-size: 1.75rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.vnav-drawer__x:hover,
.vnav-drawer__x:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

[data-vnav-drawer] nav a {
  color: #e5e7eb;
  text-decoration: none;
}

[data-vnav-open-btn] {
  min-width: 44px;
  min-height: 44px;
}

/* Above the nav breakpoint the drawer is closed whatever any script left
   behind. This is the guarantee that a desktop user can never be stuck behind
   an overlay; the JS is only the convenience. */
@media (min-width: 768px) {
  [data-vnav-drawer],
  html[data-vnav-open] [data-vnav-drawer] {
    transform: translateX(100%) !important;
    visibility: hidden !important;
  }
  [data-vnav-backdrop],
  html[data-vnav-open] [data-vnav-backdrop] {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-vnav-drawer],
  [data-vnav-backdrop] {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Nav bars that run out of room before 1024px.
   Marked with data-vnav-wide on the bar row.

   These bars carry a brand block plus 6-9 link items. Below about 830px the two
   groups no longer fit on one line and, with no wrap and no shrink control, they
   were painting on top of each other (the logo/first-link collision). Letting the
   row wrap fixed the collision but produced a 148px three-line nav at 768px, and a
   multi-line nav bar is its own defect.

   So the row keeps one line at every width and the links move to the drawer below
   1024px, which is what the bar already does below 768px. The Tailwind build on
   this site has no lg: variants, hence the hand-written media query.

   The same links are present as static <a href> inside the drawer markup, so this
   changes only which copy is painted, never what is in the HTML.
   --------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  [data-vnav-wide] .hidden.md\:flex {
    display: none !important;
  }
  [data-vnav-wide] .md\:hidden {
    display: block !important;
  }
  [data-vnav-wide] button.md\:hidden,
  [data-vnav-wide] a.md\:hidden {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* If the links move into the drawer at 1024 then the drawer has to be usable up
   to 1024. Two rules would otherwise slam it shut at 768: the desktop guarantee
   above, and an identical `@media (min-width:768px) .drawer{transform:...}`
   lockout in css/redesign.css. Both are overridden here, but only while the
   drawer is actually open and only on a bar marked data-vnav-wide. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  html[data-vnav-open] body:has([data-vnav-wide]) [data-vnav-drawer],
  html[data-vnav-open] body:has([data-vnav-wide]) .drawer.show,
  html[data-vnav-open] body:has([data-vnav-wide]) aside.drawer.show {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
  html[data-vnav-open] body:has([data-vnav-wide]) [data-vnav-backdrop],
  html[data-vnav-open] body:has([data-vnav-wide]) .drawer-backdrop.show {
    opacity: 1 !important;
    visibility: visible !important;
  }
}