/**
 * Toolkit - Accordion (shared)
 * Core accordion mechanics + FAQ card styles.
 * Loaded on single product pages AND product taxonomy archives (category/tag),
 * since the accordion can appear in both contexts.
 * CSS variables are defined in global.css.
 */

/* ===========================================
   ACCORDION (core mechanics)
   =========================================== */

.accordion {
  width: 100%;
}

.accordion-item {
  border-bottom: 1px solid var(--tk-color-border-light);
}

.accordion-item:first-child {
  border-top: 1px solid var(--tk-color-border-light);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  width: 100%;
  margin: 0;
  padding: 12px 0;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.9;
  background: none;
  border: none;
  font-family: inherit;
  color: inherit;
  text-align: left;
}

.accordion-header:hover {
  background: var(--tk-color-bg);
}

.accordion-content {
  background: var(--tk-color-bg);
}

/* Only hide panels when JS is active (progressive enhancement) */
.js-accordion .accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

.accordion-inner {
  padding: 0 35px;
}

.js-accordion .accordion-inner {
  overflow: hidden;
}

.accordion-inner > *:first-child {
  margin-top: 15px;
}

.accordion-inner > *:last-child {
  margin-bottom: 15px;
}

.accordion-inner p {
  margin: 15px 0;
}

@media (max-width: 768px) {
  .accordion-inner {
    padding: 0 10px;
  }
}

.js-accordion .accordion-item.is-open .accordion-content {
  grid-template-rows: 1fr;
}

.js-accordion .accordion-item.is-open .accordion-header::after {
  transform: rotate(90deg);
}

/* Hide chevron when JS is not active (no toggle possible) */
.accordion:not(.js-accordion) .accordion-header::after {
  display: none;
}

.accordion-header:focus-visible {
  outline: 2px solid var(--tk-color-accent);
  outline-offset: 2px;
}

/* Decorative chevron — CSS-only so the title text stays clean (no DOM node) */
.accordion-header::after {
  content: "\276F";
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  color: var(--tk-color-text);
  transition: transform 0.3s ease;
}

/* ===========================================
   FAQ ACCORDION — card style (reuses .accordion structure)
   =========================================== */
.accordion--faq {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Each item is a standalone card — override base border lines */
.accordion--faq .accordion-item,
.accordion--faq .accordion-item:first-child {
  border: 1px solid var(--tk-color-border);
  border-radius: 12px;
  background: var(--tk-color-bg);
  overflow: hidden;
}

/* Structural <h3> wrapping the question button (product_faq only) —
   visually transparent so it renders identically to shipping_faq (no h3 wrapper).
   The reset must beat theme h3 styles (color, padding, letter-spacing) that
   cascade through the inner button via inheritance. */
.accordion--faq .accordion-heading {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}

/* Explicit font properties on the button itself — guarantees identical
   rendering between product_faq (button inside h3) and shipping_faq
   (button directly under .accordion--faq). */
.accordion--faq .accordion-header {
  padding: 20px 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tk-color-primary);
  letter-spacing: normal;
  text-transform: none;
}

.accordion--faq .accordion-header:hover {
  background: var(--tk-color-bg-light);
}

.accordion--faq .accordion-inner {
  padding: 0 24px;
  font-size: 15px;
}

@media (max-width: 768px) {
  .accordion--faq .accordion-header {
    padding: 16px 18px;
  }
  .accordion--faq .accordion-inner {
    padding: 0 18px;
  }
}