/* ────── Accordion Panels ────── */

.accordion {width: 100%; margin: 0 auto; padding: 0;}
h3.accordion-toggle-wrap {line-height: 1;}
.accordion-item {margin-bottom: .5em; /* space between each item*/}

/* Toggle button */
.accordion-toggle {display: block; width: 100%; text-align: left; font-size: 1.125em; font-weight: bold; line-height: 1.4; background: rgba(32,134,188,.75);
padding: 0.5em 1em 0.5em 2.125em; border: none; border-radius: 4px; cursor: pointer; position: relative; color: #fff;}
.accordion-toggle:hover {background: rgba(131,208,245,1);}
.accordion-toggle:focus {background: rgba(37,153,214,1);}

/* insert arrow */
.accordion-toggle::before {
content: "\25B6\FE0E"; /* for iOS */ position: absolute;left: 1em; /* sits nicely inside that 2.125em padding */
top: 50%; transform: translateY(-50%); font-family: system-ui, sans-serif; font-variant-emoji: text; transition: transform 0.2s ease;}
/* rotate arrow when expanded */
.accordion-toggle[aria-expanded="true"]::before {transform: translateY(-50%) rotate(90deg);}
/* Panels: collapsed vs. open */
/* collapsed state (no border) */
.accordion-item article {max-height: 0; overflow: hidden;
padding: 0 1em; /* only horizontal padding when closed */
transition: max-height 0.3s ease, padding 0.3s ease; border: none; background: none;}
/* open state (with padding, border, background) */
.accordion-item.open article {max-height: 2500px; /* must exceed your longest item */
padding: 1.25em 1.5em .5em; margin: 0 4px 1em 4px; background: rgba(255,255,255,.3); border-bottom: 1px solid #999; overflow: visible;}

/* Enhanced Accordion Styles - Mobile-Optimized */
/* Prevent layout shift by using transform instead of max-height for smoother animations */
@media (max-width: 767px) {
/* Alternative animation for mobile */
.accordion-item article {max-height: 0; overflow: hidden; padding: 0 1em; transition: max-height 0.3s ease, padding 0.3s ease; border: none; background: none;}

/* Open state with reasonable max-height for mobile */
.accordion-item.open article {max-height: none; /* Remove height restriction */ padding: 1.25em 1.5em .5em; margin: 0 4px 1em 4px; background: rgba(255,255,255,.3);
border-bottom: 1px solid #999; overflow: visible; animation: slideDown 0.3s ease-out;}

/* Smooth slide animation */
@keyframes slideDown {
from {opacity: 0;transform: translateY(-10px);}
to {opacity: 1;transform: translateY(0);}
}

/* Ensure buttons don't cause layout jumps */
.accordion-toggle {position: relative; /* Prevent text selection on double-tap */
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
/* Improve touch target size for mobile */ min-height: 48px;
/* Prevent zoom on focus (iOS) */ touch-action: manipulation;
}
/* Prevent focus outline from causing layout shift */
.accordion-toggle:focus {outline-offset: -2px;}

/* Ensure smooth transitions don't cause reflow */ 
.accordion-item {transform: translateZ(0); /* Enable hardware acceleration */backface-visibility: hidden; /* Prevent flickering */
}
}

/* Desktop styles remain mostly unchanged but with improvements */
@media (min-width: 768px) {.accordion-item.open article {max-height: 3000px; /* Slightly increased from 2500px for safety */}}

/* Additional mobile improvements */
@media (max-width: 767px) and (hover: none) {/* Touch device specific styles */ .accordion-toggle:active { transform: scale(0.98);}
}

/* Prevent scroll anchoring issues */
.accordion {overflow-anchor: none;}

/* Ensure proper scroll behavior */
@supports (scroll-behavior: smooth) {
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
}

/* For users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {.accordion-item article, .accordion-item.open article {transition: none; animation: none;}}

/* print — always fully expanded */
@media print {.accordion-item article, .accordion-item .accordion-toggle-wrap[hidden] {display: block !important; max-height: none !important; overflow: visible !important; padding: 1.25em 1.5em .5em !important; margin: 0 0 1em 2.125em !important; border: 1px solid #999 !important; border-top: none !important; background: rgba(255,255,255,.4) !important;}
}