/* 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, page headings in capitals, and its name in cream on its darkest navy. 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: #6e6f6c;
  --rule: #eeede6;
  --rule-strong: #858683;
  --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;

  /* page headings in capitals are set smaller than mixed case, as the shop sets its own (24px on a phone) */
  --text-question: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --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; }

/* the shop's page headings: capitals, spaced out, at its regular weight */
h1, h2 { font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.25; }

/* 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); }
.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 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 receipts@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 { margin-bottom: var(--space-5); }

/* On the narrowest phones the capitals close up a little, so a heading or 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) {
  h1, h2, .ok { letter-spacing: 0.02em; }
}