/* ============================================================
   AL-HARAMEEN site-v2 — design system
   Brand: deep green + gold on warm paper; dark prayer panel.
   ============================================================ */

:root {
  --green-950: #072115;
  --green-900: #0B3D26;
  --green-700: #0E5B38;
  --green-600: #0F7A44;
  --green-100: #E2F0E7;
  --gold-500: #C9A544;
  --gold-300: #E8D493;
  --paper: #F7F6F1;
  --card: #FFFFFF;
  --ink: #17211B;
  --ink-soft: #4C5850;
  --ink-faint: #8A948C;
  --line: #E3E1D6;
  --panel: #0D1F16;
  --panel-2: #142B1E;
  --panel-line: #24402F;
  --panel-ink: #ECF3ED;
  --panel-soft: #9FB4A5;
  --live: #35C271;
  --shadow-sm: 0 1px 3px rgba(13, 31, 22, .08);
  --shadow-lg: 0 16px 48px rgba(13, 31, 22, .18);
  --radius: 14px;
  --font-head: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.35; text-wrap: balance; }

/* ---------- header ---------- */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; gap: 26px;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); }
.brand .mark { width: 40px; height: 40px; }
.brand .word { font-size: 21px; font-weight: 800; color: var(--green-700); letter-spacing: .01em; }
.brand .word span { color: var(--gold-500); }

.main-nav { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; }
.main-nav a {
  padding: 8px 14px; border-radius: 9px; font-weight: 500; font-size: 15.5px;
  color: var(--ink-soft); transition: background .15s, color .15s;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { background: var(--green-100); color: var(--green-700); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 14px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  transition: border-color .15s, color .15s;
}
.icon-btn:hover { border-color: var(--green-600); color: var(--green-700); }
.lang-switch { font-weight: 700; color: var(--green-700); }

/* ---------- hero ---------- */
.hero { padding: 52px 0 26px; text-align: center; }
.hero h1 {
  font-size: clamp(28px, 4.6vw, 46px); font-weight: 800; color: var(--green-900);
}
.hero .tagline { font-size: clamp(16px, 2vw, 19.5px); color: var(--ink-soft); margin-top: 8px; }

/* ---------- prayer panel ---------- */
.prayer-panel {
  background: linear-gradient(160deg, var(--panel-2), var(--panel) 55%);
  border: 1px solid var(--panel-line);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  color: var(--panel-ink);
  padding: 30px 34px 24px;
  margin-top: 30px;
  position: relative;
  overflow: hidden;
}
.prayer-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 240px at 85% -60px, rgba(53,194,113,.16), transparent 60%);
}
.panel-top {
  display: grid; grid-template-columns: 1fr 1.35fr 1fr;
  gap: 24px; align-items: center; position: relative;
}
.panel-cell { text-align: center; }
.panel-label {
  font-size: 13.5px; font-weight: 700; color: var(--live);
  letter-spacing: .04em; margin-bottom: 6px;
}
.city-name { font-family: var(--font-head); font-size: clamp(26px, 3vw, 38px); font-weight: 800; }
.city-pick-btn {
  margin-top: 10px; background: rgba(255,255,255,.06);
  border: 1px solid var(--panel-line); color: var(--panel-ink);
  border-radius: 999px; padding: 7px 18px; font-size: 14px; font-weight: 500;
  transition: background .15s, border-color .15s;
}
.city-pick-btn:hover { background: rgba(255,255,255,.12); border-color: var(--live); }

.big-clock {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(44px, 7vw, 76px); line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  direction: ltr; unicode-bidi: embed;
}
.big-clock .sec { color: var(--live); }
/* day period in 12-hour mode: small, beside the digits, never part of the tabular run.
   Isolated for bidi: a strong Arabic letter (ص/م) next to weak digits would
   otherwise be reordered by the browser as one RTL run and jump to the far side. */
/* plaintext: the span resolves its own direction from its first strong character,
   so "غ.و." keeps its trailing dot on the right side and "PM" stays Latin —
   and it never merges with the digits into one bidi run. The gap is a real
   no-break space inside the span (assistive tech hears "07:05 PM"). */
