/**
 * Our Take News — generated post table styling
 *
 * Ships with the PLUGIN, not with the Breakdance template.
 *
 * These rules used to live in a Code Block on the Single Post template. That
 * meant the styling was a property of one template on one environment: production's
 * template had been pasted before the rules existed, so generated tables rendered
 * unstyled there while staging looked correct. Anyone re-pasting the template
 * would silently lose them again. The editorial brief asks the model for a specs
 * table, so the styling for that table belongs to the same thing that asks for it.
 *
 * SCOPING — every selector is under `.buzy-table-scroll`, the wrapper that
 * OTN_Content::wrap_tables() adds at render time on singular posts. Nothing here
 * can reach a WooCommerce cart, checkout, order, or product-attributes table,
 * because those are never inside that wrapper.
 *
 * The `.breakdance` prefixed duplicates are deliberate, not redundant. Breakdance
 * styles post content through two-class selectors such as
 * `.breakdance .bde-rich-text td` (specificity 0,2,0) which beat a single class
 * (0,1,0). Prefixing raises ours to 0,2,0 and the later-loaded stylesheet then
 * wins on source order.
 *
 * @package OurTake\News
 * @since 1.3.2
 */

/* ── Scroll wrapper ────────────────────────────────────────────────
   A table has a hard minimum width, so on a phone it either bursts the page or
   crushes its columns. The wrapper scrolls instead. */

.buzy-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: 2rem 0 2.25rem;
  border-radius: 8px;
  /* A faint frame so a scrolled-off column reads as "there is more", rather
     than as a broken edge. */
  box-shadow: 0 0 0 1px #dfe3e6;
}

/* The wrapper is focusable so keyboard users can reach the hidden columns. */
.buzy-table-scroll:focus-visible {
  outline: 2px solid #0e8fd0;
  outline-offset: 2px;
}

/* ── Table ─────────────────────────────────────────────────────────── */

.buzy-table-scroll table,
.breakdance .buzy-table-scroll table {
  width: 100%;
  min-width: 30rem;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: #ffffff;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ── Cells ─────────────────────────────────────────────────────────── */

.buzy-table-scroll th,
.buzy-table-scroll td,
.breakdance .buzy-table-scroll th,
.breakdance .buzy-table-scroll td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #dfe3e6;
}

/* ── Header row ────────────────────────────────────────────────────── */

.buzy-table-scroll thead th,
.breakdance .buzy-table-scroll thead th {
  background: #0a5f8f;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 0;
  white-space: nowrap;
}

/* A row-header column stays legible without becoming a second blue band. */
.buzy-table-scroll tbody th,
.breakdance .buzy-table-scroll tbody th {
  background: #eaf5fc;
  color: #38373a;
  font-weight: 700;
}

/* ── Zebra striping ────────────────────────────────────────────────── */

.buzy-table-scroll tbody tr:nth-child(even) td,
.breakdance .buzy-table-scroll tbody tr:nth-child(even) td {
  background: #f7f9fa;
}

.buzy-table-scroll tbody tr:last-child th,
.buzy-table-scroll tbody tr:last-child td,
.breakdance .buzy-table-scroll tbody tr:last-child th,
.breakdance .buzy-table-scroll tbody tr:last-child td {
  border-bottom: 0;
}

/* ── Caption ───────────────────────────────────────────────────────── */

/* Rendered below the table. The generated markup places <caption> first, as the
   HTML spec requires, and caption-side moves it visually — so the source order
   stays valid and screen readers still announce it as the table's caption. */
.buzy-table-scroll caption,
.breakdance .buzy-table-scroll caption {
  caption-side: bottom;
  padding: 0.7rem 0.9rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #6b6b70;
  text-align: left;
}

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

@media (max-width: 768px) {
  .buzy-table-scroll th,
  .buzy-table-scroll td,
  .breakdance .buzy-table-scroll th,
  .breakdance .buzy-table-scroll td {
    padding: 9px 11px;
  }

  .buzy-table-scroll table,
  .breakdance .buzy-table-scroll table {
    font-size: 0.9rem;
    min-width: 26rem;
  }
}

