/* One stylesheet, no build step, no framework.
 *
 * Every horizontal rule is written with logical properties (inline-start,
 * padding-inline, text-align: start) rather than left and right, so the
 * Arabic and Urdu pages lay themselves out from the right without a second
 * stylesheet or a single override.
 *
 * Layout uses flow and flexbox with wrapping, and nothing depends on grid
 * gaps or container queries: the target is a cheap phone with an old browser
 * and a bad connection, not a design showcase.
 */

:root {
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --paper: #fdfcf9;
  --line: #d8d4cb;
  --accent: #8a3b12;      /* the rust of the municipal leaflet */
  --accent-ink: #ffffff;
  --warn-bg: #fdf3e3;
  --warn-line: #e0b870;
  --error-bg: #fbeae7;
  --error-line: #c9553c;
  --measure: 36rem;       /* a comfortable line length */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece9e3;
    --ink-soft: #b4afa6;
    --paper: #16181a;
    --line: #3a3d41;
    --accent: #e0825a;
    --accent-ink: #16181a;
    --warn-bg: #2d2619;
    --warn-line: #7a6128;
    --error-bg: #30201d;
    --error-line: #8d3f2d;
  }
}

* { box-sizing: border-box; }

html {
  font-size: 100%;
  /* Larger than most sites on purpose: a lot of the people this is for are
     reading it on a phone, in a hurry, or are not young. */
  line-height: 1.6;
}

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
}

main,
header.site,
footer.site {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Header ------------------------------------------------------------- */

header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 1rem;
  border-block-end: 1px solid var(--line);
}

.brand {
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  color: var(--ink);
}

header.site nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
}

/* Typography ---------------------------------------------------------- */

h1 { font-size: 1.75rem; line-height: 1.25; margin-block: 1.5rem 0.5rem; }
h2 { font-size: 1.25rem; line-height: 1.3; margin-block: 2rem 0.5rem; }
p  { margin-block: 0 1rem; }

.lead { font-size: 1.125rem; color: var(--ink-soft); }
.small { font-size: 0.9375rem; color: var(--ink-soft); }

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

/* A visible focus ring everywhere. People who navigate by keyboard are
   exactly the people a form like this must not lose. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
}
.skip:focus {
  position: static;
  display: inline-block;
  padding: 0.5rem 1rem;
}

/* Sections ------------------------------------------------------------ */

section { margin-block-end: 2rem; }

.hero { padding-block-start: 0.5rem; }

.plain {
  border-inline-start: 4px solid var(--line);
  padding-inline-start: 1rem;
}

ul.categories {
  list-style: none;
  padding-inline-start: 0;
}
ul.categories li {
  margin-block-end: 0.75rem;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--accent);
}

ol.steps { padding-inline-start: 1.25rem; }
ol.steps li { margin-block-end: 0.5rem; }

/* Forms --------------------------------------------------------------- */

form.narrow { max-width: 24rem; }

label {
  display: block;
  font-weight: 600;
  margin-block: 1rem 0.25rem;
}

.hint {
  display: block;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  /* 1rem, not smaller: iOS zooms the whole page in on a field under 16px. */
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

textarea { min-height: 5rem; resize: vertical; }

button,
.button {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  /* A touch target that a cold thumb can hit. */
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
  margin-block-start: 1rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  cursor: pointer;
}

button.secondary,
.button.secondary {
  background: transparent;
  color: var(--accent);
}

/* A button that is really a link, used where a POST is needed but the thing
   reads as navigation: signing out, for instance. */
button.link {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 400;
  text-decoration: underline;
}

form.inline { display: inline; }

fieldset {
  margin-block: 2rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
}

legend {
  font-weight: 700;
  padding-inline: 0.4rem;
}

fieldset.readiness {
  margin-block: 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-block-start: 1px solid var(--line);
  border-radius: 0;
}

fieldset.readiness legend {
  padding-inline: 0;
  font-weight: 400;
}

/* The three answers sit on one line and wrap together on a narrow screen. */
.answers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.answers label {
  display: inline;
  margin: 0;
  font-weight: 400;
  /* Pull the label up against its own radio, not the next one. */
  margin-inline-end: 0.75rem;
}

.check {
  display: flex;
  align-items: start;
  gap: 0.6rem;
  margin-block: 0.75rem;
}

.check input[type="checkbox"],
.answers input[type="radio"] {
  /* Big enough to hit with a cold thumb. */
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  flex: none;
}

label.inline-label {
  margin: 0;
  font-weight: 400;
}

/* Lists and cards ------------------------------------------------------ */

ul.pairs {
  list-style: none;
  padding-inline-start: 0;
}

ul.pairs li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding-block: 0.6rem;
  border-block-end: 1px solid var(--line);
}

li.neighbour {
  flex-wrap: wrap;
}

/* How far away, set large: it is the only number on the page and the whole
   basis for deciding. */
.distance {
  font-weight: 700;
  font-size: 1.0625rem;
}

ul.categories.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

ul.categories.inline li {
  margin: 0;
  padding-inline-start: 0.5rem;
  border-inline-start: 2px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.card {
  padding: 1rem;
  margin-block: 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.card form { display: inline; }
.card button { margin-block-start: 0.5rem; margin-inline-end: 0.5rem; }

dl.contact { margin-block: 1rem; }
dl.contact dt { font-weight: 600; }
dl.contact dd { margin-inline-start: 0; margin-block-end: 0.75rem; }

/* The invitation link. Shown in a field rather than as text so it can be
   selected and copied on a phone without selecting half the page. */
input.token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375rem;
  /* The link is the one thing on the page that must not be mirrored in a
     right-to-left layout: a URL is read left to right in every language. */
  direction: ltr;
  text-align: start;
}

h3 { font-size: 1.0625rem; margin-block: 1.5rem 0.5rem; }

/* Notices -------------------------------------------------------------- */

.notice {
  padding: 0.75rem 1rem;
  margin-block: 1rem;
  border: 1px solid var(--warn-line);
  border-radius: 4px;
  background: var(--warn-bg);
}

.notice.error {
  border-color: var(--error-line);
  background: var(--error-bg);
}

.notice.draft {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: 0.9375rem;
}

/* Footer --------------------------------------------------------------- */

footer.site {
  margin-block-start: 3rem;
  padding-block: 1.5rem 3rem;
  border-block-start: 1px solid var(--line);
}

.languages ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0.5rem 1rem;
}

.languages label { margin-block-start: 0; }

.languages li[aria-current="true"] a {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

/* Print ---------------------------------------------------------------- */

@media print {
  header.site,
  footer.site,
  .skip,
  .notice.draft,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  main { max-width: none; padding: 0; }

  a { color: #000; text-decoration: none; }
}