/* Chadwell help centre.

   Colours: the Chadwell website's own, exactly (the --cw-* tokens on
   chadwelltelecom.co.uk), so the help centre matches the main site.
   Structure: the Chadwell design system (web/design-system/DESIGN.md) -
   Poppins for what people scan, Work Sans for what they read, capsule
   buttons, 16px cards, 10px fields, the 4px spacing scale, ambient shadows.

   Accessibility (WCAG 2.2 AA, enforced by internal/sitegen's contrast test),
   using only the website's colours:
   - The site green #00a884 is 3.0:1 on white: too pale for normal text, so
     links and focus rings use the site's dark green #006650 (6.9:1). The
     primary button keeps #00a884 with white text set as large text (19px
     bold), where 3:1 is the requirement.
   - The site's muted grey #8a8a8a (3.5:1) is used only where 3:1 suffices:
     the search field's border and list bullets. Secondary text uses the
     site's medium grey #4a4a4a (8.9:1). */
:root {
  --cw-green: #00a884;
  --cw-green-hover: #008f70;
  --cw-green-dark: #006650;
  --cw-green-light: #e6f7f3;
  --cw-ink: #393939;
  --cw-medium: #4a4a4a;
  --cw-muted: #8a8a8a;
  --cw-line: #e5e7eb;
  --white: #ffffff;

  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Work Sans', ui-sans-serif, system-ui, sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;

  --shadow-ambient: 0 1px 2px rgba(28, 28, 28, 0.06);
  --ease: 150ms ease;

  --wrap: 1240px;
  --measure: 45rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--cw-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}

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

/* Links are underlined: the dark green is only 2.5:1 against body text, so
   colour alone wouldn't mark them out. */
a { color: var(--cw-green-dark); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--cw-green-dark); outline-offset: 2px; border-radius: var(--r-sm); }

/* Two voices: Poppins for what people scan (titles, numbers), Work Sans for
   what they read. */
h1, h2, h3 { font-family: var(--font-display); color: var(--cw-ink); letter-spacing: -0.02em; }
h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem); font-weight: 700; line-height: 1.1; margin: 0 0 var(--s4); }
h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: var(--s10) 0 var(--s3); }
h3 { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: var(--s8) 0 var(--s2); }
p { margin: 0 0 var(--s4); }

.skip {
  position: absolute; left: var(--s4); top: -4rem; z-index: 10;
  background: var(--cw-green-dark); color: var(--white); padding: var(--s2) var(--s4); border-radius: var(--r-md);
}
.skip:focus { top: var(--s4); }

/* ---- frame ---- */

.masthead { background: var(--white); border-bottom: 1px solid var(--cw-line); }
.masthead-inner, .crumbs, .page, .stuck-inner, .foot {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s8);
}
.masthead-inner { display: flex; align-items: center; gap: var(--s5); min-height: 64px; }
.brand img { display: block; height: 36px; width: auto; }
.masthead a { white-space: nowrap; }
.masthead-help {
  font-family: var(--font-display); font-weight: 600; color: var(--cw-ink); text-decoration: none;
  padding-left: var(--s5); border-left: 1px solid var(--cw-line);
}
.masthead-contact { margin-left: auto; font-weight: 500; }

