/* RGB channels for Tailwind: rgb(var(--tw-ink) / <alpha-value>) */
:root {
  --tw-ink: 23 23 23;
  --tw-paper: 250 250 249;
}

/* Reserve space for scrollbar so centered nav/logo does not shift when switching short vs long pages */
html {
  scrollbar-gutter: stable;
}

/* Raster logo (images/dynivo-logo.png); height constrained below — width follows aspect ratio */
.brand-logo {
  display: block;
  height: 2.625rem;
  width: auto;
}
@media (min-width: 640px) {
  .brand-logo {
    height: 2.875rem;
  }
}

footer .brand-logo {
  height: 2rem;
}
@media (min-width: 640px) {
  footer .brand-logo {
    height: 2.25rem;
  }
}

/* Mobile menu: dim page, drawer contrasts with body */
.nav-backdrop {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767.98px) {
  .nav-mobile-sheet {
    background-color: #f4f4f5 !important;
    /* Dropdown under header (not full viewport height) — shadow falls downward */
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.14);
  }

  .nav-mobile-sheet .nav-link {
    color: #27272a !important;
  }

  .nav-mobile-sheet .nav-link:hover {
    background-color: #e4e4e7 !important;
  }

  .nav-mobile-sheet a.bg-accent {
    color: #ffffff !important;
  }

  .nav-mobile-sheet a.bg-accent:hover {
    color: #ffffff !important;
  }

  .nav-mobile-sheet a.bg-black {
    color: #bef264 !important;
  }

  .nav-mobile-sheet a.bg-black:hover {
    color: #d9f99d !important;
  }
}

/* Mobile menu open: sit above main (transforms/hover on cards create stacking contexts) */
@media (max-width: 767.98px) {
  body.menu-open main {
    position: relative;
    z-index: 0;
  }

  body.menu-open .site-header {
    isolation: isolate;
    z-index: 99998 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.menu-open .site-header #nav-backdrop {
    z-index: 1 !important;
  }

  body.menu-open .site-header nav {
    position: relative;
    z-index: 2 !important;
  }

  body.menu-open .site-header #nav-panel {
    z-index: 3 !important;
  }
}