/* Henry Spink Foundation – static site styles.
   Layout uses the Bootstrap 5 grid; this file carries the legacy look (colours, menu, boxes). */
:root {
  --hsf-blue: #004b8a;
  --hsf-blue-hover: #2a679a;
  --hsf-text: #5c5c5c;
  --hsf-panel: #f0faff;
  --hsf-menu-top: #f2fafd;
  --hsf-menu-bottom: #e6eff6;
  --hsf-teal: #1bc0c6;
  --hsf-teal-dark: #0f7f84;
  --hsf-patron: #307faf;
  --hsf-checklist: #4b7fc0;
  --hsf-stories: #5a96bd;
  --hsf-light-link: #e3f4fa;
  --hsf-radius: 0.5rem;
  --bs-body-font-family: Arial, Verdana, Tahoma, sans-serif;
  --bs-body-color: var(--hsf-text);
  --bs-link-color-rgb: 0, 75, 138;
  --bs-link-hover-color-rgb: 42, 103, 154;
  color-scheme: light;
}

body {
  font-family: var(--bs-body-font-family);
  font-size: 0.8125rem;
  color: var(--hsf-text);
  background: #fff;
}

.site-container { max-inline-size: 64rem; }

.skip-link {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: var(--hsf-blue);
  color: #fff;
}

h1, h2, h3, h4 { color: var(--hsf-blue); font-weight: 700; }
h1 { font-size: 1.125rem; margin-block: 0.75rem 0.75rem; }
h2 { font-size: 1rem; margin-block: 1rem 0.5rem; }
h3 { font-size: 0.875rem; margin-block: 0.875rem 0.375rem; }
p, li { line-height: 1.6; }
.intro { color: var(--hsf-blue); font-weight: 700; }
:focus-visible { outline: 3px solid #f0a500; outline-offset: 2px; }

/* Header */
.site-header { padding-block-end: 0.75rem; align-items: start; }
.site-header__picture img { border-radius: var(--hsf-radius); inline-size: 100%; }
.quick-links { position: relative; max-inline-size: 214px; }
.quick-links__image { display: block; inline-size: 100%; block-size: auto; border-radius: var(--hsf-radius); }
.quick-links__link {
  position: absolute;
  inset-inline: 0;
  color: transparent;
  overflow: hidden;
  white-space: nowrap;
  border-radius: var(--hsf-radius);
}
.quick-links__link:focus-visible { outline-offset: -3px; }
.quick-links__link--donate { inset-block-start: 0; block-size: 49%; }
.quick-links__link--info { inset-block-start: 52%; block-size: 36%; }
.quick-links__link--search { inset-block-start: 89.5%; block-size: 10.5%; }

/* Navigation */
.site-nav {
  background: linear-gradient(var(--hsf-menu-top), var(--hsf-menu-bottom));
  border-radius: var(--hsf-radius);
  padding-block: 0.75rem;
}
.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  display: block;
  padding: 0.375rem 0.625rem 0.375rem 0.75rem;
  color: var(--hsf-blue);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav__link:hover, .site-nav__link:focus-visible { color: var(--hsf-blue-hover); background: url(/i/arrow_nav.gif) no-repeat left 0.6rem; }
.site-nav__link[aria-current="page"] { background: url(/i/arrow_nav.gif) no-repeat left 0.6rem; }
.site-nav-toggle {
  border: 2px solid var(--hsf-blue);
  color: var(--hsf-blue);
  font-weight: 700;
  text-transform: uppercase;
}

/* Patron fader */
.patron-fader { position: relative; margin-block-start: 1.25rem; aspect-ratio: 243 / 270; max-inline-size: 243px; }
.patron-fader__link { display: block; block-size: 100%; }
.patron-fader__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  border-radius: var(--hsf-radius);
}
.patron-fader__image.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .patron-fader__image { transition: none; } }

