/*
 * Native replacements for the ElementsKit widgets (SEO-060).
 *
 * ElementsKit was loading ~82 KB of icon CSS, a 465 KB icon font and a large
 * widget stylesheet on every page in order to provide exactly two things: four
 * decorative watermark numbers on the homepage category cards, and one FAQ
 * accordion on six pages. Both are reproduced here so the plugin can go.
 *
 * Every value below was measured off the live ElementsKit rendering before it
 * was replaced, so the result is visually identical rather than merely similar.
 */

/* ---------------------------------------------------------------------------
   Decorative watermark numbers (homepage category cards)

   Measured: 100px/100px Golos Text at weight 700, glyphs filled with
   bg_diagonal.png clipped to the text. The font size, family and line height
   come from the widget's own Elementor typography (Golos Text 700, 100px,
   line-height 1em), which is also what keeps Golos Text enqueued. Elementor
   emits those at a higher specificity than a theme class can beat, so it owns
   the typography and this file only adds the image fill.

   The fill is suppressed until the section scrolls into view by Elementor's
   container lazy-load rule (background-image:none!important on the descendants
   of a container that is not yet .e-lazyloaded). ElementsKit behaved exactly
   the same way, so this is preserved behaviour, not a regression.
   --------------------------------------------------------------------------- */
.mp-num .elementor-heading-title {
  /* Root-relative on purpose: LiteSpeed combines this file into
     /wp-content/litespeed/css/, so a path relative to this file would break. */
  background-image: url("/wp-content/uploads/2025/11/bg_diagonal.png");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------------------
   FAQ accordion

   Built on <details>/<summary> so it needs no JavaScript and is keyboard and
   screen-reader accessible for free. The markup deliberately keeps the shape
   <details><summary>Q</summary><div>A</div></details>, because the FAQPage
   schema in WPCode snippet 2652 reads the rendered HTML with exactly that
   pattern. Changing the shape would silently drop the FAQ rich results.
   --------------------------------------------------------------------------- */
.mp-acc__i {
  margin-block-end: 10px;
}

.mp-acc__i:last-child {
  margin-block-end: 0;
}

.mp-acc__q {
  align-items: center;
  background: #f7f9fb;
  border-block-end: 1px solid transparent;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  display: flex;
  font: 700 16px/24px var(--mp-font-body, Inter, sans-serif);
  list-style: none;
  /* 14 + 24 + 14 + 1px border = 53px; the ElementsKit row measured 54px, so the
     min-height makes up the difference without moving the centred text. It is a
     min, so a wrapped two-line question on mobile still grows normally. */
  min-height: 54px;
  padding: 14px 30px;
  position: relative;
}

/* display:flex already suppresses the disclosure triangle in Chrome and Safari;
   these cover Firefox and older WebKit. */
.mp-acc__q::marker {
  content: "";
}

.mp-acc__q::-webkit-details-marker {
  display: none;
}

.mp-acc__qt {
  padding-inline-end: 10px;
}

.mp-acc__ic {
  color: #000;
  display: block;
  height: 16px;
  inset-block-start: 50%;
  inset-inline-end: 30px;
  position: absolute;
  transform: translateY(-50%);
  width: 16px;
}

.mp-acc__i[open] .mp-acc__ic {
  transform: translateY(-50%) rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  .mp-acc__ic {
    transition: transform 180ms ease;
  }
}

.mp-acc__a {
  color: #000;
  font: 400 16px/24px var(--mp-font-body, Inter, sans-serif);
  padding: 30px 85px 30px 65px;
}

.mp-acc__a p {
  margin: 0;
}

.mp-acc__a > :first-child {
  margin-block-start: 0;
}

.mp-acc__a > :last-child {
  margin-block-end: 0;
}