/* ==========================================================================
   Utilities — small single-purpose helpers and the brand motifs
   --------------------------------------------------------------------------
   Motifs all come from the Sumoo Al-Fikr identity:
     .rule7         the logo's seven parallel strokes as a hairline rule
     .dot           the outlined circle floating above the logo's س — the
                    only place colour enters the mark (active nav, markers)
     .diamond       the signage's wayfinding diamond, as a small marker
     .pattern-band  the brand pattern bleeding off a band's bottom edge,
                    as on the letterhead and folder
   Photo windows (ring/pill/arch) are a component: components/window.css.
   ========================================================================== */

/* ── Visibility by breakpoint (mobile ≤ 991.98px, like the tab bar) ─────── */
@media (max-width: 991.98px) { .only-desktop { display: none !important; } }
@media (min-width: 992px)    { .only-mobile  { display: none !important; } }

/* ── Text ────────────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-soft   { color: var(--ink-soft); }
.icon        { flex-shrink: 0; }
/* Phone numbers only. NOT for times like "8:00 ص" — forcing LTR scrambles the
   Arabic ص/م; wrap those in <bdi> so they keep natural RTL order. */
.num         { direction: ltr; unicode-bidi: isolate; display: inline-block; font-family: var(--font-latin); }
/* Latin runs inside Arabic text: emails, domains, reference numbers */
.latin       { direction: ltr; unicode-bidi: isolate; font-family: var(--font-latin); }

/* English (LTR): arrow icons that point "forward" in RTL are mirrored */
[dir="ltr"] .btn__end,
[dir="ltr"] .text-link .icon { scale: -1 1; }

/* ── Seven-line rule ─────────────────────────────────────────────────────────
   <span class="rule7" aria-hidden="true"></span>  — full width by default;
   --short (48px) sits before labels. */
.rule7 {
    display: block;
    height: var(--rule7-h);
    background: var(--rule7);
}
.rule7--short { width: 48px; }
.rule7--on-dark { --line-strong: rgb(255 255 255 / 0.35); }

/* ── Dot: the logo's floating circle ─────────────────────────────────────────
   <span class="dot dot--aqua" aria-hidden="true"></span> */
.dot {
    --dot-size: 10px;
    --dot-color: var(--second);
    display: inline-block;
    flex-shrink: 0;
    width: var(--dot-size);
    height: var(--dot-size);
    border: 2px solid var(--dot-color);
    border-radius: 50%;
}
.dot--lg     { --dot-size: 16px; border-width: 2.5px; }
.dot--xl     { --dot-size: 34px; border-width: 2.5px; }
.dot--aqua   { --dot-color: var(--aqua); }
.dot--peach  { --dot-color: var(--peach); }
.dot--sage   { --dot-color: var(--sage); }
.dot--rose   { --dot-color: var(--rose); }
.dot--indigo { --dot-color: var(--indigo); }
.dot--taupe  { --dot-color: var(--taupe); }
.dot--white  { --dot-color: #fff; }

/* ── Diamond: the signage marker ─────────────────────────────────────────── */
.diamond {
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    background: var(--panel-deep);
    transform: rotate(45deg);
}
.diamond--outline { background: transparent; border: 1.3px solid var(--panel-deep); }
.diamond--ink     { background: var(--ink); }

/* ── Pattern band — the brand pattern bleeding off a band's bottom edge ───────
   Put inside a position:relative band:
   <span class="pattern-band" aria-hidden="true"></span>            taupe, faint
   <span class="pattern-band pattern-band--white" …></span>          on colour fills */
.pattern-band {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 0;
    height: var(--pattern-band-h, 140px);
    background: var(--pattern-taupe) center top / var(--pattern-size) auto repeat;
    opacity: var(--pattern-opacity, 0.35);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
    mask-image: linear-gradient(to bottom, transparent, #000 45%);
    pointer-events: none;
}
.pattern-band--white { background-image: var(--pattern-white); --pattern-opacity: 0.5; }
.pattern-band--faint { --pattern-opacity: 0.18; }

@media (max-width: 991.98px) {
    .pattern-band { --pattern-size: 240px; height: var(--pattern-band-h-mobile, 90px); }
}

/* ── Bands ───────────────────────────────────────────────────────────────── */
.band          { position: relative; isolation: isolate; }
.band > .container { position: relative; z-index: 1; }
.band--panel   { background: var(--panel); }
.band--aqua    { background: var(--aqua); color: var(--ink-deep); }
.band--indigo  { background: var(--indigo); color: #fff; }
.band--aqua h2, .band--aqua h3 { color: var(--ink-deep); }
.band--indigo h2, .band--indigo h3 { color: #fff; }

/* ── Eyebrow: short rule + small label (section headings, heroes) ───────── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 500;
}
.eyebrow::before {
    content: "";
    width: 28px;
    height: 1.5px;
    background: var(--panel-deep);
}

/* ── First screen: header + hero fill exactly one screen ───────────────────
   <section class="hero-screen"><div class="container …">…</div></section>
   Desktop: 100svh minus the sticky header. Phones: minus the app bar and the
   tab bar, so the hero ends right where the tab bar begins. It is a
   minimum — taller content still grows the section instead of clipping. */
.hero-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--header-h));
}
.hero-screen > .container { width: 100%; }
@media (max-width: 991.98px) {
    .hero-screen { min-height: calc(100svh - var(--appbar-h) - var(--tabbar-h) - var(--safe-bottom)); }
}

/* ── Motion kit ──────────────────────────────────────────────────────────── */
/* Brand pattern drifts very slowly sideways (the lines "flow") */
@keyframes pattern-drift { to { background-position-x: calc(var(--pattern-size) * -1); } }
@media (prefers-reduced-motion: no-preference) {
    .pattern-band { animation: pattern-drift 40s linear infinite; }
    /* an eyebrow's rule draws in before its label */
    .js .eyebrow[data-reveal]::before { transform-origin: right; transition: transform 0.8s var(--ease-out) var(--reveal-delay, 0ms); }
    .js .eyebrow[data-reveal]:not(.is-visible)::before { transform: scaleX(0); }
}

/* ── Reveal on scroll (js/modules/reveal.js adds .is-visible) ───────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* No JS, or reduced motion: never leave content invisible */
.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* reCAPTCHA v3 (partials/site/recaptcha): Google's floating badge would sit on
   the mobile tab bar, so it's hidden and the required notice is shown under the
   form instead (allowed by Google's FAQ when the notice is visible). */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note { margin-top: var(--space-3); color: var(--ink-faint); font-size: var(--fs-xs); line-height: 1.8; }
.recaptcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }