@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700;800&display=swap');

/* ============================================================
   FAQ — THEME 6 (Neo Brutal) — ULTRA CREATIVE CARD REDESIGN
   File: ebfq6.css | HTML prefix: ebfq5
   Neo Brutalism: Raw high-contrast B&W card, 3px solid border, active turns bright yellow #ffe600 with 8px hard shadow pop
   ============================================================ */

.ebfq5-section {
  /* =========================================================
     GLOBAL / CORE (shared tokens)
     ========================================================= */
  --ebfq5-font-family: 'Space Grotesk', sans-serif;

  --ebfq5-animation-ease: cubic-bezier(0, 0, 0.2, 1);

  --ebfq5-spacing-gap-xs: 0.35rem;
  --ebfq5-spacing-gap-sm: 0.65rem;
  --ebfq5-spacing-gap-md: 1rem;
  --ebfq5-spacing-gap-lg: 1.5rem;

  --ebfq5-radius-pill: 0px;
  --ebfq5-radius-circle: 0px;
  --ebfq5-radius-card: 0px;

  --ebfq5-transition-duration: 0.18s;

  /* =========================================================
     COLORS — SECTION & BACKGROUND
     ========================================================= */
  --ebfq5-section-bg: #ffffff;
  --ebfq5-section-padding-y: 6.5rem;
  --ebfq5-section-padding-y-tablet: 5rem;
  --ebfq5-section-padding-y-mobile: 3.5rem;
  --ebfq5-section-padding-x: 1.5rem;

  --ebfq5-bg-orb1-color: radial-gradient(circle, rgba(0, 0, 0, 0.05) 0%, transparent 70%);
  --ebfq5-bg-orb1-size: 550px;
  --ebfq5-bg-orb1-top: -120px;
  --ebfq5-bg-orb1-right: -100px;

  /* Hide unused decor spans */
  --ebfq5-decor-orb2-display: none;
  --ebfq5-decor-grid-display: none;
  --ebfq5-decor-scan-display: none;
  --ebfq5-decor-noise-display: none;
  --ebfq5-decor-rays-display: none;
  --ebfq5-decor-dots-display: none;
  --ebfq5-decor-waves-display: none;
  --ebfq5-decor-shapes-display: none;
  --ebfq5-decor-particles-display: none;
  --ebfq5-decor-leaves-display: none;
  --ebfq5-decor-clouds-display: none;

  /* =========================================================
     COLORS & STYLES — BADGE
     ========================================================= */
  --ebfq5-badge-bg: #ffe600;
  --ebfq5-badge-border-color: 3px solid #000000;
  --ebfq5-badge-text-color: #000000;
  --ebfq5-badge-icon-color: #000000;
  --ebfq5-badge-padding-y: 0.4rem;
  --ebfq5-badge-padding-x: 1.2rem;
  --ebfq5-badge-font-size: 0.95rem;
  --ebfq5-badge-shadow: 4px 4px 0px #000000;

  /* =========================================================
     COLORS & STYLES — HEADER
     ========================================================= */
  --ebfq5-header-margin-bottom: 3.5rem;
  --ebfq5-header-margin-bottom-mobile: 2.5rem;
  --ebfq5-header-max-width: 650px;

  --ebfq5-title-color: #000000;
  --ebfq5-title-font-size: 3rem;
  --ebfq5-title-font-size-tablet: 2.4rem;
  --ebfq5-title-font-size-mobile: 1.95rem;
  --ebfq5-title-line-height: 1.15;

  --ebfq5-title-highlight-bg: #ffe600;
  --ebfq5-title-highlight-color: #000000;
  --ebfq5-title-highlight-border: 3px solid #000000;
  --ebfq5-title-highlight-padding: 0 0.5rem;

  --ebfq5-subtitle-color: #111111;
  --ebfq5-subtitle-font-size: 1.15rem;
  --ebfq5-subtitle-font-size-mobile: 0.98rem;
  --ebfq5-subtitle-line-height: 1.6;

  /* =========================================================
     COLORS & STYLES — CREATIVE ITEM CARD
     ========================================================= */
  --ebfq5-container-max-width: 860px;
  --ebfq5-list-gap: 1.35rem;

  --ebfq5-item-bg: #ffffff;
  --ebfq5-item-bg-hover: #ffffff;
  --ebfq5-item-bg-active: #ffe600;
  --ebfq5-item-border: 3px solid #000000;
  --ebfq5-item-border-hover: 3px solid #000000;
  --ebfq5-item-border-active: 3px solid #000000;
  --ebfq5-item-radius: 0px;
  --ebfq5-item-padding-y: 1.4rem;
  --ebfq5-item-padding-x: 1.75rem;
  --ebfq5-item-shadow: 5px 5px 0px #000000;
  --ebfq5-item-shadow-active: 9px 9px 0px #000000;

  --ebfq5-accent-bar-bg: #000000;
  --ebfq5-accent-bar-width: 6px;

  --ebfq5-num-bg: #000000;
  --ebfq5-num-color: #ffe600;
  --ebfq5-num-size: 38px;
  --ebfq5-num-border: 2px solid #000000;

  --ebfq5-badge-sm-bg: #000000;
  --ebfq5-badge-sm-color: #ffffff;

  --ebfq5-question-color: #000000;
  --ebfq5-question-color-active: #000000;
  --ebfq5-question-font-size: 1.2rem;
  --ebfq5-question-font-size-mobile: 1.05rem;
  --ebfq5-question-font-weight: 800;

  --ebfq5-toggle-size: 38px;
  --ebfq5-toggle-bg: #000000;
  --ebfq5-toggle-bg-active: #000000;
  --ebfq5-toggle-color: #ffffff;
  --ebfq5-toggle-color-active: #ffe600;
  --ebfq5-toggle-radius: 0px;
  --ebfq5-toggle-border: 2px solid #000000;
  --ebfq5-toggle-shadow-active: 2px 2px 0px #000000;
  --ebfq5-item-hover-shadow: 7px 7px 0px #000000;

  --ebfq5-answer-color: #000000;
  --ebfq5-answer-font-size: 1.05rem;
  --ebfq5-answer-font-size-mobile: 0.95rem;
  --ebfq5-answer-line-height: 1.65;
  --ebfq5-answer-margin-top: 1rem;

  /* =========================================================
     ANIMATIONS & REVEAL TOKENS
     ========================================================= */
  --ebfq5-reveal-distance: 24px;
  --ebfq5-reveal-duration: 0.4s;
  --ebfq5-delay-1-time: 0.08s;
  --ebfq5-delay-2-time: 0.16s;
  --ebfq5-delay-3-time: 0.24s;

  /* =========================================================
     BASE RULES (INHERITING TOKENS)
     ========================================================= */
  position: relative;
  background: var(--ebfq5-section-bg);
  padding-top: var(--ebfq5-section-padding-y);
  padding-bottom: var(--ebfq5-section-padding-y);
  padding-left: var(--ebfq5-section-padding-x);
  padding-right: var(--ebfq5-section-padding-x);
  font-family: var(--ebfq5-font-family);
  overflow: hidden;

  @media (max-width: 1023px) {
    padding-top: var(--ebfq5-section-padding-y-tablet);
    padding-bottom: var(--ebfq5-section-padding-y-tablet);
  }

  @media (max-width: 767px) {
    padding-top: var(--ebfq5-section-padding-y-mobile);
    padding-bottom: var(--ebfq5-section-padding-y-mobile);
  }
}

