/* ===========================================================
   Accordion — <details> / <summary> Component Styles
   JCC Components Design System
   WCAG 2.1 Level AA compliant — verified 2026-02-19

   Contrast ratios (WCAG 1.4.3 text ≥4.5:1 / 1.4.11 non-text ≥3:1):
     Border  #757575 vs white   = 4.61:1  ✅ non-text
     Border  #757575 vs #f0f4f8 = 4.17:1  ✅ non-text
     Text    #1b2b85 vs #f0f4f8 = 10.98:1 ✅ text
     Text    #1b2b85 vs #dce8f5 = 9.77:1  ✅ text
     Text    #1b2b85 vs #e4edf7 = 10.26:1 ✅ text
     Text    #1b1b1b vs #ffffff  = 17.22:1 ✅ text
     Chevron #005ea2 vs #f0f4f8 = 6.08:1  ✅ non-text
     Focus   #005ea2 vs #ffffff  = 6.72:1  ✅ non-text
   =========================================================== */

/* ── Accordion item container ───────────────────────────────── */
details {
  border: 1px solid #757575; /* 4.61:1 vs white — WCAG 1.4.11 ✅ */
  margin: 0 0 0.25rem;
  overflow: hidden;
  background: #ffffff;
}

/* Adjacent details: collapse shared border for a connected group look */
details + details {
  border-top: none;
  margin-top: 0;
}

/* Round top corners of first (or solo) item */
details:first-of-type,
details:not(details + details) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Round bottom corners of last item and add spacing below the group */
details:last-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-bottom: 1.5rem;
}

/* ── Summary (clickable header row) ────────────────────────── */
/*
 * Semantics: <details> maps to role="group"; <summary> maps to role="button"
 * with aria-expanded. Browsers handle this natively — no extra ARIA needed.
 * VoiceOver (iOS/macOS) reads the open/closed state from the 'open' attribute.
 */
details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  background-color: #f0f4f8;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1b2b85; /* 10.98:1 vs #f0f4f8 — WCAG 1.4.3 ✅ */
  border: none;
  width: 100%;
  text-align: left;
  transition: background-color 0.15s ease;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Remove native marker in all browsers */
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }

/* ── Chevron indicator ──────────────────────────────────────────
 *
 * Uses SVG mask-image so content: '' — screen readers never announce it.
 * The open/closed state is already communicated natively via aria-expanded
 * on <summary>. The chevron is purely decorative (WCAG 1.1.1 N/A for deco).
 *
 * Animation: rotates 180° when [open] — smooth cubic-bezier micro-animation.
 * Color set via background-color (easily themeable).
 * Non-text contrast: #005ea2 vs #f0f4f8 = 6.08:1 — WCAG 1.4.11 ✅
 * ─────────────────────────────────────────────────────────────── */
details > summary::after {
  content: '';
  flex-shrink: 0;
  align-self: center;
  display: block;
  width: 1.25rem;   /* ~20px — clearly visible at all screen sizes */
  height: 1.25rem;
  background-color: #005ea2;

  /* Chevron-down icon (feather-style, stroke rendered as alpha mask) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;

  /* Rotate animation — cubic-bezier matches Material/USWDS easing */
  transform: rotate(0deg);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Chevron points up (▲) when accordion is open — 180° rotation */
details[open] > summary::after {
  transform: rotate(180deg);
}

/* ── Hover ──────────────────────────────────────────────────── */
details > summary:hover {
  background-color: #dce8f5; /* text #1b2b85 = 9.77:1 — WCAG 1.4.3 ✅ */
  color: #1b2b85;
}

/* Chevron darkens slightly on hover for extra affordance */
details > summary:hover::after {
  background-color: #1b2b85;
}

/* ── Keyboard focus — WCAG 2.4.7 Focus Visible ─────────────── */
/*
 * 3px outline + 2px offset = visible on all backgrounds.
 * #005ea2 vs white = 6.72:1; vs #f0f4f8 = 6.08:1 — WCAG 1.4.11 ✅
 */
details > summary:focus {
  outline: 3px solid #005ea2;
  outline-offset: 2px;
  background-color: #dce8f5;
}

details > summary:focus:not(:focus-visible) {
  outline: none;
  background-color: #f0f4f8;
}

details > summary:focus-visible {
  outline: 3px solid #005ea2;
  outline-offset: 2px;
  background-color: #dce8f5;
}

/* ── Open state: summary ────────────────────────────────────── */
details[open] > summary {
  background-color: #e4edf7; /* text #1b2b85 = 10.26:1 — WCAG 1.4.3 ✅ */
  border-bottom: 1px solid #757575;
}

/* ── List content ───────────────────────────────────────────── */
details > ul,
details > ol {
  margin: 0;
  padding: 1rem 1.5rem 1.25rem 2.75rem;
  list-style: disc;
  background: #ffffff;
}

details > ul li,
details > ol li {
  margin-bottom: 0.375rem;
  line-height: 1.65;
  color: #1b1b1b; /* 17.22:1 vs #ffffff — WCAG 1.4.3 ✅ */
}

details > ul li:last-child,
details > ol li:last-child {
  margin-bottom: 0;
}

/* ── Paragraphs / block content ─────────────────────────────── */
details > p,
details > div:not([class]) {
  padding: 1rem 1.5rem 1.25rem;
  background: #ffffff;
  margin: 0;
  color: #1b1b1b;
}

/* ── <strong> inside <summary> ──────────────────────────────── */
details > summary strong {
  font-weight: inherit;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  details > summary {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  details > ul,
  details > ol {
    padding-left: 2.25rem;
  }

  details > summary::after {
    width: 1.1rem;
    height: 1.1rem;
  }
}

/* ── High-contrast mode ─────────────────────────────────────── */
@media (prefers-contrast: high) {
  details {
    border: 2px solid ButtonText;
  }

  details > summary {
    background-color: ButtonFace;
    color: ButtonText;
    border-bottom: 2px solid ButtonText;
  }

  /* Recolor chevron to system button text color */
  details > summary::after,
  details > summary:hover::after {
    background-color: ButtonText;
  }

  details > summary:focus,
  details > summary:focus-visible {
    outline: 4px solid Highlight;
    outline-offset: 2px;
  }

  details > ul,
  details > ol,
  details > p,
  details > div:not([class]) {
    background: Canvas;
    color: CanvasText;
  }
}

/* ── Reduced motion — WCAG 2.3.3 ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  details > summary,
  details > summary::after {
    transition: none;
  }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  details {
    border: 1px solid #000;
    page-break-inside: avoid;
    margin-bottom: 0.5rem;
  }

  details > summary {
    background: #eeeeee;
    color: #000000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide interactive chevron in print */
  details > summary::after {
    display: none;
  }

  /* Force all accordion content visible when printing */
  details:not([open]) > ul,
  details:not([open]) > ol,
  details:not([open]) > p,
  details:not([open]) > div {
    display: block !important;
  }
}