/*
 * Mobile navigation menu — shared across all pages.
 *
 * On viewports ≤576px, the .nav-logo turns into a "Menu" trigger that opens
 * a popup with Home / Tools / Blog / About. Desktop is unchanged.
 *
 * Selector specificity matters here: every page's own stylesheet already
 * sets `.nav-logo span { display: none }` (specificity 0,1,1) and
 * `.nav-logo { font-size: 0 }` on mobile. We use `.main-nav .nav-logo
 * .nav-menu-label` (specificity 0,3,0) so this file wins without needing
 * !important. Same trick for the explicit font-size on the label.
 */

/* Kill the iOS/Android tap-highlight black box around the transparent logo. */
.main-nav .nav-logo {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.main-nav .nav-logo img {
  -webkit-tap-highlight-color: transparent;
}

/* Hide the "Menu" label on desktop. */
.nav-menu-label { display: none; }

/* Overlay + panel chrome — always defined so they're ready when JS toggles. */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 102, 141, 0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 10000; /* above tool paralysis (9998) and modal (9999) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.mobile-menu-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-panel {
  position: absolute;
  top: 70px;
  left: 16px;
  right: 16px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  padding: 8px 0;
  transform: translateY(-12px);
  transition: transform 0.22s ease;
  overflow: hidden;
}
.mobile-menu-overlay.is-open .mobile-menu-panel {
  transform: translateY(0);
}
.mobile-menu-panel a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  color: #05668d;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  border-bottom: 1px solid #eef1f2;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-panel a:last-child { border-bottom: none; }
.mobile-menu-panel a:hover,
.mobile-menu-panel a:active,
.mobile-menu-panel a.is-current {
  background: #f5f9f8;
  color: #00a896;
}
.mobile-menu-panel a svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #00a896;
}

@media (max-width: 576px) {
  /* Make the logo behave like a menu trigger. */
  .main-nav .nav-logo { cursor: pointer; }

  /* Show the "Menu" label. Specificity 0,3,0 beats per-page
     `.nav-logo span { display: none }` (0,1,1) and overrides
     `.nav-logo { font-size: 0 }` via the explicit font-size below. */
  .main-nav .nav-logo .nav-menu-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #05668d;
    margin-left: 10px;
  }
  .main-nav .nav-logo .nav-menu-label svg {
    transition: transform 0.2s ease;
  }
  .main-nav .nav-logo.is-menu-open .nav-menu-label svg {
    transform: rotate(180deg);
  }
}