/* Healthy Working Life branding: cream background, teal, DM Sans headings, Noto Sans body.
   Fonts are served from this site (see fonts/) because the page's security policy blocks outside hosts.
   Each font is split by character range, so a browser only downloads the extra Polish letters (latin-ext)
   or the Urdu font when the page actually shows those characters. Fonts are from Fontsource (SIL Open Font Licence). */
@font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/dm-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/dm-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/dm-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/noto-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/noto-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/noto-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/noto-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/noto-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/noto-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Noto Nastaliq Urdu"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/noto-nastaliq-urdu-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Noto Nastaliq Urdu"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/noto-nastaliq-urdu-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }

:root {
  /* The colour names below are kept from the earlier version so the Admin pages pick up the new colours too. */
  --blue: #0b6b6b;
  --dark-blue: #0b5c5c;
  --green: #0b6b6b;
  --text: #17303a;
  --grey: #4f5f5e;
  --light: #e4f3f1;
  --border: #e0d5bf;
  --focus: #ffeb3b;
  --warn-bg: #fff4d6;
  --warn: #7a5900;
  --crisis-bg: #fde8e8;
  --crisis: #8a1c1c;
  --cream: #f9f0e1;
  --mint: #f4faf9;
  --accent: #3db0ae;
  --heading-font: "DM Sans", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--cream);
}
h1, h2, h3, h4, .btn, .chip, summary { font-family: var(--heading-font); }
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }
.skip { position: absolute; inset-inline-start: 0; top: 0; transform: translateY(-110%); background: var(--focus); color: #000; padding: .5rem 1rem; z-index: 10; }
.skip:focus { transform: none; }

.site-header { background: var(--mint); color: var(--text); border-bottom: 1px solid #e3efec; }
.site-header .wrap { display: flex; align-items: center; gap: .75rem; min-height: 4.4rem; }
.site-header .logo { flex: none; color: #2e9c9c; }
.site-header h1 { margin: 0; font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.site-header h1 { flex: 1; }
.site-header h1 span { display: block; font-weight: 500; font-size: 1rem; color: var(--grey); }

main { padding-top: 2rem; padding-bottom: 3rem; }

.intro { border-inline-start: 4px solid var(--accent); padding-block: .25rem; padding-inline: 1.5rem 0; margin: 0 0 1.5rem; }
.eyebrow { margin: 0 0 .25rem; font-family: var(--heading-font); font-weight: 500; font-size: 1.1rem; color: #18716f; }
.intro h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; color: var(--dark-blue); }

.notice { background: var(--warn-bg); border-radius: 10px; padding: .75rem 1rem; margin: 0 0 1.5rem; font-size: 1rem; }

/* Landing view. Hidden once the conversation starts. */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; margin: 1rem 0 2rem; }
.chatting .hero { display: none; }
.people { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.person { width: 7rem; height: 7rem; border-radius: 50%; border: 4px solid; overflow: hidden; background: #fff; }
.person img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.person:nth-child(1) { border-color: #8ee0ae; background: #f6c8a0; }
.person:nth-child(2) { border-color: #f2a6ce; background: #9ed6e8; }
.person:nth-child(3) { border-color: #f6b97a; background: #dde08a; }
.person:nth-child(4) { border-color: #8fd0f2; background: #f0b4ce; }
.hero-title { margin: 0; max-width: 40rem; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.15; color: var(--dark-blue); }
.hero-text { margin: 0; max-width: 36rem; font-size: 1.125rem; line-height: 1.6; }

fieldset.mode { border: 0; padding: 0; margin: 0 auto 1rem; max-width: 52rem; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
fieldset.mode legend { font-weight: 700; padding: 0; margin-bottom: .25rem; font-family: var(--heading-font); }
/* Once the chat has started the choice is kept but no longer shown; Start again brings it back. */
.chatting fieldset.mode { display: none; }
fieldset.mode label { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; cursor: pointer; }
fieldset.mode input { width: 1.4rem; height: 1.4rem; margin-top: .15rem; accent-color: var(--blue); }

.log { display: flex; flex-direction: column; gap: 1rem; margin: 0 auto 1.5rem; max-width: 52rem; }
.log:empty { display: none; margin: 0; }
.bubble { max-width: 100%; padding: .9rem 1.25rem; border-radius: 16px; border-end-start-radius: 4px; }
.bubble p { margin: 0 0 .6rem; white-space: pre-wrap; }
.bubble p:last-child { margin-bottom: 0; }
.bubble.user { background: #fff; border: 1px solid var(--border); border-radius: 16px; border-end-end-radius: 4px; align-self: flex-end; max-width: 85%; }
.bubble.assistant { background: var(--light); border: 1px solid #c5e3df; }
.bubble.thinking { color: var(--grey); font-style: italic; background: transparent; padding-inline-start: 0; }
.bubble.error { background: var(--crisis-bg); color: var(--crisis); }

.crisis { background: var(--crisis-bg); border-inline-start: 6px solid #d5281b; border-radius: 10px; border-start-start-radius: 4px; border-end-start-radius: 4px; color: var(--crisis); padding: .75rem 1rem; margin: .75rem 0 0; font-weight: 700; }
.crisis a { color: var(--crisis); }
.crisis p { margin: 0 0 .5rem; }
.crisis p:last-child { margin-bottom: 0; }
.bubble ol.questions { margin: 0 0 .75rem; padding-inline-start: 1.5rem; font-weight: 600; }
.bubble ol.questions li { margin: 0 0 .35rem; }
.bubble.assistant { scroll-margin-top: 1rem; }
.bubble p.understood, .bubble p.pii-note { font-size: .95rem; color: var(--grey); }

.cards { display: flex; flex-direction: column; gap: 1rem; }
.card { background: #fff; border-radius: 12px; padding: 1rem 1.25rem 1.1rem; color: var(--text); box-shadow: 0 1px 3px rgba(23, 48, 58, .1); }
.card-head { display: flex; gap: 1.1rem; align-items: center; margin: 0 0 .75rem; }
.card-title { min-width: 0; flex: 1; }
.thumb { flex: none; width: 6.75rem; height: 5rem; border-radius: 8px; }
.thumb-0 { background: linear-gradient(135deg, #b9aee0 0%, #d9c8f0 40%, #8fa6c8 75%, #4d6a8c 100%); }
.thumb-1 { background: linear-gradient(135deg, #b7c9d6 0%, #e7b9a0 55%, #f2c7a8 100%); }
.thumb-2 { background: linear-gradient(135deg, #c5d2b8 0%, #a9bd9c 60%, #92a887 100%); }
.thumb-3 { background: linear-gradient(135deg, #f1d3a8 0%, #e9b7b0 55%, #c9a6c8 100%); }
.thumb-4 { background: linear-gradient(135deg, #a9d6d4 0%, #8dbcc9 50%, #7a9fc2 100%); }
.thumb.logo { background: #fff; border: 1px solid var(--border); padding: .4rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.thumb.logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.card h3 { margin: 0 0 .1rem; font-size: 1.2rem; line-height: 1.3; color: var(--dark-blue); }
.card .org { margin: 0 0 .5rem; color: #1b6e75; font-size: 1rem; }
.badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.badge { font-size: .85rem; font-weight: 600; padding: .1rem .55rem; border-radius: 6px; background: #f4f1ea; border: 1px solid var(--border); color: var(--text); }
.badge.live { background: #d9efe2; border-color: #b6dcc6; color: #00562a; }
.badge.notopen { background: var(--warn-bg); border-color: #ecd49a; color: var(--warn); }
.badge.self { background: #dff0ef; border-color: #bfe0dd; color: var(--dark-blue); }
.badge.fit-strong { background: var(--dark-blue); border-color: var(--dark-blue); color: #fff; }
.badge.fit-possible { background: #fff; color: var(--text); border: 1px solid var(--grey); }
.card .why { margin: 0 0 .6rem; font-weight: 700; }
.card .check { margin: 0 0 .6rem; }
.card .whofor { margin: 0 0 .75rem; }
.card h4 { margin: .8rem 0 .25rem; font-size: 1rem; }
.card ul { margin: 0; padding-inline-start: 1.2rem; }
.card li { margin: .15rem 0; overflow-wrap: anywhere; }
.contact { list-style: none; padding: 0 !important; }
.contact li { margin: .25rem 0; }
.card a { color: var(--blue); }
.card details { margin-top: .6rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.card summary { cursor: pointer; font-weight: 700; color: var(--blue); }
.card .meta { margin: .75rem 0 0; font-size: .95rem; color: var(--grey); }
.card .stale { margin: .4rem 0 0; font-size: .95rem; background: var(--warn-bg); color: var(--warn); padding: .3rem .6rem; border-radius: 6px; }
.card .tools { margin-top: .75rem; }

.chip { font-size: .95rem; font-weight: 500; background: #fff; color: var(--blue); border: 1px solid var(--blue); border-radius: 999px; padding: .4rem 1rem; cursor: pointer; text-align: start; }
.chip:hover { background: var(--light); }
.more-options { display: flex; justify-content: flex-start; margin: .75rem 0 0; }

.form { max-width: 52rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.form label { align-self: flex-start; font-weight: 700; margin-bottom: .35rem; font-family: var(--heading-font); }
.form textarea { width: 100%; min-height: 10.5rem; font: inherit; padding: 1rem 1.25rem; border: 2px solid var(--accent); border-radius: 10px; background: #fff; color: var(--text); resize: vertical; }
.form textarea::placeholder { color: #3c7a7c; opacity: 1; }
.actions { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.1rem; font-weight: 700; border-radius: 10px; padding: .75rem 2rem; min-height: 3rem; cursor: pointer; border: 2px solid transparent; }
.btn.primary { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(11, 92, 92, .25); }
.btn.primary:hover { background: #094f4f; }
.btn.primary:disabled { background: #7fb1b1; box-shadow: none; cursor: wait; }
.btn.secondary { background: transparent; color: var(--dark-blue); border-color: var(--blue); }
.btn.secondary:hover { background: var(--light); }
.btn.small { font-size: .95rem; padding: .35rem .9rem; min-height: 2.5rem; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 0;
  box-shadow: 0 0 0 5px #000;
}

.privacy { margin: 1.25rem auto 0; max-width: 40rem; text-align: center; font-size: .9rem; color: var(--grey); }
.site-footer { background: var(--mint); border-top: 4px solid var(--accent); padding: 1rem 0; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--blue); }

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .wrap { padding: 0 1rem; }
  .bubble.user { max-width: 95%; }
  .people { gap: .75rem; }
  .person { width: 5rem; height: 5rem; border-width: 3px; }
  .card-head { align-items: flex-start; }
  .thumb { width: 4.5rem; height: 4.5rem; }
}

/* Admin bar, at the top of every Admin page (admin/) */
.teambar { background: var(--dark-blue); color: #fff; font-size: .95rem; }
.teambar .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; padding-top: .4rem; padding-bottom: .4rem; }
.teambar a { color: #fff; }
.teambar a[aria-current="page"] { font-weight: 700; text-decoration: none; }

/* The one link to the Admin section, at the end of the main page. Kept quiet: it's for the development team. */
.admin-link { margin: 1.5rem 0 0; font-size: .9rem; text-align: end; }
.admin-link a { color: var(--grey); }

/* Language switcher, in the header: a globe and a drop-down. Each language is named in its own language. */
.lang-switch { display: flex; align-items: center; gap: .35rem; color: var(--dark-blue); }
.lang-switch label { display: flex; cursor: pointer; }
.lang-switch select { font: 500 .95rem/1.2 var(--heading-font); color: var(--dark-blue); background: #fff; border: 1px solid var(--blue); border-radius: 8px; padding: .35rem .6rem; min-height: 2.5rem; cursor: pointer; }
.lang-switch select:hover { background: var(--light); }
.lang-switch select:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; box-shadow: 0 0 0 5px #000; }
.lang-switch option:lang(ur) { font-family: "Noto Nastaliq Urdu", var(--heading-font); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .site-header .wrap { flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
  .site-header h1 { flex-basis: calc(100% - 3rem); }
}

/* Phone numbers and email addresses always read left to right, even inside Urdu text. */
a[href^="tel:"], a[href^="mailto:"] { unicode-bidi: isolate; direction: ltr; }

/* Urdu is set in Nastaliq, which needs much more line height than Latin text. Service details stay in
   English, so they fall back to Noto Sans. */
html:lang(ur) body { font-family: "Noto Nastaliq Urdu", "Noto Sans", "Segoe UI", Arial, sans-serif; line-height: 2.1; }
html:lang(ur) { --heading-font: "Noto Nastaliq Urdu", "DM Sans", "Segoe UI", Arial, sans-serif; }
html:lang(ur) h1, html:lang(ur) h2, html:lang(ur) h3, html:lang(ur) h4 { line-height: 2.2; }
html:lang(ur) .intro h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
html:lang(ur) .eyebrow { margin-bottom: .6rem; line-height: 2; }
html:lang(ur) .hero-title { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.8; }
html:lang(ur) .bubble.thinking { font-style: normal; }
html:lang(ur) .btn { padding-block: .4rem .6rem; }
html:lang(ur) [lang="en"] { line-height: 1.55; }

/* ---------- Accessibility options (access.js) ---------- */
/* The bar under the header: text size and high contrast. */
.a11y-bar { background: #fff; border-top: 1px solid #e3efec; font-size: .95rem; }
.a11y-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1.25rem; padding-top: .4rem; padding-bottom: .4rem; }
.a11y-group { display: flex; align-items: center; gap: .35rem; }
.a11y-group > span { font-weight: 600; margin-inline-end: .25rem; }
.size-btn, .contrast-btn { font: 700 1rem/1 var(--heading-font); color: var(--dark-blue); background: #fff; border: 1px solid var(--blue); border-radius: 8px; min-height: 2.5rem; min-width: 2.75rem; padding: .3rem .6rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.size-btn[data-size="2"] { font-size: 1.15rem; }
.size-btn[data-size="3"] { font-size: 1.3rem; }
.size-btn:hover, .contrast-btn:hover { background: var(--light); }
.size-btn[aria-pressed="true"], .contrast-btn[aria-pressed="true"] { background: var(--dark-blue); color: #fff; border-color: var(--dark-blue); }
.size-btn:focus-visible, .contrast-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; box-shadow: 0 0 0 5px #000; }
.a11y-group > span { white-space: nowrap; }
@media (max-width: 600px) {
  .a11y-bar .wrap { justify-content: flex-start; }
  /* With bigger text on a phone, put the logo above the scheme name so the name gets the full width. */
  html.text-large .card-head, html.text-larger .card-head { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* Text size. Everything on the page is sized in rem, so changing the root size scales it all together. */
html.text-large { font-size: 125%; }
html.text-larger { font-size: 150%; }

/* Listen buttons on replies and cards. */
.bubble-tools { margin-top: .6rem; }
.card .tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.listen[hidden] { display: none; }
.listen.playing { background: var(--dark-blue); color: #fff; border-color: var(--dark-blue); }

/* High contrast: black text on white, dark borders, underlined links, no tinted panels. */
html.high-contrast {
  --blue: #003d3d;
  --dark-blue: #002b2b;
  --green: #003d3d;
  --text: #000;
  --grey: #1a1a1a;
  --light: #e6f2f2;
  --border: #000;
  --warn-bg: #fff;
  --warn: #4d3800;
  --crisis-bg: #fff;
  --crisis: #6b0000;
  --cream: #fff;
  --mint: #fff;
  --accent: #000;
}
html.high-contrast .site-header,
html.high-contrast .a11y-bar { border-color: #000; }
html.high-contrast .site-header { border-bottom: 2px solid #000; }
html.high-contrast .site-header .logo,
html.high-contrast .eyebrow,
html.high-contrast .card .org { color: #000; }
html.high-contrast .notice,
html.high-contrast .bubble,
html.high-contrast .card,
html.high-contrast .crisis,
html.high-contrast .card .stale { border: 2px solid #000; box-shadow: none; }
html.high-contrast .bubble.assistant { background: #fff; }
html.high-contrast .bubble.thinking { border: 0; color: #000; }
html.high-contrast .crisis { border-inline-start-width: 8px; }
html.high-contrast .form textarea { border-color: #000; }
html.high-contrast .form textarea::placeholder { color: #333; }
html.high-contrast .badge { background: #fff; border: 1px solid #000; color: #000; }
html.high-contrast .badge.fit-strong,
html.high-contrast .badge.live { background: #000; color: #fff; }
html.high-contrast .btn.primary { background: #000; box-shadow: none; }
html.high-contrast .btn.primary:hover { background: #333; }
html.high-contrast .btn.secondary,
html.high-contrast .chip,
html.high-contrast .size-btn,
html.high-contrast .contrast-btn,
html.high-contrast .lang-switch select { border: 2px solid #000; color: #000; background: #fff; }
html.high-contrast .size-btn[aria-pressed="true"],
html.high-contrast .contrast-btn[aria-pressed="true"],
html.high-contrast .listen.playing { background: #000; color: #fff; }
html.high-contrast a { text-decoration: underline; text-decoration-thickness: 2px; }
html.high-contrast .thumb:not(.logo) { background: #fff; border: 2px solid #000; }
html.high-contrast .site-footer { border-top-color: #000; }

/* ---------- User feedback (feedback.js) ---------- */
/* A link-style button: quiet, but still a proper button for keyboards and screen readers. */
.linkish { font: inherit; font-size: .95rem; color: var(--blue); background: none; border: 0; padding: .35rem 0; min-height: 2.5rem; text-align: start; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.linkish:hover { color: var(--dark-blue); text-decoration-thickness: 2px; }
.card .fb-card { margin-top: .5rem; border-top: 1px solid var(--border); padding-top: .25rem; }
.fb-reply { display: flex; flex-direction: column; gap: .25rem; margin: .75rem 0 0; }
.fb-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fb-q { font-weight: 700; font-family: var(--heading-font); margin-inline-end: .25rem; }
.fb-gap-line { margin: 0; }
.fb-thanks { margin: .5rem 0 0; font-weight: 700; color: var(--dark-blue); }
.fb-thanks:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

.fb-form { margin: .5rem 0 0; padding: .9rem 1rem 1rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; max-width: 46rem; }
.fb-form fieldset { border: 0; margin: 0 0 .75rem; padding: 0; min-width: 0; }
.fb-form legend { font-weight: 700; font-family: var(--heading-font); padding: 0; margin-bottom: .35rem; }
.fb-form .fb-name { display: block; font-weight: 600; color: var(--dark-blue); }
.fb-list, .fb-grid { display: flex; flex-direction: column; gap: .2rem; }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .1rem 1rem; }
.fb-tick > label { display: flex; align-items: flex-start; gap: .55rem; padding: .2rem 0; cursor: pointer; }
.fb-tick input[type=checkbox] { flex: none; width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--blue); }
.fb-sub { margin: .25rem 0 .5rem; padding-inline-start: 1.8rem; }
.fb-sub fieldset { margin-bottom: .5rem; }
.fb-field { margin: 0 0 .75rem; }
.fb-field > label { display: block; font-weight: 700; font-family: var(--heading-font); margin-bottom: .25rem; }
.fb-field input, .fb-field select, .fb-field textarea { display: block; width: 100%; max-width: 32rem; font: inherit; color: var(--text); background: #fff; border: 2px solid var(--accent); border-radius: 8px; padding: .45rem .7rem; min-height: 2.75rem; }
.fb-field textarea { max-width: none; resize: vertical; }
.fb-note { margin: 0 0 .35rem; font-size: .95rem; color: var(--grey); }
.fb-warn { margin: .4rem 0 0; font-size: .95rem; background: var(--warn-bg); color: var(--warn); padding: .3rem .6rem; border-radius: 6px; }
.fb-error { margin: 0 0 .6rem; font-weight: 600; background: var(--crisis-bg); color: var(--crisis); padding: .3rem .6rem; border-radius: 6px; }
.fb-warn[hidden], .fb-error[hidden], .fb-sub[hidden], .fb-pilot[hidden] { display: none; }
/* "Give pilot feedback" band (pilot testers only) */
.fb-pilot { margin: 0 0 1.25rem; padding: .75rem 1rem; background: var(--light); border-inline-start: 5px solid var(--accent); border-radius: 10px; }
.fb-pilot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.fb-pilot-text { margin: 0; }
.fb-pilot .fb-form { max-width: none; margin-top: .75rem; }
.fb-pilot .fb-thanks { margin-top: .75rem; }
.fb-row { display: flex; flex-wrap: wrap; gap: .1rem 1.25rem; }
.fb-tick input[type=radio] { flex: none; width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--accent); }
.fb-pilot-sends { margin-bottom: .75rem; }
.fb-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.fb-field select:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; box-shadow: 0 0 0 5px #000; }
html:lang(ur) .fb-field input[type=url] { text-align: left; }

html.high-contrast .linkish,
html.high-contrast .fb-thanks,
html.high-contrast .fb-form .fb-name { color: #000; }
html.high-contrast .linkish { text-decoration-thickness: 2px; }
html.high-contrast .fb-form,
html.high-contrast .fb-warn,
html.high-contrast .fb-error { border: 2px solid #000; }
html.high-contrast .fb-field input,
html.high-contrast .fb-field select,
html.high-contrast .fb-field textarea { border-color: #000; }
html.high-contrast .fb-tick input[type=checkbox],
html.high-contrast .fb-tick input[type=radio] { accent-color: #000; }
html.high-contrast .fb-pilot { background: #fff; border: 2px solid #000; border-inline-start-width: 5px; }

/* ---------- Header: partner logo, title, language and accessibility options on one line ---------- */
.site-header .header-row { max-width: 84rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; padding-top: .6rem; padding-bottom: .6rem; }
.brand-logo { flex: none; display: block; height: 3rem; width: auto; }
.site-header .header-row h1 { flex: 1 1 14rem; font-size: 1.25rem; }
.header-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .95rem; }
.header-tools .a11y-group > span { font-weight: 600; }
@media (max-width: 760px) {
  .brand-logo { order: 1; height: 2.6rem; }
  .header-tools { order: 3; flex-basis: 100%; }
}

/* Landing page: notice, pictures, then the heading. */
.hero { margin-top: 0; }
.hero-title { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.25; max-width: 44rem; }
html:lang(ur) .hero-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.9; }

/* About the programme, under the privacy note. */
.programme { max-width: 52rem; margin: 2.5rem auto 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--text); font-size: .95rem; }
.programme p { margin: 0 0 .75rem; }
.programme p:last-child { margin-bottom: 0; }
html.high-contrast .programme { border-top: 2px solid #000; }
main > .notice:first-child { margin-top: 1.5rem; }
.brand-logo { height: 3.5rem; }
@media (max-width: 760px) {
  .brand-logo { height: 3rem; }
  /* On a phone the A / A+ / A++ buttons speak for themselves; the label stays for screen readers. */
  .header-tools .a11y-group > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-tools { gap: .5rem .6rem; }
}

/* Header: partner logo on the left, language and accessibility options on the right. */
.site-header .header-row { justify-content: space-between; }
.header-tools { margin-inline-start: auto; justify-content: flex-end; }

/* Page title, centred at the top of the landing block. */
.page-title { margin: 1.75rem 0 1rem; text-align: center; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; color: var(--dark-blue); }
html:lang(ur) .page-title { line-height: 1.9; }
main > .page-title + .notice { margin-top: 0; }
.form textarea::placeholder { line-height: 1.5; }

/* Emergency footer: always visible at the bottom of the screen. It sits in the normal page flow and
   sticks to the bottom, so nothing is hidden underneath it at the end of the page. */
/* Only on the main page (the one with #footer-spot); the team pages keep an ordinary footer. */
#footer-spot + .site-footer { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -2px 8px rgba(23, 48, 58, .08); padding: .7rem 0; }
/* Keep anything that gets keyboard focus, such as the message box, clear of the footer. */
html { scroll-padding-bottom: 7rem; }
@media (max-width: 760px) {
  .site-header .header-row { justify-content: flex-start; }
  .header-tools { margin-inline-start: 0; justify-content: flex-start; }
  .site-footer { font-size: .9rem; padding: .5rem 0; }
}
@media (max-width: 760px) {
  /* Phone: the contrast button shows just its icon so all the controls fit on one row. Its name is still read out. */
  .contrast-btn .contrast-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .contrast-btn svg { width: 22px; height: 22px; }
}
/* The partner logo keeps its own size (it does not grow with the text size buttons) and never overflows. */
.brand-logo { height: auto; width: min(343px, 100%); }
@media (max-width: 760px) { .brand-logo { height: auto; width: min(294px, 100%); } }
/* Floating footer fades out while scrolling (app.js). Transparent only, so it stays readable by screen readers. */
.site-footer { transition: opacity .35s ease; }
.site-footer.footer-faded { opacity: 0; pointer-events: none; }
#footer-spot { height: 1px; margin-top: -1px; }
@media (prefers-reduced-motion: reduce) { .site-footer { transition: none; } }
/* Phone numbers never split across two lines. */
a[href^="tel:"] { white-space: nowrap; }

/* Where a service is: addresses with directions and map links. */
.badge.place { display: inline-flex; align-items: center; gap: .25rem; }
.badge.place .pin { width: 14px; height: 14px; }
.place-labels { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .4rem; }
.card ul.places { list-style: none; padding: 0; margin: 0; }
.places li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.places li:last-child { border-bottom: 0; }
.place-text { display: flex; gap: .45rem; align-items: flex-start; flex: 1 1 18rem; }
.place-text .pin { flex: none; margin-top: .2rem; color: var(--blue); }
.place-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.place-links .btn { text-decoration: none; }
.map-link { font-weight: 600; }
.place-more { color: var(--grey); font-size: .95rem; }
html.high-contrast .place-text .pin { color: #000; }

/* "Who is this for?" must be chosen before searching. */
fieldset.mode .mode-hint { flex-basis: 100%; margin: 0 0 .1rem; font-size: .95rem; color: var(--grey); }
fieldset.mode .mode-error { flex-basis: 100%; margin: 0 0 .3rem; padding: .4rem .7rem; border-radius: 6px; background: var(--crisis-bg); color: var(--crisis); font-weight: 700; }
fieldset.mode.invalid { border-inline-start: 4px solid #d5281b; padding-inline-start: .8rem; }

/* "Did you get in touch?" on a card, after coming back from one of its links. */
.contact-ask { margin-top: .8rem; padding: .6rem .8rem; border-radius: 8px; background: var(--light); border: 1px solid #c5e3df; }
.contact-q { margin: 0 0 .5rem; font-weight: 700; }
.contact-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.contact-thanks { margin: 0; }
html.high-contrast .contact-ask { background: #fff; border: 2px solid #000; }


/* Link to the printable directory (directory.html): first of the header tools, styled like the buttons beside it. */
.dir-btn { font: 700 1rem/1 var(--heading-font); color: var(--dark-blue); background: #fff; border: 1px solid var(--blue); border-radius: 8px; min-height: 2.5rem; min-width: 2.75rem; padding: .3rem .7rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-decoration: none; white-space: nowrap; }
.dir-btn:hover { background: var(--light); }
.dir-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; box-shadow: 0 0 0 5px #000; }
html.high-contrast .dir-btn { border: 2px solid #000; color: #000; background: #fff; text-decoration: none; }
@media (max-width: 760px) {
  /* Phone: icon only, like the contrast button, so the tools fit on one row. Its name is still read out. */
  .dir-btn .dir-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dir-btn svg { width: 22px; height: 22px; }
  /* Phone: the directory button sits at the end of the logo row, and the language and accessibility
     controls keep their own row underneath, as before. */
  .site-header .header-row { column-gap: .6rem; }
  .header-tools { display: contents; }
  .brand-logo { order: 1; width: min(294px, calc(100% - 3.6rem)); }
  .dir-btn { order: 2; margin-inline-start: auto; }
  .site-header .header-row::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .lang-switch, .a11y-group, .contrast-btn { order: 4; }
}

/* "Suggest a service": header button and the panel it opens. */
.suggest-panel { max-width: 46rem; margin: 1.25rem auto 0; padding: 1rem 1.1rem; background: #fff; border: 2px solid var(--blue); border-radius: 12px; }
.suggest-panel .suggest-title { margin: 0 0 .3rem; font-size: 1.3rem; color: var(--dark-blue); }
.suggest-panel .fb-form { border: 0; padding: 0; margin-top: .5rem; }
.fb-more { margin: .25rem 0 .75rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.fb-more > summary { cursor: pointer; font-weight: 700; color: var(--blue); font-family: var(--heading-font); margin-bottom: .5rem; }
.fb-tick input[type=radio] { flex: none; width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--blue); }
html.high-contrast .suggest-panel { border-color: #000; }
.suggest-btn[hidden], .suggest-panel[hidden], .fb-rest[hidden], .fb-prompt[hidden] { display: none; }
/* Someone from the service: the listing questions are shown, not folded. */
.fb-provider .fb-more > summary { display: none; }
.fb-prompt { margin: .25rem 0 .75rem; padding: .6rem .8rem; background: var(--light); border-inline-start: 4px solid var(--blue); border-radius: 6px; }
html.high-contrast .fb-prompt { background: #fff; border-color: #000; }
@media (max-width: 760px) {
  /* Phone: icon only, next to the directory button; the logo shrinks a little to make room. */
  .suggest-btn.dir-btn { order: 2; margin-inline-start: 0; }
  .site-header .header-row:has(.suggest-btn:not([hidden])) .brand-logo { width: min(294px, calc(100% - 7.2rem)); }
  .suggest-panel { margin-top: 1rem; padding: .85rem; }
}

/* Laptop widths: keep the logo and all the header buttons on one line. The logo is a little smaller, the
   buttons sit closer together, and "Text size" is read out but not shown (A / A+ / A++ speak for themselves,
   as on a phone). Below this, or in a longer language, the buttons wrap onto a second line as before. */
.site-header .header-row { max-width: 90rem; }
@media (min-width: 761px) and (max-width: 1500px) {
  .brand-logo { height: auto; width: 294px; }
  .header-tools { gap: .5rem .6rem; }
  .header-tools .a11y-group > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dir-btn, .contrast-btn { padding-inline: .6rem; }
}
@media (min-width: 761px) and (max-width: 1300px) {
  /* Smaller laptops: the high contrast button shows its icon only, as on a phone. Its name is still read out. */
  .contrast-btn .contrast-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* "Suggest a service": section headings for someone from the service, and hints under labels. */
.fb-sub .fb-section { font-size: 1.05rem; margin: 1.1rem 0 .4rem; padding-top: .6rem; border-top: 1px solid var(--border); color: var(--dark-blue); }
.fb-hint { margin: -.1rem 0 .35rem; font-size: .9rem; color: var(--grey); }
.fb-field[hidden] { display: none; }
html.high-contrast .fb-hint { color: #000; }
/* A mandatory box left empty: red border, red bar and a message above the box. */
.fb-field.fb-invalid { border-inline-start: 4px solid #b10e1e; padding-inline-start: .6rem; }
.fb-field.fb-invalid input { border: 2px solid #b10e1e; background: #fff6f6; }
.fb-field-error { margin: 0 0 .3rem; color: #b10e1e; font-weight: 700; }
.fb-field-error[hidden] { display: none; }
html.high-contrast .fb-field.fb-invalid, html.high-contrast .fb-field.fb-invalid input { border-color: #000; background: #fff; }
html.high-contrast .fb-field-error { color: #000; text-decoration: underline; }

/* "What's changed" page (changes.html), and the link to it in the landing page notice. */
.notice a { color: var(--blue); font-weight: 600; }
.changes { max-width: 46rem; }
.change-day { margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.change-day h2 { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--dark-blue); }
.change-day ul { margin: 0; padding-inline-start: 1.25rem; }
.change-day li + li { margin-top: .4rem; }
html.high-contrast .change-day { border-color: #000; }

/* The partner logo is a link to the main page. The link carries the .brand-logo size and position; the picture fills it. */
a.brand-logo { border-radius: 4px; }
a.brand-logo img { display: block; width: 100%; height: auto; }

/* Folding cards: the summary stays visible, "Show full details" opens the rest (app.js moreToggle). */
.card .more { border-top: 1px solid var(--border); margin-top: .6rem; padding-top: .2rem; }
.card .more[hidden] { display: none; }
.card .more > h4:first-child { margin-top: .5rem; }
.card .whofor { margin-bottom: .5rem; }
.card .more-btn { background: var(--blue); color: #fff; border: 2px solid var(--blue); }
.card .more-btn:hover { background: var(--dark-blue); border-color: var(--dark-blue); }
.card .more-btn .chev { display: inline-block; width: .55em; height: .55em; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-.15em) rotate(45deg); margin-inline-end: .5em; transition: transform .15s; }
.card .more-btn[aria-expanded="true"] .chev { transform: translateY(.1em) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .card .more-btn .chev { transition: none; } }
.cards-bar { display: flex; justify-content: flex-end; margin: .25rem 0 -.25rem; }
.link-btn { background: none; border: 0; padding: .25rem .1rem; font: inherit; font-weight: 600; color: var(--blue); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--dark-blue); }
@media print { .card .more[hidden] { display: block; } .card .more-btn, .cards-bar { display: none; } }