/* Give site: the shop's look, from the shared system's custom properties. The colours, the type and the bar were read from
   the Aero shop's pages (its Contact Us page above all, the nearest it has to a form): square controls, Clash Grotesk
   throughout, buttons in capitals, and its name in cream on its darkest navy. Page headings are in sentence case (Abu
   Aaliyah's choice, 2026-10-19), which reads faster than the shop's spaced capitals. TT Ramillas stays for the zakat
   calculator, which asks for it. */

@font-face {
  font-family: "TT Ramillas"; font-style: normal; font-display: swap; font-weight: 500;
  src: url("fonts/TT_Ramillas_Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Clash Grotesk"; font-style: normal; font-display: swap; font-weight: 200 700;
  src: url("fonts/ClashGrotesk-Variable.woff2") format("woff2");
}

:root {
  --paper: #f9f8f5;
  --surface: #ffffff;
  --ink: #14151a;
  --ink-muted: #5a5b58; /* a step darker than the shop's grey, which reads faint in Clash Grotesk's thin strokes. Darker, not
                          heavier: at weight 450 the wider letters break lines sooner and push the review's button down */
  --rule: #eeede6;
  --rule-strong: #858683;
  --rule-tile: #c9c8c2; /* an answer tile's edge before it is chosen: quieter than a field's, still clear on the paper */
  --accent: #142d55;
  --accent-strong: #0c1e3c;
  --accent-wash: #eff2f7;
  --on-accent: #f9f8f5;

  --radius-control: 0;
  --radius-button: 0;
  --radius-sm: 0;
  --radius-xs: 0;

  /* the shop's bar along the top and the bottom, and the copper of its announcement line, here the progress line */
  --bar: #03041d;
  --on-bar: #f9f8f5;
  --bar-line: #9a5215;

  --font-display: "Clash Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Clash Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* questions lead the screen: 28px on a phone, up to 40px on a computer, so a question is unmistakably the first thing
     read (they were 22px against 17px text, a step too small to carry the hierarchy) */
  --text-question: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --text-benefit: var(--text-lg); /* Gift Aid's figure */
  --text-display: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  /* the question's size on a short screen, where a question of three lines costs the button its place */
  --text-question-short: 1.25rem;
}

/* never let the browser fake a bold or a slant */
body { font-synthesis: none; }

/* page headings in sentence case, a weight up from the text and closed up a little */
h1, h2 { font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; }

/* the shop's bar, the whole width of the page, with its name linking back to the shop */
.top {
  width: auto; min-height: 56px; margin: 0; padding: 0 var(--space-5); flex-wrap: wrap; justify-content: center;
  background: var(--bar);
}
.wordmark { min-height: 44px; color: var(--on-bar); font: 500 var(--text-md) / 1 var(--font-text); }
/* every page but the home page has a way back to it, at the left of the bar; the shop's name stays in the middle */
.top { position: relative; }
.home-link {
  position: absolute; left: var(--space-5); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-1);
  color: var(--on-bar); font: 500 var(--text-sm) / 1 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.home-link::before { content: "\2190"; margin-right: var(--space-1); }
.where { white-space: nowrap; }
.progress { background: var(--bar); }
.progress span { background: var(--bar-line); }

/* the shop's buttons: capitals, spaced out, flat */
.ok { font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: none; }

/* the shop's form fields: a white box with a grey line all round, the £ inside it */
.field input { padding: var(--space-3) var(--space-4); border: 1px solid var(--ink-muted); background: var(--surface); }
.field input:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.field.money .pound { top: var(--space-3); left: var(--space-4); }
.field.money input { padding-left: calc(var(--space-4) + 1em); }

/* the shop's footer: cream on its darkest navy, with the way back to the shop */
.foot { margin-top: 0; background: var(--bar); color: var(--on-bar); }
.foot p { margin: 0; }
.foot a {
  display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--space-2);
  color: var(--on-bar); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
}
/* the way back and the privacy notice share a line, apart */
.foot a + a { margin-left: var(--space-5); }

/* the notes on a choice are sentences more than prices, so they sit under the label, in line with it (the
   key hint, 24px wide, is only there with a mouse) */
.option { flex-wrap: wrap; row-gap: 0; }
.option .note { order: 1; flex: 1 0 100%; font-size: var(--text-sm); font-weight: 400; }
@media (pointer: fine) {
  .option .note { padding-left: calc(24px + var(--space-3)); }
}