.ap { unicode-bidi: plaintext; display: inline-block; white-space: nowrap; }
.big-clock .ap { font-size: .34em; font-weight: 700; color: var(--panel-soft); margin-inline-start: .1em; letter-spacing: 0; vertical-align: .55em; }
.prayer-chip .p-time .ap { font-size: .58em; font-weight: 600; color: var(--panel-soft); margin-inline-start: .1em; }
.f-digital .ap { font-size: .8em; margin-inline-start: .1em; color: var(--ink-soft); }
table.times td .ap { font-size: .8em; margin-inline-start: .1em; color: var(--ink-soft); }
table.times .today-row td .ap { color: inherit; }
@media print { table.times td .ap { color: #000; } }
/* explorer time cells: same LTR digit box as the homepage chips, so the period
   lands on the page-direction side there too (JS inserts it before the digits on RTL) */
table.times td.t-cell { direction: ltr; unicode-bidi: isolate; }
/* RTL pages: the period is inserted BEFORE the digits (it reads after the number
   in Arabic script, i.e. to the left), so the gap moves to its other side. The
   digit boxes are LTR embeds, hence the physical margins. */
html[dir="rtl"] .big-clock .ap,
html[dir="rtl"] .prayer-chip .p-time .ap,
html[dir="rtl"] .f-digital .ap,
html[dir="rtl"] table.times td .ap { margin-left: 0; margin-right: .1em; }
/* 12h | 24h segmented control; dark glass by default (the prayer panel), a light
   variant for cards. Kept LTR so the two options sit in the same order everywhere. */
.fmt-toggle {
  display: inline-flex; direction: ltr; margin-top: 10px; padding: 3px;
  border: 1px solid var(--panel-line); border-radius: 999px; background: rgba(255,255,255,.06);
}
.fmt-toggle button {
  border: none; background: none; color: var(--panel-soft); cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px; line-height: 1;
  padding: 8px 14px; min-height: 32px; border-radius: 999px; transition: background .15s, color .15s;
}
.fmt-toggle button:hover { color: var(--panel-ink); }
.fmt-toggle button.on { background: var(--live); color: var(--green-900); }
.fmt-toggle.light { border-color: var(--line); background: var(--card); margin-top: 0; }
.fmt-toggle.light button { color: var(--ink-soft); }
.fmt-toggle.light button:hover { color: var(--green-700); }
.fmt-toggle.light button.on { background: var(--green-700); color: #fff; }
/* thumbs, not pointers: a 40px target with a little air between the two options */
@media (pointer: coarse) { .fmt-toggle button { min-height: 40px; padding-inline: 16px; } }
/* the dark panel: the site-wide green focus ring is barely visible on dark glass */
.prayer-panel button:focus-visible, .prayer-panel a:focus-visible { outline-color: var(--panel-ink); }
/* Windows high-contrast: state must survive the loss of custom backgrounds */
@media (forced-colors: active) {
  .fmt-toggle { border: 1px solid ButtonText; }
  .fmt-toggle button.on { forced-color-adjust: none; background: Highlight; color: HighlightText; outline: 2px solid Highlight; outline-offset: -2px; }
}
.date-line { margin-top: 4px; color: var(--panel-soft); font-size: 15px; }
.date-line .hijri { color: var(--gold-300); font-weight: 500; }

.next-wrap { display: flex; align-items: center; justify-content: center; gap: 16px; }
.next-ring { width: 92px; height: 92px; transform: rotate(-90deg); }
.next-ring .track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 7; }
.next-ring .bar { fill: none; stroke: var(--live); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.next-info .next-name { font-family: var(--font-head); font-size: 21px; font-weight: 800; }
.next-info .countdown {
  font-family: var(--font-head); font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--live);
  direction: ltr; unicode-bidi: embed;
}

.prayer-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; margin-top: 26px; position: relative;
}
.prayer-chip {
  background: rgba(255,255,255,.045);
  border: 1px solid transparent;
  border-radius: 12px; text-align: center; padding: 12px 6px 10px;
}
.prayer-chip .p-name { font-size: 14.5px; color: var(--panel-soft); font-weight: 500; }
.prayer-chip .p-time {
  font-family: var(--font-head); font-weight: 700; font-size: 21px;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed;
}
.prayer-chip.is-next {
  background: rgba(53,194,113,.13); border-color: var(--live);
}
.prayer-chip.is-next .p-name { color: var(--live); font-weight: 700; }
.panel-note {
  margin-top: 16px; font-size: 12.5px; color: var(--panel-soft);
  text-align: center; position: relative;
}

/* ---------- featured cities ---------- */
.featured-strip {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-sm);
  margin-top: 22px; padding: 20px 18px 14px;
}
.featured-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.f-city { text-align: center; padding: 6px 4px; border-inline-start: 1px dashed var(--line); }
.f-city:first-child { border-inline-start: none; }
.f-clock { width: 74px; height: 74px; margin: 0 auto 8px; position: relative; }
.f-clock svg { width: 100%; height: 100%; }
.f-clock .face { fill: var(--panel); stroke: var(--gold-500); stroke-width: 3; }
.f-clock .tick { stroke: rgba(255,255,255,.5); stroke-width: 1.6; }
.f-clock .hand-h { stroke: #fff; stroke-width: 3.2; stroke-linecap: round; }
.f-clock .hand-m { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.f-clock .hand-s { stroke: var(--live); stroke-width: 1.2; stroke-linecap: round; }
.f-clock .pin { fill: var(--gold-500); }
.f-name { font-family: var(--font-head); font-weight: 700; font-size: 16.5px; }
.f-digital { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; direction: ltr; }
.f-next { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }
.f-next b { color: var(--green-700); }
.f-remain { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--green-700); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }
.featured-note { text-align: center; font-size: 12.5px; color: var(--ink-faint); margin-top: 10px; }

/* ---------- smart band ---------- */
.smart-band { display: flex; gap: 12px; margin: 26px 0 0; }
.smart-search {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 4px 8px 4px 4px; transition: border-color .15s; box-shadow: var(--shadow-sm);
}
.smart-search:focus-within { border-color: var(--green-600); }
.smart-search input {
  /* min-width: 0 — an input's automatic minimum is ~20 characters of its font;
     with the wide Noto Naskh face (ur/ps) that is 417px, which shoved the whole
     row past the viewport on phones. Zero lets flex:1 actually shrink it. */
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font-family: inherit; font-size: 16px; padding: 10px 12px; color: var(--ink);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: none; border-radius: 11px; padding: 12px 22px;
  font-family: var(--font-head); font-weight: 700; font-size: 15.5px;
  transition: transform .12s, box-shadow .12s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-green { background: var(--green-700); color: #fff; }
.btn-green:hover { background: var(--green-600); }
.btn-dark { background: var(--panel); color: #fff; }
.btn-dark:hover { background: var(--green-900); }
.btn-ghost { background: none; border: 1.5px solid var(--line); color: var(--ink-soft); }
.btn-ghost:hover { border-color: var(--green-600); color: var(--green-700); }

/* ---------- LCD fonts (DSEG: SIL OFL, license bundled in assets/fonts) ---------- */
@font-face {
  font-family: "DSEG7"; font-display: swap;
  src: url("../fonts/DSEG7Classic-Bold.woff2") format("woff2"), url("../fonts/DSEG7Classic-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "DSEG14"; font-display: swap;
  src: url("../fonts/DSEG14Classic-Bold.woff2") format("woff2"), url("../fonts/DSEG14Classic-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "HRMArabicLCD"; font-display: swap;
  src: url("../fonts/HRMArabicLCD.ttf") format("truetype");
}

/* ---------- live clock widget (factory-empty screens, grid-calibrated) ---------- */
.live-clock-stage { max-width: 860px; margin: 10px auto 0; }
/* The LCD geometry must reference the IMAGE alone. The figcaption is pulled out
   of flow (absolute, below) because a fixed-height caption inside the figure
   skews percentage geometry as the image shrinks: at phone widths the caption
   became ~15% of the figure, pushing the LCD rows onto the printed frame. */
.live-clock { position: relative; margin: 0 0 34px; }
.live-clock > img { width: 100%; display: block; filter: drop-shadow(0 22px 44px rgba(13,31,22,.30)); }
.live-clock .lcd {
  --lcd-ink: #1d3229;
  position: absolute; left: 33%; top: 52.78%; width: 34.5%; height: 45.39%;
  container-type: size; overflow: hidden;
  color: var(--lcd-ink); direction: ltr; font-variant-numeric: tabular-nums;
}
.live-clock .lcd * { white-space: nowrap; line-height: 1; }
.lcd-week {
  position: absolute; left: 4cqw; top: 4.4cqh;
  font-family: "Cairo", "HRMArabicLCD", sans-serif; font-weight: 800; font-size: 7.6cqh;
}
html[dir="ltr"] .lcd-week { font-size: 7.6cqh; }
/* RTL discipline on the Arabic face: weekday sits right, date sits left */
html[dir="rtl"] .lcd-week { left: auto; right: 4cqw; }
html[dir="rtl"] .lcd-date { right: auto; left: 4cqw; }
.lcd-d7 { font-family: "DSEG7", monospace; }
.lcd-d14 { font-family: "DSEG14", monospace; }
/* compressed tracking keeps both calendars compact, like the pressed digits on the device */
.lcd-date { position: absolute; right: 4cqw; top: 5.5cqh; font-size: 8.2cqh; letter-spacing: -.09em; }
.lcd-time-wrap { position: absolute; right: 12cqw; top: 23cqh; height: 23cqh; }
.lcd-time-wrap .lcd-ghost {
  position: absolute; right: 0; top: 0;
  font-family: "DSEG7", monospace; font-size: 23cqh; opacity: .075;
}
.lcd-time { position: relative; font-size: 23cqh; }
/* the colon flashes once per second, exactly like the device; the ghost colon
   underneath stays as the faint unlit segment */
@keyframes lcd-blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
.lcd-colon { animation: lcd-blink 1s linear infinite; }
.lcd-ap {
  position: absolute; left: 4cqw; top: 38cqh;
  font-family: "DSEG14", monospace; font-size: 9.5cqh;
}
.lcd-ap.sm { position: static; font-size: 7cqh; padding-top: 2.5cqh; }
/* small captions right under the printed divider: what the bottom row means */
/* captions sit ABOVE the printed divider (labels over the rule), values right under it */
.lcd-cap {
  position: absolute; top: 64.6cqh; font-family: "Cairo", sans-serif;
  font-weight: 800; font-size: 5cqh; opacity: .85;
}
.lcd-cap-l { left: 6cqw; }
.lcd-cap-r { right: 6cqw; }
/* flex (not text flow) so the bidi algorithm can never reorder the number and the month */
.lcd-day { position: absolute; left: 4cqw; top: 72.2cqh; font-size: 10.4cqh; display: flex; gap: 1.8cqw; align-items: baseline; }
html[dir="rtl"] .lcd-day { font-size: 8.8cqh; padding-top: 1.1cqh; }
html[dir="rtl"] .lcd-day .lcd-d7 { font-size: 10cqh; }
.lcd-day .lcd-mon { font-family: "Cairo", sans-serif; font-weight: 800; }
html[dir="ltr"] .lcd-day .lcd-mon { font-size: 10.4cqh; }
.lang-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card); border-radius: 11px;
  padding: 8px 14px; font-family: var(--font-head); font-weight: 700; font-size: 13.5px;
  color: var(--ink-soft);
}
.lang-select:hover { border-color: var(--green-600); color: var(--green-700); }
.lcd-azan { position: absolute; right: 4cqw; top: 72.2cqh; display: flex; gap: .6cqw; }
.lcd-next { font-size: 10.4cqh; letter-spacing: -.06em; }
.live-clock figcaption { position: absolute; top: 100%; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--ink-faint); margin-top: 12px; }

/* ---------- homepage moon & occasions strip ---------- */
.moon-strip {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 22px;
}
.ms-moon { display: flex; gap: 12px; align-items: center; flex: 1.2; min-width: 240px; }
.ms-icon { font-size: 40px; line-height: 1; }
.ms-name { font-family: var(--font-head); font-weight: 800; color: var(--green-900); font-size: 15.5px; }
.ms-detail { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.ms-event { flex: 1; min-width: 150px; border-inline-start: 1px solid var(--line); padding-inline-start: 16px; }
.ms-ev-name { font-weight: 800; font-size: 14px; color: var(--green-900); font-family: var(--font-head); }
.ms-ev-date { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.ms-ev-count { display: inline-block; margin-top: 4px; background: var(--green-100); color: var(--green-900); font-weight: 700; font-size: 11.5px; border-radius: 999px; padding: 2px 10px; }
.ms-more { white-space: nowrap; }
@media (max-width: 760px) { .ms-event { border: none; padding-inline-start: 0; } }

/* ---------- share bar ---------- */
.share-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: 12px 18px; margin-top: 26px;
}
.sh-label { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--green-900); margin-inline-end: 4px; }
.sh-btn {
  border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 6px 15px; font-family: var(--font-head); font-weight: 700; font-size: 13px;
  color: var(--ink-soft); cursor: pointer; transition: transform .12s, border-color .12s, color .12s;
}
.sh-btn:hover { transform: translateY(-1px); border-color: var(--green-600); color: var(--green-700); }
.sh-btn.wa:hover { border-color: #25D366; color: #128C43; }
.sh-btn.fb:hover { border-color: #1877F2; color: #1877F2; }
.sh-btn.tg:hover { border-color: #229ED9; color: #1C86B8; }
.sh-btn.nat { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.sh-btn.nat:hover { color: #fff; filter: brightness(1.08); }

/* ---------- sections ---------- */
.section { padding: 58px 0 8px; }
.section-head { text-align: center; margin-bottom: 30px; }
.section-head .kicker {
  color: var(--gold-500); font-weight: 700; font-size: 13.5px; letter-spacing: .1em;
}
/* blog: the article title is an <h2> under the page's <h1> (the listing heading) —
   same visual weight as a section heading */
.post-title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; color: var(--green-900); margin: 0 0 12px; }
/* the leading section heading is the page's <h1> on inner pages and an <h2>
   further down — one look for both */
.section-head h1, .section-head h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; color: var(--green-900); margin-top: 4px; }
.section-head p { color: var(--ink-soft); max-width: 62ch; margin: 8px auto 0; text-wrap: balance; }
.section-head h1, .section-head h2, .hero h1 { text-wrap: balance; }

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s; display: block;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat-card .cat-img {
  aspect-ratio: 4 / 3; background: linear-gradient(150deg, var(--green-100), #fff);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cat-card .cat-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-card .cat-body { padding: 16px 18px 18px; }
.cat-card h3 { font-size: 19px; font-weight: 800; color: var(--green-900); }
.cat-card p { font-size: 14.5px; color: var(--ink-soft); margin-top: 4px; }
.cat-card .cat-cta { color: var(--green-700); font-weight: 700; font-size: 14.5px; margin-top: 10px; display: inline-block; }

.support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.support-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; box-shadow: var(--shadow-sm); text-align: center;
  transition: transform .18s, box-shadow .18s;
}
.support-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
a.support-card { color: inherit; text-decoration: none; cursor: pointer; }
.support-card .s-icon {
  width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 14px;
  background: var(--green-100); color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
}
.support-card h3 { font-size: 17px; font-weight: 800; }
.support-card p { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.support-card .s-count { font-family: var(--font-head); color: var(--gold-500); font-weight: 800; font-size: 22px; }

.dealer-band {
  background: var(--green-900); color: #EAF3ED; border-radius: 20px;
  padding: 36px 38px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.dealer-band h2 { font-size: 25px; font-weight: 800; }
.dealer-band p { color: #B9CDBF; font-size: 15px; margin-top: 4px; max-width: 56ch; }
.dealer-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.flag-chip {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  padding: 5px 14px; border-radius: 999px; font-size: 13.5px;
}
.dealer-band .btn { margin-inline-start: auto; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--panel); color: #AEC2B4; margin-top: 70px;
  padding: 46px 0 24px; font-size: 14.5px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; }
.site-footer h4 { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.site-footer a { display: block; padding: 3px 0; color: #AEC2B4; }
.site-footer a:hover { color: var(--live); }
.footer-brand .word { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: #fff; }
.footer-brand p { margin-top: 8px; max-width: 40ch; }
.footer-bottom {
  border-top: 1px solid var(--panel-line); margin-top: 34px; padding-top: 18px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: #7E937F;
}

/* ---------- modals ---------- */
.modal-veil {
  position: fixed; inset: 0; background: rgba(9, 22, 15, .55);
  display: none; align-items: flex-start; justify-content: center;
  padding: 7vh 18px 18px; z-index: 90; backdrop-filter: blur(3px);
}
.modal-veil.open { display: flex; }
.modal {
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 640px; max-height: 84vh; display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.modal-head h3 { font-size: 18px; font-weight: 800; color: var(--green-900); flex: 1; }
.modal-close {
  background: none; border: none; font-size: 22px; color: var(--ink-faint);
  width: 36px; height: 36px; border-radius: 9px;
}
.modal-close:hover { background: var(--green-100); color: var(--green-700); }
.modal-body { padding: 16px 20px 20px; overflow-y: auto; }
.modal-body .field input, .modal-body .field select {
  width: 100%; border: 1.5px solid var(--line); border-radius: 11px;
  padding: 11px 14px; font-family: inherit; font-size: 15.5px; outline: none;
  background: var(--card); color: var(--ink);
}
.modal-body .field input:focus { border-color: var(--green-600); }
.hint { font-size: 13px; color: var(--ink-faint); margin-top: 6px; }

.city-results { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.city-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 14px;
  background: var(--card); text-align: start; font-family: inherit; font-size: 15px;
}
.city-item .c-names { flex: 1; }
.city-item .c-ar { font-weight: 700; }
.city-item .c-en { font-size: 12.5px; color: var(--ink-faint); }
.city-item .tag {
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 10px;
}
.city-item.available { cursor: pointer; }
.city-item.available:hover { border-color: var(--green-600); background: var(--green-100); }
.city-item.available .tag { background: var(--green-100); color: var(--green-700); }
.city-item.soon { opacity: .62; cursor: default; }
.city-item.soon .tag { background: var(--line); color: var(--ink-soft); }
.quick-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.quick-chips button {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 5px 14px; font-size: 13.5px; font-family: inherit;
}
.quick-chips button:hover { border-color: var(--green-600); color: var(--green-700); }

.result-item {
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; margin-top: 8px;
}
.result-item .r-type {
  font-size: 11.5px; font-weight: 700; color: var(--gold-500); letter-spacing: .05em;
}
.result-item .r-title { font-weight: 700; font-size: 15px; }
.result-item .r-meta { font-size: 12.5px; color: var(--ink-faint); direction: ltr; text-align: end; unicode-bidi: plaintext; }

.task-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.task-btn {
  border: 1.5px solid var(--line); background: var(--card); border-radius: 11px;
  padding: 10px 6px; font-family: inherit; font-size: 13.5px; font-weight: 500;
  transition: border-color .12s, background .12s;
}
.task-btn:hover, .task-btn.active { border-color: var(--green-600); background: var(--green-100); color: var(--green-700); font-weight: 700; }

/* ---------- product listing & detail ---------- */
.subcat-rows { display: flex; flex-direction: column; gap: 8px; margin: -6px 0 18px; }
.subcat-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.subcat-label { font-size: 12.5px; font-weight: 700; color: var(--ink-faint); min-width: 64px; }
.subcat-chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 5px 14px; font-family: inherit; font-size: 13px; color: var(--ink-soft);
}
.subcat-chip:hover { border-color: var(--green-600); color: var(--green-700); }
.subcat-chip.active { background: var(--green-100); border-color: var(--green-600); color: var(--green-700); font-weight: 700; }

.list-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 26px 0 20px;
}
.cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-tab {
  border: 1.5px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 8px 18px; font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: var(--ink-soft);
}
.cat-tab.active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.list-toolbar .smart-search { flex: 1; min-width: 220px; }
.result-count { font-size: 13.5px; color: var(--ink-faint); white-space: nowrap; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.product-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .16s, box-shadow .16s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product-card .p-img {
  aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.product-card .p-img img { width: 100%; height: 100%; object-fit: contain; }
.product-card .p-body { padding: 12px 14px 14px; }
.product-card h3 { font-size: 16.5px; font-weight: 800; color: var(--green-900); }
.spec-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.spec-chips span {
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; padding: 2px 9px; color: var(--ink-soft);
}
.variant-badge {
  display: inline-block; margin-inline-start: 8px; vertical-align: 2px;
  background: var(--green-100); color: var(--green-700);
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px;
}
.product-card p {
  font-size: 12.5px; color: var(--ink-soft); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.pd-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; margin-top: 30px; align-items: start; }
.pd-gallery { position: sticky; top: 86px; }
.pd-main {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pd-main img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-thumb {
  width: 68px; height: 68px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; overflow: hidden; padding: 0;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumb.active { border-color: var(--green-600); }
.pd-cat {
  display: inline-block; background: var(--green-100); color: var(--green-700);
  font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 3px 14px;
}
.pd-title { font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--green-900); margin-top: 8px; }
.pd-features { margin: 18px 0 0; padding: 0; list-style: none; }
.pd-features li {
  position: relative; padding-inline-start: 26px; margin-bottom: 8px; font-size: 15.5px;
}
.pd-features li::before {
  content: "✓"; position: absolute; inset-inline-start: 0; top: 0;
  color: var(--green-600); font-weight: 700;
}
.pd-ctas { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.pd-specs { border-collapse: collapse; width: 100%; margin-top: 14px; font-size: 14.5px; }
.pd-specs th {
  text-align: start; background: var(--paper); font-weight: 700; color: var(--ink-soft);
  padding: 9px 14px; border: 1px solid var(--line); width: 40%;
}
.pd-specs td { padding: 9px 14px; border: 1px solid var(--line); }
.pd-section-title { font-size: 19px; font-weight: 800; color: var(--green-900); margin-top: 34px; }
.pd-desc { margin-top: 10px; color: var(--ink-soft); white-space: pre-line; }

/* ---------- assistant answer card ---------- */
.as-answer {
  background: var(--green-100); border: 1px solid var(--green-600);
  border-radius: 12px; padding: 14px 16px; margin-top: 12px;
}
.as-answer h4 { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--green-900); }
.as-explain { font-size: 14px; color: var(--ink-soft); margin-top: 6px; line-height: 1.9; }
.as-warn { font-size: 13px; color: #9A5B00; background: #FDF0DC; border-radius: 8px; padding: 6px 10px; margin-top: 8px; }
.as-steps-title { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--green-700); margin-top: 12px; }
.as-steps { padding-inline-start: 20px; margin-top: 6px; font-size: 14px; color: var(--ink); }
.as-steps li { margin-bottom: 6px; }
.as-page { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 800; color: var(--green-700); font-family: var(--font-head); }
.as-page:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-layout { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .panel-top { grid-template-columns: 1fr; gap: 16px; }
  .prayer-row { grid-template-columns: repeat(3, 1fr); }
  .featured-grid { grid-template-columns: repeat(3, 1fr); }
  .f-city:nth-child(4), .f-city:nth-child(5) { border-inline-start: none; }
  .cat-grid { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .main-nav { display: none; }
  .task-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .f-city { border-inline-start: none; }
  .smart-band { flex-direction: column; }
  .prayer-panel { padding: 22px 16px 18px; }
  .dealer-band { padding: 26px 22px; }
  .dealer-band .btn { margin-inline-start: 0; }
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2.5px solid var(--green-600); outline-offset: 2px;
}

/* Urdu and Pashto need a Naskh face: Cairo lacks their letterforms and the LCD
   words came out malformed. Applied to every worded element on the clock face. */
html[lang="ur"] .lcd-week, html[lang="ps"] .lcd-week,
html[lang="ur"] .lcd-cap,  html[lang="ps"] .lcd-cap,
html[lang="ur"] .lcd-day .lcd-mon, html[lang="ps"] .lcd-day .lcd-mon {
  font-family: "Noto Naskh Arabic", "Cairo", serif; font-weight: 700;
}
html[lang="ur"] .lcd-week, html[lang="ps"] .lcd-week { font-size: 7cqh; top: 5cqh; }
/* Naskh captions: same band as the Arabic face (which the owner approved), a
   touch larger, and thickened with a hairline stroke so the Naskh letterforms
   read as boldly as the Cairo ones on the LCD. */
html[lang="ur"] .lcd-cap, html[lang="ps"] .lcd-cap {
  /* Naskh ink fills its whole line box (the ی tails reach the very bottom),
     so the anchor is set from the INK, not the box: bottom lands at ~68.5%,
     clearing the printed rule at 70% by a visible margin. */
  font-size: 5.2cqh; top: 63.3cqh; line-height: 1;
  font-weight: 700; -webkit-text-stroke: .35px currentColor; opacity: 1;
}
html[lang="ur"] .lcd-day .lcd-mon, html[lang="ps"] .lcd-day .lcd-mon { font-size: 8cqh; }

/* Header must stay on ONE line in every language: labels never wrap, the nav
   itself absorbs the pressure and scrolls if a translation is unusually long. */
.site-header .wrap { flex-wrap: nowrap; }
.main-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a { white-space: nowrap; }
.brand, .header-actions { flex-shrink: 0; }
@media (max-width: 1080px) {
  .site-header .wrap { gap: 14px; }
  .main-nav a { padding: 8px 10px; font-size: 14.5px; }
}

/* The H·R·M mark closes the warranty section, directly under the counterfeit
   warning — small, centred, and quiet enough not to compete with the text. */
.warranty-mark {
  margin: 22px 0 4px;
  text-align: center;
}
.warranty-mark img {
  width: 132px;
  max-width: 45%;
  height: auto;
  opacity: .92;
}
@media (max-width: 640px) {
  .warranty-mark img { width: 112px; }
}

/* The sixth card leaves the site for the official shop, so it says so quietly:
   a warmer border and a tinted image ground, not a different shape. */
.cat-card.cat-card-store { border-color: var(--green-700); }
.cat-card.cat-card-store .cat-img { background: #1f1f1f; }
.cat-card.cat-card-store .cat-cta { color: var(--orange, #e2681d); }

/* The H·R·M mark closes the footer brand column, directly under the counterfeit
   warning — the maker's mark answering the line above it. */
.footer-mark { margin: 14px 0 0; }
.footer-mark img { width: 176px; max-width: 70%; height: auto; opacity: .95; }
@media (max-width: 640px) { .footer-mark img { width: 150px; } }

/* Policy pages — long-form legal text, set for reading rather than for scanning. */
.policy-wrap { max-width: 78ch; }
.policy-wrap h1 { font-size: 30px; font-weight: 800; color: var(--green-900); }
.policy-lead { margin-top: 10px; font-size: 16px; color: var(--ink-soft); line-height: 1.85; }
.policy-sec { margin-top: 26px; }
.policy-sec h2 {
  font-size: 19px; font-weight: 800; color: var(--green-900);
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.policy-sec p { margin-top: 10px; font-size: 15.5px; line-height: 1.95; color: var(--ink); }
.policy-stamp { margin-top: 30px; font-size: 13px; color: var(--ink-soft); }
.policy-siblings {
  margin-top: 14px; display: flex; gap: 16px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.policy-siblings a { font-size: 14.5px; color: var(--green-700); font-weight: 600; }
.policy-siblings a:hover { text-decoration: underline; }

/* weak devices paint the first screen without laying out every card */
.product-card { content-visibility: auto; contain-intrinsic-size: 1px 380px; }