/* ============================================================================
   TECHGURU — desktop navbar overlap guard
   Load AFTER css/nav-glass.css (or append to the bottom of nav-glass.css).

   BUG FIXED
   ---------
   On desktop (>= 993px) .navbar is a 3-column grid:  auto | minmax(0,1fr) | auto
   (logo | menu | phone+CTA).  nav-glass.css centered the menu with
   `justify-self: center`, which sizes the menu box to fit-content.  Every nav
   label is a single unbreakable word, so the menu's min-content == max-content
   == full row width and the box can NEVER shrink.  The moment the labels render
   wider than the middle column (fallback fonts when fonts.googleapis.com is
   unreachable/blocked, browser zoom, OS "large text", minimum-font-size
   settings), the oversized menu is centered in its column and bleeds out of
   BOTH ends — on top of the logo at the left and on top of the phone button at
   the right.  Mobile never showed it because <= 992px the menu becomes a
   fixed-position dropdown panel.

   FIX
   ---
   1. The menu box is stretched to exactly its column (max-width:100%), so it
      can never escape the column no matter how wide the text renders.
   2. The link row centers itself inside the menu box (same centered look when
      there is slack) and, when space runs out, the flex links shed horizontal
      padding (clamp) instead of colliding with the logo / phone button.
   3. A final `overflow-x: clip` guard means even a pathological font metric
      degrades by clipping at the column edge — never by overlapping.
   4. The 993-1180px band trims link type slightly so six links always fit.
   Mobile (<= 992px) is untouched: every rule is inside min-width: 993px.
   ========================================================================== */

@media (min-width: 993px) {
  /* 1 — menu box == its grid column, always */
  .navbar .nav-menu {
    justify-self: stretch;          /* was: center  (fit-content => could exceed column) */
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;             /* fallback for Safari < 16                 */
    overflow-x: clip;               /* last-resort guard: clip, never overlap   */
    overflow-y: visible;
  }

  /* 2 — link row centers in the space that exists, and may shrink */
  .navbar .nav-menu ul {
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: center;        /* keeps the centered-pill look             */
  }

  /* 3 — links give back padding before anything can collide */
  .navbar .nav-menu ul li a {
    white-space: nowrap;
    padding-inline: clamp(.45rem, .85vw, .95rem);   /* was: .95rem fixed        */
  }

  /* 4 — tight band (993-1180): shave type a touch and drop the logo wordmark
         to the icon (standard responsive move; the icon keeps its alt text),
         so all six links AND the full CTA label keep fitting. */
  @media (max-width: 1180px) {
    .navbar { width: calc(100% - 1.5rem); }          /* tighter gutter = more room */
    .navbar .nav-menu ul li a {
      font-size: .85rem;
      padding-inline: .5rem;
    }
    .navbar .nav-logo-link { font-size: 0; }        /* icon-only wordmark       */
    .navbar .nav-logo-link .nav-logo-icon { width: 40px; height: 40px; }
  }
  @media (max-width: 1060px) {
    .navbar .nav-menu ul li a { font-size: .8rem; padding-inline: .45rem; }
  }
}