.crumbs { padding-top: var(--s5); font-size: 0.875rem; color: var(--cw-medium); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.crumbs li + li::before { content: "/" / ""; margin: 0 var(--s2); }

.page { padding-top: var(--s8); padding-bottom: var(--s16); }

/* ---- help home and category pages ---- */

.intro { max-width: var(--measure); margin-bottom: var(--s10); }
.lede { font-size: 1.125rem; color: var(--cw-medium); }

.topics {
  display: grid; gap: var(--s2) var(--s12);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.topic h2 { font-size: 1.125rem; margin-top: var(--s6); }
.topic h2 a { color: var(--cw-ink); text-decoration: none; }
.topic h2 a:hover { color: var(--cw-green-dark); text-decoration: underline; }

.questions, .question-list { list-style: none; margin: 0; padding: 0; }
.questions li { border-top: 1px solid var(--cw-line); }
.questions li:last-child { border-bottom: 1px solid var(--cw-line); }
.questions a { display: block; padding: var(--s3) 0; font-weight: 500; text-decoration: none; }
.questions a:hover { text-decoration: underline; }

.question-list { max-width: var(--measure); }
.question-list li { padding: var(--s5) 0; border-top: 1px solid var(--cw-line); }
.question-list li:last-child { border-bottom: 1px solid var(--cw-line); }
.question-list a { font-weight: 600; font-size: 1.0625rem; }
.question-list p { margin: var(--s1) 0 0; color: var(--cw-medium); }

.empty { max-width: var(--measure); color: var(--cw-medium); }

/* ---- search (shown only when JavaScript runs) ---- */

.search { margin-top: var(--s8); }
.search label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: var(--s2); }
.search input {
  width: 100%; height: 44px; padding: 0 14px;
  font: inherit; color: var(--cw-ink); background: var(--white);
  border: 1px solid var(--cw-muted); border-radius: var(--r-md);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.search input:focus { outline: none; border-color: var(--cw-green-dark); box-shadow: 0 0 0 3px var(--cw-green-light); }
.search input:focus-visible { outline: 2px solid var(--cw-green-dark); outline-offset: 2px; }
.search-hint { margin: var(--s2) 0 0; font-size: 0.8125rem; color: var(--cw-medium); }
.search-status { margin: var(--s3) 0 0; font-size: 0.875rem; color: var(--cw-medium); min-height: 1.3em; }
.results { list-style: none; margin: var(--s1) 0 0; padding: 0; }
.results li { border-top: 1px solid var(--cw-line); }
.results a { display: block; padding: var(--s3) 0; font-weight: 500; text-decoration: none; }
.results a:hover { text-decoration: underline; }
.results span { display: block; font-size: 0.875rem; font-weight: 400; color: var(--cw-medium); }

/* ---- article ---- */

.article { max-width: var(--measure); }

/* The direct answer: a standard card (line edge plus ambient shadow), set
   larger than the body so it reads first. */
.answer {
  margin: var(--s6) 0 var(--s8);
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--cw-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-ambient);
  font-size: 1.1875rem;
  line-height: 1.55;
}
.answer p:last-child { margin-bottom: 0; }

.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding: 0; margin: 0 0 var(--s5); list-style: none; }
.prose li { margin: var(--s3) 0; }
.prose ul > li { position: relative; padding-left: var(--s6); }
.prose ul > li::before {
  content: ""; position: absolute; left: 6px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cw-muted);
}
/* Steps are a sequence, so they're numbered; numbers are Poppins. */
.prose ol { counter-reset: step; }
.prose ol > li { counter-increment: step; position: relative; padding-left: 44px; min-height: 28px; }
.prose ol > li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--cw-line);
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--cw-ink);
}
.prose code { font-size: 0.95em; background: var(--cw-green-light); padding: 0.1em 0.35em; border-radius: var(--r-sm); }
.prose strong { font-weight: 600; }

.updated { margin-top: var(--s10); font-size: 0.875rem; color: var(--cw-medium); }

/* ---- still stuck ---- */

.stuck { background: var(--cw-green-light); border-top: 1px solid var(--cw-line); }
.stuck-inner { padding-top: var(--s8); padding-bottom: var(--s10); }
.stuck h2 { margin: 0 0 var(--s1); }
.stuck p { color: var(--cw-medium); }
.stuck-ways { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Buttons: capsules (the design system's Capsule Rule). The label is large
   text (19px bold), so white on the site green meets AA at 3:1. */
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 700; font-size: 1.1875rem; text-decoration: none;
  max-width: 100%; overflow-wrap: anywhere; /* long email addresses on narrow phones */
  transition: background-color var(--ease), border-color var(--ease), transform var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--cw-green); color: var(--white); }
.btn-primary:hover { background: var(--cw-green-hover); color: var(--white); text-decoration: none; }
.btn-primary:active { background: var(--cw-green-dark); }
.btn-secondary { background: var(--white); color: var(--cw-ink); border-color: var(--cw-line); }
.btn-secondary:hover { border-color: var(--cw-ink); color: var(--cw-ink); text-decoration: none; }

.foot { padding-top: var(--s5); padding-bottom: var(--s8); font-size: 0.875rem; color: var(--cw-medium); }

@media (max-width: 720px) {
  .masthead-inner, .crumbs, .page, .stuck-inner, .foot { padding-inline: var(--s4); }
  .masthead-inner { gap: var(--s4); }
  .masthead-help { padding-left: var(--s4); }
  .brand img { height: 28px; }
  .answer { padding: var(--s5); font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .btn:active { transform: none; }
}

@media print {
  .masthead, .search, .stuck, .skip { display: none; }
  .answer { box-shadow: none; }
}