/* the home page's second button: the same shape, outlined */
.ok.second { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .ok.second:hover { background: var(--accent-wash); }
}

/* The form is one part, so "Your gift · 1 of 1" says nothing, and on a phone it drops under the wordmark and costs a line */
.where { display: none; }

/* On a phone the space between things follows the width of the screen, not the size of the text. A donor who has asked for
   large text gets bigger words in the same room, instead of the same words in less. Where the screen is 375px wide or more
   these are the shared sizes; below that they shrink with it. */
@media (max-width: 480px) {
  :root {
    --space-1: min(0.25rem, 1.07vw);
    --space-2: min(0.5rem, 2.13vw);
    --space-3: min(0.75rem, 3.2vw);
    --space-4: min(1rem, 4.27vw);
    --space-5: min(1.5rem, 6.4vw);
    --space-6: min(2rem, 8.53vw);
    --space-7: min(3rem, 12.8vw);
    --space-8: min(4rem, 17.07vw);
  }
}

/* Turnstile's flexible box is never narrower than 300px, so on the narrowest phones the gutters give way to it */
@media (max-width: 340px) {
  .top, main { padding-inline: 10px; }
  .top { min-height: 48px; }
  .summary .change, .small { font-size: var(--text-xs); }
  .summary .row { padding-block: 0; }
  .notice { padding-block: var(--space-1); }
}

/* An address such as sales@salafibookstore.com is one long word: at large text it breaks, instead of running off the screen */
main p, main li, .summary dd { overflow-wrap: anywhere; }
.total strong { white-space: nowrap; } /* but never an amount */
@media (max-width: 480px) {
  main p { line-height: 1.35; }
}

/* The review's rows keep label, value and Change on one line while they fit. At large text, when they do not, Change drops
   under the value instead of pushing the page wider than the phone. */
.summary { display: block; }
.summary .row { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); }
.summary dt { flex: 0 0 min(6.5rem, 30vw); }
.summary dd { flex: 1 1 0; min-width: min-content; overflow-wrap: break-word; }
.summary dd:last-child { flex: 0 0 auto; margin-left: auto; }

/* A short screen (a small phone, or a taller one with the keypad up where the browser shrinks the page to fit) gives up some
   air, so the button stays in reach */
@media (max-height: 640px) {
  .top { padding-top: var(--space-2); }
  .top { min-height: 48px; }
  main { padding-top: var(--space-2); }
  h1 { margin-bottom: var(--space-2); font-size: var(--text-question-short); line-height: 1.2; }
  .help { margin-bottom: var(--space-3); font-size: var(--text-sm); }
  .field input { padding-bottom: var(--space-2); }
  .links { margin: var(--space-3) 0 0; }
  .links a { min-height: 44px; }
  .total { margin-top: var(--space-2); }
  .actions { margin-top: var(--space-3); }
  .summary .change { min-height: 28px; }
}

/* A phone on its side has room across and none down: the review sets its summary and its button in a second column,
   where there are two columns of 304px (Turnstile's box needs 300px) to make. In pixels, so large text makes no column wider. */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    /* as on a narrow phone, space follows the screen, here its height, so large text does not push the button off it */
    --space-1: min(0.25rem, 1.07vh);
    --space-2: min(0.5rem, 2.13vh);
    --space-3: min(0.75rem, 3.2vh);
    --space-4: min(1rem, 4.27vh);
    --space-5: min(1.5rem, 6.4vh);
    --space-6: min(2rem, 8.53vh);
    --space-7: min(3rem, 12.8vh);
    --space-8: min(4rem, 17.07vh);
  }
  .top, main { width: min(100%, 64rem); padding-inline: 16px; }
  .step:has(.summary) { columns: 304px; column-gap: 16px; }
  .step:has(.summary) > * { break-inside: avoid; }
  .step:has(.summary) > :is(h1, .help, .notice) { column-span: all; }
}

/* the zakat page's button sits under its heading, with the rule below it */
.intro > .actions, .zakat-intro > .actions { margin-bottom: var(--space-5); }

/* On the narrowest phones the capitals close up a little, so a button label at large text keeps to its line
   instead of pushing the button down. Last in the file, so the short-screen rules above do not undo it. */
