/* ================================================================
   NAV RESPONSIVE OVERRIDES
   iPad / mid-breakpoint fixes — scoped tightly to avoid
   touching anything outside the navbar.
   ================================================================ */

/* ── iPad landscape & small desktop (992px – 1199px) ───────────
   Bootstrap expands the nav here but 8+ items + CTA + toggle
   don't fit the 88px bar without overflowing to the right.
   Fix: compress padding/font, allow wrapping as last resort.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Shrink the bar height slightly */
  .navbar-svps > .container,
  .navbar-svps > .container-fluid {
    min-height: 68px;
  }

  /* Tighter link padding so all items fit */
  .navbar-svps .nav-link-svps {
    font-size: 13px !important;
    padding: 8px 10px !important;
    letter-spacing: 0 !important;
  }

  /* Tighter gap between items */
  .navbar-svps .navbar-nav {
    gap: 0 !important;
    flex-wrap: nowrap;
  }

  /* CTA button: slightly smaller */
  .navbar-svps .btn-nav-cta {
    padding: 7px 14px !important;
    font-size: 13px !important;
  }

  /* Theme toggle: no extra margin */
  .navbar-nav .nav-item:has(> .theme-toggle-btn) {
    margin-left: 6px !important;
  }

  /* Theme toggle size */
  .theme-toggle-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  /* CTA ms-lg-2 spacing */
  .navbar-svps .ms-lg-2 {
    margin-left: 8px !important;
  }
}

/* ── iPad portrait (768px – 991px) — collapsed hamburger menu ──
   The mobile collapsed nav works, but the theme toggle button
   needs to be properly centered and padded inside the drawer.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
  /* Collapsed nav drawer: ensure it's wide enough */
  .navbar-svps .navbar-collapse {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Theme toggle: full-width row, centred */
  .navbar-nav .nav-item:has(> .theme-toggle-btn) {
    display: flex !important;
    justify-content: flex-start;
    padding: 8px 6px 6px !important;
    border-top: 1px solid var(--border);
    margin-top: 4px;
  }

  .theme-toggle-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

/* ── All non-desktop (< 992px) — prevent scroll-right on nav ────
   The collapsed nav should never cause the page to scroll
   horizontally. Overflow is hidden at the bar level.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .navbar-svps {
    overflow-x: visible; /* drawer pops below, don't clip it */
  }

  /* The page body itself must not overflow */
  body {
    overflow-x: hidden;
  }

  /* Toggler aligned to the right of the bar, never pushed off */
  .navbar-svps .navbar-toggler {
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Brand + toggler always on the same line; collapse wraps to next row */
  .navbar-svps > .container,
  .navbar-svps > .container-fluid {
    flex-wrap: wrap;   /* allow collapse to drop below brand+toggler row */
    align-items: center;
    min-height: 64px;
  }

  /* Brand and toggler share the first row */
  .navbar-svps .navbar-brand,
  .navbar-svps .navbar-toggler {
    flex-shrink: 0;
  }

  /* Collapse takes the full second row */
  .navbar-svps .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
  }
}

/* ── Safari -webkit-backdrop-filter workaround ──────────────────
   Some older Safari on iPad drops the blur entirely if the
   element clips. Force repaint layer.
   ──────────────────────────────────────────────────────────────── */
.navbar-svps {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}