/*
 * Salāh Tracker — minimal supplementary styles.
 * Tailwind (loaded via CDN in index.php) handles the bulk of styling.
 */

html, body {
  background: #050811;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overscroll-behavior-y: none;
}

/* Prevent iOS from zooming in on focused inputs and getting stuck there
   after the input blurs. The trigger is *any* text input with computed
   font-size < 16px. Tailwind classes like .text-sm (14 px) override our
   bare-type selector, so we use `!important` to guarantee the floor —
   without it, iOS Safari latches the page at the zoomed scale even after
   the modal is dismissed. */
input,
select,
textarea {
  font-size: 16px !important;
}

/* ─── Scrollbars ──────────────────────────────────────────────
   Hide chrome by default so the app reads as a native shell, not a
   webpage. Re-appear only while the user is actively scrolling — we
   flip `data-scrolling="true"` on the documentElement from JS for a
   short window after each scroll (see installScrollIndicator in
   app.jsx). The thin amber thumb is visible only during that window,
   so the user always has a momentary cue that "yes, there's more".
   Firefox doesn't expose ::-webkit-scrollbar, so we use scrollbar-color
   as a fall-back hint there. */
* {
  scrollbar-width: none; /* Firefox: hidden by default */
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
html[data-scrolling="true"] *,
html[data-scrolling="true"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 165, 116, 0.45) transparent;
}
html[data-scrolling="true"] *::-webkit-scrollbar,
html[data-scrolling="true"]::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: transparent;
}
html[data-scrolling="true"] *::-webkit-scrollbar-thumb,
html[data-scrolling="true"]::-webkit-scrollbar-thumb {
  background: rgba(212, 165, 116, 0.55);
  border-radius: 2px;
  transition: background 0.2s ease;
}
html[data-scrolling="true"] *::-webkit-scrollbar-thumb:hover,
html[data-scrolling="true"]::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 165, 116, 0.75);
}
html[data-scrolling="true"] *::-webkit-scrollbar-track,
html[data-scrolling="true"]::-webkit-scrollbar-track {
  background: transparent;
}

/* Selection color */
::selection {
  background: rgba(212, 165, 116, 0.3);
  color: #f5e6d3;
}

/* Pulse animation for tasbih target-hit feedback. */
@keyframes salaah-pulse {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.15); transform-origin: center; }
}

/* ─── Safe-area helpers ────────────────────────────────────────
   When the app runs as a PWA on iOS (and most Android home-screen
   installs), the top status bar overlays the viewport because we
   declared `viewport-fit=cover` and `apple-mobile-web-app-status-bar-
   style: black-translucent`. Without padding the first row of the
   header sits under the notch / status bar, making the location and
   settings buttons hard or impossible to tap. The class below pads
   the top by the system inset while keeping a sensible minimum on
   browsers that don't expose the env var (e.g. desktop). */
.safe-pt {
  padding-top: max(2rem, calc(env(safe-area-inset-top) + 0.75rem));
}

/* ─── Arabic typography ────────────────────────────────────────
   `.font-arabic-body` is the kitaab-style face — Scheherazade New is
   a traditional naskh that's used in many printed Quran/kitaab books;
   Noto Naskh Arabic is the modern, very-readable backup. Use this for
   body Arabic (prayer names, dua text, surah headings) where legibility
   matters. Reserve `'Amiri Quran'` for display Arabic (the wordmark and
   large salaam line). */
.font-arabic-body {
  font-family: "Scheherazade New", "Noto Naskh Arabic", "Amiri", serif;
  font-feature-settings: "kern", "calt", "liga";
}

/* ─── Open Mashurah (§14b) ─────────────────────────────────────
   Community-board theming. The header pairs an SVG mihrāb-arch
   silhouette with a tiled Islamic geometric pattern background so
   the section reads as a distinct "council space" inside the More
   hub. All colours stay in the amber/stone palette already used
   elsewhere — the section is intentionally calm and warm, not loud. */

.mashurah-header {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 165, 116, 0.18);
  border-radius: 2px;
  background:
    linear-gradient(180deg,
      rgba(212, 165, 116, 0.06) 0%,
      rgba(212, 165, 116, 0.02) 60%,
      rgba(5, 8, 17, 0)        100%),
    /* 8-point star tile, very low opacity, on the deep-blue base.
       Built from two overlapping rotated squares as repeating
       conic-gradients so we don't need an image asset. */
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(212, 165, 116, 0.045) 0deg 22.5deg,
      transparent              22.5deg 45deg
    ),
    #050811;
  background-size: auto, 28px 28px, auto;
}

/* The pointed-arch silhouette sits behind the title and fades into the
   background. Pure CSS — built from a radial gradient + a clip-path so
   we don't add an SVG asset for it. */
.mashurah-header-arch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 110%,
      rgba(212, 165, 116, 0.18) 0%,
      rgba(212, 165, 116, 0.05) 35%,
      transparent              65%);
  -webkit-mask:
    radial-gradient(60% 95% at 50% 100%, #000 60%, transparent 62%);
          mask:
    radial-gradient(60% 95% at 50% 100%, #000 60%, transparent 62%);
}

/* Hover/tap state for the username pill in a post. Underlined dotted to
   hint that more info reveals on interaction. */
.mashurah-username {
  text-decoration: underline dotted rgba(212, 165, 116, 0.35);
  text-underline-offset: 3px;
  cursor: help;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.mashurah-username:hover,
.mashurah-username:focus {
  color: #f5e6d3;
  text-decoration-color: rgba(245, 230, 211, 0.6);
  outline: none;
}

/* Card hover lift (desktop only — touch ignores). */
@media (hover: hover) {
  .mashurah-card {
    transition: border-color 0.18s ease, background 0.18s ease;
  }
  .mashurah-card:hover {
    border-color: rgba(212, 165, 116, 0.25);
    background: rgba(120, 113, 108, 0.06);
  }
}