/* Mobile menu tweaks */
@media (max-width: 768px) {
  /* shrink container and links */
  #header div.menu-test-container {
    font-size: 1.15em;         /* down from 1.5em desktop */
    margin-bottom: 1em;
    min-width: auto;
    max-width: 100%;
  }

  #header div.menu-test-container a {
    font-size: 0.9em;
    line-height: 1.2;
  }
}

/* (optional) slightly smaller on very small phones */
@media (max-width: 420px) {
  #header div.menu-test-container { font-size: 1.05em; }
  #header div.menu-test-container a { font-size: 0.85em; }
}
/* Stop iOS Safari from auto-inflating text after navigation */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Mobile menu sizing that won’t get inflated */
@media (max-width: 768px) {
  #header .menu-test-container { 
    font-size: 1.05rem;           /* use rem to decouple from parent bumps */
    margin-bottom: 1rem;
    min-width: auto;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  #header .menu-test-container a {
    font-size: 0.9rem;
    line-height: 1.2;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* iOS-targeted safety net */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    #header .menu-test-container,
    #header .menu-test-container a {
      -webkit-text-size-adjust: 100% !important;
    }
  }
}

@media (max-width: 768px) {
  #header .menu-test-container a {
    display: inline-block;           /* removes block-level line gaps */
    line-height: 1.1em !important;   /* tightens vertical spacing */
    padding-top: 0.2em !important;   /* reduce default padding */
    padding-bottom: 0.2em !important;
    margin: 0 !important;            /* remove any margin between links */
  }

  #header .menu-test-container li {
    margin: 0 !important;
    padding: 0.2em 0 !important;     /* small top/bottom gap per item */
  }

  #header .menu-test-container ul {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ===== Mobile menu: consistent size + tight spacing (no browser targeting) ===== */

:root {
  /* Tweak these two if you want smaller/larger */
  --menu-mobile: clamp(0.90rem, 2.6vw, 1.00rem);
  --menu-link-mobile: clamp(0.82rem, 2.3vw, 0.95rem);
}

@media (max-width: 768px) {
  /* Lock the container size independent of page-specific em scaling */
  #header .menu-test-container {
    font-size: var(--menu-mobile) !important;
    margin-bottom: 1rem !important;
    min-width: auto !important;
    max-width: 100% !important;
  }

  /* Remove list gaps */
  #header .menu-test-container ul { margin: 0 !important; padding: 0 !important; }
  #header .menu-test-container li { margin: 0 !important; padding: 0.2rem 0 !important; list-style: none; }

  /* Tight but tappable links */
  #header .menu-test-container a {
    display: inline-block;
    font-size: var(--menu-link-mobile) !important;
    line-height: 1.2 !important;
    padding: 0.25em 0 !important;  /* uses the link’s own font-size */
    margin: 0 !important;
    font-weight: 500;
  }

  /* Keep “current” items from growing */
  #header .menu-test-container .current-menu-item > a,
  #header .menu-test-container .current_page_item > a,
  #header .menu-test-container .current-menu-ancestor > a {
    font-size: var(--menu-link-mobile) !important;
    line-height: 1.2 !important;
    padding-top: 0.25em !important;
    padding-bottom: 0.25em !important;
    font-weight: 600;
  }

  /* Catch common body-template overrides so it’s identical on all pages */
  body.home  #header .menu-test-container a,
  body.page  #header .menu-test-container a,
  body.single#header .menu-test-container a,
  body.archive#header .menu-test-container a {
    font-size: var(--menu-link-mobile) !important;
    line-height: 1.2 !important;
  }
}