/**
 * Site-wide mobile layout helpers — no text/content changes.
 * Loaded after page styles so these act as a safety net for overflow and fit.
 */

html {
  overflow-x: clip;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* Long words, URLs, and emails */
p,
li,
td,
th,
dd,
dt,
blockquote,
figcaption,
label,
h1,
h2,
h3,
h4,
h5,
h6,
address,
cite,
a {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* Media & embeds */
img,
svg,
video,
canvas,
iframe,
object,
embed {
  max-width: 100%;
  height: auto;
}

pre,
code {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Tables: fit narrow viewports without clipping (cells wrap; layout stays tabular) */
@media (max-width: 900px) {
  table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  th,
  td {
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Wide numeric reference tables (e.g. conventional loan limits): scroll horizontally; do not squash columns */
  .limits-table-wrap table.limits-table {
    width: auto;
    max-width: none;
    min-width: 36rem;
    table-layout: auto;
  }

  .limits-table-wrap th,
  .limits-table-wrap td {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

/* Conforming limits: override global td/th overflow-wrap outside the 900px block too */
.limits-table-wrap th,
.limits-table-wrap td {
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
}

/* Common layout containers — avoid flex/grid forcing page width */
.container,
.site-nav,
.hero-inner,
[class*="grid"],
[class*="Grid"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* Top bar: allow wrapping without horizontal scroll */
.topbar {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .site-nav {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
}

/* Mobile hamburger + dropdown — consistent tap targets, stacking, and panel position
   (overrides per-page inline CSS that used fixed top:64px, missing overflow, tiny hit areas) */
@media (max-width: 900px) {
  #site-nav.site-nav {
    overflow: visible !important;
    position: relative !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  #site-nav .nav-logo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 56px);
  }

  #site-nav .nav-logo img {
    max-height: 52px;
    height: auto;
    width: auto;
  }

  #site-nav .menu-btn {
    display: flex !important;
    position: relative;
    z-index: 200;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
    pointer-events: auto;
  }

  #site-nav.nav-mobile-open .nav-links,
  #site-nav.nav-mobile-open ul.nav-links {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 150 !important;
    box-shadow: 0 8px 24px rgba(27, 58, 107, 0.22);
    background: var(--navy, #1b3a6b) !important;
    padding: 1rem 1.5rem 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    gap: 0.25rem !important;
    align-items: stretch !important;
  }

  #site-nav.nav-mobile-open .nav-links li {
    width: 100%;
  }

  /* Verbatim Loan Options pages use navy menu background but lacked link color overrides
     (desktop .nav-links a { color: navy } hid links). Match index / testimonials mobile menu. */
  #site-nav.nav-mobile-open .nav-links a {
    min-height: 2.75rem;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.95) !important;
    white-space: normal !important;
    padding: 0.65rem 0.5rem !important;
    border-radius: 6px;
  }

  #site-nav.nav-mobile-open .nav-links a:hover {
    color: var(--gold, #c9a84c) !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  #site-nav.nav-mobile-open .nav-links .nav-cta {
    background: var(--gold, #c9a84c) !important;
    color: var(--navy-deep, #112448) !important;
    margin-left: 0 !important;
    margin-top: 0.35rem !important;
    text-align: center !important;
    width: 100% !important;
    justify-content: center !important;
  }

  #site-nav.nav-mobile-open .nav-links .nav-cta:hover {
    filter: brightness(1.06);
    color: var(--navy-deep, #112448) !important;
  }
}