/* =====================================================================
   7thbreed — Site-wide FAQ uniformity (light mode)
   FAQ items render from several route chunks with two markups:
     1) div.rounded-xl.border.border-border.bg-surface  (button + p)
     2) details.group.rounded-xl.border.border-border.bg-background
   Both become the same white card as home/contact/products.
   ===================================================================== */

/* 1. div-based FAQ items (contact page, get-a-quote, service tab views) */
html:not(.dark) main div.rounded-xl.border.border-border.bg-surface:has(> button[aria-expanded]) {
  background: var(--card) !important;
  border: 1px solid color-mix(in oklab, var(--primary) 10%, var(--border)) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 1px 2px rgba(2, 6, 23, .04), 0 20px 44px -20px rgba(23, 78, 166, .20);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
html:not(.dark) main div.rounded-xl.border.border-border.bg-surface:has(> button[aria-expanded]):hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border)) !important;
}
/* Question row + answer text colors (no white-on-white) */
html:not(.dark) main div.rounded-xl.border.border-border.bg-surface:has(> button[aria-expanded]) > button {
  background: transparent !important;
  color: var(--foreground);
  font-weight: 600;
}
html:not(.dark) main div.rounded-xl.border.border-border.bg-surface:has(> button[aria-expanded]) > button:hover {
  color: var(--primary);
}
html:not(.dark) main div.rounded-xl.border.border-border.bg-surface:has(> button[aria-expanded]) > p {
  background: var(--card);
  color: var(--muted-foreground);
}

/* 2. details-based FAQ items (homepage style used on other routes) */
html:not(.dark) main details.group.rounded-xl[class*="bg-"] {
  background: var(--card) !important;
  border: 1px solid color-mix(in oklab, var(--primary) 10%, var(--border)) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 1px 2px rgba(2, 6, 23, .04), 0 20px 44px -20px rgba(23, 78, 166, .20);
}
html:not(.dark) main details.group.rounded-xl[class*="bg-"] summary {
  color: var(--foreground);
  font-weight: 600;
}
html:not(.dark) main details.group.rounded-xl[class*="bg-"] summary:hover {
  color: var(--primary);
}
html:not(.dark) main details.group.rounded-xl[class*="bg-"] p {
  color: var(--muted-foreground);
}

/* 3. Section containers around FAQs: use the shared tint, not solid surface */
html:not(.dark) main section:has(> .container-x .mt-12.space-y-3),
html:not(.dark) main section:has(> div > .mt-12.space-y-3) {
  background: color-mix(in oklab, var(--surface) 34%, transparent);
}