/* Background & Decor */
.ebfq5-section .ebfq5-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.ebfq5-section .ebfq5-bg-orb-1 {
  position: absolute;
  top: var(--ebfq5-bg-orb1-top);
  right: var(--ebfq5-bg-orb1-right);
  width: var(--ebfq5-bg-orb1-size);
  height: var(--ebfq5-bg-orb1-size);
  background: var(--ebfq5-bg-orb1-color);
  border-radius: var(--ebfq5-radius-circle);
}

.ebfq5-section .ebfq5-bg-orb-2,
.ebfq5-section .ebfq5-bg-grid,
.ebfq5-section .ebfq5-bg-scan,
.ebfq5-section .ebfq5-bg-noise,
.ebfq5-section .ebfq5-bg-rays,
.ebfq5-section .ebfq5-bg-dots,
.ebfq5-section .ebfq5-bg-waves,
.ebfq5-section .ebfq5-bg-shapes,
.ebfq5-section .ebfq5-bg-particles,
.ebfq5-section .ebfq5-bg-leaves,
.ebfq5-section .ebfq5-bg-clouds {
  display: none;
}

/* Container & Header */
.ebfq5-section .ebfq5-container {
  position: relative;
  z-index: 2;
  max-width: var(--ebfq5-container-max-width);
  margin-left: auto;
  margin-right: auto;
}