@media (max-width: 340px) {
  .ok, .home-link { letter-spacing: 0.02em; }
  .home-link { left: 6px; }
}

/* On a tablet or a computer the form is set like a page, not a phone in the middle of a screen: the shop's 72px bar, the
   answers the full width of the column so the screen reads as centred, each question at the same height from the top so
   moving between screens never shifts it (centring each screen made the heading jump with every change of height), and
   buttons wide enough to look like the main thing to press. Phones are untouched. */
@media (min-width: 768px) {
  :root { --column: var(--measure); }
  .top { min-height: 72px; }
  .wordmark { font-size: var(--text-lg); }
  main { padding-top: clamp(48px, 12vh, 128px); }
  /* the home page is one short screen, so it alone sits in the middle */
  main:has(.home) { display: flex; flex-direction: column; justify-content: center; padding-top: var(--space-7); }
  .ok { min-width: 10rem; }
  /* the home page is two buttons and a name: centred, with the heading at the display size */
  .home { text-align: center; }
  .home h1 { max-width: none; font-size: var(--text-display); }
  .home .actions { justify-content: center; }
}

/* The amounts are four figures and a way out, so they are set as figures: two to a row, large, and "Another amount" across
   the bottom. Every tile stays 52px tall or more, so nothing is harder to tap than before. */