/* ── Containment: stop the table dragging the whole column wide ─────
   @since 1.3.3

   THE BUG. Breakdance's `.section-container` is
   `display:flex; flex-direction:column; align-items:flex-start` (measured on
   production, not assumed). `align-items:flex-start` makes each child
   shrink-to-fit on the cross axis, so a column's width becomes
   max(min-content, available) rather than the container width.

   The table carries `min-width: 26rem` (416px) so it can stay readable and
   scroll. That min-width raises the whole column's min-content above the
   viewport, and because the column is shrink-to-fit it grows to match —
   dragging every paragraph out with it and scrolling the page sideways.
   The scroll wrapper never engages, because its `max-width:100%` resolves
   against a parent that is itself already too wide.

   Measured on production before the fix, at 390px viewport:
     .section-container ........ 375px   (correct)
     .bde-rich-text (post body) . 494px   <- overflowed its own parent
     .buzy-table-scroll ........ 494px   <- so it never scrolled
     document.scrollWidth ...... 505px vs 390px viewport

   Overflow was present at EVERY phone width tested — 360 (+145px), 390
   (+115px), 412 (+93px), 430 (+75px), 480 (+25px) — and cleared by 540px.
   It is NOT Android-only and it does reproduce in device emulation; a clean
   emulator result usually means the stale stylesheet was still cached.

   NOT the cause, checked and ruled out: Android Chrome font boosting.
   `-webkit-text-size-adjust` already computes to 100% on html, body and the
   post body, so text is never inflated. No text-size-adjust rule is added
   here — it would be a no-op pretending to be a fix.

   THE SCOPE. `width:100%` overrides shrink-to-fit and pins the column to its
   container; `min-width:0` lets a flex item shrink below its content.

   Scoping is deliberately narrow, and this is the part that has to be right:
   applying it to every `.bde-rich-text` on the page (13 of them here) broke
   desktop, adding 227-333px of overflow at 768-1280px. `:has(> ...)` limits
   it to the one rich-text element that actually contains a table wrapper.
   `.buzy-blog-prose` is listed alongside it so the fix still lands if `:has()`
   is unsupported — and the selectors are independent, so losing either the
   template class or `:has()` support still leaves one working path.

   `max-width` is deliberately NOT set here. The template owns the 720px
   reading measure, and overriding it would widen body text on desktop.
   Verified after the fix: 720px measure intact at 1024/1280/1440. */

.breakdance .buzy-blog-prose,
.breakdance .bde-rich-text:has(> .buzy-table-scroll) {
  width: 100%;
  min-width: 0;
}

.breakdance .buzy-table-scroll {
  min-width: 0;
}

/* The frame is the JS-created positioning context. It must be caught by the
   containment rule too, or it becomes the new shrink-to-fit offender. */
.breakdance .bde-rich-text:has(> .buzy-table-frame) {
  width: 100%;
  min-width: 0;
}

/* ═══ SCROLL AFFORDANCE ═════════════════════════════════════════════
   @since 1.3.4

   Three cues that the table scrolls, because the native scrollbar only appears
   mid-drag on a phone — a reader otherwise sees a clean right edge and assumes
   the table is complete.

     1. Edge fades          (needs JS — class toggles)
     2. One-time hint chip  (needs JS)
     3. Slim always-visible scrollbar (pure CSS, survives without JS)

   Cue 3 is deliberately not dependent on the frame, so a reader with JS
   disabled still gets a permanent visual signal. */

/* ── Frame ─────────────────────────────────────────────────────────
   Created at run time by otn-table-scroll.js. The fades and chip are its
   children, NOT the scroller's: an absolutely-positioned child of a scrolling
   element scrolls away with the content, so a fade pinned to the right edge
   would slide off on the first drag.

   The wrapper's margin transfers to the frame so the overlays cannot sit on
   top of it, and so nothing shifts when JS wraps the element. */
.buzy-table-frame {
  position: relative;
  margin: 2rem 0 2.25rem;
}

.buzy-table-frame > .buzy-table-scroll {
  margin: 0;
}

/* ── 1. Edge fades ─────────────────────────────────────────────────
   Pointer-events none so they never intercept a drag. Both start at zero
   opacity, so with JS absent — or when the table fits — nothing is painted. */
.buzy-table-frame::before,
.buzy-table-frame::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 2.25rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 2;
}

.buzy-table-frame::before {
  left: 1px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient( to right, rgba( 255, 255, 255, 0.96 ), rgba( 255, 255, 255, 0 ) );
}

.buzy-table-frame::after {
  right: 1px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient( to left, rgba( 255, 255, 255, 0.96 ), rgba( 255, 255, 255, 0 ) );
}

.buzy-table-frame.has-scroll-left::before,
.buzy-table-frame.has-scroll-right::after {
  opacity: 1;
}

/* ── 2. One-time hint chip ─────────────────────────────────────────
   Only visible while there is something to the right AND the reader has not
   yet interacted. Absolutely positioned, so it cannot shift the layout. */
.buzy-table-hint {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 3;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0a5f8f;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba( 16, 32, 48, 0.28 );
  opacity: 0;
  transform: translateY( 3px );
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.buzy-table-frame.is-ready.has-scroll-right:not( .hint-dismissed ) .buzy-table-hint {
  opacity: 1;
  transform: none;
}

/* ── 3. Slim scrollbar — CSS only, no JS required ──────────────────
   Always visible rather than overlay-on-drag, which is the whole point. */
.buzy-table-scroll {
  scrollbar-width: thin;                    /* Firefox */
  scrollbar-color: #0e8fd0 transparent;     /* thumb, track */
}

.buzy-table-scroll::-webkit-scrollbar {
  height: 6px;
}

.buzy-table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.buzy-table-scroll::-webkit-scrollbar-thumb {
  background-color: #0e8fd0;
  border-radius: 999px;
}

.buzy-table-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #0a5f8f;
}

@media ( prefers-reduced-motion: reduce ) {
  .buzy-table-frame::before,
  .buzy-table-frame::after,
  .buzy-table-hint {
    transition: none;
  }
}