.ebfq5-section .ebfq5-header {
  text-align: center;
  max-width: var(--ebfq5-header-max-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--ebfq5-header-margin-bottom);

  @media (max-width: 767px) {
    margin-bottom: var(--ebfq5-header-margin-bottom-mobile);
  }
}

.ebfq5-section .ebfq5-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ebfq5-spacing-gap-xs);
  padding: var(--ebfq5-badge-padding-y) var(--ebfq5-badge-padding-x);
  background: var(--ebfq5-badge-bg);
  border: var(--ebfq5-badge-border-color);
  border-radius: var(--ebfq5-radius-card);
  color: var(--ebfq5-badge-text-color);
  font-size: var(--ebfq5-badge-font-size);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--ebfq5-spacing-gap-md);
  box-shadow: var(--ebfq5-badge-shadow);

  i {
    color: var(--ebfq5-badge-icon-color);
  }
}

.ebfq5-section .ebfq5-title {
  font-size: var(--ebfq5-title-font-size);
  color: var(--ebfq5-title-color);
  line-height: var(--ebfq5-title-line-height);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--ebfq5-spacing-gap-sm);

  @media (max-width: 1023px) {
    font-size: var(--ebfq5-title-font-size-tablet);
  }

  @media (max-width: 767px) {
    font-size: var(--ebfq5-title-font-size-mobile);
  }
}

.ebfq5-section .ebfq5-title-highlight {
  background: var(--ebfq5-title-highlight-bg);
  color: var(--ebfq5-title-highlight-color);
  padding: var(--ebfq5-title-highlight-padding);
  border: var(--ebfq5-title-highlight-border);
}

.ebfq5-section .ebfq5-subtitle {
  color: var(--ebfq5-subtitle-color);
  font-size: var(--ebfq5-subtitle-font-size);
  line-height: var(--ebfq5-subtitle-line-height);
  font-weight: 600;

  @media (max-width: 767px) {
    font-size: var(--ebfq5-subtitle-font-size-mobile);
  }
}

/* List & Accordion Items */
.ebfq5-section .ebfq5-list {
  display: flex;
  flex-direction: column;
  gap: var(--ebfq5-list-gap);
}

.ebfq5-section .ebfq5-item {
  position: relative;
  background: var(--ebfq5-item-bg);
  border: var(--ebfq5-item-border);
  border-radius: var(--ebfq5-item-radius);
  padding: var(--ebfq5-item-padding-y) var(--ebfq5-item-padding-x);
  box-shadow: var(--ebfq5-item-shadow);
  transition: transform var(--ebfq5-transition-duration) var(--ebfq5-animation-ease),
              box-shadow var(--ebfq5-transition-duration) var(--ebfq5-animation-ease),
              background var(--ebfq5-transition-duration) var(--ebfq5-animation-ease);

  &:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--ebfq5-item-hover-shadow);
  }
}

.ebfq5-section .ebfq5-accent-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--ebfq5-accent-bar-width);
  background: var(--ebfq5-accent-bar-bg);
  opacity: 0;
}

.ebfq5-section .ebfq5-item.ebfq5-active {
  background: var(--ebfq5-item-bg-active);
  transform: translate(-5px, -5px);
  box-shadow: var(--ebfq5-item-shadow-active);

  .ebfq5-accent-bar {
    opacity: 1;
  }
}

.ebfq5-section .ebfq5-question-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ebfq5-spacing-gap-md);
  cursor: pointer;
}

.ebfq5-section .ebfq5-question-left {
  display: flex;
  align-items: center;
  gap: var(--ebfq5-spacing-gap-md);
  flex: 1;
  min-width: 0;
}

.ebfq5-section .ebfq5-item-num {
  width: var(--ebfq5-num-size);
  height: var(--ebfq5-num-size);
  min-width: var(--ebfq5-num-size);
  background: var(--ebfq5-num-bg);
  color: var(--ebfq5-num-color);
  font-weight: 800;
  font-size: 1rem;
  border: var(--ebfq5-num-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ebfq5-section .ebfq5-question-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--ebfq5-spacing-gap-xs);
}

.ebfq5-section .ebfq5-question-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.1rem 0.5rem;
  background: var(--ebfq5-badge-sm-bg);
  color: var(--ebfq5-badge-sm-color);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ebfq5-section .ebfq5-question {
  color: var(--ebfq5-question-color);
  font-size: var(--ebfq5-question-font-size);
  font-weight: var(--ebfq5-question-font-weight);
  margin: 0;

  @media (max-width: 767px) {
    font-size: var(--ebfq5-question-font-size-mobile);
  }
}

