/**
 * Marked Extended Accordion - Full Theme Styles
 * Visual styles with customizable CSS variables and light/dark support.
 *
 * Import this file after the structural styles:
 * @import '@fsegurai/marked-extended-accordion/styles/accordion.css';
 * @import '@fsegurai/marked-extended-accordion/styles/accordion-theme.css';
 */

:root {
  --marked-extended-accordion-border-color: var(--app-border-light, #ddd);
  --marked-extended-accordion-background-color: var(--md-sys-color-surface-container, #ffffff);
  --marked-extended-accordion-header-background-color: var(--md-sys-color-surface-container-high, #f5f5f5);
  --marked-extended-accordion-header-hover-background-color: var(--md-sys-color-surface-container-highest, #e8e8e8);
  --marked-extended-accordion-text-color: var(--app-text-primary, #333);
  --marked-extended-accordion-content-color: var(--app-text-primary, #24292e);
  --marked-extended-accordion-radius: 4px;
  --marked-extended-accordion-margin: 1rem 0;
  --marked-extended-accordion-header-padding: 0.75rem 1rem;
  --marked-extended-accordion-content-padding: 1rem;
}

body.light {
  --marked-extended-accordion-border-color: var(--app-border-light, #ddd);
  --marked-extended-accordion-background-color: var(--md-sys-color-surface-container, #ffffff);
  --marked-extended-accordion-header-background-color: var(--md-sys-color-surface-container-high, #f5f5f5);
  --marked-extended-accordion-header-hover-background-color: var(--md-sys-color-surface-container-highest, #e8e8e8);
  --marked-extended-accordion-text-color: var(--app-text-primary, #333);
  --marked-extended-accordion-content-color: var(--app-text-primary, #24292e);
}

body.dark {
  --marked-extended-accordion-border-color: #444c56;
  --marked-extended-accordion-background-color: #22272e;
  --marked-extended-accordion-header-background-color: #2d333b;
  --marked-extended-accordion-header-hover-background-color: #343b45;
  --marked-extended-accordion-text-color: #d1d5da;
  --marked-extended-accordion-content-color: #d1d5da;
}

.marked-extended-accordion {
  border: 1px solid var(--marked-extended-accordion-border-color);
  border-radius: var(--marked-extended-accordion-radius);
  margin: var(--marked-extended-accordion-margin);
  background-color: var(--marked-extended-accordion-background-color);
}

.marked-extended-accordion-header {
  padding: var(--marked-extended-accordion-header-padding);
  cursor: pointer;
  position: relative;
  background-color: var(--marked-extended-accordion-header-background-color);
  color: var(--marked-extended-accordion-text-color);
  transition: background-color 0.2s ease;
}

.marked-extended-accordion-header:hover {
  background-color: var(--marked-extended-accordion-header-hover-background-color);
}

.marked-extended-accordion-title {
  margin: 0;
  display: inline;
  font-weight: 600;
  color: var(--marked-extended-accordion-text-color);
}

.marked-extended-accordion-content {
  padding: var(--marked-extended-accordion-content-padding);
  color: var(--marked-extended-accordion-content-color);
}

.marked-extended-accordion-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}