/*
 * QuranWay theme.
 *
 * Tokens come from brand/BRAND.md, which derives them from the client's logo
 * and records the measured contrast of every pair. Two rules from that file
 * are load-bearing and are the reason this stylesheet looks the way it does:
 *
 *   gold on white is 2.52:1 and gold on teal is 2.01:1.
 *
 * Both fail. So gold is never text on those grounds. It is a rule, a border,
 * a shape, or a background with dark text on it. Teal carries the typography.
 */

:root {
  --qw-teal: #107A88;
  --qw-teal-deep: #0B5A65;
  --qw-gold: #C89D3D;
  --qw-gold-text: #8A6A1F;   /* the only gold that may be text on white */
  --qw-ink: #0B2F34;
  --qw-sand: #FAF7F0;
  --qw-line: #E4DDD0;
  --qw-white: #fff;

  --qw-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --qw-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --qw-arabic: 'Noto Naskh Arabic', serif;

  --wrap: 1140px;
  --gut: 24px;

  /* The widgets are the product and style themselves. They take one variable
     from the host theme and only one. */
  --uw-accent: var(--qw-teal);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky and 78px tall, so a bare anchor jump would land the
     section title underneath it. */
  scroll-padding-top: 92px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--qw-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--qw-ink);
  background: var(--qw-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--qw-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  color: var(--qw-ink);
}

h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

a { color: var(--qw-teal); text-underline-offset: 3px; }
a:hover { color: var(--qw-teal-deep); }

img { max-width: 100%; height: auto; display: block; }

/* <picture> is inline by default and would sit between a flex/grid parent and
   its image, breaking rules like `.hero-media img { height: 100% }`.
   `display: contents` removes its box so the img lays out as a direct child. */
picture { display: contents; }

.wrap { width: min(var(--wrap), 100% - (var(--gut) * 2)); margin-inline: auto; }

/* Keyboard users land here first. It is invisible until focused, and it is
   the difference between the site being usable without a mouse and not. */
