/* Blood indicator detail page: JSON accordion tweaks (SEO-friendly markup is in Twig) */

#information-blood-indicator .proto3-hero,
#information-symptom .proto3-hero,
#information-disease .proto3-hero {
  padding-bottom: 50px !important;
}

/* Light mode: make subtitle readable (avoid white-on-light issues) */
[data-bs-theme="light"] #information-blood-indicator .proto3-hero,
[data-bs-theme="light"] #information-symptom .proto3-hero,
[data-bs-theme="light"] #information-disease .proto3-hero {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}
[data-bs-theme="light"] #information-blood-indicator .proto3-hero .subtitle,
[data-bs-theme="light"] #information-symptom .proto3-hero .subtitle,
[data-bs-theme="light"] #information-disease .proto3-hero .subtitle {
  opacity: 1;
  color: var(--bs-secondary-color);
}

/* Light mode: keep accordion headings readable (scoped only to this page) */
[data-bs-theme="light"] #information-blood-indicator .proto3-accordion-btn .d-flex.align-items-center,
[data-bs-theme="light"] #information-symptom .proto3-accordion-btn .d-flex.align-items-center,
[data-bs-theme="light"] #information-disease .proto3-accordion-btn .d-flex.align-items-center {
  color: #000;
}
[data-bs-theme="light"] #information-blood-indicator .proto3-list-group-title,
[data-bs-theme="light"] #information-symptom .proto3-list-group-title,
[data-bs-theme="light"] #information-disease .proto3-list-group-title {
  color: #000;
}

/* Dark mode: keep accordion headers readable, but scope locally */
[data-bs-theme="dark"] #information-blood-indicator .proto3-accordion-btn .d-flex.align-items-center,
[data-bs-theme="dark"] #information-symptom .proto3-accordion-btn .d-flex.align-items-center,
[data-bs-theme="dark"] #information-disease .proto3-accordion-btn .d-flex.align-items-center {
  color: #fff;
}

/* More breathing room at the bottom of accordion bodies */
#information-blood-indicator .proto3-accordion-body,
#information-symptom .proto3-accordion-body,
#information-disease .proto3-accordion-body {
  padding-bottom: 30px !important;
}

/* Reduce card padding (theme default is 1.5rem) */
#information-blood-indicator .proto3-card,
#information-symptom .proto3-card,
#information-disease .proto3-card {
  padding: 1rem;
}

#information-blood-indicator .proto3-json-accordion,
#information-symptom .proto3-json-accordion,
#information-disease .proto3-json-accordion {
  margin-top: 1.25rem;
}

/* Make accordion content readable and spaced */
#information-blood-indicator .proto3-json-accordion .proto3-accordion-body,
#information-symptom .proto3-json-accordion .proto3-accordion-body,
#information-disease .proto3-json-accordion .proto3-accordion-body {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

#information-blood-indicator .proto3-json-accordion .proto3-list-group + .proto3-list-group,
#information-symptom .proto3-json-accordion .proto3-list-group + .proto3-list-group,
#information-disease .proto3-json-accordion .proto3-list-group + .proto3-list-group {
  margin-top: 1rem;
}

#information-blood-indicator .proto3-json-accordion .proto3-list-group-title,
#information-symptom .proto3-json-accordion .proto3-list-group-title,
#information-disease .proto3-json-accordion .proto3-list-group-title {
  font-weight: 700;
  margin-bottom: 0.4rem;
}

#information-blood-indicator .proto3-json-accordion .proto3-simple-list,
#information-symptom .proto3-json-accordion .proto3-simple-list,
#information-disease .proto3-json-accordion .proto3-simple-list {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.30 !important;
  margin-left: 10px !important;
}

#information-blood-indicator .proto3-json-accordion .proto3-simple-list li + li,
#information-symptom .proto3-json-accordion .proto3-simple-list li + li,
#information-disease .proto3-json-accordion .proto3-simple-list li + li {
  margin-top: 0.05rem;
}

/* Reference ranges (JSON) should be readable even with long text */
#information-blood-indicator .proto3-reference-ranges .proto3-norm-card,
#information-symptom .proto3-reference-ranges .proto3-norm-card,
#information-disease .proto3-reference-ranges .proto3-norm-card {
  text-align: left;
}
#information-blood-indicator .proto3-reference-ranges .proto3-reference-heading,
#information-symptom .proto3-reference-ranges .proto3-reference-heading,
#information-disease .proto3-reference-ranges .proto3-reference-heading {
  font-weight: 700;
  margin-bottom: 0.75rem;
}
#information-blood-indicator .proto3-reference-ranges .proto3-norm-card .norm-value,
#information-symptom .proto3-reference-ranges .proto3-norm-card .norm-value,
#information-disease .proto3-reference-ranges .proto3-norm-card .norm-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bs-body-color);
  line-height: 1.35;
  word-break: break-word;
}

/* Clickable disease badges should look like badges (not links) */
#information-blood-indicator a.proto3-disease-badge,
#information-symptom a.proto3-disease-badge,
#information-disease a.proto3-disease-badge {
  text-decoration: none;
  color: inherit;
}
#information-blood-indicator a.proto3-disease-badge:hover,
#information-symptom a.proto3-disease-badge:hover,
#information-disease a.proto3-disease-badge:hover {
  border-color: rgba(var(--fn-primary-rgb), 0.35);
}