.ebfq5-section .ebfq5-item.ebfq5-active .ebfq5-question {
  color: var(--ebfq5-question-color-active);
}

.ebfq5-section .ebfq5-toggle {
  width: var(--ebfq5-toggle-size);
  height: var(--ebfq5-toggle-size);
  min-width: var(--ebfq5-toggle-size);
  border-radius: var(--ebfq5-toggle-radius);
  background: var(--ebfq5-toggle-bg);
  color: var(--ebfq5-toggle-color);
  border: var(--ebfq5-toggle-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  i {
    font-size: 0.9rem;
  }
}

.ebfq5-section .ebfq5-icon-close {
  display: none;
}

.ebfq5-section .ebfq5-item.ebfq5-active .ebfq5-toggle {
  background: var(--ebfq5-toggle-bg-active);
  color: var(--ebfq5-toggle-color-active);
  box-shadow: var(--ebfq5-toggle-shadow-active);
}

.ebfq5-section .ebfq5-item.ebfq5-active .ebfq5-icon-open {
  display: none;
}

.ebfq5-section .ebfq5-item.ebfq5-active .ebfq5-icon-close {
  display: block;
}

/* Answer Wrapper Grid Height Animation */
.ebfq5-section .ebfq5-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ebfq5-transition-duration) var(--ebfq5-animation-ease);

  p {
    overflow: hidden;
  }
}

.ebfq5-section .ebfq5-item.ebfq5-active .ebfq5-answer-wrapper {
  grid-template-rows: 1fr;
}

.ebfq5-section .ebfq5-answer {
  color: var(--ebfq5-answer-color);
  font-size: var(--ebfq5-answer-font-size);
  line-height: var(--ebfq5-answer-line-height);
  font-weight: 600;
  margin-top: var(--ebfq5-answer-margin-top);
  margin-bottom: 0;
  padding-right: calc(var(--ebfq5-num-size) + var(--ebfq5-spacing-gap-md));

  @media (max-width: 767px) {
    font-size: var(--ebfq5-answer-font-size-mobile);
    padding-right: 0;
  }
}

/* Reveal Animations */
.ebfq5-section .ebfq5-anim-up {
  opacity: 0;
  transform: translateY(var(--ebfq5-reveal-distance));
}

.ebfq5-section .ebfq5-item.ebfq5-anim-up {
  transition: opacity var(--ebfq5-reveal-duration) var(--ebfq5-animation-ease),
              transform var(--ebfq5-reveal-duration) var(--ebfq5-animation-ease),
              background var(--ebfq5-transition-duration) var(--ebfq5-animation-ease),
              box-shadow var(--ebfq5-transition-duration) var(--ebfq5-animation-ease);
}

.ebfq5-section .ebfq5-header.ebfq5-anim-up {
  transition: opacity var(--ebfq5-reveal-duration) var(--ebfq5-animation-ease),
              transform var(--ebfq5-reveal-duration) var(--ebfq5-animation-ease);
}

.ebfq5-section .ebfq5-in {
  opacity: 1;
  transform: translateY(0);
}

.ebfq5-section .ebfq5-delay-1 { transition-delay: var(--ebfq5-delay-1-time); }
.ebfq5-section .ebfq5-delay-2 { transition-delay: var(--ebfq5-delay-2-time); }
.ebfq5-section .ebfq5-delay-3 { transition-delay: var(--ebfq5-delay-3-time); }

@media (prefers-reduced-motion: reduce) {
  .ebfq5-section .ebfq5-anim-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ebfq5-section .ebfq5-answer-wrapper {
    transition: none;
  }
}


/* Responsive Fix for FAQ Accordion Headers on Mobile */
@media (max-width: 639px) {
  .ebfq5-section .ebfq5-item {
    padding: 1rem 0.85rem;
  }
  .ebfq5-section .ebfq5-question-row {
    gap: 0.5rem;
  }
  .ebfq5-section .ebfq5-question-left {
    gap: 0.6rem;
  }
  .ebfq5-section .ebfq5-item-num {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.78rem;
  }
  .ebfq5-section .ebfq5-toggle {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
  .ebfq5-section .ebfq5-question-badge {
    font-size: 0.7rem;
  }
  .ebfq5-section .ebfq5-question {
    font-size: 0.88rem;
    line-height: 1.35;
  }
  .ebfq5-section .ebfq5-answer {
    font-size: 0.82rem;
    line-height: 1.5;
    padding-right: 0;
  }
}

.ebfq5-section .ebfq5-item-num { display: none !important; }