/* MartialQA responsive / mobile fixes. Desktop layout is unchanged.
   Mobile nav is a pure CSS toggle (hidden checkbox) so it survives the
   page's client-side re-render. No JavaScript involved. */

img { max-width: 100%; height: auto; }

/* Comparison tables: let the fr columns shrink so text wraps instead of
   overflowing. Matched with and without a space after the colon, in case the
   runtime reserialises inline styles. The .mqa-cmp scroll below is a fallback. */
[style*="grid-template-columns:1.3fr 1fr 1fr"],
[style*="grid-template-columns: 1.3fr 1fr 1fr"] {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) !important;
}

/* Cloudflare Turnstile must never bleed outside the form. */
#turnstile-slot { max-width: 100%; }
#turnstile-slot iframe { max-width: 100% !important; }

/* Mobile nav: hidden checkbox drives the menu. */
.mqa-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.mqa-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 9px;
  cursor: pointer;
}
.mqa-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #1E2024;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.mqa-toggle:checked ~ .mqa-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mqa-toggle:checked ~ .mqa-burger span:nth-child(2) { opacity: 0; }
.mqa-toggle:checked ~ .mqa-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  .mqa-burger { display: flex !important; order: 2; }

  .mqa-navwrap {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px 16px !important;
  }
  .mqa-navwrap > a { order: 1; }
  .mqa-navwrap img { height: 34px !important; }

  .mqa-navlinks { display: none !important; order: 3; }
  .mqa-toggle:checked ~ .mqa-navlinks {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 6px 0 10px !important;
  }
  .mqa-navlinks details > div {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    min-width: 0 !important;
    padding: 4px 0 4px 10px !important;
    margin-top: 4px !important;
  }

  /* Comparison table: readable cells, and a scroll fallback so it can never clip. */
  [style*="grid-template-columns:1.3fr 1fr 1fr"] > div,
  [style*="grid-template-columns: 1.3fr 1fr 1fr"] > div {
    padding: 12px 10px !important;
    font-size: 12.5px !important;
  }
  .mqa-cmp { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Forms: tighter padding so the Turnstile widget fits, plus a hard stop on overflow. */
  form[action="/contact.php"] { padding: 24px 16px !important; }
  #turnstile-slot { overflow-x: auto; }
}