.options:has(input[name="gift"]) { grid-template-columns: 1fr 1fr; }
.options:has(input[name="gift"]) .option:not(:has(input[value="other"])) { justify-content: center; text-align: center; min-height: 64px; }
.options:has(input[name="gift"]) .option:not(:has(input[value="other"])) .label { flex: 0 1 auto; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.options:has(input[name="gift"]) .option:has(input[value="other"]) { grid-column: 1 / -1; }
/* in a tile the key hint and the tick sit at its edges, so the figure itself stays in the middle */
.options:has(input[name="gift"]) .option:not(:has(input[value="other"])) :is(kbd) { position: absolute; left: var(--space-3); }
.options:has(input[name="gift"]) .option:not(:has(input[value="other"]))::after { position: absolute; right: var(--space-3); }

/* On a phone the way home sits in the bar's flow, before the shop's name, instead of laid over it: with large text the two
   would otherwise print on top of each other. The name keeps its place at the centre wherever there is room. */
@media (max-width: 480px) {
  .top:has(.home-link) { flex-wrap: nowrap; justify-content: space-between; column-gap: var(--space-3); padding-inline: var(--space-4); }
  .home-link { position: static; transform: none; }
  .top:has(.home-link) .wordmark { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding-right: var(--space-6); }
}

/* On a phone the home page's two buttons are one above the other, full width, so neither label breaks over two lines */
@media (max-width: 480px) {
  .home .actions { flex-direction: column; align-items: stretch; }
  .home .actions .ok { width: 100%; }
}

/* On the narrowest phones the way home is its arrow alone (its name, Home, is still what a screen reader says), so the bar
   keeps to one row and the shop's name is not squeezed */
@media (max-width: 340px) {
  .home-link { flex: none; width: 44px; overflow: hidden; white-space: nowrap; }
  .home-link::before { margin-right: 44px; }
  .top:has(.home-link) .wordmark { padding-right: 44px; }
}

/* Two answers given as buttons (Gift Aid's Yes and Skip, the thank-you page's two ways on): on a phone they stack at full
   width, the main one first, so neither label wraps and they read as one choice; Back goes under them. */
@media (max-width: 480px) {
  .actions:has(.second) { flex-direction: column; align-items: stretch; }
  .actions:has(.second) :is(.ok, a.ok) { width: 100%; }
  .actions:has(.second) .back { order: 3; align-self: flex-start; }
}


/* ---- premium pass, 19 October ---- */

/* Answer tiles read as choices, not form fields: a quieter edge until chosen, the keyboard letter a hint rather than a
   boxed key, and the chosen tile unmistakably navy. */
.option { border-color: var(--rule-tile); }
.option kbd { border: 0; background: transparent; color: var(--ink-muted); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .option:hover { border-color: var(--ink); }
}

/* Gift Aid: the benefit, as the donor's own figure, is what is read first; HMRC's declaration stays whole beside it, set
   quieter so it reads as the terms of that benefit rather than the loudest thing on the screen */
.tick.asked { padding: var(--space-4) var(--space-5); }
.tick.asked .title { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.tick.asked .note { margin-top: var(--space-2); color: var(--ink); font-size: var(--text-benefit); font-weight: 500; line-height: 1.3; }
.tick.asked .declaration { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--rule); color: var(--ink-muted); }

/* The footer on the form's pages: the way back and the charity's details, without a band that competes with the form */
.foot { padding-block: var(--space-4); }
.foot a { margin-bottom: var(--space-1); }

/* About the charity, beside the form on a wide screen: who the donation goes to, how it is paid and Gift Aid, read before
   paying, in the same place on every screen, as Stripe's own page sets the payee beside its form. Phones and tablets
   leave it out, so the question stays first. */
.about { display: none; }
@media (min-width: 1024px) {
  body:has(.about) {
    display: grid; grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(var(--space-5), 1fr) minmax(16rem, 22rem) minmax(0, 40rem) minmax(var(--space-5), 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  body:has(.about) > :is(.top, .foot) { grid-column: 1 / -1; }
  /* both in the middle row, side by side: the panel comes after the form in the page, so it is read after the question */
  body:has(.about) > main { grid-column: 3; grid-row: 2; width: auto; margin: 0; padding-inline: 0; }
  .about {
    display: block; grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: 0;
    padding-top: clamp(48px, 12vh, 128px);
  }
  .about .name { margin: 0; font: 500 var(--text-lg) / 1.25 var(--font-text); letter-spacing: -0.005em; }
  .about .number { margin: var(--space-1) 0 var(--space-6); color: var(--ink-muted); font-size: var(--text-sm); }
  .about ul { margin: 0; padding: 0; list-style: none; }
  .about li { padding: var(--space-3) 0; border-top: 1px solid var(--rule-strong); font-size: var(--text-sm); line-height: 1.45; }
  .about li:last-child { border-bottom: 1px solid var(--rule-strong); }
  .about .ask { margin: var(--space-5) 0 0; color: var(--ink-muted); font-size: var(--text-sm); }
}

/* The smallest phones (under 360px wide), where text set larger by the reader already fills the screen: the question and
   Gift Aid's figure step down, and the card's padding with them, so the button stays within reach at 200% text */
@media (max-width: 359px) {
  :root { --text-question: 1.375rem; --text-benefit: var(--text-md); }
  .tick.asked { padding: var(--space-3) var(--space-4); }
  .tick.asked .note { margin-top: var(--space-1); }
  .tick.asked .declaration { margin-top: var(--space-2); padding-top: 0; border-top: 0; }
}

/* The meem-seen of the shop's mark, very faint behind the page, as on its printed pieces: texture that says whose page this
   is, never a picture to look at. It is fixed, so it stays put as the screens change, takes no taps, and sits under every
   word at a strength that leaves their contrast as it was (ink at 4%, over the paper). On a phone it sits at the top right,
   cut by the edge, beside the question where the paper shows between the answers' white tiles; on a computer, large and
   centred behind the whole page, as on the printed pieces, so the letterform is read whole rather than as a corner. */
body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  right: -30vw; top: 64px; width: 82vw; aspect-ratio: 822.7 / 676.7;
  background: url("meem-seen.svg") center / contain no-repeat; opacity: 0.04;
}
.top, main, .foot { position: relative; z-index: 1; }
.about { z-index: 1; } /* sticky beside the form, so already positioned */
@media (min-width: 1024px) {
  body::before { top: 50%; right: auto; left: 50%; bottom: auto; width: min(72vw, 1040px); transform: translate(-50%, -46%); opacity: 0.04; }
}
@media print { body::before { display: none; } }

/* The zakat page on a wide screen: the explanation on the left, held in view while the calculator, the long part, scrolls on
   the right with room for its rows. On phones and tablets the page stays one column: explanation, calculator, links. */
@media (min-width: 1024px) {
  main:has(.zakat) { width: min(100%, 76rem); padding-inline: var(--space-6); }
  .zakat {
    display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(0, 45rem);
    column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
  }
  .zakat > * { grid-column: 1; }
  .zakat > [data-zakah-calculator] { grid-column: 2; grid-row: 1 / span 5; }
  .zakat-intro { position: sticky; top: var(--space-6); }
  .zakat-intro .lead { font-size: var(--text-md); }
}