/* faq-homepage.css — restyle each page's existing FAQ section to match the homepage
   FAQ design (gradient-bordered dark cards, white 600 questions with a rotating chevron,
   light expandable answers, 16px gaps). Keeps each section's existing toggle behavior.
   Reversible: remove the <link> to this file. */

/* shared chevron */
:root { --faqhp-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ============ variant A: .faq-section with native <details class="faq-item"> ============
   The :not(#zz):not(#zz) prefix adds 2 ID-units of specificity so these rules beat each
   page's own high-specificity FAQ theme (some use a :not(#_) ID trick = 1 ID-unit). */
html body:not(#zz):not(#zz) .faq-section .faq-container,
html body:not(#zz):not(#zz) .faq-section .faq-list,
html body:not(#zz):not(#zz) .faq-section .faq__list {
  display: flex !important; flex-direction: column !important; gap: 16px !important;
  max-width: 900px; margin: 0 auto; width: 100%;
}
html body:not(#zz):not(#zz) .faq-section .faq-item,
html body:not(#zz):not(#zz) .faq-section details.faq-item,
html body:not(#zz):not(#zz) .faq-section .faq-item[open] {
  border: 1px solid transparent !important; border-radius: 12px !important;
  padding: 0 24px !important; margin: 0 !important;
  background:
    linear-gradient(0deg, rgba(176,176,176,.1), rgba(176,176,176,.1)) padding-box,
    linear-gradient(0deg, #05052B, #05052B) padding-box,
    linear-gradient(90deg, #192A42 0%, #1F73FF 50%, #192A42 100%) border-box !important;
  box-shadow: none !important;
}
html body:not(#zz):not(#zz) .faq-section .faq-item > summary {
  list-style: none !important; cursor: pointer !important; display: flex !important;
  align-items: center !important; justify-content: space-between !important; gap: 24px !important;
  padding: 22px 0 !important; font-size: .875rem !important; font-weight: 600 !important;
  color: #fff !important; line-height: 1.5 !important; background: none !important; border: 0 !important;
}
html body:not(#zz):not(#zz) .faq-section .faq-item > summary::-webkit-details-marker { display: none !important; }
html body:not(#zz):not(#zz) .faq-section .faq-item > summary::after {
  content: "" !important; flex: none !important; width: 12px !important; height: 12px !important;
  background: var(--faqhp-chev) no-repeat center / contain !important;
  border: 0 !important; margin: 0 !important; transform: none !important;
  transition: transform .3s ease !important; color: transparent !important;
}
html body:not(#zz):not(#zz) .faq-section .faq-item[open] > summary::after { transform: rotate(180deg) !important; }
html body:not(#zz):not(#zz) .faq-section .faq-item > summary ~ *,
html body:not(#zz):not(#zz) .faq-section .faq-item p,
html body:not(#zz):not(#zz) .faq-section .faq-item .faq-answer {
  color: #fff !important; font-size: .875rem !important; line-height: 1.5 !important;
}
html body:not(#zz):not(#zz) .faq-section .faq-item > p:last-child,
html body:not(#zz):not(#zz) .faq-section .faq-item .faq-answer { padding: 0 0 24px !important; margin: 0 !important; }

/* ============ variant B: Odoo `s_faq_collapse` snippet (Bootstrap accordion) ============
   The real "Frequently Asked Questions" section on cloned Odoo pages. The page section bg
   is already darkened by the page's wm-theme; here we restyle each .accordion-item into a
   homepage gradient-bordered card, keeping the section's existing 2-column layout. */
html body .s_faq_collapse .s_accordion,
html body .s_faq_collapse .accordion,
html body .s_faq_collapse .accordion-flush { background: transparent !important; border: 0 !important; }
html body .s_faq_collapse .accordion-item {
  border: 1px solid transparent !important; border-radius: 12px !important;
  margin-bottom: 16px !important; overflow: hidden !important; box-shadow: none !important;
  background:
    linear-gradient(0deg, rgba(176,176,176,.1), rgba(176,176,176,.1)) padding-box,
    linear-gradient(0deg, #05052B, #05052B) padding-box,
    linear-gradient(90deg, #192A42 0%, #1F73FF 50%, #192A42 100%) border-box !important;
}
html body .s_faq_collapse .accordion-button {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
  padding: 20px 24px !important; gap: 24px !important; color: #fff !important;
  font-weight: 600 !important; align-items: center !important; justify-content: space-between !important;
}
html body .s_faq_collapse .accordion-button h2,
html body .s_faq_collapse .accordion-button h3,
html body .s_faq_collapse .accordion-button h4,
html body .s_faq_collapse .accordion-button h5,
html body .s_faq_collapse .accordion-button h6,
html body .s_faq_collapse .accordion-button p,
html body .s_faq_collapse .accordion-button span,
html body .s_faq_collapse .accordion-button font {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-size: .875rem !important; font-weight: 600 !important; line-height: 1.5 !important; margin: 0 !important;
}
html body .s_faq_collapse .accordion-button::after {
  content: "" !important; flex: none !important; width: 12px !important; height: 12px !important;
  min-width: 12px !important; background: var(--faqhp-chev) no-repeat center / contain !important;
  border: 0 !important; margin: 0 !important; padding: 0 !important; color: transparent !important;
  font-size: 0 !important; transform: none !important; transition: transform .3s ease !important;
}
html body .s_faq_collapse .accordion-button:not(.collapsed)::after { transform: rotate(180deg) !important; }
html body .s_faq_collapse .accordion-collapse,
html body .s_faq_collapse .accordion-body { background: transparent !important; }
html body .s_faq_collapse .accordion-body { padding: 0 24px 22px !important; }
html body .s_faq_collapse .accordion-body,
html body .s_faq_collapse .accordion-body p,
html body .s_faq_collapse .accordion-body span,
html body .s_faq_collapse .accordion-body li,
html body .s_faq_collapse .accordion-body font {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-size: .875rem !important; line-height: 1.5 !important;
}

/* ============ variant C: `s_accordion_image` used as the real FAQ (scoped) ============
   Some pages (e.g. /partners/) put their real FAQ Q&A in the s_accordion_image snippet
   (image + accordion). Other pages use the SAME snippet for a secondary "Common Questions"
   block, so this is gated to a body.faqhp-hz class added only to genuine primary-FAQ pages. */
body.faqhp-hz .s_accordion_image .s_accordion,
body.faqhp-hz .s_accordion_image .accordion,
body.faqhp-hz .s_accordion_image .accordion-flush { background: transparent !important; border: 0 !important; }
body.faqhp-hz .s_accordion_image .accordion-item {
  border: 1px solid transparent !important; border-radius: 12px !important;
  margin-bottom: 16px !important; overflow: hidden !important; box-shadow: none !important;
  background:
    linear-gradient(0deg, rgba(176,176,176,.1), rgba(176,176,176,.1)) padding-box,
    linear-gradient(0deg, #05052B, #05052B) padding-box,
    linear-gradient(90deg, #192A42 0%, #1F73FF 50%, #192A42 100%) border-box !important;
}
body.faqhp-hz .s_accordion_image .accordion-button {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
  padding: 20px 24px !important; gap: 24px !important; color: #fff !important;
  font-weight: 600 !important; align-items: center !important; justify-content: space-between !important;
}
body.faqhp-hz .s_accordion_image .accordion-button h2,
body.faqhp-hz .s_accordion_image .accordion-button h3,
body.faqhp-hz .s_accordion_image .accordion-button h4,
body.faqhp-hz .s_accordion_image .accordion-button h5,
body.faqhp-hz .s_accordion_image .accordion-button h6,
body.faqhp-hz .s_accordion_image .accordion-button p,
body.faqhp-hz .s_accordion_image .accordion-button span,
body.faqhp-hz .s_accordion_image .accordion-button font {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-size: .875rem !important; font-weight: 600 !important; line-height: 1.5 !important; margin: 0 !important;
}
body.faqhp-hz .s_accordion_image .accordion-button::after {
  content: "" !important; flex: none !important; width: 12px !important; height: 12px !important;
  min-width: 12px !important; background: var(--faqhp-chev) no-repeat center / contain !important;
  border: 0 !important; margin: 0 !important; padding: 0 !important; color: transparent !important;
  font-size: 0 !important; transform: none !important; transition: transform .3s ease !important;
}
body.faqhp-hz .s_accordion_image .accordion-button:not(.collapsed)::after { transform: rotate(180deg) !important; }
body.faqhp-hz .s_accordion_image .accordion-collapse,
body.faqhp-hz .s_accordion_image .accordion-body { background: transparent !important; }
body.faqhp-hz .s_accordion_image .accordion-body { padding: 0 24px 22px !important; }
body.faqhp-hz .s_accordion_image .accordion-body,
body.faqhp-hz .s_accordion_image .accordion-body p,
body.faqhp-hz .s_accordion_image .accordion-body span,
body.faqhp-hz .s_accordion_image .accordion-body li,
body.faqhp-hz .s_accordion_image .accordion-body font {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-size: .875rem !important; line-height: 1.5 !important;
}