/* Minimal, neutral FAQ styling; safe to ship site-wide.
   Commented for non-developers. */

.u-faq { margin-block: clamp(16px, 1.8vw, 32px); }
.u-faq__list { display: grid; gap: 12px; }

/* Card container */
.u-faq__item {
  border: 1px solid var(--e-global-color-4892045, #EFF4F9);
  border-radius: 12px;
  background: var(--e-global-color-2ad7e4c, #DDE8F2);
  overflow: hidden;
}

/* Clickable question row */
.u-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 1.125rem;     /* Headline size */
  font-weight: 700;        /* Headline weight */
  line-height: 1.35;
  transition: color .2s ease;
  border-bottom: 0; /* keeps it clean when closed */
}

/* Hover: make question text orange */
.u-faq__question:hover,
.u-faq__question:focus {
  color: var(--e-global-color-5eb8520, #eb6100);
}

/* Active color when open */
.u-faq__question[aria-expanded="true"] {
  color: #5476D6;
}

/* A11y focus outline */
.u-faq__question:focus-visible {
  outline: 2px solid var(--e-global-color-5eb8520, #eb6100);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Chevron indicator */
.u-faq__chev { flex: 0 0 auto; transition: transform .2s ease; }

/* Answer panel (animated open/close) */
.u-faq__answer {
  overflow: hidden;            /* needed for smooth height animation */
  height: 0;                   /* collapsed state */
  opacity: 0;                  /* subtle fade in/out */
  /* keep border width constant => no layout shift */
  border-top: 1px solid transparent;
/* IMPORTANT: no padding here (padding is on inner wrapper) */
  padding: 0;
  transition:
    height .28s ease,
    opacity .18s ease,
    border-color .2s ease;
}

.u-faq__answer { will-change: height; }

/* Divider ONLY when open (answer visible) */
.u-faq__item.is-open .u-faq__answer {
  opacity: 1;
  border-top-color: var(--e-global-color-4892045, #EFF4F9);
}

.u-faq__answer-inner{
  padding: 1rem 1rem 1rem 2rem; /* your indent + spacing */
}

/* Keep hidden panels out of layout for accessibility + no tab stops */
.u-faq__answer[hidden] { display: none; }

/* Screen-reader only helper */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,1px,1px); white-space: nowrap; border: 0;
}


/* Links inside FAQ container: brand-orange + accessible states */
.u-faq :where(a:not(.elementor-button, .button, .btn)) {
  color: var(--e-global-color-5eb8520, #eb6100) !important; /* fallback to Osstem orange */
  transition: color .15s ease, text-decoration-color .15s ease;
}

.u-faq :where(a:not(.elementor-button, .button, .btn)):hover,
.u-faq :where(a:not(.elementor-button, .button, .btn)):focus {
  color: color-mix(in oklab, var(--e-global-color-5eb8520, #eb6100) 85%, black);
  text-decoration-thickness: 2px;
  text-decoration: underline !important;
    text-underline-offset: 2px;
}



.u-faq :where(a:not(.elementor-button, .button, .btn)):active {
  color: color-mix(in oklab, var(--e-global-color-5eb8520, #eb6100) 70%, black);
}

/* Optional: keep visited links same orange (brand-consistent) */
.u-faq :where(a:not(.elementor-button, .button, .btn)):visited {
  color: var(--e-global-color-5eb8520, #eb6100);
}



/* Desktop spacing tweaks */
@media (min-width: 768px) {
  .u-faq__question { padding: 16px 20px; }
  .u-faq__answer-inner { padding: 1rem 1rem 1rem 2rem; }
}
/* Reduced motion: respect OS setting */
@media (prefers-reduced-motion: reduce) {
  .u-faq__answer { transition: none; }
}