/*
 * mobile-fix.css
 * ─────────────────────────────────────────────────────────────────
 * iOS Safari auto-zoom prevention — loaded by every page.
 *
 * iOS Safari zooms the viewport when a focused <input>, <textarea>,
 * or <select> has a computed font-size smaller than 16px.
 * Setting font-size: 16px !important on mobile prevents that zoom
 * without touching desktop styles.
 *
 * !important is required to override:
 *   • per-component class rules  (e.g. .form-input { font-size: 12px })
 *   • inline styles on JS-rendered elements (e.g. style="font-size:10px")
 *
 * Excluded from the fix:
 *   • type="hidden"   — never focused
 *   • type="checkbox" — no text entry
 *   • type="radio"    — no text entry
 *   • type="range"    — no text entry
 *
 * Do NOT add user-scalable=no or maximum-scale=1 to the viewport
 * meta tag — that breaks accessibility (WCAG 1.4.4 Resize text).
 * ─────────────────────────────────────────────────────────────────
 */

/* ── Hebrew typography — Heebo via unicode-range ──────────────────
 *
 * Declares Heebo as the Hebrew subset of every SETT font face.
 * The browser automatically uses these declarations when it
 * encounters Hebrew characters (U+0590–05FF, U+FB1D–FB4F) inside
 * any element — no extra classes, no JS, works on every page.
 *
 * Font files are sourced directly from Google's CDN (gstatic.com),
 * the same origin used by the Google Fonts <link> tag.
 * ──────────────────────────────────────────────────────────────── */

/* Inter — primary UI font */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/heebo/v28/NGSpv5_NC0k9P_v6ZUCbLRAHxK1E1yyccg.ttf) format('truetype');
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/heebo/v28/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EiSyccg.ttf) format('truetype');
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/heebo/v28/NGSpv5_NC0k9P_v6ZUCbLRAHxK1Euyyccg.ttf) format('truetype');
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/heebo/v28/NGSpv5_NC0k9P_v6ZUCbLRAHxK1Ebiuccg.ttf) format('truetype');
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/heebo/v28/NGSpv5_NC0k9P_v6ZUCbLRAHxK1Ebiuccg.ttf) format('truetype');
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}

/* Playfair Display — display numerals and headings */
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/heebo/v28/NGSpv5_NC0k9P_v6ZUCbLRAHxK1Ebiuccg.ttf) format('truetype');
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}

/* Cormorant Garamond — editorial headings */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/heebo/v28/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EiSyccg.ttf) format('truetype');
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}

/* ── App footer — quiet product signature ─────────────── */
.app-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 40px 48px 36px;
  text-align: center;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.45;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 767px) {
  /* ── Tab navigation: horizontal swipe scrolling ───────────────────
   *
   * .tabs-bar uses overflow-x: auto so tabs don't wrap.
   * Without this block, any ancestor with overflow-x: hidden (common
   * on .main for clipping) traps touch events on iOS Safari and
   * prevents the user from swiping the tab row.
   *
   * Fix: override parent clipping containers to overflow-x: clip,
   * which clips the painting surface without creating a scroll
   * context, leaving the child scroll container free to receive swipes.
   *
   * This rule is intentionally global — it applies to every page that
   * renders a .tabs-bar inside a .main wrapper, so all project views
   * and templates automatically inherit the correct mobile behavior.
   * ────────────────────────────────────────────────────────────────── */
  .main {
    overflow-x: clip; /* NOT hidden — hidden creates a scroll container that traps touch */
  }

  .tabs-bar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* momentum scroll on iOS Safari */
    scrollbar-width: none;             /* hide scrollbar on Firefox */
  }
  .tabs-bar::-webkit-scrollbar { display: none; } /* hide scrollbar on WebKit */

  /* ── iOS auto-zoom prevention ─────────────────────────────────────── */
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  input::placeholder,
  textarea::placeholder {
    font-size: 12px;
  }

  .app-footer {
    padding-bottom: 80px;
    letter-spacing: 0.18em;
  }
}