/* ==========================================================================
   Native Zendesk article accordion styled to match the legacy hand-coded
   .accordion look (gray header, bold ">" chevron that rotates 90deg when
   open, white panel).

   Markup:
   <zd-accordion class="wysiwyg-disclosure">
     <details [open]>
       <summary>...</summary>
       <div class="wysiwyg-disclosure-content">...</div>
     </details>
   </zd-accordion>

   Zendesk's component appears to apply its own styles after this file loads,
   so selectors here are high-specificity and key properties use !important.
   Direct element targeting is best-effort per Zendesk; recheck after
   Zendesk updates. The legacy .accordion-small variant can't be chosen per
   accordion in the native editor, so this matches the standard look.
   ========================================================================== */

/* 1. Tokens (supported) ---------------------------------------------------- */
:root,
html body zd-accordion.wysiwyg-disclosure {
  --zd-wysiwyg-disclosure-border-color: transparent;
  --zd-wysiwyg-disclosure-header-bg: #eee;
  --zd-wysiwyg-disclosure-header-bg-hover: #ccc;
  --zd-wysiwyg-disclosure-transition-duration: 0.3s;
}

/* 2. Layout: full width, 12px between sections ----------------------------- */
html body zd-accordion.wysiwyg-disclosure {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

html body zd-accordion.wysiwyg-disclosure details {
  display: block;
  width: 100% !important;
  box-sizing: border-box;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* 3. Header ---------------------------------------------------------------- */
html body zd-accordion.wysiwyg-disclosure details > summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  /* Legacy .accordion used width:100% plus 18px padding on each side without
     border-box, so its bars ran 36px wider than the article column. This
     matches that. For a bar that fits the column exactly, use 100% instead. */
  width: calc(100% + 36px) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 18px !important;
  /* Legacy header text: 18px (editor "large" size), line-height 1.6 (28.8px),
     regular weight with the title in <strong> at 700. Header height works
     out to 36px padding + 28.8px line = 64.8px, same as the legacy bars. */
  font-size: 18px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: #444;
  text-align: left;
  cursor: pointer;
  outline: none;
  list-style: none !important;
  background-color: #eee;
  background-image: none !important;   /* in case the chevron is a background */
  transition: background-color 0.3s;
}
html body zd-accordion.wysiwyg-disclosure details > summary::-webkit-details-marker {
  display: none;
}
html body zd-accordion.wysiwyg-disclosure details > summary::marker {
  content: '';
}

/* Remove Zendesk's own chevron if it uses ::before */
html body zd-accordion.wysiwyg-disclosure details > summary::before {
  content: none !important;
  display: none !important;
}

/* Editor "large" size, <p>, <strong>, etc. inside the header follow the header size */
html body zd-accordion.wysiwyg-disclosure details > summary * {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Zendesk's default makes <strong> render at 900 here; legacy used 700 */
html body zd-accordion.wysiwyg-disclosure details > summary strong,
html body zd-accordion.wysiwyg-disclosure details > summary b {
  font-weight: 700 !important;
}

/* Hover and open states share the darker gray, as in the legacy CSS */
html body zd-accordion.wysiwyg-disclosure details > summary:hover,
html body zd-accordion.wysiwyg-disclosure details[open] > summary {
  background-color: #ccc;
}

/* Keep keyboard focus visible even though the outline is removed above */
html body zd-accordion.wysiwyg-disclosure details > summary:focus-visible {
  box-shadow: inset 0 0 0 2px #777;
}

/* 4. Chevron: reset anything Zendesk draws on ::after, then draw ">" ------- */
html body zd-accordion.wysiwyg-disclosure details > summary::after {
  content: '\003E' !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  margin: -4px 0 -4px 5px !important;   /* keeps header height at 52px */
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: bold !important;
  color: #777 !important;
  transform: rotate(0deg) !important;
  transition: transform 0.4s ease !important;
}
html body zd-accordion.wysiwyg-disclosure details[open] > summary::after {
  transform: rotate(90deg) !important;
}

/* 5. Panel ----------------------------------------------------------------- */
html body zd-accordion.wysiwyg-disclosure details > .wysiwyg-disclosure-content {
  padding: 0 18px !important;
  background-color: white;
}