/* ==========================================================================
   Accordion/Toggles — Elementor (Classic + Nested)
   Scope with the CSS class "sek-acc" (Accordion) or "sek-toggle" (Toggle)
   Add that class under Elementor → Widget → Advanced → CSS Classes
   ========================================================================== */

/* ---------- Palette & tokens (site-wide via body class `theme-sek`) ---------- */
.theme-sek {
  /* Brand/base */
  --brand-text: #0F172A;         /* slate-900 */
  --brand-muted: #64748B;        /* slate-500 */
  --brand-bg: #FFFFFF;

  /* UI */
  --ui-border: #E5E7EB;          /* slate-200 */
  --ui-hover: #F8FAFC;           /* slate-50 */
  --ui-active: transparent; /*#F1F5F9;           slate-100 */

  /* Accordion tokens */
  --sek-title-color: #FFFFFF;    /* desired heading color */
  --sek-bg: transparent;         /* header background (closed) */
  --sek-bg-active: var(--ui-active);
  --sek-bg-hover: var(--ui-hover);
  --sek-content-bg: transparent;
  --sek-border: var(--ui-border);
  --sek-radius: 12px;
  --sek-gap: 12px;
  --sek-pad-y: 14px;
  --sek-pad-x: 16px;
  --sek-transition: 180ms ease;
}

/* Optional dark section helper: add `theme-sek-dark` to the Section */
.theme-sek-dark {
  --brand-text: #E5E7EB;
  --brand-muted: #94A3B8;
  --brand-bg: #0F172A;

  --ui-border: #334155;
  --ui-hover: #0B1220;
  --ui-active: #0F172A;

  --sek-title-color: #FFFFFF;
  --sek-bg: transparent;
  --sek-bg-active: #0F172A;
  --sek-bg-hover: #0B1220;
  --sek-content-bg: transparent;
}

/* ==========================================================================
   CLASSIC ACCORDION (Elementor widget “Accordion”)
   ========================================================================== */
.sek-acc .elementor-accordion,
.sek-toggle .elementor-toggle {
  display: grid;
  gap: var(--sek-gap);
}

.sek-acc .elementor-accordion .elementor-accordion-item,
.sek-toggle .elementor-toggle .elementor-toggle-item {
  border: 1px solid var(--sek-border);
  border-radius: var(--sek-radius);
  background: var(--sek-bg);
  overflow: hidden;
}

/* Header (title row) */
.sek-acc .elementor-accordion .elementor-tab-title,
.sek-toggle .elementor-toggle .elementor-tab-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--sek-pad-y) var(--sek-pad-x);
  line-height: 1.3;
  font-weight: 600;
  color: var(--sek-title-color) !important;
  background: var(--sek-bg);
  transition: background var(--sek-transition), color var(--sek-transition), opacity var(--sek-transition);
  opacity: 1 !important; /* neutralize Elementor’s lowered opacity on inactive items */
}

.sek-acc .elementor-accordion .elementor-tab-title:hover,
.sek-toggle .elementor-toggle .elementor-tab-title:hover {
  background: var(--sek-bg-hover);
}

.sek-acc .elementor-accordion .elementor-tab-title.elementor-active,
.sek-toggle .elementor-toggle .elementor-tab-title.elementor-active {
  background: var(--sek-bg-active);
}

/* Title text & links inside the header */
.sek-acc .elementor-accordion .elementor-tab-title .elementor-accordion-title,
.sek-acc .elementor-accordion .elementor-tab-title a,
.sek-toggle .elementor-toggle .elementor-tab-title .elementor-toggle-title,
.sek-toggle .elementor-toggle .elementor-tab-title a {
  color: var(--sek-title-color) !important;
  text-decoration: none;
}

