@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

.beca-faq-section {
  --beca-primary: #135AD5;
  --beca-accent: #07A5F6;
  --beca-text: #1f2937;
  --beca-muted: #667085;
  --beca-border: #e4e9f1;
  --beca-soft: #f6f9fe;
  --beca-faq-bg: #fff;
  --beca-faq-mt: 0rem;
  --beca-faq-mb: 0rem;
  --beca-faq-pt: 4rem;
  --beca-faq-pb: 4rem;
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--beca-text);
  background: var(--beca-faq-bg);
  margin-top: var(--beca-faq-mt);
  margin-bottom: var(--beca-faq-mb);
  padding-top: var(--beca-faq-pt);
  padding-bottom: var(--beca-faq-pb);
}
.beca-faq-section *, .beca-faq-section *::before, .beca-faq-section *::after { box-sizing: border-box; }
.beca-faq__header, .beca-faq__body, .beca-faq__nudge { width: min(1240px, calc(100% - 3rem)); margin-inline: auto; }
.beca-faq__header { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-bottom:2.5rem; }
@media (min-width: 800px) { .beca-faq__header { grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); align-items:end; } }
.beca-faq__body { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width: 800px) { .beca-faq__body { grid-template-columns:250px minmax(0,1fr); gap:2rem; align-items:start; } }
.beca-faq__tabs { display:flex; gap:.55rem; overflow-x:auto; padding:0 0 .25rem; scrollbar-width:thin; }
@media (min-width:800px) { .beca-faq__tabs { flex-direction:column; overflow:visible; } }
.beca-faq__tab { flex-shrink:0; text-align:left; padding:.85rem 1rem; border:1px solid var(--beca-border); border-radius:8px; background:#fff; color:#475467; font:600 .84rem/1.35 'Open Sans',Arial,sans-serif; cursor:pointer; transition:all .22s ease; white-space:nowrap; }
.beca-faq__tab:hover { color:var(--beca-primary); border-color:#b9d0f7; background:var(--beca-soft); transform:translateY(-1px); }
.beca-faq__tab--active { color:#fff; border-color:var(--beca-primary); background:var(--beca-primary); box-shadow:0 8px 22px rgba(19,90,213,.16); }
.beca-faq__panel { display:none; } .beca-faq__panel--active { display:block; }
.beca-faq__question { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; padding:1.15rem 1.25rem; background:transparent; border:0; cursor:pointer; text-align:left; }
.beca-faq__question-text { font:600 1rem/1.5 'Open Sans',Arial,sans-serif; color:#263247; transition:color .2s ease; }
.beca-faq__item--open .beca-faq__question-text { color:var(--beca-primary); }
.beca-faq__icon { flex:0 0 2rem; display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; background:#edf4ff; color:var(--beca-primary); transition:all .25s ease; }
.beca-faq__item--open .beca-faq__icon { background:var(--beca-primary); color:#fff; transform:rotate(45deg); }
.beca-faq__answer { overflow:hidden; max-height:0; transition:max-height .35s ease; }
.beca-faq__answer:not([hidden]) { max-height:900px; visibility:visible; }
.beca-faq__answer[hidden] { display:block!important; max-height:0; visibility:hidden; }
.beca-faq__answer-inner { padding:0 1.25rem 1.25rem; }
.beca-faq__answer-rule { width:42px; height:2px; margin-bottom:.9rem; border-radius:2px; background:var(--beca-accent); }
.beca-faq__answer-text { margin:0; font:400 .94rem/1.75 'Open Sans',Arial,sans-serif; color:#5d6879; }
.beca-faq__empty { padding:1rem 0; color:var(--beca-muted); font-style:italic; }
.beca-faq__nudge { display:flex; flex-direction:column; gap:1.25rem; margin-top:2.25rem; padding:1.35rem 1.5rem; border:1px solid #dbe8fb; border-radius:10px; background:var(--beca-soft); }
@media (min-width:650px) { .beca-faq__nudge { flex-direction:row; align-items:center; justify-content:space-between; } }
.beca-faq__nudge-heading { margin:0 0 .25rem; font:600 1.05rem/1.4 'Open Sans',Arial,sans-serif; color:#263247; }
.beca-faq__nudge-sub { margin:0; font:400 .9rem/1.55 'Open Sans',Arial,sans-serif; color:var(--beca-muted); }
@media (max-width:600px) { .beca-faq__header,.beca-faq__body,.beca-faq__nudge { width:min(100% - 2rem,1240px); } .beca-faq__question { padding:1rem; } .beca-faq__answer-inner { padding:0 1rem 1rem; } }
@media (prefers-reduced-motion:reduce) { .beca-faq-section * { transition:none!important; } }

/* ==========================================================================\n   Feature Cards / Feature Stories visual alignment\n   These elements intentionally inherit their exact visual treatment from\n   beca_feature_cards/feature_cards, the same library used by Feature Stories.\n   ========================================================================== */
.beca-faq__header {
  display: block;
  margin-bottom: 1.5rem;
}
.beca-faq__header-bottom { margin-top: 1rem; }

/* Do not override bfc typography: bfc-eyebrow, bfc-heading and bfc-subheading
 * are the source of truth, exactly as in beca_feature_stories. */

/* FAQ accordion surface uses the exact Feature Stories linked-card treatment.
 * bfc-card--linked is important: Feature Cards applies its premium hover state
 * to linked cards through this modifier. The FAQ item now uses the same state. */
.beca-faq__item.bfc-card {
  margin-bottom: .75rem;
  width: 100%;
}

/* Keep the accordion content transparent so it never paints a blue FAQ-specific
 * hover layer over the shared Feature Stories card surface. */
.beca-faq__item .beca-faq__question,
.beca-faq__item .beca-faq__question:hover,
.beca-faq__item .beca-faq__question:focus,
.beca-faq__item .beca-faq__question:active,
.beca-faq__item .beca-faq__answer,
.beca-faq__item .beca-faq__answer-inner {
  background: transparent !important;
}

/* Do not recolour the FAQ title simply because the accordion is open.
 * The card hover treatment remains the shared bfc-card--linked treatment. */
.beca-faq__item--open .beca-faq__question-text {
  color: #263247;
}

/* Preserve FAQ accordion controls and expansion behaviour over bfc-card. */
.beca-faq__question { position: relative; z-index: 2; }
.beca-faq__answer { position: relative; z-index: 1; width: 100%; }
.beca-faq__icon { cursor: pointer; }

/* Contact CTA uses the exact Feature Cards CTA used by Feature Stories View All. */
.beca-faq__nudge-cta.bfc-card-cta {
  flex-shrink: 0;
  text-decoration: none;
  font-family: inherit;
}
.beca-faq__nudge-cta.bfc-card-cta:hover,
.beca-faq__nudge-cta.bfc-card-cta:focus { text-decoration: none; }
.beca-faq__nudge-cta.bfc-card-cta::before {
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}

/* Expanded FAQ state: keep the Feature Stories card's elevated/hover presentation
 * latched on while the answer is open, rather than showing an active blue border. */
.beca-faq__item.bfc-card.beca-faq__item--open {
  /* Latch the exact Feature Cards hover transform/shadow while open. */
  transform: var(--bfc-card-hover-transform, translateY(-4px)) !important;
  box-shadow: var(--bfc-card-hover-shadow, 0 16px 48px rgba(0,0,0,0.1)) !important;
  /* Keep the normal Feature Stories card border; never use an active blue border. */
  border: var(--bfc-card-border, 1px solid rgba(0,0,0,0.07)) !important;
  outline: none !important;
}

.beca-faq__item.bfc-card.beca-faq__item--open:hover,
.beca-faq__item.bfc-card.beca-faq__item--open:focus-within {
  border: var(--bfc-card-border, 1px solid rgba(0,0,0,0.07)) !important;
  outline: none !important;
}

/* Clicking the accordion button must not leave Drupal/browser's blue focus ring
 * around the expanded answer card. Keyboard users retain a subtle focus cue
 * on the circular expand/collapse control instead. */
.beca-faq__question:focus,
.beca-faq__question:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.beca-faq__question:focus-visible .beca-faq__icon {
  box-shadow: 0 0 0 3px rgba(7,165,246,.22);
}

/* FAQ section-title vertical rhythm.
 * Keep the shared bfc typography, but remove paragraph/heading margins that
 * can stack and create a larger eyebrow-to-heading gap in this block. */
.beca-faq__header > .beca-faq__eyebrow.bfc-eyebrow {
  margin-top: 0 !important;
  margin-bottom: .35rem !important;
}
.beca-faq__header > .beca-faq__heading.bfc-heading {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
 * Section heading: use the exact shared BecA one-column heading rhythm.
 * Typography and eyebrow/heading spacing come from beca_base, exactly as in
 * beca_1column_section. FAQ only controls container placement and intro gap.
 * -------------------------------------------------------------------------- */
.beca-faq-section .beca-faq__header.beca-1column-section-header {
  display: block !important;
  width: min(1240px, calc(100% - 3rem));
  max-width: var(--beca-container-max, 1240px);
  margin-inline: auto;
  margin-bottom: 1.5rem;
  text-align: left !important;
}
.beca-faq-section .beca-faq__header .beca-faq__eyebrow.beca-1column-section-eyebrow,
.beca-faq-section .beca-faq__header .beca-faq__heading.beca-1column-section-heading {
  /* Deliberately no margin/font overrides: beca_base owns the shared style. */
}
.beca-faq-section .beca-faq__header .beca-faq__intro {
  margin-top: 1rem;
  margin-bottom: 0;
  max-width: 760px;
  font-family: 'Open Sans', Arial, sans-serif;
}
@media (max-width: 600px) {
  .beca-faq-section .beca-faq__header.beca-1column-section-header {
    width: min(100% - 2rem, 1240px);
  }
}