/* Home Angels — dementia warning-signs self-check
   Scoped to .hdc. Tap targets are deliberately large: the people filling this in are often
   older, frequently on a phone, and often upset. */

.hdc,
.hdc *,
.hdc *::before,
.hdc *::after { box-sizing: border-box; }

.hdc {
  --hdc-accent: #0C7264;
  --hdc-accent-dark: #08544A;
  --hdc-accent-tint: #E8F2F0;
  --hdc-ink: #1F2A2E;
  --hdc-body: #42525A;
  --hdc-muted: #6B7A80;
  --hdc-line: #DFE5E3;
  --hdc-sand: #F6F2EC;
  --hdc-warn: #8A5A00;
  --hdc-warn-bg: #FDF5E4;

  max-width: 780px;
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.7;
  color: var(--hdc-body);
}

/* ---------- disclaimers ---------- */

.hdc__disclaimer {
  border-left: 4px solid var(--hdc-accent);
  background: var(--hdc-accent-tint);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--hdc-ink);
}

.hdc__disclaimer--top { margin: 0 0 34px; }
.hdc__disclaimer--bottom { margin: 30px 0 0; }

/* ---------- progress ---------- */

/* Deliberately not sticky. A pinned bar sits under Divi's fixed header, and its white
   background hides whichever question happens to scroll beneath it. The count is useful at
   the start and updates as you go; it does not need to follow you down the page. */
.hdc__progress {
  padding: 0 0 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--hdc-line);
}

.hdc__progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--hdc-line);
  overflow: hidden;
}

.hdc__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--hdc-accent);
  transition: width .25s ease;
}

.hdc__progress-text {
  margin: 8px 0 0;
  font-size: .85rem;
  letter-spacing: .03em;
  text-transform: none;
  font-weight: 600;
  color: var(--hdc-muted);
}

.hdc__progress-text strong { color: var(--hdc-accent); }

/* ---------- questions ---------- */

/* Divi styles every ol inside the layout with `list-style-type: decimal`
   (`.entry-content ol, .et-l--body ol, .et-l--header ol, ...`), which outweighs a bare
   `.hdc__questions` and printed a plain "1." next to the numbered badge each question
   already carries. The extra `.hdc` raises specificity above Divi's rule. */
.hdc ol.hdc__questions { list-style: none; }

.hdc__questions {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: hdc;
}

.hdc__question {
  padding: 28px 0;
  border-bottom: 1px solid var(--hdc-line);
}

.hdc__question:last-child { border-bottom: 0; }

.hdc__question fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.hdc__question legend {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 0;
  margin: 0 0 18px;
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--hdc-ink);
}

.hdc__q-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--hdc-accent-tint);
  color: var(--hdc-accent-dark);
  font-size: .85rem;
  font-weight: 700;
}

.hdc__question.is-missing .hdc__q-num {
  background: var(--hdc-warn-bg);
  color: var(--hdc-warn);
  box-shadow: 0 0 0 2px var(--hdc-warn);
}

.hdc__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-left: 44px;
}

.hdc__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 54px;            /* comfortably above the 48px target minimum */
  padding: 12px 14px;
  border: 1.5px solid var(--hdc-line);
  border-radius: 12px;
  background: #fff;
  font-size: .98rem;
  font-weight: 600;
  color: var(--hdc-body);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

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

/* Visually hidden but still focusable — the label carries the visible state. */
.hdc__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.hdc__option:has(input:checked) {
  background: var(--hdc-accent);
  border-color: var(--hdc-accent);
  color: #fff;
}

.hdc__option:has(input:focus-visible) {
  outline: 3px solid var(--hdc-accent-dark);
  outline-offset: 2px;
}

/* ---------- actions ---------- */

.hdc__actions {
  margin-top: 34px;
  text-align: center;
}

.hdc__submit {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--hdc-accent);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  padding: 20px 40px;
  min-height: 56px;
  cursor: pointer;
  transition: background-color .15s ease;
}

.hdc__submit:hover { background: var(--hdc-accent-dark); }

.hdc__submit:focus-visible {
  outline: 3px solid var(--hdc-accent-dark);
  outline-offset: 3px;
}

.hdc__hint {
  margin: 14px 0 0;
  min-height: 1.5em;
  font-size: .95rem;
  font-weight: 600;
  color: var(--hdc-warn);
}

/* ---------- result ---------- */

.hdc__result {
  margin-top: 40px;
  padding: 34px;
  border: 1px solid var(--hdc-line);
  border-radius: 18px;
  background: var(--hdc-sand);
  scroll-margin-top: 24px;
}

.hdc__result:focus { outline: none; }

.hdc__band-eyebrow {
  margin: 0 0 6px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--hdc-accent);
}

.hdc__band-title {
  margin: 0 0 18px;
  font-size: clamp(1.35rem, 3.6vw, 1.7rem);
  line-height: 1.3;
  font-weight: 700;
  color: var(--hdc-ink);
}

.hdc__band p { margin: 0 0 16px; }
.hdc__band p:last-child { margin-bottom: 0; }

.hdc__cta:not(:empty) {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--hdc-line);
}

.hdc__restart { margin: 26px 0 0; text-align: center; }

.hdc__again {
  appearance: none;
  border: 0;
  background: none;
  padding: 12px 8px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--hdc-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hdc__again:focus-visible {
  outline: 3px solid var(--hdc-accent-dark);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- responsive ---------- */

@media (max-width: 620px) {
  .hdc { font-size: 17px; }

  .hdc__question legend { gap: 10px; font-size: 1rem; }

  /* Stack the answers on narrow screens rather than squeezing three across — "Not at all"
     wraps to three lines in a third of a 390px viewport. */
  .hdc__options {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .hdc__option { justify-content: flex-start; text-align: left; }

  .hdc__result { padding: 24px 20px; }
  .hdc__submit { width: 100%; }
}

/* Fallback for browsers without :has() — the checked state falls back to an outline via the
   input itself rather than leaving no visible selection at all. */
@supports not (selector(:has(*))) {
  .hdc__option input {
    position: static;
    opacity: 1;
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  .hdc__option { justify-content: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .hdc *,
  .hdc *::before,
  .hdc *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}