/* MakeAMarket mobile polish — global tweaks loaded on every page.
   Keeps existing desktop layout intact, patches mobile-specific issues
   that audited badly at iPhone-15 viewport (390 x 844).
*/

/* -------------------------------------------------------------------------
   1) iOS-zoom-on-input fix.
   iOS Safari zooms the whole page when a user taps any input whose computed
   font-size is < 16px. Many of our .input / .textarea / .select are 14-15px.
   Patch: at mobile widths, lock all form-control font-size at 16px. UX win:
   no more disorienting page zoom on tap.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  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[type="time"],
  input[type="datetime-local"],
  textarea,
  select,
  .input,
  .field,
  .textarea,
  .select {
    font-size: 16px !important;
  }
}

/* -------------------------------------------------------------------------
   2) Minimum tap target heights for common controls on mobile.
   Apple HIG recommends 44pt; 40 is our practical floor.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  button,
  [role="button"],
  .btn,
  .btn-primary,
  .btn-secondary,
  .radio-pill {
    min-height: 40px;
  }
}

/* -------------------------------------------------------------------------
   3) Header layout fixes for narrow screens.
   The desktop header has logo + search + nav links + auth slot — too much
   to fit at 390px. Audit showed search overflowing past the viewport edge
   and the auth slot hidden behind .md:flex (mobile users couldn't sign in).
   Patch:
     - Hide the search box on mobile (replace with category nav directly)
     - Force the .md:flex wrapper visible so the auth slot is reachable
     - Hide its non-auth siblings (Create Prediction, How it works text links)
     - Constrain logo height so it doesn't dominate the row
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  header .flex-1.max-w-md.relative {
    display: none !important;
  }
  header .hidden.md\:flex {
    display: flex !important;
    gap: 0.5rem !important;
  }
  header .hidden.md\:flex > a:not([data-keep-mobile]) {
    display: none !important;
  }
  header img[src="logo.svg"],
  header img[alt="MakeAMarket"] {
    max-width: 180px;
    height: 36px !important;
  }
}

/* -------------------------------------------------------------------------
   4) Breadcrumb + back-link tap targets.
   Breadcrumb chains (Home / Crypto / Bitcoin) and "← Back to MakeAMarket"
   links audited at 16-25px tall — below comfortable tap. On mobile, bump
   each link to ~32px tap area without changing the visual size.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Breadcrumb links — match the surrounding .flex.items-center container */
  .flex.items-center.gap-2 > a[href].text-xs,
  .flex.items-center.gap-2 > a[href].text-sm {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
  }
  /* "← Back to MakeAMarket" / "← All markets" arrow links */
  a[href]:has(> span:first-child:not(.gradient-text):not(.text-gradient)):where(:is(.text-xs, .text-sm)),
  a.text-sm[href^="/"],
  a.text-xs[href^="/"] {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* -------------------------------------------------------------------------
   5) Category nav row — keep horizontally scrollable, but make sure the
   scroll cleanly hides its scrollbar and items are tap-friendly.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #category-nav {
    gap: 0.125rem;
  }
  #category-nav .cat-link {
    padding: 0.5rem 0.75rem;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }
}

/* -------------------------------------------------------------------------
   6) Respect iOS notch + home-indicator safe-area insets.
   ------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  #mam-ios-install,
  .mobile-nav-bottom {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* -------------------------------------------------------------------------
   7) Hide install banner when already running as PWA.
   ------------------------------------------------------------------------- */
@media (display-mode: standalone) {
  #mam-ios-install { display: none !important; }
}