.site-credits { margin-block: 0.75rem; }
.site-credits__logos { position: relative; max-inline-size: 237px; }
.site-credits__link { position: absolute; inset-block: 0; color: transparent; overflow: hidden; white-space: nowrap; }
.site-credits__link--designer { inset-inline-start: 19%; inline-size: 34%; }
.site-credits__link--builder { inset-inline-start: 68%; inline-size: 32%; }
.site-credits__sitemap { color: #767676; font-size: 0.75rem; text-decoration: none; }
.site-credits__sitemap:hover { text-decoration: underline; }

/* Main content panel */
.content-box {
  background: var(--hsf-panel);
  border-radius: var(--hsf-radius);
  padding: 1rem 1.25rem;
  min-block-size: 20rem;
}
@media (min-width: 992px) { .content-box { padding: 1rem 1.875rem 1.5rem; } }
.content-box a { color: var(--hsf-blue); font-weight: 700; text-decoration: underline; }
.content-box a:hover { text-decoration: none; }
.content-box strong { color: var(--hsf-blue); }
.content-box__breadcrumb { font-size: 0.75rem; margin-block-end: 0.25rem; }
.content-box__breadcrumb a { font-weight: 400; }
.content-body { overflow-wrap: anywhere; }
.content-body p { text-align: start; }
.content-body img { max-inline-size: 100%; block-size: auto; }
.content-body .table { --bs-table-bg: transparent; font-size: 0.8125rem; color: var(--hsf-text); }
.content-heading { font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; }
.home-campaign { float: inline-end; margin-inline-start: 1rem; margin-block-end: 0.5rem; }
.pdf { padding-inline-end: 1.75rem; background: url(/i/ico_pdf.png) no-repeat right center; }

/* Promo boxes under the content */
.promo { margin-block-start: 0.5rem; }
.promo__banner img { border-radius: var(--hsf-radius); inline-size: 100%; block-size: auto; }
.promo__checklist, .promo__stories { position: relative; border-radius: var(--hsf-radius); color: #fff; min-block-size: 150px; block-size: 100%; }
.promo__checklist { background: var(--hsf-checklist) url(/i/checklist.png) no-repeat left top; padding: 2.25rem 4.5rem 0.75rem 0.625rem; }
.promo__checklist p, .promo__stories p { color: #fff; margin: 0; }
.promo__checklist a { color: var(--hsf-light-link); text-transform: uppercase; font-weight: 400; text-decoration: none; padding-inline-end: 0.9rem; background: url(/i/blue_arrow.jpg) no-repeat right center; }
.promo__checklist a:hover { color: #fff; text-decoration: underline; }
.promo__tick { position: absolute; inset-inline-end: 0.75rem; inset-block-end: 0.5rem; }
.promo__stories { background: var(--hsf-stories) url(/i/yourstories.jpg) no-repeat left top; padding: 2.1rem 0.75rem 0.75rem; }
.promo__stories h3 { color: #fff; font-size: 0.75rem; margin: 0; }
.promo__stories p { font-size: 0.75rem; }
.promo__rule { block-size: 3px; margin-block: 0.375rem; background: url(/i/hr-lines.gif) repeat-x bottom; }

.site-footer { margin-block: 1.25rem 4rem; font-size: 0.75rem; color: #767676; text-align: center; }
.site-footer a { color: #5c5c5c; }

/* Fact sheets */
.factsheet__type { margin-block: -0.5rem 1rem; color: var(--hsf-text); }
.factsheet__badge { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.03em; }
.factsheet__badge--treatment { background: var(--hsf-patron); }
.factsheet__badge--disorder { background: var(--hsf-teal-dark); }
.factsheet__back { margin-block-start: 1.5rem; }

.factsheet-search { margin-block-end: 1rem; }
.factsheet-search .form-label { font-weight: 700; color: var(--hsf-blue); margin-block-end: 0.25rem; }
.factsheet-search__status { font-size: 0.75rem; margin-block: 0.5rem 0; }
.az-index__list { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; padding: 0; margin: 0.75rem 0 0; }
.az-index__list a, .az-index__list span {
  display: inline-block;
  min-inline-size: 1.75rem;
  padding: 0.25rem 0.375rem;
  text-align: center;
  border-radius: 0.25rem;
  background: #fff;
  border: 1px solid #cfe3f0;
}
.az-index__list a { text-decoration: none; }
.az-index__list span { color: #9a9a9a; }
.factsheet-list__letter { border-block-end: 1px solid #cfe3f0; padding-block-end: 0.25rem; }
.factsheet-list__item { padding-block: 0.2rem; }
.factsheet-list__type { font-size: 0.6875rem; color: #6c6c6c; text-transform: uppercase; margin-inline-start: 0.25rem; }
.factsheet-list__snippet { display: block; font-size: 0.75rem; color: var(--hsf-text); }
.factsheet-list__snippet mark { padding: 0; background: #fff3b0; }

/* Patrons */
.patron { background: var(--hsf-patron); border-radius: var(--hsf-radius); overflow: hidden; block-size: 100%; color: #fff; }
.patron__photo { inline-size: 100%; block-size: 11rem; object-fit: cover; object-position: top; }
.patron__body { padding: 0.75rem; }
.patron__name { color: #fff; font-style: italic; font-size: 0.875rem; margin: 0 0 0.375rem; }
.patron__quote { color: #fff; font-size: 0.75rem; }
.patron__more summary { cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; }
.patron__full p { color: #fff; font-size: 0.75rem; }
.patron__full strong { color: #fff; }

/* Contact form */
.contact-form { margin-block-start: 1.5rem; padding: 1rem; background: #fff; border: 1px solid #cfe3f0; border-radius: var(--hsf-radius); }
.contact-form .form-label { font-weight: 700; color: var(--hsf-blue); }
.contact-form__required { color: #c00000; }
.contact-form__trap { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.contact-form__submit { background: var(--hsf-blue); border-color: var(--hsf-blue); }
.contact-form__submit:hover, .contact-form__submit:focus-visible { background: var(--hsf-blue-hover); border-color: var(--hsf-blue-hover); }
.contact-form__privacy { font-size: 0.75rem; }
.contact-form .invalid-feedback { font-size: 0.8125rem; color: #b00020; }

/* Cookie notice */
.cookie-notice {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1rem;
  background: #0f8f94;
  border-block-start: 3px solid #fff;
  box-shadow: 0 -1px 7px #676767;
}
.cookie-notice[hidden] { display: none; }
.cookie-notice__text { margin: 0; color: #fff; font-size: 0.75rem; }
.cookie-notice__text a { color: #fff; }
.cookie-notice__close { border: 2px solid #fff; background: transparent; padding: 0.25rem; line-height: 0; }

/* Small screens */
@media (max-width: 767.98px) {
  .site-header__logo img { max-inline-size: 9rem; }
  .site-header__actions { display: none; }
  .site-nav { display: none; }
  .site-nav.is-open { display: block; }
  .site-sidebar .site-credits { display: none; }
  .home-campaign { float: none; display: block; margin: 0 0 0.75rem; }
}
@media (max-width: 991.98px) {
  .site-sidebar { order: 0 !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .site-header__actions { display: none; }
  .site-nav__list { display: flex; flex-wrap: wrap; }
}
@media print {
  .site-header__actions, .site-sidebar, .promo, .cookie-notice, .site-nav-toggle { display: none !important; }
  .content-box { background: none; }
}
.factsheet-search__go { background: var(--hsf-blue); border-color: var(--hsf-blue); inline-size: 100%; }
.promo__banner--social { display: block; text-align: end; }
.promo__banner--social img { inline-size: auto; max-inline-size: 100%; }
.promo__stories { padding-inline-end: 1.5rem; background-size: auto 100%; }