/* ============================================================
   4Wealth — Mobile Responsive Layer  (mobile.css)
   Additive only — layered on top of each page's existing CSS.
   Linked on every page via <link rel="stylesheet" href="mobile.css">
   ============================================================ */


/* ── 1. HAMBURGER BUTTON ─────────────────────────────────────── */

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  z-index: 1100;
  position: relative;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: rgba(242, 244, 243, 0.85);
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.28s ease, background 0.28s ease;
  transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* ── 2. MOBILE FULL-SCREEN MENU OVERLAY ──────────────────────── */

.nav-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: #060d10;
  z-index: 1050;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 80px 0 56px;
  flex-direction: column;
}

.nav-mobile-menu.open {
  display: flex;
}

.nav-mobile-inner {
  display: flex;
  flex-direction: column;
  padding: 8px 20px 0;
  gap: 0;
}

/* ── Accordion items ── */
.nm-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nm-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: rgba(242, 244, 243, 0.80);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
  min-height: 52px;
}

.nm-trigger:active,
.nm-trigger:focus { color: #f2f4f3; outline: none; }
.nm-item.open > .nm-trigger { color: #f2f4f3; }

/* Chevron */
.nm-chevron {
  width: 18px;
  height: 18px;
  stroke: rgba(242, 244, 243, 0.35);
  flex-shrink: 0;
  transition: transform 0.24s ease;
}
.nm-item.open > .nm-trigger .nm-chevron { transform: rotate(180deg); }

/* ── Accordion sub-panel ── */
.nm-sub {
  display: none;
  flex-direction: column;
  padding: 4px 0 14px;
  gap: 2px;
}
.nm-item.open > .nm-sub { display: flex; }

.nm-sub-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14.5px;
  color: rgba(242, 244, 243, 0.60);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.nm-sub-link:active,
.nm-sub-link:focus {
  background: rgba(0,130,126, 0.08);
  color: #f2f4f3;
  outline: none;
}

.nm-sub-ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(0,130,126, 0.08);
  border: 1px solid rgba(0,130,126, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #00827E;
}

.nm-sub-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(242, 244, 243, 0.88);
  display: block;
}

.nm-sub-desc {
  font-size: 12px;
  color: rgba(242, 244, 243, 0.38);
  display: block;
  margin-top: 2px;
}

/* ── Bottom CTA strip ── */
.nm-cta-wrap {
  padding: 24px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.nm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border-radius: 999px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.22s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 50px;
}

.nm-cta-solid {
  background: rgba(0,130,126, 0.10);
  border: 1px solid rgba(0,130,126, 0.55);
  color: #F2F4F3;
}
.nm-cta-solid:active { background: rgba(0,130,126, 0.22); }

.nm-paybill-form {
  margin: 0;
  padding: 0;
  display: block;
}

.nm-paybill-btn {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border-radius: 999px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(242, 244, 243, 0.65);
  cursor: pointer;
  transition: all 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.nm-paybill-btn:active {
  border-color: rgba(255, 255, 255, 0.22);
  color: #f2f4f3;
}


/* ── 3. ACTIVATE HAMBURGER, HIDE DESKTOP NAV ON MOBILE ───────── */

@media (max-width: 760px) {

  /* Show the hamburger button */
  .nav-hamburger {
    display: flex;
  }

  /* Hide all direct children of nav except the hamburger */
  #nav4w > .nav-item,
  #nav4w > a.nav-link,
  #nav4w > .nav-cta,
  #nav4w > form {
    display: none !important;
  }

  /* Shrink + reflow the nav pill itself */
  #nav4w {
    padding: 10px 16px !important;
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    justify-content: space-between;
  }

  /* Lock body scroll when menu is open */
  body.nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}


/* ── 4. CROSS-PAGE LAYOUT FIXES ──────────────────────────────── */

/* 4a — Input font size ≥ 16px → prevents iOS zoom-on-focus */
@media (max-width: 760px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 4b — Form field rows: stack to single column below 600px */
@media (max-width: 600px) {
  .field-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

/* 4c — CTA bands: stack below 640px */
@media (max-width: 640px) {
  .cta {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .cta-actions {
    flex-wrap: wrap;
  }
  .cta-actions .btn,
  .cta-actions form,
  .cta-actions input[type="submit"] {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }
}

/* 4d — Buttons: meet 44px minimum tap target */
@media (max-width: 760px) {
  .btn {
    min-height: 44px;
  }
}

/* 4e — Hero sub / tagline: enforce readable floor */
@media (max-width: 480px) {
  .hero-sub,
  .hero-tagline,
  p.hero-sub {
    font-size: max(15px, 3.8vw) !important;
    line-height: 1.55 !important;
  }
}

/* 4f — Footer: 2 cols below 520px, 1 col below 400px */
@media (max-width: 520px) {
  .foot-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 16px !important;
  }
}
@media (max-width: 380px) {
  .foot-top {
    grid-template-columns: 1fr !important;
  }
}

/* 4g — Blog prev/next nav: stack on very small screens */
@media (max-width: 480px) {
  .blog-nav {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .blog-nav-item.next {
    text-align: left !important;
  }
}

/* 4h — Article panel: reduce padding on mobile */
@media (max-width: 480px) {
  .article-panel {
    padding: 32px 20px 48px !important;
    border-radius: 12px !important;
  }
}

/* 4i — Office / people grids: force readable column widths */
@media (max-width: 480px) {
  .people-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .person-photo {
    height: 120px !important;
  }
}

/* 4j — Hero actions: stack buttons vertically on small screens */
@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column !important;
    width: 100%;
  }
  .hero-actions .btn,
  .hero-actions form,
  .hero-actions input[type="submit"] {
    width: 100%;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }
}