/* ================================================================
   ROOT METHOD — Condition Pages Shared Stylesheet
   File: assets/css/conditions.css

   Shared page-specific styles for all condition pages.
   Do NOT add styles that belong in component files.
   All values from tokens.css. All motion in animations.css.
================================================================ */


/* ----------------------------------------------------------------
   REVEAL FALLBACK
   Ensures content is visible when JavaScript is unavailable.
   The .reveal classes start at opacity: 0; without JS adding
   .is-visible, content would remain invisible.
---------------------------------------------------------------- */

@media (scripting: none) {
  .reveal,
  [class*="animate-"] {
    opacity: 1;
    transform: none;
  }
}


/* ----------------------------------------------------------------
   HERO — text colours over dark image overlay
   sections.css positions the overlay and handles spacing.
   conditions.css owns the colour overrides for this dark context.
---------------------------------------------------------------- */

.hero__heading {
  color: var(--color-text-inverse);
}

.hero__heading em {
  color: var(--color-text-accent);
}

.hero__subheading {
  color: var(--color-neutral-300);
}


/* ----------------------------------------------------------------
   SECTION BACKGROUND MODIFIER
   Applies the subtle background to any section that carries
   this class — avoids needing aria-labelledby selectors in
   a shared stylesheet (each condition page has unique IDs).
---------------------------------------------------------------- */

.section--bg-subtle {
  background-color: var(--color-bg-subtle);
}


/* ----------------------------------------------------------------
   BREADCRUMB NAVIGATION
   Appears inside the hero inner, above the eyebrow.
   Text colours are tuned for the dark overlay context.
---------------------------------------------------------------- */

.condition-breadcrumb {
  margin-block-end: var(--space-5);
}

.condition-breadcrumb__list {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.condition-breadcrumb__link {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-neutral-300);
  text-decoration: none;
}

.condition-breadcrumb__link:hover {
  color: var(--color-text-inverse);
}

.condition-breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.condition-breadcrumb__separator {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-neutral-500);
  line-height: var(--line-height-normal);
  user-select: none;
}

.condition-breadcrumb__current {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-accent);
  line-height: var(--line-height-normal);
}


/* ----------------------------------------------------------------
   SPLIT CONTENT — vertical rhythm
   reset.css removes all margins. The split component owns layout.
   conditions.css restores paragraph and child element spacing.
---------------------------------------------------------------- */

.split__content > .eyebrow {
  margin-block-end: var(--space-4);
}

.split__content > h2 {
  margin-block-end: var(--space-6);
}

.split__content > p + p {
  margin-block-start: var(--space-4);
}

.split__content > p:last-of-type {
  margin-block-end: 0;
}

.split__content > * + .btn,
.split__content > * + .btn-group {
  margin-block-start: var(--space-8);
}

.split__content > * + .detail-list {
  margin-block-start: var(--space-6);
}


/* ----------------------------------------------------------------
   DETAIL LIST
   Used inside split__content to present clinical points as a
   scannable bulleted list with gold arrow indicators.
---------------------------------------------------------------- */

.detail-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.detail-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.detail-list__item::before {
  content: '\2192';
  color: var(--color-text-accent);
  flex-shrink: 0;
  line-height: var(--line-height-relaxed);
}


/* ----------------------------------------------------------------
   SEEK LIST
   Used inside card components for the "When to Seek Assessment"
   two-column layout. Bullet colour adapts to the parent card.
---------------------------------------------------------------- */

.seek-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.seek-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.seek-item::before {
  content: '\2022';
  color: var(--color-accent);
  flex-shrink: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.card--inverse .seek-item {
  color: var(--color-neutral-300);
}

.card--inverse .seek-item::before {
  color: var(--color-text-accent);
}


/* ----------------------------------------------------------------
   FAQ ACCORDION — .condition-faq context
   Scoped to a class applied to the condition FAQ section.
   Same pattern as index.css and root-method.css; the context
   class avoids conflicts when multiple page CSS files are loaded.
---------------------------------------------------------------- */

.condition-faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.condition-faq details + details {
  margin-block-start: var(--space-3);
}

.condition-faq details[open] {
  border-color: var(--color-border-strong);
}

.condition-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.condition-faq summary::-webkit-details-marker {
  display: none;
}

.condition-faq summary::marker {
  display: none;
}

.condition-faq summary h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  flex: 1;
}

.condition-faq summary::after {
  content: '+';
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: var(--space-6);
  text-align: center;
}

.condition-faq details[open] summary::after {
  content: '\2212';
}

.condition-faq details p {
  margin-block-start: var(--space-5);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.condition-faq details p + p {
  margin-block-start: var(--space-4);
}

.condition-faq details:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-gold-light);
}


/* ----------------------------------------------------------------
   PROCESS — hide supplementary image on small screens.
   The compact timeline is the primary content; image is decorative.
---------------------------------------------------------------- */

@media (max-width: 768px) {
  .condition-process .split__media {
    display: none;
  }
}


/* ----------------------------------------------------------------
   HERO — small-screen button stacking
   Prevents overflow and improves tap target size.
---------------------------------------------------------------- */

@media (max-width: 480px) {
  .hero .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero .btn-group .btn {
    width: 100%;
    justify-content: center;
  }
}