/* WellPeople Solutions — shared mobile + safe-area styles.
   Loaded on all user-facing pages. Brand palette preserved exactly.
   Widget styles (welcome modal, settings nudge, feedback widget)
   live inside their own JS files and are not duplicated here. */

/* ============ Safe-area-inset support (all viewports) ============
   !important is used here because some pages set padding via inline
   shorthand (e.g. <footer style="padding: 14px 28px">) which would
   otherwise override these rules. Safe-area is a hardware constraint,
   not a design choice — it only adds non-zero padding on devices that
   actually have a notch / home indicator. */
@supports (padding: env(safe-area-inset-top)) {
  header {
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
  }
  footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  #input-area {
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
  body.wp-auth-page {
    padding-top: calc(24px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

/* ============ Mobile-only adjustments (≤640px) ============ */
@media (max-width: 640px) {
  /* C2: prevent iOS auto-zoom on input focus.
     16px is the iOS Safari threshold below which it zooms on focus.
     Selectors enumerate input types so this matches the specificity of
     the page rules (e.g. input[type="text"]) and wins via load order. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input:not([type]),
  select,
  textarea,
  /* #user-input on the chat page has ID specificity, so match it explicitly */
  #user-input {
    font-size: 16px;
  }

  /* H7: enforce 44px minimum touch target on small action buttons. */
  .action-btn,
  .suggest-btn,
  .picker-btn,
  .upload-btn,
  .btn-danger {
    min-height: 44px;
  }

  /* C1: convert top nav into a horizontally scrollable strip.
     Preserves the existing navy bar look — items just scroll instead of overflow. */
  nav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  nav::-webkit-scrollbar {
    display: none;
  }
  nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* Hide the email vanity element on mobile to save horizontal room. */
  .nav-email {
    display: none !important;
  }
  /* Logout sits naturally at the end of the scrollable strip. */
  .nav-right {
    margin-left: 8px;
    flex: 0 0 auto;
    gap: 0;
  }

  /* C4 + H4: stack the output header vertically and let action buttons wrap.
     This is the success moment after generation — buttons must be tappable. */
  .output-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .output-actions {
    flex-wrap: wrap;
  }
  .output-actions .action-btn {
    flex: 1 1 auto;
  }

  /* H5: keep auth links from breaking mid-phrase ("Sign up" → "Sign" / "up"). */
  body.wp-auth-page .footer-link a {
    white-space: nowrap;
  }
}

/* ============ Desktop-only adjustments (≥641px) ============ */
@media (min-width: 641px) {
  /* Push Feedback + Log out to the right edge of the nav.
     Everything before #nav-feedback-link stays left-aligned.
     Mobile is intentionally excluded — the nav is a horizontal
     scroll strip there and items stay in source order. */
  nav #nav-feedback-link {
    margin-left: auto;
  }
}