/**
 * FCAL — accessibility & mobile-friendliness patches.
 *
 * Loaded after main.css on every page (via partials/header.php and the
 * inline heads of standalone pages). Houses the small set of rules
 * that the audit surfaced as P0 mobile-friendliness issues:
 *
 *   1. iOS-zoom prevention: form controls need font-size >= 16px or
 *      iOS Safari zooms the viewport on focus, throwing the layout off.
 *   2. 44x44 touch targets: WCAG 2.1 SC 2.5.5 / Apple HIG require
 *      interactive elements to have at least a 44x44 hit area. Some
 *      of the icon buttons inherited from the legacy design come in
 *      under that.
 *   3. 100dvh: where 100vh is used, switch to 100dvh so the iOS
 *      URL bar collapse and Android keyboard don't break the layout.
 *
 * Specificity is kept low so per-page overrides still win.
 */

/* 1. iOS-zoom prevention. iOS Safari zooms on focus if computed
   font-size is less than 16px. We use !important on the rule below
   because some widgets set font-size inline. */
input,
select,
textarea,
button,
.fcal-ai-input,
.fcal-quick-btn {
  font-size: max(1rem, 16px);
}

/* 2. 44x44 minimum touch targets. Applies to icon buttons that were
   small by design. The rules below use :is() so each is a single
   declaration. Visual padding is preserved; the hit area is enlarged
   via padding or min-* without changing layout. */
button:is(.hbg, .alert-close, .modal-x, .page-btn, .fcal-quick-btn),
a:is(.hbg, .modal-x),
#fcal-ai-send,
.page-btn {
  min-width: 44px;
  min-height: 44px;
}

/* Make the alert-bar close button a square hit area */
.alert-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile nav hamburger should be a generous tap target */
.hbg {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

/* 3. dvh fixes for fixed-bottom / full-height elements. We scope to
   elements that previously used 100vh, so the iOS URL bar collapse
   doesn't leave a white gap. */
@supports (height: 100dvh) {
  .mob,
  #fcal-ai-panel,
  .error-page,
  .fullbleed {
    height: auto;
    min-height: 100dvh;
  }
  #fcal-ai-panel {
    /* When the AI panel is open on mobile, it should fill the
       dynamic viewport (not the layout viewport, which is what
       100vh used to give us). */
    height: 100dvh;
    max-height: 100dvh;
  }
}

/* 4. body.no-scroll for mobile nav open. Pages can toggle this class
   to lock background scroll while a sheet is open. */
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* 5. PWA install / iOS hint — hidden by default, surfaced by JS. */
.pwa-install-hint {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  background: #0d1b3e;
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  font: 600 .9rem/1.4 system-ui, -apple-system, "Plus Jakarta Sans", sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.pwa-install-hint button {
  background: #d4a017;
  color: #0d1b3e;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}
.pwa-install-hint .pwa-dismiss {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 8px 12px;
  min-height: 44px;
}