/* =========================================================
   File: css/components/accordion.css
   Title: Invent City Accordion — Unified 1px→3px Top Rule
   Version: 2025-11-21
   Author: Invent City

   PURPOSE
   • Minimal accordion with top-only rule.
   • Default (light + dark): #808080 text + 1px top rule.
   • Hover: font-weight 600, 3px top rule, still #808080.
   • Active:
       - .area-light → black text + 3px black top rule.
       - .area-dark  → white text + 3px white top rule.
   • No bottom borders or background fills.

   DEPENDENCIES
   • variables.css (font + spacing tokens)
   • typography.css
   • Bootstrap JS (collapse behavior only)
========================================================= */


/* ---------------------------------------------------------
   1) RESET BOOTSTRAP DEFAULTS
--------------------------------------------------------- */
.accordion {
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-focus-border-color: transparent;
}

.accordion,
.accordion > * {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ---------------------------------------------------------
   2) HEADER BUTTON — BASE STYLE (NEUTRAL)
   ---------------------------------------------------------
   • All accordions start from the same neutral spec:
     - Text: #808080
     - Border-top: 1px #808080
   • Hover lifts border-top-width to 3px, weight 600.
--------------------------------------------------------- */
.accordion .accordion-button {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;

  background: transparent !important;
  box-shadow: none !important;

  font-family: var(--font-ui);
  font-size: var(--h2-fs);
  line-height: var(--h2-lh);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;

  color: #808080;
  border: none;
  border-top: 1px solid #808080;
  border-radius: 0;
  padding: var(--acc-header-pad-y, 1.5rem) 0;

  transition:
    color 0.25s ease,
    border-top-width 0.25s ease,
    border-top-color 0.25s ease,
    font-weight 0.25s ease;
}

/* Hover — thicker rule, still #808080 */
.accordion .accordion-button:hover {
  border-top-width: 3px;
  font-weight: 600;
}

/* Remove Bootstrap default caret */
.accordion .accordion-button::after {
  display: none !important;
}


/* ---------------------------------------------------------
   3) ICONS — RIGHT-ALIGNED CIRCULAR + / –
--------------------------------------------------------- */
.accordion-button::before {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;

  width: 1.5em;
  height: 1.5em;
  font-family: inherit;
  font-size: 0.9em;

  color: currentColor;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;

  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

/* Open state → minus symbol (en dash) */
.accordion-button:not(.collapsed)::before {
  content: "\2013";
  font-weight: 600;
}


/* ---------------------------------------------------------
   4) BODY — BASE SPACING
--------------------------------------------------------- */
.accordion .accordion-body {
  background: transparent;
  overflow-x: hidden;
  line-height: var(--body-lh);
  padding:
    var(--acc-body-pt, 0)
    var(--acc-body-pr, 0)
    var(--acc-body-pb, 6rem)
    var(--acc-body-pl, 0);
  color: inherit;
}


/* ---------------------------------------------------------
   5) COLOR LOGIC — .area-light vs .area-dark
   ---------------------------------------------------------
   DEFAULT:
   • Both light + dark inherit base: #808080 / 1px.

   HOVER:
   • Both light + dark:
     - 3px border-top
     - font-weight: 600
     - color remains #808080 until activated.

   ACTIVE (.accordion-button:not(.collapsed)):
   • .area-light → black (#000)
   • .area-dark  → white (#fff)
--------------------------------------------------------- */

/* ---------- LIGHT SECTIONS (AREA-LIGHT) ---------- */
.area-light .accordion .accordion-button {
  /* Already #808080 / 1px via base */
}

/* Active in light: black text + 3px black rule */
.area-light .accordion .accordion-button:not(.collapsed) {
  color: #000000;
  border-top-width: 3px;
  border-top-color: #000000;
  font-weight: 600;
}

/* Light body text */
.area-light .accordion .accordion-body {
  color: #000000;
}

/* ---------- DARK SECTIONS (AREA-DARK) ---------- */
.area-dark .accordion .accordion-button {
  /* default #808080 text + 1px rule from base */
}

/* Hover in dark: thicker rule, stay #808080 */
.area-dark .accordion .accordion-button:hover {
  color: #808080;
  border-top-width: 3px;
  border-top-color: #808080;
}

/* Active in dark: white text + 3px white rule */
.area-dark .accordion .accordion-button:not(.collapsed) {
  color: #ffffff;
  border-top-width: 3px;
  border-top-color: #ffffff;
  font-weight: 600;
}

/* Dark body text (white) */
.area-dark .accordion .accordion-body {
  color: #ffffff;
}

/* Icons follow currentColor automatically */
.area-light .accordion .accordion-button::before,
.area-dark  .accordion .accordion-button::before {
  color: currentColor;
  border-color: currentColor;
}


/* ---------------------------------------------------------
   6) COMPACT VARIANT — .acc-compact
--------------------------------------------------------- */
.accordion.acc-compact .accordion-button {
  padding: 1rem 0;
}

.accordion.acc-compact .accordion-body {
  padding-bottom: 3rem;
}


/* ---------------------------------------------------------
   7) CARD ROW SCROLL FIX INSIDE ACCORDION
--------------------------------------------------------- */
.pane-full .cards-scroll {
  width: 100%;
  margin: 0;
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.cards-scroll .card {
  flex: 0 0 40%;
  min-width: 280px;
  max-width: 480px;
  scroll-snap-align: start;
  box-sizing: border-box;
}


/* ---------------------------------------------------------
   8) TABLE SPACING TWEAKS INSIDE ACCORDION
--------------------------------------------------------- */
.accordion .accordion-body table {
  margin-bottom: 0 !important;
}

.accordion .accordion-body .table-box,
.accordion .accordion-body .table-responsive,
.accordion .accordion-body .pane-dark {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.accordion .accordion-body .table-footnote {
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* =========================================================
   END OF FILE — css/components/accordion.css
========================================================= */