/*
 * Shared styles for the visitor sign-in and sign-out pages.
 * Built by scripts/build-pages.py to build/pages/style.css and served at /style.css.
 *
 * Every colour below is a config.brand value or a stated tint of one, named in a comment
 * with the contrast ratio it was chosen on. Rules that must not be changed without Brand
 * and Design (docs/08-branding.md): no text on the primary green (2.53:1), and the
 * brandmark sits on white only.
 *
 * Only two weights of Museo Sans Rounded are licensed to Barnardos as web fonts, 300 and
 * 900, so nothing here asks for a weight in between. A synthesised bold is not a brand
 * weight. The web font block below is written by the generator and is empty when
 * config.brand.webFontDir is not set, which leaves the system stack in charge.
 */
@font-face {
  font-family: "Museo Sans Rounded";
  src: url("/fonts/MuseoSansRounded-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans Rounded";
  src: url("/fonts/MuseoSansRounded-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #231F20;       /* brand.richBlack  — body and display text. 16.30:1 on white */
  --green: #50B848;       /* brand.primaryGreen — accent rule only, 2.53:1, never behind text */
  --navy: #12295C;        /* brand.navy — buttons, links, focus ring. White on navy 14.02:1 */
  --grey: #6D6E71;        /* brand.grey60 — hints, footer, disabled button. 5.10:1 on white */
  --coral: #ea6465;       /* brand.coral — error rule only, 3.23:1 on white, never as text */
  --line: #8A8B8D;        /* 80% tint of brand.grey60 — field borders. 3.41:1 on white */
  --notice-bg: #ECEEF2;   /* 8% tint of brand.navy — notice panel. Rich black on it 14.03:1 */
  --error-bg: #FCECED;    /* 12% tint of brand.coral — error panel. Rich black on it 14.25:1 */
  --accent: var(--green); /* sign-in. signout.html overrides this with navy, see D16 */
  --body-font: "Museo Sans Rounded", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --measure: 34rem;
  --gutter: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--black);
  font: 300 1rem/1.55 var(--body-font);   /* 16px minimum, Museo Sans Rounded 300 */
}

header, main, footer { max-width: var(--measure); margin: 0 auto; }

header { padding: 20px var(--gutter) 16px; }
header img { height: 44px; width: auto; display: block; }   /* brandmark on white only */

.rule { height: 6px; background: var(--accent); }   /* accent, never text on it */

main { padding: 0 var(--gutter) 48px; }

h1 {
  font-size: 2.25rem;     /* 36px, the poster templates' heading step above 16.5pt body */
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 28px 0 8px;
}

p { margin: 0 0 12px; }

.lede { font-size: 1.0625rem; }   /* 17px */

.notice {
  background: var(--notice-bg);
  border-left: 5px solid var(--navy);
  padding: 12px 14px;
  margin: 20px 0 28px;
}
.notice p:last-child { margin-bottom: 0; }
.notice a { color: var(--navy); text-decoration: underline; }   /* 12.07:1 on the tint */

label {
  display: block;
  font-weight: 900;       /* 300 reads too light as a label at 16px on a phone */
  margin: 20px 0 6px;
}

.hint, .req {
  display: block;
  font-weight: 300;
  font-size: 0.9375rem;   /* 15px */
  color: var(--grey);     /* 5.10:1 on white */
}
.req { display: inline; }

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--black);
  background: #fff;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 6px;
  min-height: 48px;       /* touch target */
}
textarea { min-height: 96px; }

input:focus, select:focus, textarea:focus, button:focus, a:focus {
  outline: 3px solid var(--navy);
  outline-offset: 2px;    /* the ring sits on white even on the navy button */
}

.check { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0; min-height: 48px; }
.check input { width: 32px; height: 32px; min-height: 0; margin: 8px 0 0; flex: none; }
.check label { margin: 0; font-weight: 300; padding: 12px 0; }

button {
  width: 100%;
  min-height: 56px;
  font: 900 1.125rem/1.2 var(--body-font);
  color: #fff;
  background: var(--navy);   /* white on navy 14.02:1 */
  border: 0;
  border-radius: 6px;
  margin-top: 28px;
  cursor: pointer;
}
button[disabled] { background: var(--grey); cursor: default; }   /* white on grey60 5.10:1 */

.error {
  color: var(--black);       /* 14.25:1 on the coral tint. Coral itself fails as text */
  font-weight: 900;
  background: var(--error-bg);
  border-left: 5px solid var(--coral);   /* colour is redundant, the words carry the message */
  padding: 12px 14px;
  margin: 16px 0 0;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

[hidden] { display: none !important; }

.done a {
  color: var(--navy);        /* 14.02:1 on white */
  font-weight: 900;
  overflow-wrap: anywhere;   /* the sign-out link is a long URL on a 390px screen */
}

footer {
  padding: 20px var(--gutter) 28px;
  border-top: 1px solid var(--line);
  color: var(--grey);
  font-size: 0.9375rem;      /* 15px */
}