/* Accessibility-first header colors (QA page only) */
:root {
  /* Light variant fallbacks for broad support */
  --accessible-header-bg: #F8FAFC; /* near-white */
  --accessible-header-fg: #111827; /* near-black text */
  --accessible-cta-bg: #1D4ED8; /* strong blue */
  --accessible-cta-fg: #FFFFFF; /* white text */
}

/* Prefer perceptual colors when available */
@supports (color: oklch(0 0 0)) {
  :root {
    --accessible-header-bg: oklch(0.98 0.01 250);
    --accessible-header-fg: oklch(0.20 0.03 255);
    --accessible-cta-bg: oklch(0.60 0.18 255);
    --accessible-cta-fg: oklch(0.98 0.01 250);
  }
}

/* Apply to QA header only */
header.leadership-hero { background: var(--accessible-header-bg) !important; }

/* Light, low-glare overlay */
header.leadership-hero .hero-bg-overlay { background: rgba(248, 250, 252, 0.86) !important; }
@supports (color: oklch(0 0 0 / 1)) {
  header.leadership-hero .hero-bg-overlay { background: oklch(0.98 0.01 250 / 0.86) !important; }
}

/* Ensure readable dark text against light header */
header.leadership-hero .leadership-hero-content,
header.leadership-hero .leadership-hero-content h1,
header.leadership-hero .leadership-hero-content .lead,
header.leadership-hero .leadership-hero-content p { color: var(--accessible-header-fg) !important; }

header.leadership-hero .leadership-hero-content h1 {
  color: #3a0ca3 !important;
  -webkit-text-fill-color: #3a0ca3 !important;
}

.qa-hero-taglines {
  margin-top: 1rem;
  display: grid;
  gap: 6px;
  justify-items: center;
  font-family: "Sans Serif Collection", "Montserrat", "Poppins", sans-serif;
}

.qa-hero-tagline {
  margin: 0;
  color: var(--accessible-header-fg) !important;
}

.qa-hero-tagline-category {
  font-weight: 800;
  font-size: clamp(1.1rem, 2.0vw, 1.7rem);
  letter-spacing: -0.01em;
}

.qa-hero-tagline-explainer {
  font-weight: 400;
  font-size: clamp(0.98rem, 1.5vw, 1.2rem);
  opacity: 0.95;
}

.qa-hero-tagline-meaning {
  font-weight: 400;
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
  opacity: 0.9;
}

header.leadership-hero .text-white,
header.leadership-hero a.text-white { color: var(--accessible-header-fg) !important; -webkit-text-fill-color: var(--accessible-header-fg) !important; text-shadow: none !important; }

/* Desktop navbar links should be dark on light header */
@media (min-width: 768px) {
  header.leadership-hero .navbar .nav-link { color: var(--accessible-header-fg) !important; }
  header.leadership-hero .navbar-brand .subtitle { color: var(--accessible-header-fg) !important; -webkit-text-fill-color: var(--accessible-header-fg) !important; text-shadow: none !important; }
}

/* Tablet & smaller: accessible light header background & readable nav */
@media (max-width: 991.98px) {
  header.leadership-hero nav.navbar { background: var(--accessible-header-bg) !important; }
  header.leadership-hero .navbar .nav-link { color: var(--accessible-header-fg) !important; }
  header.leadership-hero .navbar-brand .subtitle { color: var(--accessible-header-fg) !important; -webkit-text-fill-color: var(--accessible-header-fg) !important; text-shadow: none !important; }
  header.leadership-hero .navbar-toggler { border-color: rgba(17, 24, 39, 0.25) !important; }
  header.leadership-hero .navbar-collapse { background-color: var(--accessible-header-bg) !important; border-top: 1px solid rgba(17, 24, 39, 0.08) !important; }
  header.leadership-hero .navbar.navbar-scrolled { background: var(--accessible-header-bg) !important; }
}

.qa-cairiq-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: middle;
}