.skip {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
  background: var(--qw-ink); color: #fff;
  z-index: 100;
}
.skip:focus {
  width: auto; height: auto;
  margin: 0; padding: 12px 20px;
  clip-path: none; overflow: visible;
  inset-block-start: 0; inset-inline-start: 0;
  border-radius: 0 0 8px 0;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--qw-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--qw-body);
  font-weight: 600; font-size: .98rem;
  padding: .72rem 1.35rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  /* Explicit, because a <button> otherwise keeps the UA's `buttonface` grey
     and any variant that sets a light text colour becomes invisible. An <a>
     has no default background, which is why this only ever showed on the
     button variants. */
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--fill { background: var(--qw-teal); color: #fff; }
.btn--fill:hover { background: var(--qw-teal-deep); color: #fff; }
.btn--ghost { border-color: currentColor; color: var(--qw-teal); background: transparent; }
.btn--ghost:hover { background: var(--qw-teal); color: #fff; border-color: var(--qw-teal); }
.btn--lg { padding: .9rem 1.8rem; font-size: 1.05rem; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--qw-line);
}
.nav-in { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; }
/* `flex-shrink: 0` matters: the header is a flex row and at 390px the logo
   was being compressed to 78x52 against a natural 300x160, squashing the
   wordmark by a fifth. A client's mark is the one thing on the page that must
   never be distorted. */
.brand { flex-shrink: 0; }
.brand img { width: auto; height: 52px; max-width: none; }
@media (max-width: 400px) { .brand img { height: 44px; } }
/* Logical, not physical. `margin-left: auto` pushes right in both
   directions, so in the Arabic build it shoved the nav group away from the
   end edge instead of towards it. `margin-inline-start` mirrors with dir. */
.nav-links { display: flex; gap: 1.6rem; margin-inline-start: auto; }
.nav-links a {
  color: var(--qw-ink); text-decoration: none;
  font-weight: 500; font-size: .96rem;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--qw-teal); border-bottom-color: var(--qw-gold); }
.nav-right { display: flex; align-items: center; gap: .9rem; margin-inline-start: auto; }
.nav-links + .nav-right { margin-inline-start: 0; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; padding: 10px;
  flex-direction: column; justify-content: center; gap: 6px;
}
.burger span { display: block; height: 2px; background: var(--qw-ink); border-radius: 2px; }

.drawer {
  position: fixed; inset: 78px 0 0; z-index: 49;
  background: #fff; padding: 2rem var(--gut);
  display: flex; flex-direction: column; gap: 1.1rem;
  overflow-y: auto;
}
.drawer a { color: var(--qw-ink); text-decoration: none; font-size: 1.2rem; font-weight: 500; }
.drawer[hidden] { display: none; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  /* Restores the push-right that `.nav-links + .nav-right` cancels. The
     sibling rule still matches once .nav-links is display:none, which is what
     stranded the burger in the middle of the header. */
  .nav-links + .nav-right { margin-inline-start: auto; }
}

/* Below ~420px the logo, the language switcher, the primary button and the
   burger do not fit on one row: at 320px the header ran 38px past the
   viewport. The drawer already carries the same call to action, so the header
   copy of it goes rather than the switcher, which has nowhere else to live. */
@media (max-width: 520px) {
  .nav-right > .btn--fill { display: none; }
  .nav-in { gap: .6rem; }
}

/* ---------- sections ---------- */

.sec { padding: clamp(1.75rem, 4vw, 3.25rem) 0; scroll-margin-top: 92px; }
.sec--tint { background: var(--qw-sand); }
.sec--ink { background: var(--qw-ink); color: #fff; }
.sec--ink h2, .sec--ink h3 { color: #fff; }
/* Gold clears AA on the ink ground (5.68:1), so here it may carry text. */
.sec--ink .eyebrow { color: var(--qw-gold); }
.sec--ink a:not(.btn) { color: var(--qw-gold); }

.eyebrow {
  display: inline-block;
  font-family: var(--qw-body);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--qw-gold-text);
  margin-bottom: .7rem;
}
.sec-sub { font-size: 1.12rem; max-width: 62ch; color: #3C5459; }
.sec--ink .sec-sub { color: rgba(255,255,255,.82); }

/* A short gold rule under a heading. This is gold doing what gold is for. */
.rule::after {
  content: ''; display: block;
  width: 56px; height: 3px; border-radius: 2px;
  background: var(--qw-gold);
  margin-top: 1.1rem;
}

/* ---------- footer ---------- */

.foot { background: var(--qw-ink); color: rgba(255,255,255,.78); padding: 2rem 0 1rem; }
.foot-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.foot-logo { height: 62px; width: auto; }
.foot-ar { font-family: var(--qw-arabic); font-size: 1.15rem; margin-top: .9rem; color: var(--qw-gold); }
.foot h4 {
  font-family: var(--qw-body);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--qw-gold);
  margin: 0 0 .9rem;
}
.foot p { margin: 0 0 .4rem; font-size: .95rem; }
.foot a { display: block; color: rgba(255,255,255,.78); text-decoration: none; font-size: .95rem; margin-bottom: .4rem; }
.foot a:hover { color: #fff; }
.foot-base {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between;
  padding-top: 1.6rem;
  font-size: .87rem; color: rgba(255,255,255,.6);
}
.foot-base .credit a { display: inline; color: var(--qw-gold); }

/* ---------- holding page ---------- */

body.holding { display: flex; flex-direction: column; min-height: 100vh; }
body.holding main { flex: 1; display: flex; }

.hold {
  flex: 1;
  display: grid; place-items: center;
  padding: 4rem var(--gut);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(200,157,61,.13), transparent 62%),
    var(--qw-sand);
}
.hold-in { max-width: 620px; }
.hold-logo { width: min(340px, 78vw); height: auto; margin: 0 auto 2.5rem; }
.hold-eyebrow {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--qw-gold-text);
  margin-bottom: .8rem;
}
.hold h1 { margin-bottom: .6rem; }
.hold-sub { font-size: 1.12rem; color: #3C5459; margin-bottom: 2rem; }
.hold-note { margin-top: 2.2rem; font-size: .85rem; color: #6C8085; }

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

/* ==================================================================
   Page sections
   ================================================================== */

.wrap--narrow { width: min(760px, 100% - (var(--gut) * 2)); }
.sec-head { margin-bottom: 1.6rem; }
.sec-head--center { text-align: center; margin-inline: auto; max-width: 720px; }
.sec-sub--center { margin-inline: auto; }
.sec-head--center .rule::after { margin-inline: auto; }

/* ---------- draft review bar ---------- */

.draftbar {
  background: var(--qw-gold);
  color: #2A1F06;            /* dark on gold: gold can hold text this way round */
  font-size: .88rem;
  line-height: 1.5;
  padding: .7rem 0;
}
.draftbar-in { display: flex; flex-wrap: wrap; gap: .5rem; }
.draftbar strong { font-weight: 700; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
  /* The photograph is 3:2. Matching that ratio is what stops the hero
     cropping the group shot down to a band of faces. Capped so it cannot
     take more than the fold on a short screen. */
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 88vh;
  min-height: 460px;
  overflow: hidden;
}
/* `display: block` overrides the global `picture { display: contents }`.
   Without it the picture has no box, so `position: absolute` does nothing:
   the <img> becomes a grid item, takes the first row, pushes the copy into a
   second row that `overflow: hidden` clips away, and sits above the scrim
   because an in-flow child outranks a z-index:-1 sibling. The hero then
   renders as a bare photograph with no heading and no darkening, which is
   exactly what shipped. */
.hero-img { display: block; position: absolute; inset: 0; z-index: -2; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  /* Measured, not eyeballed. See the note in index.njk: the brightest pixel
     under the text sits at L~0.98, so anything lighter than this leaves white
     text below 4.5:1 somewhere in the block. */
  background: linear-gradient(180deg,
    rgba(11,47,52,.68) 0%,
    rgba(11,47,52,.72) 55%,
    rgba(11,47,52,.80) 100%);
}
.hero-in { position: relative; max-width: 50rem; padding-block: 2rem; }
.hero-kicker {
  font-size: .8rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  /* Not --qw-gold. Measured against the scrimmed photograph, the gold lands
     at 2.26:1 against the brightest pixel behind this line. The warm cream
     keeps the same temperature at 5.27:1. */
  color: #FDF6E6;
  margin-bottom: 1rem;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  margin-bottom: .8rem;
  text-wrap: balance;
}
.hero-sub {
  color: #fff;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  max-width: 44ch;
  margin: 0 auto 2.2rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

.btn--gold { background: var(--qw-gold); color: #2A1F06; }
.btn--gold:hover { background: #D8AD4D; color: #2A1F06; }
.btn--onteal { border-color: rgba(255,255,255,.8); color: #fff; backdrop-filter: blur(3px); }
.btn--onteal:hover { background: #fff; color: var(--qw-ink); border-color: #fff; }
.btn--onink { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--onink:hover { background: #fff; color: var(--qw-ink); }

@media (max-width: 760px) {
  /* 3:2 is too letterboxed to carry a headline on a phone. */
  .hero { width: 100%; aspect-ratio: 4 / 5; max-height: none; min-height: 540px; }
  .hero-img img { object-position: center 48%; }

  /* Full-width, stacked. Capped so they do not become absurd slabs on a
     large phone or a small tablet, and centred once capped. */
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-cta .btn { width: 100%; max-width: 26rem; margin-inline: auto; }
}

/* ---------- trust strip ---------- */

.facts { background: var(--qw-ink); padding: 1.1rem 0; }
.facts-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; text-align: center; }
.fact-n { font-family: var(--qw-display); font-size: 1.28rem; font-weight: 600; color: var(--qw-gold); margin: 0 0 .15rem; }
.fact-t { font-size: .92rem; color: rgba(255,255,255,.76); margin: 0; }
@media (max-width: 680px) {
  .facts-in { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ---------- notes ---------- */

.notes { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.note {
  background: #fff;
  border: 1px solid rgba(11,47,52,.06);
  border-radius: 12px;
  padding: 1.7rem 1.5rem;
  /* A coloured stroke along the top of a card is the house style of every
     generated template on the internet. A soft shadow lifts the card instead
     and says nothing about where it came from. */
  box-shadow: 0 1px 2px rgba(11,47,52,.05), 0 6px 18px -6px rgba(11,47,52,.12);
  transition: box-shadow .2s ease, transform .2s ease;
}
.note:hover {
  box-shadow: 0 2px 4px rgba(11,47,52,.06), 0 14px 30px -10px rgba(11,47,52,.18);
  transform: translateY(-2px);
}
.note h3 { margin-bottom: .45rem; font-size: 1.1rem; }
.note p { margin: 0; color: #3C5459; font-size: .98rem; }

/* ---------- widget mount ---------- */

.widget-slot {
  border: 2px dashed var(--qw-line);
  border-radius: 14px;
  background: #fff;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  text-align: center;
}
.widget-slot-title { font-family: var(--qw-display); font-size: 1.3rem; font-weight: 600; margin-bottom: .5rem; }
.widget-slot-note { max-width: 46ch; margin: 0 auto; color: #5A7075; font-size: .96rem; }

/* ---------- steps ---------- */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.step { position: relative; padding-top: 3.4rem; }
.step-n {
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--qw-gold); color: #2A1F06;
  font-weight: 700; font-size: 1.05rem;
}
.step h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.step p { color: rgba(255,255,255,.8); margin: 0; font-size: .98rem; }
.enroll-cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 3rem; }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--qw-line); }
.qa { border-bottom: 1px solid var(--qw-line); }
.qa summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 600; font-size: 1.04rem;
  position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+';
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--qw-teal);
  line-height: 1;
}
.qa[open] summary::after { content: '\2212'; }
.qa p { margin: 0 0 1.3rem; color: #3C5459; max-width: 62ch; }

/* ---------- visit ---------- */

.visit-grid { display: grid; gap: 3rem; grid-template-columns: 1fr 1fr; align-items: center; }
.visit-media { margin: 0; }
.visit-media img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 62%; }
.dl { margin: 2rem 0 0; }
.dl > div {
  display: grid; grid-template-columns: 8rem 1fr;
  gap: 1rem; padding: .8rem 0;
  border-top: 1px solid var(--qw-line);
}
.dl dt { font-weight: 600; font-size: .9rem; color: #5A7075; }
.dl dd { margin: 0; }
@media (max-width: 860px) {
  .visit-grid { grid-template-columns: 1fr; }
  .dl > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------- language switcher ---------- */

.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 38px; padding: 0 .75rem;
  font-family: var(--qw-body); font-size: .85rem; font-weight: 600;
  letter-spacing: .04em;
  color: var(--qw-ink);
  background: #fff;
  border: 1.5px solid var(--qw-line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.lang-btn:hover { border-color: var(--qw-teal); }
.lang-btn[aria-expanded="true"] { border-color: var(--qw-teal); background: var(--qw-sand); }
.lang-caret { transition: transform .18s ease; }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + .5rem); inset-inline-end: 0;
  z-index: 60;
  min-width: 11rem;
  margin: 0; padding: .35rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--qw-line);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(11,47,52,.06), 0 18px 40px -12px rgba(11,47,52,.28);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .75rem;
  border-radius: 10px;
  color: var(--qw-ink); text-decoration: none;
  font-size: .95rem;
}
.lang-menu a:hover { background: var(--qw-sand); color: var(--qw-teal); }
.lang-menu [aria-selected="true"] a { background: var(--qw-sand); font-weight: 600; }
.lang-abbr { font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: #5A7075; }

/* ---------- gallery ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.chip {
  font-family: var(--qw-body); font-size: .88rem; font-weight: 600;
  padding: .45rem 1.05rem;
  border-radius: 999px;
  border: 1.5px solid var(--qw-line);
  background: #fff; color: var(--qw-ink);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover { border-color: var(--qw-teal); color: var(--qw-teal); }
.chip.is-on { background: var(--qw-teal); border-color: var(--qw-teal); color: #fff; }

/* One ratio for every tile. Mixed ratios were the complaint, and a grid only
   reads as a grid when the cells agree. */
.grid {
  display: grid;
  gap: .75rem;
  /* 168px was too wide to fit two columns inside a 390px phone once the
     gutters and the gap were taken out, so the grid silently collapsed to one
     column and the gallery ran to nearly 8000px. 140px keeps two columns on
     the narrowest phone and still gives five or six on a desktop. */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.tile {
  padding: 0; border: 0; background: var(--qw-line);
  border-radius: 10px; overflow: hidden; cursor: pointer;
  aspect-ratio: 4 / 5;
  transition: transform .22s ease, box-shadow .22s ease;
}
.tile[hidden] { display: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -10px rgba(11,47,52,.35); }
.grid-empty {
  margin: 2rem 0 0; text-align: center;
  color: #5A7075; font-size: .96rem;
}

/* ---------- lightbox ---------- */

.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  gap: 1rem;
  grid-template-columns: auto 1fr auto;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7,30,33,.93);
  backdrop-filter: blur(4px);
}
.lb[hidden] { display: none; }
.lb-img {
  grid-column: 2;
  max-width: 100%; max-height: 88vh;
  width: auto; border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.lb-nav, .lb-close {
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.28);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .18s ease;
}
.lb-nav { width: 46px; height: 46px; font-size: 1.8rem; line-height: 1; }
.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }
.lb-nav:hover, .lb-close:hover { background: rgba(255,255,255,.22); }
.lb-close {
  position: absolute; top: 1rem; inset-inline-end: 1rem;
  width: 42px; height: 42px; font-size: 1.6rem;
}
@media (max-width: 600px) {
  .lb { grid-template-columns: 1fr; }
  .lb-img { grid-column: 1; }
  .lb-nav { position: absolute; bottom: 1.2rem; }
  .lb-prev { inset-inline-start: 25%; }
  .lb-next { inset-inline-end: 25%; }
}

/* ---------- right to left ---------- */

[dir="rtl"] .rule::after { margin-inline: 0 auto; }
[dir="rtl"] .step { padding-inline: 0 0; }
[dir="rtl"] .step-n { left: auto; right: 0; }
[dir="rtl"] .qa summary { padding: 1.15rem 0 1.15rem 2.5rem; }
[dir="rtl"] .qa summary::after { right: auto; left: .4rem; }
[dir="rtl"] .lb-prev { transform: scaleX(-1); }
[dir="rtl"] .lb-next { transform: scaleX(-1); }
/* Arabic sits better in Naskh than in a Latin serif that has no Arabic at
   all and would silently fall back to whatever the OS picks. */
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--qw-arabic); line-height: 1.4; }
[dir="rtl"] body, [lang="ar"] { font-family: var(--qw-arabic); }

/* Show-more. Eighteen tiles is four screens of scrolling on a phone and
   eighteen image requests the visitor did not ask for. The rest are revealed
   on demand, and because they are lazy they are not fetched until then. */
.grid-more { display: flex; justify-content: center; margin-top: 1.25rem; }
.grid-more[hidden] { display: none; }

/* ---------- film tiles ---------- */

.tile--video { position: relative; }
.tile--video img { width: 100%; height: 100%; object-fit: cover; }
.tile-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(11,47,52,.10), rgba(11,47,52,.45));
  pointer-events: none;
}
.tile-play svg {
  width: 46px; height: 46px; padding: 11px;
  border-radius: 50%;
  background: rgba(11,47,52,.62);
  border: 1.5px solid rgba(255,255,255,.75);
  transition: background-color .2s ease, transform .2s ease;
}
.tile--video:hover .tile-play svg { background: var(--qw-teal); transform: scale(1.06); }

.lb-vid {
  grid-column: 2;
  max-width: 100%; max-height: 88vh;
  border-radius: 6px; background: #000;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.lb-vid[hidden], .lb-img[hidden] { display: none; }
@media (max-width: 600px) { .lb-vid { grid-column: 1; } }

/* ---------- footer additions ---------- */

.foot .foot-blurb {
  /* `.foot p` sets the `margin` shorthand and outranks a bare `.foot-blurb`,
     which silently zeroed this and left the text flush against the mark.
     Scoped to `.foot` so it wins on specificity rather than on ordering. */
  margin-top: 1.75rem;
  max-width: 34ch;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
}
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }
.foot-sitemap { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.foot-sitemap a {
  display: inline; margin: 0;
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  text-decoration: none;
}
.foot-sitemap a:hover { color: #fff; text-decoration: underline; }

/* ---------- mail fallback ---------- */

.mailfall {
  max-width: 34rem;
  margin: 1.5rem auto 0;
  padding: 1.1rem 1.3rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}
.mailfall[hidden] { display: none; }
.mailfall p { margin: 0 0 .9rem; font-size: .95rem; color: rgba(255,255,255,.85); }
.mailfall p a { color: var(--qw-gold); }
.mailfall-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.mailfall-actions .btn { padding: .5rem 1rem; font-size: .9rem; }

/* ---------- donate ---------- */

.btn--sm { padding: .5rem 1rem; font-size: .88rem; }
.nav-donate { border-color: var(--qw-gold); color: var(--qw-gold-text); }
.nav-donate:hover { background: var(--qw-gold); color: #2A1F06; border-color: var(--qw-gold); }
/* Two buttons plus the switcher is too much for a narrow header; the drawer
   already carries Donate as a nav item there. */
@media (max-width: 1080px) { .nav-donate { display: none; } }

.donate-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 900px) { .donate-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

.ticks { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding-inline-start: 1.7rem;
  margin-bottom: .6rem;
  color: rgba(255,255,255,.85);
  font-size: .98rem;
}
.ticks li::before {
  content: '';
  position: absolute; inset-inline-start: 0; top: .55em;
  width: 9px; height: 5px;
  border-inline-start: 2px solid var(--qw-gold);
  border-bottom: 2px solid var(--qw-gold);
  transform: rotate(-45deg);
}

/* The widget slot sits on the ink band here, so its light card styling has to
   be inverted rather than punching a white hole in the section. */
.widget-slot--onink {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.22);
  padding: clamp(2rem, 5vw, 3rem) 1.5rem;
}
.widget-slot--onink .widget-slot-title { color: #fff; }
.widget-slot--onink .widget-slot-note { color: rgba(255,255,255,.75); }

/* ---------- touch sizing ---------- */

/* On a touch screen every control needs roughly a fingertip of height. These
   only apply to coarse pointers, so the desktop keeps its tighter proportions.
   Measured on iPhone SE/12/14, Pixel 5, Galaxy S9+ and iPad Mini, where the
   burger was 34x44, the language button 38 tall, the chips 33 and the footer
   links 22. */
@media (pointer: coarse) {
  /* flex-shrink again: width alone loses to the flex row, exactly as it did
     on the logo. */
  .burger { width: 44px; height: 44px; flex: 0 0 44px; }
  .lang-btn { height: 44px; padding-inline: .9rem; }
  .chip { padding: .7rem 1.1rem; min-height: 44px; }
  .lang-menu a { padding: .8rem .75rem; }
  /* Padding alone left these at 38-39px. A min-height with the label centred
     in it is exact, and does not depend on the font's line box. */
  .foot a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
  .foot-sitemap { gap: 0 .9rem; }
  .foot-sitemap a { min-height: 44px; }
  .qa summary { padding-block: 1.35rem; }
  .tile { min-height: 44px; }
}