/* Global Accordion Styles - Native HTML Details/Summary */
/* Works everywhere without JavaScript - Progressive Enhancement */
/* This is the single accordion styling system for the theme: it styles any
   native <details>/<summary> (rich text, the accordion macro, AND the Accordion
   module, which renders native <details> and maps its fields to the
   --accordion-* custom properties + the .accordion--* variant classes below). */

/* Shared expand/collapse icons (SVG via mask so they inherit colour and can be
   recoloured per instance). Used by both rich-text accordions and the module. */
:root {
  --acc-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --acc-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3C/svg%3E");
  --acc-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  --acc-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}

/* ============================================
   Base Accordion Styles
   ============================================ */

/* Reset browser defaults - Mobile optimized */
details {
  /* Defaults fall back to adaptive theme tokens so native <details> (and the
     module) follow light/dark automatically — no dark-mode override needed. */
  border: 1px solid var(--accordion-border, var(--color-border, #e0e0e0));
  border-radius: var(--accordion-radius, 0.5rem);
  margin-block: var(--accordion-spacing, 0.5rem);
  overflow: hidden;
  background: var(--accordion-bg, var(--color-bg, #fff));
  color: var(--accordion-text, var(--color-text, inherit));
  /* Reduce animation on mobile for performance */
  transition: box-shadow 0.2s ease;
}

@media (min-width: 768px) {
  details {
    transition: all 0.3s ease;
  }
}

summary {
  cursor: pointer;
  /* Mobile-first padding */
  padding: var(--accordion-padding, 0.875rem 1rem);
  font-weight: var(--accordion-font-weight, 500);
  font-size: var(--accordion-font-size, inherit);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  background: var(--accordion-header-bg, transparent);
  transition: background-color 0.2s ease;
  position: relative;
  /* Better mobile touch target */
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 102, 204, 0.1);
}

@media (min-width: 768px) {
  summary {
    padding: var(--accordion-padding, 1rem 1.25rem);
    transition: all 0.2s ease;
    min-height: auto;
  }
}

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

/* `display` doesn't apply to ::marker; list-style:none on summary above
   already suppresses it. Use content:none rather than an invalid display. */
summary::marker {
  content: none;
}

/* Custom expand/collapse indicator — shared SVG icon (chevron by default).
   Rendered via mask so it takes --accordion-icon-color (defaults to currentColor)
   and adapts to dark mode automatically. */
summary::after {
  content: '';
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  margin-left: 1rem;
  background-color: var(--accordion-icon-color, currentColor);
  -webkit-mask: var(--acc-icon, var(--acc-icon-chevron)) center / contain no-repeat;
          mask: var(--acc-icon, var(--acc-icon-chevron)) center / contain no-repeat;
  transition: transform 0.2s ease;
  will-change: transform; /* Optimize for animation */
}

/* Default (chevron): flip on open */
details[open] summary::after {
  transform: rotate(180deg);
}

/* Plus variant: shows a plus, swaps to a minus on open (no rotation). The
   variant class may sit on the <details> (rich text) or on an ancestor (module). */
.accordion--plus summary::after {
  --acc-icon: var(--acc-icon-plus);
}
details.accordion--plus[open] summary::after,
.accordion--plus details[open] summary::after {
  --acc-icon: var(--acc-icon-minus);
  transform: none;
}

/* Arrow variant: points right, rotates down on open */
.accordion--arrow summary::after {
  --acc-icon: var(--acc-icon-arrow);
}
details.accordion--arrow[open] summary::after,
.accordion--arrow details[open] summary::after {
  transform: rotate(90deg);
}

/* No icon */
.accordion--none summary::after {
  display: none;
}

/* Icon on the left of the label instead of the right */
.accordion--icon-left summary {
  justify-content: flex-start;
  gap: 1rem;
}
.accordion--icon-left summary::after {
  order: -1;
  margin-left: 0;
}

/* Hover state */
summary:hover {
  background: var(--accordion-hover-bg, var(--color-bg-hover, rgba(127, 131, 139, 0.08)));
}

/* Focus state for accessibility */
summary:focus-visible {
  outline: 2px solid var(--color-primary, #0066cc);
  outline-offset: -2px;
}

/* Content styling - Mobile optimized */
details > *:not(summary) {
  padding: var(--accordion-content-padding, 0.875rem 1rem);
  font-size: var(--accordion-content-font-size, inherit);
  /* Simpler animation on mobile */
  animation: accordion-fade-in 0.2s ease;
}

@media (min-width: 768px) {
  details > *:not(summary) {
    padding: var(--accordion-content-padding, 1rem 1.25rem);
    animation: accordion-slide-down 0.3s ease;
  }
}

/* Simplified mobile animation */
@keyframes accordion-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animation for smooth open - GPU accelerated (desktop) */
@keyframes accordion-slide-down {
  from {
    opacity: 0;
    transform: translate3d(0, -0.5rem, 0); /* Force GPU acceleration */
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Disable transform animations on low-end mobile devices */
@media (max-width: 768px) and (max-resolution: 2dppx) {
  details > *:not(summary) {
    animation: accordion-fade-in 0.15s ease;
  }
}

/* ============================================
   Performance Options
   ============================================ */

/* Reduced motion for accessibility and performance */
@media (prefers-reduced-motion: reduce) {
  summary::after {
    transition: none !important;
  }
  
  details > *:not(summary) {
    animation: none !important;
  }
}

/* No animation variant - maximum performance */
details.accordion--no-animation summary::after {
  transition: none;
}

details.accordion--no-animation > *:not(summary) {
  animation: none;
}

/* ============================================
   Accordion Variants
   ============================================ */

/* Minimal variant - no borders */
details.accordion--minimal {
  border: none;
  background: transparent;
}

details.accordion--minimal summary {
  border-bottom: 1px solid var(--accordion-border, #e0e0e0);
}

details.accordion--minimal[open] summary {
  border-bottom-color: var(--color-primary, #0066cc);
}

/* Card variant - elevated style */
details.accordion--card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: none;
}

details.accordion--card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Flush variant - no spacing between */
details.accordion--flush {
  margin-block: 0;
  border-radius: 0;
  border-bottom: none;
}

details.accordion--flush:first-child {
  border-radius: var(--accordion-radius, 0.5rem) var(--accordion-radius, 0.5rem) 0 0;
}

details.accordion--flush:last-child {
  border-radius: 0 0 var(--accordion-radius, 0.5rem) var(--accordion-radius, 0.5rem);
  border-bottom: 1px solid var(--accordion-border, #e0e0e0);
}

/* Icon variants (chevron / plus / arrow / none) are defined with the base icon
   rules above. .accordion--chevron is the default look, so it needs no extra
   rule here. */

/* ============================================
   Accordion Groups
   ============================================ */

/* Container for grouped accordions */
.accordion-group {
  --accordion-spacing: 0;
}

.accordion-group details {
  border-radius: 0;
  margin-block: 0;
  border-bottom: none;
}

.accordion-group details:first-child {
  border-radius: var(--accordion-radius, 0.5rem) var(--accordion-radius, 0.5rem) 0 0;
}

.accordion-group details:last-child {
  border-radius: 0 0 var(--accordion-radius, 0.5rem) var(--accordion-radius, 0.5rem);
  border-bottom: 1px solid var(--accordion-border, #e0e0e0);
}

/* ============================================
   Nested Accordions
   ============================================ */

details details {
  margin-inline: 0;
  border-left: 3px solid var(--color-primary, #0066cc);
}

details details summary {
  padding-left: 1rem;
  font-size: 0.95em;
}

/* ============================================
   Color Schemes
   ============================================ */

/* Primary */
details.accordion--primary {
  --accordion-header-bg: var(--color-primary, #0066cc);
  --accordion-border: var(--color-primary, #0066cc);
  color: white;
}

details.accordion--primary summary {
  color: white;
}

details.accordion--primary > *:not(summary) {
  color: var(--color-text, #333);
}

/* Success */
details.accordion--success {
  --accordion-border: #28a745;
  --accordion-header-bg: #d4edda;
  --accordion-hover-bg: #c3e6cb;
}

/* Warning */
details.accordion--warning {
  --accordion-border: #ffc107;
  --accordion-header-bg: #fff3cd;
  --accordion-hover-bg: #ffe9a0;
}

/* Danger */
details.accordion--danger {
  --accordion-border: #dc3545;
  --accordion-header-bg: #f8d7da;
  --accordion-hover-bg: #f5c6cb;
}

/* ============================================
   Rich Text Editor Support
   ============================================ */

/* Auto-style details elements in rich text areas */
.hs-richtext details,
.content-wrapper details,
.blog-post__body details,
[data-rich-text] details {
  /* Inherits all base accordion styles automatically */
}

/* ============================================
   Progressive Enhancement
   ============================================ */

/* Optional: Exclusive accordion behavior (only one open at a time) */
.accordion-group[data-exclusive] {
  /* This requires minimal JS, added in accordion.js */
}

/* ============================================
   Responsive Design
   ============================================ */

/* Mobile-specific enhancements */
@media (max-width: 768px) {
  /* Ensure accordions don't overflow on mobile */
  details {
    max-width: 100vw;
  }

  /* Better spacing between accordions on mobile */
  details + details {
    margin-top: 0.5rem;
  }

  /* Reduce font size in accordions on very small screens */
  @media (max-width: 380px) {
    summary {
      font-size: 0.9375rem;
    }

    details > *:not(summary) {
      font-size: 0.875rem;
    }
  }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  details {
    border: 1px solid #999;
  }
  
  /* Force all accordions open for printing */
  details:not([open]) summary::after {
    transform: rotate(180deg);
  }
  
  details:not([open]) > *:not(summary) {
    display: block !important;
    visibility: visible !important;
  }
}

/* Dark mode for accordions lives in css/dark.css (gated by the theme setting). */