/* Customer-facing pages. Shared font, spacing and easing are in tokens.css. */

/* ---------- Variables ---------- */

:root {
  /* Deep navy on warm cream, with terracotta as the one accent: overview.md, "Branding & Tone".
     Every text pair is at least 6:1, and input borders at least 3:1. */
  --ink: #1f2a44;
  --ink-soft: #4e586c;
  --paper: #faf6ee;
  --surface: #fff;
  --line: #e6dccb;
  --line-strong: #857a68;
  --accent: #9c3f1b;
  --accent-ink: #faf6ee;
  --highlight: #fde68a;

  --radius: 0.5rem;
  --measure: 65ch;
  --page: 70rem;
}

/* ---------- Base elements ---------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font);
  /* 18px body text: most readers are over 65. */
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 650;
}

h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}

h2 {
  font-size: clamp(1.75rem, 1.375rem + 1.5vw, 2.25rem);
}

h3 {
  font-size: 1.25rem;
}

p,
li {
  max-width: var(--measure);
  color: var(--ink-soft);
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

/* Placeholders in draft pages: impossible to miss, so a draft cannot pass for a finished page. */
mark {
  padding: 0 var(--space-1);
  border-radius: var(--space-1);
  background: var(--highlight);
  color: var(--ink);
}

label,
legend {
  font-weight: 600;
}

fieldset {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  border: 0;
}

/* :where keeps the specificity of a plain element selector. */
input:where(:not([type="radio"])),
textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

textarea {
  resize: vertical;
}

[aria-invalid="true"] {
  border-color: var(--accent);
  border-width: 0.125rem;
}

:focus-visible {
  outline: 0.1875rem solid var(--accent);
  outline-offset: 0.1875rem;
}

/* ---------- Page layout ---------- */

header,
main > section,
footer {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

header nav,
footer nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

header nav a {
  color: var(--ink);
  text-decoration: none;
}

header nav [aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

main > section {
  padding-block: var(--space-7);
}

main > section + section {
  border-top: 1px solid var(--line);
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: 1rem;
  color: var(--ink-soft);
}

/* ---------- Shared patterns ---------- */

/* Lists laid out as grids or stacks, not read as bullet points. */
.steps,
.promises,
.rule,
.tickets,
.timeline {
  padding: 0;
  list-style: none;
}

/* White cards on the cream page. */
.rule li,
.plan,
.allowance,
.card {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* A large accent number with its explanation underneath. */
.rule strong {
  display: block;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--accent);
}

/* Secondary text at the standard 16px. */
.hint,
.page-date,
.step-number,
.next-visit-label,
.timeline-date,
.timeline-status {
  font-size: 1rem;
}

/* ---------- Components ---------- */

.brand img {
  display: block;
  height: 2.5rem;
  width: auto;
}

/* "Found, saved and kept safe.": the landing page headline, repeated in a few places. */
.tagline {
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--accent);
}

.steps + .tagline {
  margin-top: var(--space-5);
}

.button {
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}

.button:active {
  transform: scale(0.97);
}

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

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.alert {
  padding: var(--space-3);
  border: 1px solid var(--accent);
  border-left-width: var(--space-1);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.draft-banner {
  max-width: none;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

/* Landing page */

.hero {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
}

.hero p {
  font-size: 1.25rem;
}

.hero-text {
  display: grid;
  gap: var(--space-4);
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Side by side only where the text column still has room for the headline and the buttons. */
@media (min-width: 56rem) {
  .hero {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-6);
  }
}

.section-intro {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.steps,
.plans,
.promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
}

.steps li,
.promises li {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.step-number {
  font-weight: 650;
  color: var(--accent);
}

/* An icon in a soft circle, beside a heading or on its own. */
.icon-badge {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  color: var(--accent);
  background: var(--line);
}

.icon-badge .icon {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
}

/* Headings show their icon in terracotta; buttons and menu links in their own text colour. */
h2 > .icon {
  color: var(--accent);
}

.sources-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

.sources-list li {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
  font-weight: 600;
}

.rule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.plan {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-4);
  padding: var(--space-5);
}

.plan ul {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-4);
}

.price {
  display: grid;
  gap: var(--space-1);
  color: var(--ink);
}

.price strong {
  font-size: 2.25rem;
  line-height: 1;
}

/* Help with a loved one's photos (estates.html): the urgent visit first, then the rest. */
.two-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.two-parts li {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Four steps fit in one row on a wide screen, and two rows of two on a medium one. */
.steps.four-steps {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

/* The urgent part has the accent edge, so it reads first. */
.two-parts li:first-child {
  border-left: var(--space-1) solid var(--accent);
}

.before-we-come {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.before-we-come ul {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-4);
}

.before-we-come .actions {
  margin-top: var(--space-2);
}

.questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-5) var(--space-6);
}

.questions div {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.contact {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

/* Forms */

/* Single-column pages. .narrow (25rem of content) suits a page that is only a form, such as
   sign-in. .column (35rem of content) suits a page with more to read: its lines stay within
   45 to 75 characters, the range for comfortable reading (about 65 in body text). */
.narrow,
.column {
  display: grid;
  gap: var(--space-5);
  margin-inline: auto;
  padding: var(--space-7) var(--space-4);
}

.narrow {
  max-width: 28rem;
}

.column {
  max-width: 38rem;
}

:is(.narrow, .column) form {
  display: grid;
  gap: var(--space-3);
}

/* A form placed straight in a .column keeps the narrow width, so its fields stay a
   comfortable length (Book a visit). A form inside a card takes the card's width. */
.column > form {
  max-width: 25rem;
}

.field {
  display: grid;
  gap: var(--space-1);
}

.field-error {
  color: var(--accent);
  font-weight: 600;
}

/* The enquiry form's spam trap: off the screen, not display: none, which some programs skip. */
.trap {
  position: absolute;
  left: -100vw;
}

.optional {
  font-weight: 400;
  color: var(--ink-soft);
}

.choice {
  display: flex;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 400;
  cursor: pointer;
}

.choice:has(:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.choice input {
  flex-shrink: 0;
  margin-top: var(--space-1);
  inline-size: 1.25rem;
  block-size: 1.25rem;
  accent-color: var(--accent);
}

/* Signed-in pages */

.next-visit {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
}

.next-visit :is(p, a) {
  color: inherit;
}

.next-visit a {
  font-weight: 600;
}

.next-visit-label {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.next-visit-when {
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.3;
}

.archive {
  display: grid;
  gap: var(--space-5);
}

.empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
}

/* Get photos back */

:is(.narrow, .column) > section {
  display: grid;
  gap: var(--space-3);
}

.lead {
  font-size: 1.25rem;
  color: var(--ink);
}

.page-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Headings inside a card are one step down from section headings. */
:is(.allowance, .card) h2 {
  font-size: 1.5rem;
}

.allowance-summary {
  color: var(--ink);
}

/* The number left is the first thing to read; "of N this year" is smaller, beside it. */
.allowance-count {
  font-size: 2rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.allowance-of {
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink-soft);
}

.tickets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* One ticket per free visit: solid while it is there to use, faded and ticked once it is used. */
.ticket {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-2);
  min-width: 7rem;
  padding: var(--space-3) var(--space-4);
  border: 0.125rem solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.ticket-mark {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 0.125rem solid currentColor;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
}

.ticket-mark .icon {
  margin: 0;
}

.ticket.used {
  border: 0.125rem dashed var(--line-strong);
  background: var(--paper);
  color: var(--ink-soft);
  font-weight: 400;
}

.ticket-tag {
  padding: 0 var(--space-2);
  border-radius: 1rem;
  background: var(--accent-ink);
  color: var(--accent);
  font-size: 0.875rem;
}

/* Requests as a timeline: a dot per request on a thin line. The dot is filled once a visit
   is booked or done, an outline while we still have to call, and grey when cancelled. */
.timeline-item {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  column-gap: var(--space-3);
  padding-bottom: var(--space-4);
  background: linear-gradient(var(--line), var(--line)) no-repeat 0.6875rem var(--space-3) / 0.125rem 100%;
}

.timeline-item:last-child {
  padding-bottom: 0;
  background: none;
}

.timeline-item::before {
  content: "";
  grid-row: 1 / span 3;
  justify-self: center;
  inline-size: 1rem;
  block-size: 1rem;
  margin-top: var(--space-1);
  border: 0.1875rem solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
}

.timeline-item > * {
  grid-column: 2;
}

.timeline-item.booked::before {
  background: var(--accent);
}

.timeline-item.done::before {
  border-color: var(--ink);
  background: var(--ink);
}

.timeline-item.cancelled::before {
  border-color: var(--line-strong);
}

.timeline-date,
.timeline-status {
  font-weight: 600;
  color: var(--ink);
}

.timeline-message {
  color: var(--ink);
}

.timeline-item.cancelled :is(.timeline-message, .timeline-status) {
  color: var(--ink-soft);
}

/* Archive: contact-sheet pages */

.sheets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.sheet {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: transform 160ms var(--ease-out);
}

.sheet:active {
  transform: scale(0.98);
}

.sheet img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) / 2);
}

.sheet-label {
  font-weight: 600;
  text-align: center;
}

.sheet-full {
  display: grid;
  gap: var(--space-2);
}

.sheet-full img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.sheet-full figcaption {
  font-size: 1rem;
}

.page-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

h1 .of {
  font-weight: 400;
  color: var(--ink-soft);
}

/* Help and policy pages */

.prose {
  display: grid;
  gap: var(--space-3);
}

.prose h2 {
  margin-top: var(--space-4);
}

.prose :is(ul, ol) {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-4);
}

.prose li::marker {
  color: var(--accent);
  font-weight: 600;
}

.contents {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
}

.contents ul {
  padding-left: var(--space-3);
}

/* ---------- Hover, on devices with a mouse only ---------- */

@media (hover: hover) and (pointer: fine) {
  header nav a:hover,
  .link-button:hover {
    color: var(--accent);
  }

  .sheet {
    transition:
      transform 160ms var(--ease-out),
      border-color 200ms ease;
  }

  .sheet:hover {
    border-color: var(--accent);
  }

  .button {
    transition:
      transform 160ms var(--ease-out),
      background-color 200ms ease,
      color 200ms ease;
  }

  .button:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--accent-ink);
  }
}