/**
 * Our Take News — FAQ block + freshness line
 *
 * Ships with the PLUGIN, enqueued only on posts that actually have stored FAQ
 * pairs. Same rule as the table styling: markup generated by the plugin brings
 * its own CSS, so a Breakdance template paste can never orphan it.
 *
 * NO JAVASCRIPT ANYWHERE IN THIS FEATURE. The accordion is <details>/<summary>,
 * which gives open/close, keyboard operation and screen-reader semantics from
 * the browser. If this stylesheet fails to load the block is still readable
 * text; if JS is disabled it still works completely.
 *
 * The `.breakdance` prefixed duplicates are deliberate. Breakdance styles post
 * content through two-class selectors such as `.breakdance .bde-rich-text h2`
 * (specificity 0,2,0) which beat a single class (0,1,0).
 *
 * @package OurTake\News
 * @since 1.5.0
 */

/* ── Freshness line ────────────────────────────────────────────────
   Renders as the first element of the post body, immediately below the
   template's byline row, and is typed to match it so the two read as one
   group. It is NOT inside the byline element — that is a Breakdance Code
   Block rendered before the content, which a the_content filter cannot
   reach without coupling the plugin to the template. */

.otn-updated,
.breakdance .otn-updated {
  margin: -0.35rem 0 1.6rem !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  font-weight: 600;
  color: #0a5f8f !important;
  letter-spacing: 0.01em;
}

.otn-updated time {
  border-bottom: 1px dotted rgba( 10, 95, 143, 0.4 );
  padding-bottom: 1px;
}

/* ── FAQ section ───────────────────────────────────────────────────
   Sits at the end of the post body, so it lands above the template's CTA
   strip without either knowing about the other. */

.otn-faq {
  margin: 2.75rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid #dfe3e6;
}

.otn-faq__heading,
.breakdance .otn-faq__heading {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #38373a !important;
  margin: 0 0 1.25rem !important;
}

/* ── Accordion item ────────────────────────────────────────────── */

.otn-faq__item {
  border: 1px solid #dfe3e6;
  border-radius: 8px;
  background: #ffffff;
  margin-bottom: 0.6rem;
  overflow: hidden;
}

.otn-faq__item[open] {
  border-color: #b9d9ec;
  box-shadow: 0 1px 3px rgba( 16, 32, 48, 0.05 );
}

/* ── Question (summary) ────────────────────────────────────────────
   list-style + ::-webkit-details-marker both removed so the default
   disclosure triangle does not sit alongside our own chevron. */

.otn-faq__q,
.breakdance .otn-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.05rem;
  margin: 0;
  cursor: pointer;
  list-style: none;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #38373a !important;
  /* Stops a double-tap selecting the question text on mobile. */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.otn-faq__q::-webkit-details-marker {
  display: none;
}

.otn-faq__q::marker {
  content: "";
}

.otn-faq__q:hover {
  color: #0a5f8f !important;
}

/* Keyboard focus must stay visible — this is the only way to operate the
   accordion without a mouse. */
.otn-faq__item:focus-within .otn-faq__q,
.otn-faq__q:focus-visible {
  outline: 2px solid #0e8fd0;
  outline-offset: -2px;
  border-radius: 8px;
}

/* Chevron, drawn in CSS so there is no icon font or SVG request. */
.otn-faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.32rem;
  border-right: 2px solid #0e8fd0;
  border-bottom: 2px solid #0e8fd0;
  transform: rotate( 45deg );
  transition: transform 0.18s ease;
}

.otn-faq__item[open] .otn-faq__q::after {
  transform: rotate( -135deg );
}

/* ── Answer ────────────────────────────────────────────────────── */

.otn-faq__a {
  padding: 0 1.05rem 1rem;
}

.otn-faq__a p,
.breakdance .otn-faq__a p {
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  color: #4a4a52 !important;
}

/* ── Narrow widths ─────────────────────────────────────────────── */

@media ( max-width: 768px ) {
  .otn-faq__heading,
  .breakdance .otn-faq__heading {
    font-size: 1.4rem !important;
  }

  .otn-faq__q,
  .breakdance .otn-faq__q {
    padding: 0.8rem 0.9rem;
    font-size: 0.95rem !important;
  }

  .otn-faq__a {
    padding: 0 0.9rem 0.9rem;
  }
}

/* ── Print ─────────────────────────────────────────────────────────
   Every panel forced open: a printed page of unanswered questions is worse
   than useless. */

@media print {
  .otn-faq__item {
    break-inside: avoid;
    border-color: #999;
  }

  /* Forcing a CLOSED <details> open from CSS alone is awkward: the browser
     hides the non-summary content through an internal slot, not through a
     style on our element. Three overlapping approaches are used so that at
     least one applies in any given engine:
       1. display on the answer — works in Gecko and older Blink;
       2. ::details-content — the modern standardised handle (Chrome 131+);
       3. content-visibility — covers the interim Blink implementation.
     Where none applies the block still prints correctly, just with only the
     first panel expanded, which is why the first panel is open by default. */
  .otn-faq__item > .otn-faq__a {
    display: block !important;
  }

  .otn-faq__item::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }

  .otn-faq__item {
    content-visibility: visible !important;
  }

  .otn-faq__q::after {
    display: none;
  }
}

@media ( prefers-reduced-motion: reduce ) {
  .otn-faq__q::after {
    transition: none;
  }
}