/* ============================================
   FAQ SECTION MODULE (REV 4 + mobile dropdown)
   ============================================ */

/* Outer wrapper that controls vertical spacing + background outside section */
.atx-faq-outer {
  background-color: var(--faq-outer-bg, var(--are-panel-color-2));
}

/* Without its own heading (the page's hero is the heading, e.g. the agent
   help page): the grey band starts right under the hero — no white page
   padding above/below it, and only a small gap above the controls. */
.atx-defpage:has(.atx-faq-outer.is-noheading) {
  padding-top: 0;
  padding-bottom: 0;
}
.atx-faq-outer.is-noheading {
  padding-top: 0 !important; /* inline sectionMarginTop */
}
.atx-faq-outer.is-noheading .atx-faq-section {
  padding-top: 1.5rem;
}

/* FULL-BLEED BACKGROUND */
.atx-faq-outer.is-fullwidth {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Wrapper (inner section) */
.atx-faq-section {
  background-color: var(--faq-bg-page, var(--are-panel-color-2));
  padding-left: var(--faq-section-padding-x, 1rem);
  padding-right: var(--faq-section-padding-x, 1rem);
  padding-top: var(--faq-section-padding-y, 3rem);
  padding-bottom: var(--faq-section-padding-y, 3rem);
  box-sizing: border-box;
}

/* Inner constrained content */
.atx-faq-section__inner {
  width: 100%;
  max-width: var(--faq-section-max-width, 800px);
  margin-left: auto;
  margin-right: auto;

  padding-left: var(--faq-inner-margin-mobile, 0);
  padding-right: var(--faq-inner-margin-mobile, 0);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .atx-faq-section__inner {
    padding-left: var(--faq-inner-margin-tablet, 0);
    padding-right: var(--faq-inner-margin-tablet, 0);
  }
}

@media (min-width: 1024px) {
  .atx-faq-section__inner {
    padding-left: var(--faq-inner-margin-desktop, 0);
    padding-right: var(--faq-inner-margin-desktop, 0);
  }
}

.atx-faq-section__header {
  /* Let .atx-section-heading handle text-align & typography.
     This only controls spacing below the heading. */
  margin-bottom: var(--faq-gap-below-heading, 2rem);
}

/* Optional: keep the class as a hook, but don't override any typography */
.atx-faq-section__title {
  /* no font, color, size, letter-spacing, transform, etc. */
}


/* Controls panel */
.atx-faq-controls {
  background-color: var(--faq-controls-bg, var(--are-light-gray));
  border: var(--faq-controls-border, 1px solid var(--border-light));
  border-radius: var(--faq-controls-radius, 8px);
  padding: var(--faq-controls-padding, 1rem);
  text-align: var(--faq-controls-text-align, left);
  margin-bottom: var(--faq-gap-after-controls, 1.5rem);
}

/* Category label */
.atx-faq-categorylabel {
  font-size: var(--faq-search-label-fs, 0.8rem);
  font-weight: var(--faq-search-label-fw, 600);
  color: var(--faq-search-label-color, var(--are-dark-gray));
  margin: 0 0 .4rem 0;
  text-align: left;
}

/* MOBILE DROPDOWN WRAPPER (hidden by default, shown on mobile) */
.atx-faq-categoryselect-wrapper {
  display: none;
}

/* Mobile dropdown styling matches search input styling */
.atx-faq-categoryselect {
  width: 100%;
  border: var(--faq-search-input-border, 1px solid var(--border-light));
  border-radius: var(--faq-search-input-radius, 8px);
  padding: var(--faq-search-input-pad, .6rem .75rem);
  font-size: var(--faq-search-input-fs, 1rem);
  line-height: 1.4;
  color: var(--faq-search-input-color, #000);
  background-color: var(--faq-search-input-bg, #fff);
  box-sizing: border-box;

  /* Force same visual height as search box */
  height: 2.8rem;
}

/* Tabs container (DESKTOP/TABLET) */
.atx-faq-tabs {
  display: flex;
  flex-wrap: wrap; /* allow multiple rows on larger screens */
  gap: var(--faq-tabs-gap, 0.5rem);
  margin-bottom: var(--faq-tabs-wrap-mb, 1rem);
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.atx-faq-tabs::-webkit-scrollbar { display:none; }

/* Tab button */
.atx-faq-tabs__tab {
  border: var(--faq-tab-border, none);
  border-radius: var(--faq-tab-radius, 6px);
  padding: var(--faq-tab-pad-y, 0.5rem) var(--faq-tab-pad-x, 0.75rem);
  font-size: var(--faq-tab-font-size, 0.9rem);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  background-color: var(--faq-tab-bg-default, rgba(0,0,0,0.07));
  color: var(--faq-tab-color-default, #000);
  transition: transform .15s ease, background-color .15s ease;
}

/* Remove default focus outline on tabs */
.atx-faq-tabs__tab:focus {
  outline: none;
}

/* Accessible focus state */
.atx-faq-tabs__tab:focus-visible {
  outline: 2px solid var(--faq-brand-color, var(--are-color));
  outline-offset: 2px;
}

.atx-faq-tabs__tab[aria-selected="true"] {
  background-color: var(--faq-tab-bg-active, var(--are-color));
  color: var(--faq-tab-color-active, #fff);
}
.atx-faq-tabs__tab:hover {
  transform: scale(1.05);
}

/* Search */
.atx-faq-search {
  margin-bottom: var(--faq-search-block-mb, 1rem);
  text-align: left;
}
.atx-faq-search__label {
  display: block;
  font-size: var(--faq-search-label-fs, 0.8rem);
  font-weight: var(--faq-search-label-fw, 600);
  color: var(--faq-search-label-color, var(--are-dark-gray));
  margin: 0 0 .4rem 0;
  text-align: left;
}
.atx-faq-search__input {
  width: 100%;
  max-width: var(--faq-search-input-width, 100%);
  border: var(--faq-search-input-border, 1px solid var(--border-light));
  border-radius: var(--faq-search-input-radius, 8px);
  padding: var(--faq-search-input-pad, .6rem .75rem);
  font-size: var(--faq-search-input-fs, 1rem);
  line-height: 1.4;
  color: var(--faq-search-input-color, #000);
  background-color: var(--faq-search-input-bg, #fff);
  box-sizing: border-box;
}
.atx-faq-search__nohits {
  display: none;
  font-size: var(--faq-nohits-fs, .9rem);
  color: var(--faq-nohits-color, var(--are-color));
  padding-top: var(--faq-nohits-pad-top, .5rem);
  text-align: var(--faq-nohits-align, left);
}

/* LIST WRAPPER PANEL */
.atx-faq-listpanel {
  background-color: var(--faq-list-bg, var(--are-panel-color-2));
  border: var(--faq-list-border, 1px solid var(--border-light));
  border-radius: var(--faq-list-radius, 8px);
  padding: var(--faq-list-padding, 1rem);
}

/* FAQ LIST + ITEMS container */
.atx-faq-list {
  display: grid;
  gap: 0; /* group handles its own gap */
}

/* CATEGORY GROUPS */
.atx-faq-group {
  display: grid;
  gap: var(--faq-item-gap, 1rem);
  margin-bottom: 1.5rem;
}
.atx-faq-group__heading {
  margin-top: var(--faq-group-heading-mt, 1.5rem);
  margin-bottom: var(--faq-group-heading-mb, 0.75rem);
  color: var(--faq-category-heading-color, var(--text-main));
}
.atx-faq-group:first-child .atx-faq-group__heading {
  margin-top: 0.75rem;
}

/* FAQ card */
.atx-faq-item {
  background-color: var(--faq-bg-surface, var(--are-panel-color-1));
  border: 1px solid var(--faq-border-color, var(--border-light));
  border-radius: var(--faq-item-radius, 12px);
  box-shadow: var(--faq-shadow-card, var(--shadow-soft));
  overflow: hidden;
}

/* Question row */
.atx-faq-item__toggle {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--faq-item-padding, 1rem 1.25rem);
  color: var(--faq-question-color, var(--text-main));
  font-weight: var(--faq-question-weight, 600);
  line-height: 1.3;
  font-size: var(--faq-question-fs-mobile, 1rem);
  border-bottom: 1px solid var(--faq-border-color, var(--border-light));
  transition: background-color .18s ease, color .18s ease;
}

@media (min-width: 768px){
  .atx-faq-item__toggle {
    font-size: var(--faq-question-fs-desktop, 1.125rem);
  }
}

/* Kill default black browser focus outline, keep focus-visible styling */
.atx-faq-item__toggle:focus {
  outline: none;
}
.atx-faq-item__toggle:hover,
.atx-faq-item__toggle:focus-visible {
  background-color: var(--faq-question-hover-bg, rgba(0,0,0,0.03));
  color: var(--faq-question-hover-color, var(--are-color));
  outline: none;
}

.atx-faq-item__icon {
  flex: 0 0 auto;
  min-width: 1.25em;
  line-height: 1;
  font-weight: 600;
  font-size: var(--faq-icon-size-em, 1.25em);
  color: var(--faq-icon-color, var(--are-color));
  transition: transform .18s ease;
  display: inline-block;
}
.atx-faq-item__toggle[aria-expanded="true"] .atx-faq-item__icon {
  transform: rotate(180deg);
}

/* Answer block */
.atx-faq-item__a { padding: 0; }
.atx-faq-item__answer {
  padding: 1rem 1.25rem 1.25rem 1.25rem;
  color: var(--faq-answer-color, var(--are-dark-gray));
  font-size: var(--faq-answer-fs-mobile, 0.95rem);
  line-height: var(--faq-answer-line-height, 1.5);
}
@media (min-width: 768px){
  .atx-faq-item__answer {
    font-size: var(--faq-answer-fs-desktop, 1rem);
  }
}
.atx-faq-item__answer p { margin: 0 0 1em; }
.atx-faq-item__answer ul,
.atx-faq-item__answer ol {
  margin: 0 0 1em 1.25em;
  padding: 0;
}

/* Accessibility */
.atx-faq-item__toggle:focus-visible {
  outline: 2px solid var(--faq-brand-color, var(--are-color));
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .atx-faq-item__toggle,
  .atx-faq-item__icon { transition: none !important; }
}

/* ============================================
   RESPONSIVE: tabs vs dropdown
   ============================================ */

/* On small screens: show dropdown, hide tabs */
@media (max-width: 767px) {
  .atx-faq-tabs {
    display: none;
  }
  .atx-faq-categoryselect-wrapper {
    display: block;
    margin-bottom: var(--faq-tabs-wrap-mb, 1rem);
  }
}

/* On tablet/desktop: show tabs, hide dropdown */
@media (min-width: 768px) {
  .atx-faq-categoryselect-wrapper {
    display: none;
  }
}

/* ============================================
   MOBILE: Remove panels, maximize content space
   ============================================ */
@media (max-width: 767px) {
  /* Remove outer section padding */
  .atx-faq-section {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  /* Remove controls panel styling */
  .atx-faq-controls {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 1rem;
  }

  /* Remove list panel styling */
  .atx-faq-listpanel {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }

  /* Increase gap between FAQ items */
  .atx-faq-group {
    gap: 0.75rem;
  }
}