/* Header icons (plus/chevron) */
.sek-acc .elementor-accordion .elementor-accordion-icon,
.sek-acc .elementor-accordion .elementor-accordion-icon i,
.sek-toggle .elementor-toggle .elementor-toggle-icon,
.sek-toggle .elementor-toggle .elementor-toggle-icon i {
  color: var(--sek-title-color) !important;
  fill: var(--sek-title-color) !important;
  transition: transform var(--sek-transition);
}

/* Rotate icon when open (works for + or chevron) */
.sek-acc .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon,
.sek-toggle .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon {
  transform: rotate(45deg);
}

/* Content panel */
.sek-acc .elementor-accordion .elementor-tab-content,
.sek-toggle .elementor-toggle .elementor-tab-content {
  padding: 16px var(--sek-pad-x) 18px;
  background: var(--sek-content-bg);
  color: var(--brand-text);
  border-top: 1px solid var(--sek-border);
}

/* ==========================================================================
   NESTED ACCORDION (Elementor “Nested Accordion”)
   ========================================================================== */
.sek-acc .e-n-accordion {
  display: grid;
  gap: var(--sek-gap);
}

.sek-acc .e-n-accordion .e-n-accordion-item {
  border: 1px solid var(--sek-border);
  border-radius: var(--sek-radius);
  background: var(--sek-bg);
  overflow: hidden;
}

/* Title row */
.sek-acc .e-n-accordion .e-n-accordion-item-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--sek-pad-y) var(--sek-pad-x);
  font-weight: 600;
  line-height: 1.3;
  color: var(--sek-title-color) !important;
  background: var(--sek-bg);
  transition: background var(--sek-transition), color var(--sek-transition), opacity var(--sek-transition);
  opacity: 1 !important;
}

.sek-acc .e-n-accordion .e-n-accordion-item-title:hover {
  background: var(--sek-bg-hover);
}

.sek-acc .e-n-accordion .e-n-accordion-item--active .e-n-accordion-item-title {
  background: var(--sek-bg-active);
}

/* Text + links within the title row */
.sek-acc .e-n-accordion .e-n-accordion-item-title .e-n-accordion-item-title-text,
.sek-acc .e-n-accordion .e-n-accordion-item-title a {
  color: var(--sek-title-color) !important;
  text-decoration: none;
}

/* Icons in the title row (Elementor varies class names) */
.sek-acc .e-n-accordion .e-n-accordion-item-title-icon,
.sek-acc .e-n-accordion .e-n-accordion-item-toggle-icon,
.sek-acc .e-n-accordion .e-n-accordion-item-title-icon svg,
.sek-acc .e-n-accordion .e-n-accordion-item-toggle-icon svg {
  color: var(--sek-title-color) !important;
  fill: var(--sek-title-color) !important;
  transition: transform var(--sek-transition);
}

/* Rotate icon when open */
.sek-acc .e-n-accordion .e-n-accordion-item--active .e-n-accordion-item-title-icon,
.sek-acc .e-n-accordion .e-n-accordion-item--active .e-n-accordion-item-toggle-icon {
  transform: rotate(45deg);
}

/* Content area */
.sek-acc .e-n-accordion .e-n-accordion-item-content {
  padding: 16px var(--sek-pad-x) 18px;
  background: var(--sek-content-bg);
  color: var(--brand-text);
  border-top: 1px solid var(--sek-border);
}

/* ==========================================================================
   ACCESSIBILITY & POLISH
   ========================================================================== */
.sek-acc .elementor-accordion .elementor-tab-title:focus-visible,
.sek-toggle .elementor-toggle .elementor-tab-title:focus-visible,
.sek-acc .e-n-accordion .e-n-accordion-item-title:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .sek-acc .elementor-accordion .elementor-accordion-icon,
  .sek-toggle .elementor-toggle .elementor-toggle-icon,
  .sek-acc .e-n-accordion .e-n-accordion-item-title-icon,
  .sek-acc .e-n-accordion .e-n-accordion-item-toggle-icon {
    transition: none;
  }
}