/* Phase 1 - Mobile Foundation + Overflow Fix */

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

body:not(.admin-body) {
  max-width: 100%;
  overflow-x: clip;
  overflow-wrap: anywhere;
}

body:not(.admin-body) img,
body:not(.admin-body) video,
body:not(.admin-body) iframe,
body:not(.admin-body) table {
  max-width: 100%;
}

body:not(.admin-body) img,
body:not(.admin-body) video,
body:not(.admin-body) iframe {
  height: auto;
}

body:not(.admin-body) table {
  display: block;
  overflow-x: auto;
}

body:not(.admin-body) input,
body:not(.admin-body) select,
body:not(.admin-body) textarea,
body:not(.admin-body) button {
  max-width: 100%;
}

@media (max-width: 820px) {
  :root {
    --phase1-mobile-gutter: clamp(12px, 4vw, 18px);
    --phase1-bottom-nav-space: calc(124px + env(safe-area-inset-bottom, 0px));
  }

  body:not(.admin-body) {
    min-width: 0;
    padding-bottom: var(--phase1-bottom-nav-space);
  }

  body:not(.admin-body) main,
  body:not(.admin-body) .site-main,
  body:not(.admin-body) .page-shell,
  body:not(.admin-body) .auth-shell,
  body:not(.admin-body) .register-shell,
  body:not(.admin-body) .search-shell,
  body:not(.admin-body) .member-profile-shell,
  body:not(.admin-body) .faq-shell,
  body:not(.admin-body) .content-shell,
  body:not(.admin-body) .container {
    width: min(100%, 100vw);
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding-inline: var(--phase1-mobile-gutter);
    box-sizing: border-box;
  }

  body:not(.admin-body) .site-header,
  body:not(.admin-body) .site-header-inner,
  body:not(.admin-body) .header-actions,
  body:not(.admin-body) .main-nav,
  body:not(.admin-body) .hero-home,
  body:not(.admin-body) .hero-copy,
  body:not(.admin-body) .hero-actions,
  body:not(.admin-body) .page-card,
  body:not(.admin-body) .auth-card,
  body:not(.admin-body) .register-card,
  body:not(.admin-body) .register-hero-card,
  body:not(.admin-body) .form-panel,
  body:not(.admin-body) .terms-panel,
  body:not(.admin-body) .legal-panel,
  body:not(.admin-body) .search-card,
  body:not(.admin-body) .member-card,
  body:not(.admin-body) .profile-card,
  body:not(.admin-body) .faq-card,
  body:not(.admin-body) .ad-slot,
  body:not(.admin-body) form {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body:not(.admin-body) .page-card,
  body:not(.admin-body) .auth-card,
  body:not(.admin-body) .register-card,
  body:not(.admin-body) .register-hero-card,
  body:not(.admin-body) .form-panel,
  body:not(.admin-body) .terms-panel,
  body:not(.admin-body) .legal-panel,
  body:not(.admin-body) .legal-stack,
  body:not(.admin-body) .legal-item,
  body:not(.admin-body) .section-head,
  body:not(.admin-body) .search-card,
  body:not(.admin-body) .member-card,
  body:not(.admin-body) .profile-card,
  body:not(.admin-body) .faq-card,
  body:not(.admin-body) .seo-hero,
  body:not(.admin-body) .seo-faq-section,
  body:not(.admin-body) .member-home-hero,
  body:not(.admin-body) .member-home-panel {
    width: 100%;
    padding-inline: clamp(14px, 4vw, 22px);
  }

  body:not(.admin-body) h1,
  body:not(.admin-body) .h1,
  body:not(.admin-body) .hero-copy h1,
  body:not(.admin-body) .page-title,
  body:not(.admin-body) .auth-card h1,
  body:not(.admin-body) .register-card h1,
  body:not(.admin-body) .register-hero-card h1,
  body:not(.admin-body) .form-panel h1,
  body:not(.admin-body) .terms-panel h1,
  body:not(.admin-body) .legal-panel h1,
  body:not(.admin-body) .section-head h1,
  body:not(.admin-body) .search-card h1,
  body:not(.admin-body) .faq-card h1,
  body:not(.admin-body) .seo-hero h1 {
    max-width: 100%;
    font-size: clamp(1.75rem, 9vw, 2.75rem);
    line-height: 1.18;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  body:not(.admin-body) h2,
  body:not(.admin-body) .h2,
  body:not(.admin-body) .section-title {
    font-size: clamp(1.25rem, 6vw, 2rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  body:not(.admin-body) .section-head,
  body:not(.admin-body) .register-hero-card,
  body:not(.admin-body) .form-panel,
  body:not(.admin-body) .terms-panel,
  body:not(.admin-body) .legal-panel {
    overflow: visible;
  }

  body:not(.admin-body) .form-panel > *,
  body:not(.admin-body) .auth-panel > *,
  body:not(.admin-body) .terms-panel > *,
  body:not(.admin-body) .legal-panel > *,
  body:not(.admin-body) .register-hero-card > *,
  body:not(.admin-body) .section-head > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  html[dir="rtl"] body:not(.admin-body) .section-head,
  html[dir="rtl"] body:not(.admin-body) .form-panel,
  html[dir="rtl"] body:not(.admin-body) .auth-panel,
  html[dir="rtl"] body:not(.admin-body) .terms-panel,
  html[dir="rtl"] body:not(.admin-body) .legal-panel,
  html[dir="rtl"] body:not(.admin-body) .register-hero-card {
    direction: rtl;
    text-align: right;
  }

  body:not(.admin-body) p,
  body:not(.admin-body) li,
  body:not(.admin-body) label,
  body:not(.admin-body) summary {
    overflow-wrap: anywhere;
  }

  body:not(.admin-body) input,
  body:not(.admin-body) select,
  body:not(.admin-body) textarea {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    font-size: 16px;
  }

  body:not(.admin-body) button,
  body:not(.admin-body) .btn,
  body:not(.admin-body) input[type="submit"],
  body:not(.admin-body) input[type="button"] {
    min-height: 44px;
    box-sizing: border-box;
    white-space: normal;
  }

  body:not(.admin-body) .mobile-app-nav {
    width: min(430px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    inset-inline: 12px !important;
    transform: none !important;
    box-sizing: border-box;
  }

  body:not(.admin-body) .mobile-app-nav-item {
    min-width: 0;
  }

  body:not(.admin-body) .mobile-app-nav-item strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.admin-body) .monayaa-assistant-widget,
  body:not(.admin-body) .assistant-widget,
  body:not(.admin-body) .chat-widget,
  body:not(.admin-body) [class*="assistant"] {
    max-width: calc(100vw - 24px);
  }

  body:not(.admin-body) footer,
  body:not(.admin-body) .site-footer {
    padding-bottom: var(--phase1-bottom-nav-space);
  }
}

@media (max-width: 430px) {
  body:not(.admin-body) .hero-actions,
  body:not(.admin-body) .form-actions,
  body:not(.admin-body) .auth-actions,
  body:not(.admin-body) .register-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body:not(.admin-body) .hero-actions > *,
  body:not(.admin-body) .form-actions > *,
  body:not(.admin-body) .auth-actions > *,
  body:not(.admin-body) .register-actions > * {
    width: 100%;
  }
}