/* components/accordion/accordion.css */

/**
 * Accordion Component
 * Full accessibility support
 * Expandable/collapsible content sections
 */

/* ========================================
   ACCORDION CUSTOM PROPERTIES
   ======================================== */

.c-accordion {
  /* Layout properties */ 
  --c-accordion-gap: 0;
  --c-accordion-border-radius: var(--ds-radius-m);
  
  /* Visual properties */
  --c-accordion-background: var(--ds-color-surface);
  --c-accordion-border-color: var(--ds-color-border);
  --c-accordion-border-width: 1px;
  --c-accordion-shadow: none;
  
  /* Header properties */
  --c-accordion-header-padding: var(--ds-space-m);
  --c-accordion-header-background: transparent;
  --c-accordion-header-background-hover: var(--ds-color-surface-raised);
  --c-accordion-header-background-active: var(--ds-color-active);
  
  /* Content properties */
  --c-accordion-content-padding: var(--ds-space-m);
  --c-accordion-content-background: transparent;
  
  /* Typography */
  --c-accordion-header-font-size: var(--ds-font-size-m);
  --c-accordion-header-font-weight: var(--ds-font-weight-medium);
  --c-accordion-content-font-size: var(--ds-font-size-m);
  
  /* Animation */
  --c-accordion-transition-duration: var(--ds-duration-medium);
  --c-accordion-transition-easing: var(--ds-ease-out);
  
  /* Icons */
  --c-accordion-icon-size: 1.25rem;
  --c-accordion-icon-color: var(--ds-color-icon);
}

/* ========================================
   BASE ACCORDION STYLES
   ======================================== */

.c-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--c-accordion-gap);
  background: var(--c-accordion-background);
  border-radius: var(--c-accordion-border-radius);
  box-shadow: var(--c-accordion-shadow);
  position: relative;
}

/* Accordion item */
.c-accordion__item {
  border: var(--c-accordion-border-width) solid var(--c-accordion-border-color);
  border-radius: var(--c-accordion-border-radius);
  overflow: hidden;
  background: var(--c-accordion-background);
}

/* Connected variant - items share borders */
.c-accordion--connected .c-accordion__item {
  border-radius: 0;
}

.c-accordion--connected .c-accordion__item:not(:last-child) {
  border-bottom: 0;
}

.c-accordion--connected .c-accordion__item:first-child {
  border-radius: var(--c-accordion-border-radius) var(--c-accordion-border-radius) 0 0;
}

.c-accordion--connected .c-accordion__item:last-child {
  border-radius: 0 0 var(--c-accordion-border-radius) var(--c-accordion-border-radius);
}

/* Accordion header */
.c-accordion__header {
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
  padding: var(--c-accordion-header-padding);
  background: var(--c-accordion-header-background);
  font-size: var(--c-accordion-header-font-size);
  font-weight: var(--c-accordion-header-font-weight);
  color: var(--ds-color-text);
  transition: background var(--c-accordion-transition-duration) var(--c-accordion-transition-easing);
  position: relative;
}

.c-accordion__header:hover {
  background: var(--c-accordion-header-background-hover);
}

.c-accordion__header:active {
  background: var(--c-accordion-header-background-active);
}

/* Focus styles */
.c-accordion__header:focus {
  outline: none;
}

.c-accordion__header:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: calc(var(--ds-focus-ring-offset) * -1);
  z-index: 1;
}

/* Accordion icon */
.c-accordion__icon {
  width: var(--c-accordion-icon-size);
  height: var(--c-accordion-icon-size);
  flex-shrink: 0;
  color: var(--c-accordion-icon-color);
  transition: transform var(--c-accordion-transition-duration) var(--c-accordion-transition-easing);
}

/* Default chevron icon */
.c-accordion__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Rotate icon when expanded */
.c-accordion__item--expanded .c-accordion__icon {
  transform: rotate(180deg);
}

/* Icon position variants */
.c-accordion--icon-end .c-accordion__header {
  flex-direction: row-reverse;
  justify-content: space-between;
}

/* Plus/minus icon variant */
.c-accordion--icon-plus .c-accordion__icon--chevron {
  display: none;
}

.c-accordion--icon-plus .c-accordion__icon--plus {
  display: block;
}

.c-accordion--icon-plus .c-accordion__item--expanded .c-accordion__icon--plus {
  display: none;
}

.c-accordion--icon-plus .c-accordion__item--expanded .c-accordion__icon--minus {
  display: block;
}

/* Header content */
.c-accordion__header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
  min-width: 0;
}

.c-accordion__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: var(--ds-line-height-m);
}

.c-accordion__subtitle {
  margin: 0;
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-normal);
  color: var(--ds-color-text-weak);
  line-height: var(--ds-line-height-m);
}

/* Accordion content */
.c-accordion__content {
  overflow: hidden;
  transition: height var(--c-accordion-transition-duration) var(--c-accordion-transition-easing);
  height: 0;
}

.c-accordion__item--expanded .c-accordion__content {
  height: auto;
}

