/*
  DiMastro — site navigation bar
  ------------------------------------------------------------------
  Sticky top bar, shared across every page. Reuses the --tbc-* tokens
  from styles.css (load that first) rather than declaring its own —
  same "globalize the tokens" approach as the rest of the site.

  Structure:
    .dm-navbar                    fixed bar, top of viewport
      .dm-navbar-inner            flex row, brand left / links right
        .dm-navbar-brand          logo mark + wordmark, links home
        .dm-navbar-toggle         hamburger <-> close, mobile only
        .dm-navbar-menu           link row (desktop) / drawer (mobile)
          .dm-navbar-link         plain links (Home, Tube Bias Calculator, ...)
          .dm-navbar-dropdown     "Guides" — popover on desktop,
                                  inline accordion on mobile
    .dm-navbar-scrim              mobile drawer backdrop

  Breakpoint: 768px. Deliberately different from the site's general
  640px content breakpoint — five nav items plus a dropdown get tight
  well before the page content does, so the bar switches to the
  hamburger layout a bit earlier.
*/

.dm-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1010;
  background: rgba(28, 23, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tbc-border-soft);
}

.dm-navbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: padding 260ms ease;
}

/* ---- scroll-shrink state (desktop + mobile bar height alike) ---- */
.dm-navbar.is-scrolled .dm-navbar-inner {
  padding: 14px 24px;
}
.dm-navbar.is-scrolled .dm-navbar-brand-icon {
  width: 26px;   /* 80% of 32px */
  height: 26px;
}
.dm-navbar.is-scrolled .dm-navbar-brand-text {
  font-size: 16px; /* 80% of 20px */
}

/* ---- brand / logo ---- */
.dm-navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}

.dm-navbar-brand-icon {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  background: var(--tbc-well);
  border: 1px solid var(--tbc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 260ms ease, height 260ms ease, border-color 160ms ease;
}
.dm-navbar-brand-icon svg { width: 60%; height: 60%; }

.dm-navbar-brand-text {
  font-family: var(--tbc-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tbc-ink);
  transition: font-size 260ms ease, color 160ms ease;
}

.dm-navbar-brand-gta {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tbc-ink-faint);
}

.dm-navbar-brand:hover .dm-navbar-brand-icon { border-color: var(--tbc-glow-dim); }
.dm-navbar-brand:hover .dm-navbar-brand-text { color: var(--tbc-glow); }

/* ---- desktop link row ---- */
.dm-navbar-menu {
  display: flex;
  align-items: center;
  gap: 25px;
}

.dm-navbar-link {
  position: relative;
  display: inline-block;
  font-family: var(--tbc-font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--tbc-ink-muted);
  text-decoration: none;
  text-align: left;
  padding: 6px 1px;
  background: none;
  border: none;
  cursor: pointer;
}

.dm-navbar-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--tbc-glow);
  transition: right 220ms ease;
}

.dm-navbar-link:hover,
.dm-navbar-link:focus-visible,
.dm-navbar-link.is-active {
  color: var(--tbc-glow);
}
.dm-navbar-link:hover::after,
.dm-navbar-link:focus-visible::after,
.dm-navbar-link.is-active::after {
  right: 0;
}

/* ---- "Guides" dropdown ---- */
.dm-navbar-dropdown { position: relative; }

.dm-navbar-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
}

.dm-navbar-dropdown-toggle svg {
  width: 11px;
  height: 11px;
  transition: transform 200ms ease;
}
.dm-navbar-dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.dm-navbar-dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  min-width: 230px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--tbc-panel);
  border: 1px solid var(--tbc-border);
  border-radius: var(--tbc-radius-sm);
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.6);
  padding: 8px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.dm-navbar-dropdown.is-open .dm-navbar-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dm-navbar-dropdown-menu li + li { margin-top: 2px; }

.dm-navbar-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-family: var(--tbc-font-body);
  font-size: 13px;
  color: var(--tbc-ink-muted);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.dm-navbar-dropdown-menu a:hover,