.qa-cairiq-mark {
  width: 1.6em;
  height: 1.6em;
  display: inline-block;
  overflow: hidden;
  flex: 0 0 auto;
  --qa-mark-scale: 7.5;
  --qa-mark-tx: 0%;
  --qa-mark-ty: 0%;
}

header.leadership-hero .qa-cairiq-mark .qa-cairiq-logo {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
  transform: translate(var(--qa-mark-tx), var(--qa-mark-ty)) scale(var(--qa-mark-scale));
  transform-origin: center;
}

.faq-controls .field {
  position: relative;
}

.faq-refresh {
  position: absolute;
  right: 10px;
  top: 6px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.faq-refresh:hover {
  border-color: rgba(67, 97, 238, 0.28);
}

.faq-refresh:active {
  transform: translateY(1px);
}

.faq-controls input[type="search"] {
  padding-right: 54px;
}

.faq-category-title {
  font-size: 1.25rem;
}

/* Modern FAQ layout */
.faq-controls {
  display: grid;
  gap: 14px;
  margin: 1.25rem 0 1.5rem;
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
  backdrop-filter: blur(10px);
}

@supports (color: oklch(0 0 0 / 1)) {
  .faq-controls {
    border-color: oklch(0.25 0.02 255 / 0.10);
    box-shadow: 0 12px 30px oklch(0.25 0.02 255 / 0.08);
  }
}

@media (min-width: 992px) {
  .faq-controls {
    grid-template-columns: 1.2fr 0.8fr 0.6fr;
    align-items: end;
  }
}

.faq-controls hr {
  display: none;
}

.faq-controls .field {
  display: grid;
  gap: 8px;
}

.faq-controls label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(17, 24, 39, 0.78);
}

.faq-controls input[type="search"],
.faq-controls select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: rgba(255, 255, 255, 0.95);
  color: var(--accessible-header-fg);
  outline: none;
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02);
}

.faq-controls input[type="search"] {
  height: 46px;
  padding: 10px 14px;
}

.faq-controls select {
  min-height: 46px;
  padding: 10px 14px;
  line-height: 1.2;
  appearance: auto;
  -webkit-appearance: menulist;
}

.faq-controls input[type="search"]::placeholder {
  color: rgba(17, 24, 39, 0.45);
}

.faq-controls input[type="search"]:focus,
.faq-controls select:focus {
  border-color: rgba(67, 97, 238, 0.55);
  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
}

.faq-refresh {
  top: 38px;
}

/* Category grouping */
.faq-group {
  margin: 1.75rem 0 2.25rem;
}

.faq-category-title {
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #3a0ca3;
}

.faq-group .faq {
  display: grid;
  gap: 12px;
}

/* Accordion cards */
details.faq-item {
  border: 1px solid rgba(17, 24, 39, 0.10);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06);
  overflow: clip;
}

details.faq-item[open] {
  border-color: rgba(67, 97, 238, 0.28);
  box-shadow: 0 12px 30px rgba(67, 97, 238, 0.12);
}

details.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accessible-header-fg);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

details.faq-item summary::-webkit-details-marker {
  display: none;
}

details.faq-item summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9rem;
  color: rgba(17, 24, 39, 0.55);
  transition: transform 0.18s ease, color 0.18s ease;
}

details.faq-item[open] summary::after {
  transform: rotate(180deg);
  color: rgba(67, 97, 238, 0.9);
}

details.faq-item summary:hover {
  background: rgba(67, 97, 238, 0.06);
}

details.faq-item summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.18);
}

.faq-body {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

.faq-body p.muted {
  margin: 12px 0 0;
  color: rgba(17, 24, 39, 0.78);
  line-height: 1.7;
}

.faq-link {
  display: inline-flex;
  margin-top: 10px;
  font-weight: 700;
  text-decoration: none;
  color: rgba(67, 97, 238, 1);
}

.faq-link:hover {
  text-decoration: underline;
}