/**
 * mobile.css — shared phone-first fixes for The Barber's Blade
 * Injected into all pages via <link rel="stylesheet" href="/mobile.css">
 */

/* ── iOS safe area insets ───────────────────────────────── */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* Push fixed nav below notch */
.back-btn,
.home-btn,
.btn-home,
.btn-settings {
  top: calc(16px + var(--safe-top)) !important;
}

/* Pad scrollable pages above home indicator */
.page {
  padding-bottom: calc(56px + var(--safe-bottom)) !important;
}

/* ── Remove iOS tap highlight ───────────────────────────── */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── Touch targets — minimum 44px ──────────────────────── */
button,
a,
[onclick] {
  min-height: 48px;
}

/* ── Prevent double-tap zoom on buttons ────────────────── */
button,
a {
  touch-action: manipulation;
}

/* ── Nav buttons — never subdued ───────────────────────── */
.back-btn,
.home-btn,
.btn-home,
.btn-settings {
  border-color: rgba(200,165,90,0.7) !important;
}
.back-btn:active,
.home-btn:active,
.btn-home:active,
.btn-settings:active {
  border-color: #c8a55a !important;
}
.back-label,
.home-label,
.nav-label,
.back-kanji,
.home-kanji,
.nav-kanji {
  color: #c8a55a !important;
  font-size: 12px !important;
  opacity: 1 !important;
}
.back-kanji,
.home-kanji,
.nav-kanji {
  font-size: 16px !important;
  color: #c0181a !important;
}

/* ── All buttons — minimum readable text ───────────────── */
.btn-label,
.btn-sub,
.btn-text {
  opacity: 1 !important;
}
.btn-label { color: #c8a55a !important; }
.btn-sub   { color: var(--gold) !important; font-size: 11px !important; }

/* ── No invisible borders on interactive elements ──────── */
button[class*="btn"],
a[class*="btn"] {
  border-color: rgba(200,165,90,0.65) !important;
}

/* ── Smooth momentum scroll ────────────────────────────── */
.list-wrap,
.roster-list,
.consult-list,
[style*="overflow-y"] {
  -webkit-overflow-scrolling: touch;
}

/* ── Prevent horizontal overflow on mobile ─────────────── */
body {
  overflow-x: hidden;
}

/* ── Input zoom prevention (iOS zooms on focus if <16px) ── */
input,
textarea,
select {
  font-size: 16px !important;
}

/* Preserve letter-spacing while bumping font-size */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  font-size: 16px !important;
}