.dm-navbar-dropdown-menu a:focus-visible,
.dm-navbar-dropdown-menu a.is-active {
  background: var(--tbc-panel-raised);
  color: var(--tbc-glow);
}

/* ---- hamburger / close toggle (mobile only) ---- */
.dm-navbar-toggle {
  display: none;
  position: relative;
  z-index: 2; /* must stay above .dm-navbar-menu (a positioned sibling)
                 even while the drawer is open and overlapping it —
                 without this, a positioned sibling always wins
                 regardless of DOM order, no matter its own z-index */
  flex: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--tbc-border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}

.dm-navbar-toggle-bar {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--tbc-ink-muted);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease, background-color 180ms ease;
}

.dm-navbar-toggle[aria-expanded="true"] .dm-navbar-toggle-bar { background: var(--tbc-glow); }
.dm-navbar-toggle[aria-expanded="true"] .dm-navbar-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dm-navbar-toggle[aria-expanded="true"] .dm-navbar-toggle-bar:nth-child(2) { opacity: 0; }
.dm-navbar-toggle[aria-expanded="true"] .dm-navbar-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- mobile drawer backdrop ---- */
.dm-navbar-scrim {
  position: fixed;
  inset: 0;
  z-index: 1005;
  background: rgba(10, 8, 5, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms;
}
.dm-navbar-scrim.is-open { opacity: 1; visibility: visible; }

/* lock page scroll while the drawer is open */
html.dm-nav-open,
html.dm-nav-open body { overflow: hidden; }

/* ================= mobile layout ================= */
@media (max-width: 768px) {
  .dm-navbar-toggle { display: flex; }

  .dm-navbar-menu {
    /* No z-index needed here: this panel is nested inside .dm-navbar,
       so it can only ever stack within .dm-navbar's own context — its
       position relative to the scrim (a sibling of .dm-navbar) is
       decided by .dm-navbar's z-index above, not this element's. */
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--tbc-panel);
    border-left: 1px solid var(--tbc-border);
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.6);
    padding: 96px 22px 28px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .dm-navbar-menu.is-open { transform: translateX(0); }

  .dm-navbar-link {
    width: 100%;
    font-size: 17px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--tbc-border-soft);
  }
  .dm-navbar-link::after { display: none; }

  .dm-navbar-dropdown { width: 100%; }
  .dm-navbar-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    font-size: 17px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--tbc-border-soft);
  }

  .dm-navbar-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    border: none;
    box-shadow: none;
    /* Padding is constant across open/closed — only max-height moves.
       When closed (max-height: 0) this padding is still "present" in
       the box model, but overflow:hidden clips the box to zero height
       regardless, so nothing is visible either way. Letting padding
       change between states caused instant snaps (nothing here is in
       the transition list except max-height), since properties outside
       that list jump immediately while max-height eases over 280ms. */
    padding: 6px 0 10px 12px;
    background: transparent;
    transition: max-height 280ms ease;
  }
  .dm-navbar-dropdown.is-open .dm-navbar-dropdown-menu {
    /* transform must be reset here too, not just on the base rule above:
       the desktop .is-open rule (two classes -> higher specificity than
       this media query's single-class rule) would otherwise still win
       and apply its translate(-50%, -6px), leaving both a sideways and
       vertical offset regardless of source order. */
    transform: none;
    /* Large enough to fully fit either dropdown's content (currently up
       to 14 tools) rather than clipping — the outer .dm-navbar-menu panel
       already scrolls the whole nav if it overflows the viewport, so this
       just needs to not be the thing doing the clipping. */
    max-height: 1400px;
  }
  .dm-navbar-dropdown-menu a { font-size: 15px; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-navbar-inner,
  .dm-navbar-brand-icon,
  .dm-navbar-brand-text,
  .dm-navbar-link,
  .dm-navbar-link::after,
  .dm-navbar-toggle-bar,
  .dm-navbar-dropdown-toggle svg,
  .dm-navbar-dropdown-menu,
  .dm-navbar-menu,
  .dm-navbar-scrim {
    transition: none !important;
  }
}