/* ============================================================
   Theologians Press — unified mobile navigation drawer
   Single implementation for pages using the .top-nav header
   (marketing pages, library, articles, static/policy content).
   Replaces the old stack of five overlapping patch layers.
   Desktop nav (>900px) is completely untouched.
   ============================================================ */

@media (max-width: 900px) {
  .top-nav { flex-wrap: nowrap; }

  /* Desktop link row + auth cluster move entirely into the drawer on mobile */
  .top-nav-right-group { display: none !important; }

  .mobile-menu-btn {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    border: 1px solid rgba(201, 162, 77, .3);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 320;
  }
  .mobile-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-gold, #C9A24D);
    transition: transform .25s ease, opacity .2s ease;
  }
  .mobile-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Dimmed backdrop behind the drawer */
  .tb-nav-scrim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 310;
  }
  .tb-nav-scrim.open { opacity: 1; pointer-events: auto; }

  body.tb-nav-locked { overflow: hidden; }

  /* Right-side slide-in sheet, off-canvas by default.
     Anchored via `left: calc(100vw - width)` rather than `right` — some
     mobile viewports resolve `right` against a stale window width instead
     of the true layout viewport, but `vw` is always reliable. Height is
     set explicitly for the same reason, instead of `top` + `bottom`. */
  .mobile-nav-drawer {
    position: fixed !important;
    top: 0 !important;
    left: calc(100vw - min(82vw, 340px)) !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    width: min(82vw, 340px);
    padding: calc(1.35rem + env(safe-area-inset-top)) 1.35rem calc(1.5rem + env(safe-area-inset-bottom));
    background: rgba(8, 8, 8, .99);
    border-left: 1px solid rgba(201, 162, 77, .25);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .6);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s cubic-bezier(.32, .72, .35, 1), visibility 0s linear .32s;
    z-index: 315;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav-drawer.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .32s cubic-bezier(.32, .72, .35, 1);
  }

  .mobile-nav-drawer a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: var(--text-secondary, #d4d4d4);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease;
  }
  .mobile-nav-drawer a:hover,
  .mobile-nav-drawer a.active { color: var(--primary-gold, #C9A24D); }

  .mobile-nav-drawer .mobile-nav-auth {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(201, 162, 77, .2);
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }
  .mobile-nav-drawer .mobile-nav-auth a { border-bottom: none; min-height: 0; }
  .mobile-nav-drawer .sign-in-btn,
  .mobile-nav-drawer .editor-dashboard-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 8px;
  }
}

@media (min-width: 901px) {
  .mobile-menu-btn,
  .mobile-nav-drawer,
  .tb-nav-scrim { display: none !important; }
}