.c-accordion__panel {
  padding: var(--c-accordion-content-padding);
  padding-top: 0;
  background: var(--c-accordion-content-background);
  font-size: var(--c-accordion-content-font-size);
  line-height: var(--ds-line-height-l);
  color: var(--ds-color-text);
}

/* ========================================
   ACCORDION VARIANTS
   ======================================== */

/* Bordered variant */
.c-accordion--bordered {
  --c-accordion-border-width: 2px;
}

/* Filled variant */
.c-accordion--filled .c-accordion__item {
  background: var(--ds-color-surface-raised);
}

.c-accordion--filled .c-accordion__header {
  --c-accordion-header-background: var(--ds-color-surface-raised);
  --c-accordion-header-background-hover: var(--ds-color-surface);
}

/* Minimal variant */
.c-accordion--minimal {
  --c-accordion-border-width: 0;
  --c-accordion-border-color: var(--ds-color-border);
}

.c-accordion--minimal .c-accordion__item {
  border-bottom: 1px solid var(--c-accordion-border-color);
  border-radius: 0;
}

.c-accordion--minimal .c-accordion__item:last-child {
  border-bottom: 0;
}

/* Card variant */
.c-accordion--card {
  --c-accordion-gap: var(--ds-space-s);
  --c-accordion-shadow: var(--ds-shadow-card);
}

.c-accordion--card .c-accordion__item {
  box-shadow: var(--c-accordion-shadow);
}

/* ========================================
   NESTED ACCORDIONS
   ======================================== */

.c-accordion__panel .c-accordion {
  margin-top: var(--ds-space-m);
  --c-accordion-header-padding: var(--ds-space-s);
  --c-accordion-content-padding: var(--ds-space-s);
  --c-accordion-header-font-size: var(--ds-font-size-s);
}

.c-accordion__panel .c-accordion .c-accordion__icon {
  --c-accordion-icon-size: 1rem;
}

/* ========================================
   LOADING STATE
   ======================================== */

.c-accordion__item--loading .c-accordion__content {
  position: relative;
  min-height: 4rem;
}

.c-accordion__item--loading .c-accordion__panel::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--ds-color-border);
  border-top-color: var(--ds-color-accent);
  border-radius: 50%;
  animation: accordion-spin 1s linear infinite;
}

@keyframes accordion-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ========================================
   SEARCH WITHIN ACCORDION
   ======================================== */

.c-accordion__search {
  padding: var(--ds-space-m);
  border-bottom: var(--c-accordion-border-width) solid var(--c-accordion-border-color);
}

.c-accordion__search-input {
  width: 100%;
  padding: var(--ds-space-s) var(--ds-space-m);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-s);
  font-size: var(--ds-font-size-m);
  background: var(--ds-color-surface);
  transition: border-color var(--ds-duration-fast) var(--ds-ease-out);
}

.c-accordion__search-input:focus {
  outline: none;
  border-color: var(--ds-color-accent);
  box-shadow: var(--ds-focus-ring);
}

/* Highlight search matches */
.c-accordion__highlight {
  background: var(--ds-color-status-warning-weak);
  padding: 0 0.125em;
  border-radius: var(--ds-radius-xs);
}

/* Hide non-matching items */
.c-accordion__item--hidden {
  display: none;
}

/* ========================================
   STATUS INDICATORS
   ======================================== */

.c-accordion__status {
  margin-left: auto;
  padding: var(--ds-space-xs) var(--ds-space-s);
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
  background: var(--ds-color-surface-raised);
  color: var(--ds-color-text-weak);
}

.c-accordion__status--new {
  background: var(--ds-color-status-highlight);
  color: white;
}

.c-accordion__status--updated {
  background: var(--ds-color-status-info);
  color: white;
}

.c-accordion__counter {
  margin-left: auto;
  padding: var(--ds-space-xs) var(--ds-space-s);
  background: var(--ds-color-surface-raised);
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text-weak);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 640px) {
  .c-accordion {
    --c-accordion-header-padding: var(--ds-space-s);
    --c-accordion-content-padding: var(--ds-space-s);
  }
  
  .c-accordion__header {
    --c-accordion-header-font-size: var(--ds-font-size-s);
  }
  
  .c-accordion__icon {
    --c-accordion-icon-size: 1rem;
  }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
  .c-accordion__item {
    --c-accordion-border-width: 2px;
  }
  
  .c-accordion__header:hover {
    outline: 1px solid currentColor;
  }
  
  .c-accordion__header:focus-visible {
    outline-width: 3px;
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .c-accordion__content {
    transition: none;
  }
  
  .c-accordion__icon {
    transition: none;
  }
  
  @keyframes accordion-spin {
    to { transform: none; }
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .c-accordion__item {
    border: 1px solid black;
    page-break-inside: avoid;
  }
  
  .c-accordion__item--expanded .c-accordion__content {
    height: auto !important;
  }
  
  .c-accordion__search {
    display: none;
  }
}