/* =========================
   FAQ accordion — refined
   ========================= */

/* Variables */
:root {
  --faq-gap: clamp(12px, 1.7vw, 48px);
  --faq-accent: #298C3B;
  --faq-accent-contrast: #ffffff;
  --faq-bg: #ffffff;
  --faq-text: #1f2937;
  --faq-radius: 90px;
  --faq-item-border: rgba(0,0,0,0.06);
  --faq-font-heading: 'Unbounded', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --faq-font-body: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --faq-transition-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --faq-transition-slow: 320ms cubic-bezier(.2,.8,.2,1);
}

.faq-accordion {
  margin: clamp(12px, 1.7vw, 48px) clamp(12px, 1.7vw, 48px);
  padding: clamp(12px, 1.7vw, 48px);
  font-family: var(--faq-font-body);
  color: var(--faq-text);
  border-radius: 69px;
  border: 1px solid #298C3B;
}

.faq__title {
   	padding: 0 clamp(20px, 3vw, 80px) clamp(10px, 1vw, 40px);
	color: #298C3B;
	text-transform: uppercase;
	font-family: 'Unbounded', sans-serif;
	font-size: clamp(22px, 3.3vw, 96px);
	font-weight: 500;
	line-height: 1; 
}

.faq-item {
  margin: clamp(12px, 1.7vw, 48px)  clamp(20px, 3vw, 80px);
  position: relative;
  list-style: none;
}

.faq-q {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--faq-gap);
  padding: clamp(14px, 2vw, 56px) clamp(20px, 3vw, 80px);
  background: var(--faq-accent);
  color: var(--faq-accent-contrast);
  border: 0;
  border-radius: var(--faq-radius);
  cursor: pointer;
  font-weight: 300;
  text-transform: uppercase;
  text-align: left;
  font-family: var(--faq-font-heading);
  box-shadow: 0 6px 18px rgba(12, 38, 18, 0.08);
  transition: all 0.35s ease;
  will-change: transform;
}

.faq-q:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(12, 38, 18, 0.10);
}
.faq-q:active {
  transform: translateY(0);
}

.faq-q:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(41,140,59,0.16), 0 6px 18px rgba(12,38,18,0.08);
}

.faq-q__text {
  flex: 1;
  font-size: clamp(15px, 2.2vw, 60px);
  line-height: 1.2;
  color: var(--faq-accent-contrast);
}

.faq-q::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(34px, 5vw, 136px);
  font-weight: 300;
  line-height: 1;
  color: var(--faq-accent-contrast);
  transition: all 0.35s ease;
  transform-origin: center;
}

.faq-q:hover::after {
    color: #b4ddbc;
}

.faq-q[aria-expanded="true"]::after {
  content: "−";
  transform: scale(1.02);
  background: rgba(255, 255, 255, 0.062);
}

.faq-a {
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.65s ease, padding 0.65s ease;
  background: transparent;
}

.faq-a.is-open {
  max-height: fit-content;
  padding: clamp(12px, 1.7vw, 48px) clamp(14px, 2vw, 56px) clamp(20px, 3vw, 80px);
}

.faq-a > * {
  margin: 0;
  color: transparent;
  font-family: var(--faq-font-body);
  line-height: 1.55;
  font-size: clamp(14px, 2vw, 56px);
  transition: color 0.95s ease;
}

.faq-a.is-open > * {
  color: #298C3B;
}

.faq-item + .faq-item {
  margin-top: clamp(12px, 1.7vw, 48px);
}

.faq-a .faq-card {
  background: var(--faq-bg);
  border-radius: 8px;
  padding: clamp(12px, 1.7vw, 48px);
  box-shadow: 0 6px 18px rgba(12, 38, 18, 0.04);
}

@media (max-width: 768px) {
  :root {
    --faq-gap: 2px;
  }

  .faq-accordion {
    border-radius: 20px;
  }

  .faq__title {
    /* font-size: 15px; */
    /* font-size: 30px; */
    font-size: clamp(15px, calc(3.34821vw + 4.28571px), 30px);
    padding-right: 5px;
    padding-left: 5px;
  }

  .faq-q {
    /* padding: 10px; */
    /* padding: 20px; */
    padding: clamp(10px, calc(2.23214vw + 2.85714px), 20px);
  }

  .faq-item {
    /* margin: 5px; */
    /* margin: 10px; */
    margin: clamp(5px, calc(1.11607vw + 1.42857px), 10px);
  }

  .faq-item p {
    margin: 0;
  }

  .faq-q__text {
    /* font-size: 8px; */
    /* font-size: 16px; */
    font-size: clamp(8px, calc(1.78571vw + 2.28571px), 16px);
    font-weight: 400;
  }

  .faq-q::after {
    /* font-size: 1em; */
    /* font-size: 2em; */
    font-size: clamp(1em,
                 calc(1em + (2 - 1) * ((100vw - 320px) / 448)),
                 2em);
  }

  .faq-a > * {
    /* font-size: 8px; */
    font-size: clamp(8px, calc(1.78571vw + 2.28571px), 16px);
  }
}