/*
 * Onlyfarms Guides — reading-UX layer.
 * Loaded AFTER the compiled app.css (see mu-plugins/of-guides-ux.php). app.css is
 * hand-edited post-build and full of !important, so rules here are scoped to
 * .single-content and use !important where they must win. Pure progressive
 * enhancement: every guide keeps working if this file or guides-ux.js is missing.
 * Never put inline style="background…" on elements inside .single-content —
 * app.css resets it (`.single-content [style*=background]{background:transparent!important}`).
 */

:root {
  --ofx-accent: #2d64f1;
  --ofx-accent-soft: #7fa2ff;
  --ofx-line: #1c2a4a;
  --ofx-card: #111d37;
  --ofx-card-2: #182444;
  --ofx-text: #b4c6eb;
  --ofx-head: #fbfdff;
  --ofx-muted: #8a9ab5;
}

/* ── Typography & rhythm ─────────────────────────────────────────────── */
/* Text measure only for text blocks: image/video-only paragraphs keep the full column like tables do. */
.single-content > :is(p, ul, ol, h3, h4, blockquote, .ofx-callout):not(:has(img:not(.emoji), iframe, video, picture)),
.single-content > div:not([class]):not(:has(p, ul, ol, table, div, figure, img, iframe)) { max-width: 760px; }
/* :is(ul, ol) li matches app.css `.single-content ul li` (0,1,2) and wins by load order; offer-widget bullets keep their size.
   Bare text-only <div>s (pasted content) read like paragraphs, so they get the same size. */
.single-content p,
.single-content :is(ul, ol):not(.of-offer__bullets) li,
.single-content > div:not([class]):not(:has(p, ul, ol, table, div, figure, img, iframe)) { font-size: 16.5px !important; line-height: 1.72 !important; font-weight: 400 !important; }
.single-content h2,
.single-content .single-content__h2 {
  font-size: 30px !important; line-height: 1.25 !important;
  margin-top: 56px !important; padding-top: 28px !important; border-top: 1px solid var(--ofx-line);
}
.single-content > h2:first-child,
.single-content > .single-content__h2:first-child,
.single-content :is(h2, .single-content__h2):is(:empty, .ofx-empty) { margin-top: 0 !important; padding-top: 0 !important; border-top: 0; }
.single-content h3 { font-size: 21px !important; line-height: 1.3 !important; margin-top: 34px !important; margin-bottom: 12px !important; }
.single-content h3:is(:empty, .ofx-empty) { margin: 0 !important; }
/* No scroll-margin here: the theme already sets html{scroll-padding-top: header + 8px}. */
/* Bold lead-ins in lists looked like links (same blue) — make them plain emphasis (not inside links/CTAs). */
.single-content :is(ul, ol) li :is(strong, b),
.single-content p > :is(strong, b):first-child { color: var(--ofx-head) !important; }
.single-content :is(ul, ol) li a :is(strong, b),
.single-content p > a :is(strong, b) { color: inherit !important; }

@media (max-width: 768px) {
  .single-content h2, .single-content .single-content__h2 { font-size: 24px !important; margin-top: 44px !important; padding-top: 22px !important; }
  .single-content h3 { font-size: 19px !important; margin-top: 28px !important; }
  .single-content p, .single-content :is(ul, ol):not(.of-offer__bullets) li,
  .single-content > div:not([class]):not(:has(p, ul, ol, table, div, figure, img, iframe)) { font-size: 16px !important; }
}

/* ── Tables ──────────────────────────────────────────────────────────── */
/* app.css styles every `tr:first-child` as a header row. For tables that HAVE a
   <thead>, that wrongly turns the first data row into a second header. Only
   tables WITHOUT <thead> use their first row as the header. */
/* It is the first ODD row of tbody, so it gets the theme's odd-row colour (keeps the zebra). */
.single-content table:has(thead) tbody tr:first-child { background: #111d37 !important; }
.single-content table:has(thead) tbody tr:first-child td {
  font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--ofx-head) !important;
}
.single-content td, .single-content th { line-height: 1.5 !important; vertical-align: top; }
/* Left-align header cells, but never override the author's own alignment (older TinyMCE tables centre everything inline). */
.single-content th:not([style*="text-align"]):not([align]),
.single-content table:not(:has(thead)) tr:first-child td:not([style*="text-align"]):not([align]) { text-align: left !important; }

/* Horizontal scroll wrapper added by guides-ux.js (no page-wide overflow on phones). */
.single-content .ofx-table { position: relative; margin: 24px 0 !important; }
.single-content .ofx-table__scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px;
  box-shadow: 0 0 0 1px var(--ofx-line); scrollbar-width: thin;
}
/* app.css gives <table> overflow:hidden, which makes the TABLE the scroll container and breaks the
   sticky first column; the wrapper already clips to its rounded corners. */
.single-content .ofx-table__scroll > table { margin: 0 !important; box-shadow: none !important; overflow: visible !important; }
.single-content .ofx-table__scroll:focus-visible { outline: 2px solid var(--ofx-accent); outline-offset: 2px; }
.single-content .ofx-table__hint {
  display: none; font-size: 12px !important; line-height: 1.4 !important; color: var(--ofx-muted) !important; margin: 0 0 6px; letter-spacing: .02em;
}
.single-content .ofx-table.is-scrollable .ofx-table__hint { display: block; }
.single-content .ofx-table.is-scrollable:not(.is-scrolled) .ofx-table__scroll {
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
          mask-image: linear-gradient(90deg, #000 86%, transparent);
}
@media (max-width: 640px) {
  .single-content .ofx-table.is-scrollable td,
  .single-content .ofx-table.is-scrollable th { min-width: 132px; }
  /* Sticky cells need an OPAQUE fill matching their row (theme zebra: odd #111d37, even 50% #182444 over #0b1533, header #182444). */
  .single-content .ofx-table.is-scrollable tr > :first-child {
    position: sticky; left: 0; z-index: 1; min-width: 108px; background-color: #111d37 !important;
    box-shadow: 1px 0 0 var(--ofx-line);
  }
  .single-content .ofx-table.is-scrollable tr:nth-child(2n) > :first-child { background-color: #121d3c !important; }
  /* Keep the WoW class stripe together with the sticky divider. */
  .single-content .ofx-table.is-scrollable tr[data-ofx-class] > :first-child { box-shadow: inset 3px 0 0 var(--ofx-cls), 1px 0 0 var(--ofx-line); }
  .single-content .ofx-table.is-scrollable thead tr > :first-child,
  .single-content .ofx-table.is-scrollable table:not(:has(thead)) tr:first-child > :first-child { background-color: #182444 !important; }
}

/* ── Ordered lists → numbered steps (rotations, stat priorities) ────── */
/* <ol start=N> is honoured by guides-ux.js (inline counter-reset: ofx N-1). */
.single-content ol { list-style: none !important; counter-reset: ofx; padding: 0 !important; margin: 0 0 24px !important; }
.single-content ol > li {
  counter-increment: ofx; position: relative; padding-left: 40px !important; margin-bottom: 10px !important;
  color: var(--ofx-text) !important;
}
.single-content ol > li::before {
  content: counter(ofx); position: absolute; left: 0; top: .22em; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(45, 100, 241, .16); border: 1px solid rgba(45, 100, 241, .45);
  color: var(--ofx-head); font: 700 13px/24px Inter, sans-serif; text-align: center;
}
.single-content ol + :is(h3, h4) { margin-top: 30px !important; }

/* ── Wowhead links: native icons + item quality colours (icons restored by JS) ── */
/* Older guides have Wowhead links WITHOUT rel; app.css only resets links with [rel], so tooltips.js's inline
   background turns them into white "button" chips (app.css a[style*=background]). Give them the normal link
   look. Must stay BEFORE the quality colours (same specificity). JS keeps padding-left:21px inline for the icon. */
.single-content a[href*="wowhead.com"]:not([rel]) {
  display: inline !important; padding: 0 !important; border-radius: 0 !important; background-color: transparent !important;
  font-weight: 600 !important; color: #8bb4ff !important; text-decoration: underline !important;
  text-decoration-thickness: 1px !important; text-underline-offset: 3px !important;
}
.single-content a[href*="wowhead.com"]:not([rel]):hover { color: #fff !important; text-decoration-thickness: 2px !important; }
/* One size for every Wowhead link (app.css a[style*=background] shrank iconized ones to 14px). */
.single-content a[href*="wowhead.com"] { font-size: inherit !important; }
.single-content a[href*="wowhead.com"].q0 { color: #b3b3b3 !important; }
.single-content a[href*="wowhead.com"].q1 { color: #fbfdff !important; }
.single-content a[href*="wowhead.com"].q2 { color: #3fe85a !important; }
.single-content a[href*="wowhead.com"].q3 { color: #4aa3ff !important; }
.single-content a[href*="wowhead.com"].q4 { color: #c07bff !important; }
.single-content a[href*="wowhead.com"].q5 { color: #ff9a3d !important; }
.single-content a[href*="wowhead.com"].q6 { color: #e5cc80 !important; }

/* ── TOC: fits short laptop screens; active item highlighted by JS ───── */
/* No overscroll containment: the wheel over a TOC that fits must still scroll the page. */
.article-toc { max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; }

/* ── Reading progress bar ────────────────────────────────────────────── */
.ofx-progress {
  position: fixed; left: 0; right: 0; top: 73px; height: 3px; z-index: 60; pointer-events: none;
  background: transparent;
}
.ofx-progress__bar { height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--ofx-accent), var(--ofx-accent-soft)); }

/* ── Heading anchors ─────────────────────────────────────────────────── */
/* The "#" is generated content so it never enters the heading's text or accessible name. */
.single-content .ofx-anchor {
  margin-left: 10px; font-size: .7em; font-weight: 700; color: var(--ofx-muted) !important; text-decoration: none !important;
  opacity: 0; transition: opacity .15s; cursor: pointer; background: none !important; border: 0; padding: 0 !important; vertical-align: middle;
}
.single-content .ofx-anchor::before { content: "#"; }
.single-content .ofx-anchor.is-copied::before { content: "✓"; }
.single-content :is(h2, h3):hover .ofx-anchor { opacity: 1; }
@media (hover: none) { .single-content .ofx-anchor { display: none; } }

/* ── Key takeaways card ──────────────────────────────────────────────── */
.single-content .ofx-takeaways {
  max-width: 760px; margin: 8px 0 28px !important; padding: 18px 20px 6px 20px !important; border-radius: 12px;
  background: linear-gradient(180deg, rgba(45, 100, 241, .12), rgba(45, 100, 241, .04)) !important;
  border: 1px solid rgba(45, 100, 241, .35); border-left: 4px solid var(--ofx-accent);
}

/* ── Callouts (Tip / Note / Warning paragraphs) ──────────────────────── */
.single-content .ofx-callout {
  padding: 14px 16px 14px 18px !important; border-radius: 10px; border-left: 4px solid var(--ofx-accent);
  background: rgba(45, 100, 241, .08) !important; margin: 18px 0 !important;
}
.single-content .ofx-callout--tip { border-left-color: #2fbf71; background: rgba(47, 191, 113, .08) !important; }
.single-content .ofx-callout--warn { border-left-color: #f0a336; background: rgba(240, 163, 54, .09) !important; }

/* ── Tier badges (S/A/B/C/D) ─────────────────────────────────────────── */
.single-content .ofx-tier {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 8px; font: 800 15px/1 Inter, sans-serif; color: #0b1020 !important; letter-spacing: 0;
}
.single-content .ofx-tier--s { background-color: #ffcf4a !important; }
.single-content .ofx-tier--a { background-color: #c07bff !important; }
.single-content .ofx-tier--b { background-color: #5b8cff !important; }
.single-content .ofx-tier--c { background-color: #3fcf8e !important; }
.single-content .ofx-tier--d, .single-content .ofx-tier--f { background-color: #8a9ab5 !important; }
.single-content :is(h2, h3) > .ofx-tier { margin-right: 10px; vertical-align: 3px; height: 28px; min-width: 28px; font-size: 14px; }

/* ── WoW class colours (left stripe on class rows / class headings) ──── */
.single-content [data-ofx-class] { --ofx-cls: transparent; }
.single-content tr[data-ofx-class] > td:first-child { box-shadow: inset 3px 0 0 var(--ofx-cls); }
.single-content h3[data-ofx-class] { border-left: 4px solid var(--ofx-cls); padding-left: 12px; }
.single-content [data-ofx-class="death-knight"] { --ofx-cls: #c41e3a; }
.single-content [data-ofx-class="demon-hunter"] { --ofx-cls: #a330c9; }
.single-content [data-ofx-class="druid"] { --ofx-cls: #ff7c0a; }
.single-content [data-ofx-class="evoker"] { --ofx-cls: #33937f; }
.single-content [data-ofx-class="hunter"] { --ofx-cls: #aad372; }
.single-content [data-ofx-class="mage"] { --ofx-cls: #3fc7eb; }
.single-content [data-ofx-class="monk"] { --ofx-cls: #00ff98; }
.single-content [data-ofx-class="paladin"] { --ofx-cls: #f48cba; }
.single-content [data-ofx-class="priest"] { --ofx-cls: #ffffff; }
.single-content [data-ofx-class="rogue"] { --ofx-cls: #fff468; }
.single-content [data-ofx-class="shaman"] { --ofx-cls: #2f8fff; }
.single-content [data-ofx-class="warlock"] { --ofx-cls: #8788ee; }
.single-content [data-ofx-class="warrior"] { --ofx-cls: #c69b6d; }

/* ── Gamepad buttons as key chips (FC guides) ────────────────────────── */
.single-content kbd.ofx-key {
  display: inline-block; min-width: 22px; padding: 1px 6px; margin: 1px 1px; border-radius: 6px; text-align: center;
  font: 700 12px/18px Inter, sans-serif; color: var(--ofx-head); background-color: #22325c !important;
  border: 1px solid #34487a; box-shadow: 0 1px 0 #0b1226;
}
.single-content .ofx-keyrun { white-space: nowrap; } /* an arrow sequence (↑→) never wraps mid-input */

/* ── FAQ accordion ───────────────────────────────────────────────────── */
.single-content .ofx-faq { max-width: 760px; margin: 8px 0 24px; }
.single-content .ofx-faq__tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.single-content .ofx-faq__toggle {
  font: 600 13px Inter, sans-serif; color: var(--ofx-accent-soft); background: none !important; border: 0; cursor: pointer; padding: 4px 0 !important;
}
.single-content details.ofx-faq__item {
  border: 1px solid var(--ofx-line); border-radius: 12px; margin-bottom: 10px; background: rgba(24, 36, 68, .45) !important; overflow: hidden;
}
.single-content details.ofx-faq__item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 18px; color: var(--ofx-head); font: 700 17px/1.4 Inter, sans-serif;
}
.single-content details.ofx-faq__item > summary::-webkit-details-marker { display: none; }
/* The question keeps its heading element inside <summary> (outline / screen-reader heading nav). */
.single-content details.ofx-faq__item > summary > .ofx-faq__q {
  margin: 0 !important; padding: 0 !important; border: 0 !important; font: inherit !important; color: inherit !important;
}
.single-content details.ofx-faq__item > summary::after {
  content: "+"; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; text-align: center; font: 700 18px/22px Inter, sans-serif;
  color: var(--ofx-accent-soft); border: 1px solid #2a3c66;
}
.single-content details.ofx-faq__item[open] > summary::after { content: "−"; }
.single-content .ofx-faq__body { padding: 0 18px 6px; }
.single-content .ofx-faq__body > :last-child { margin-bottom: 12px !important; }

/* ── Mobile: floating "Contents · ↑" + bottom sheet ──────────────────── */
.ofx-fab {
  position: fixed; right: 16px; bottom: 18px; z-index: 70; display: none; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px; border: 1px solid #34487a; background: rgba(17, 29, 55, .96);
  color: #fbfdff; font: 700 14px/1 Inter, sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); cursor: pointer;
  /* Hidden = not clickable/focusable either (it used to swallow taps on the promo banner under it). */
  transform: translateY(12px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}
.ofx-fab.is-visible { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* The theme shows the sidebar TOC from 901px, so the button covers everything up to and including 900px. */
@media (max-width: 900px) { .ofx-fab { display: inline-flex; } }
html.ofx-lock { overflow: hidden !important; }
/* Above the fixed site header (z-index 9999) so the sheet is truly modal. */
.ofx-sheet { position: fixed; inset: 0; z-index: 10000; display: none; }
.ofx-sheet.is-open { display: block; }
.ofx-sheet__backdrop { position: absolute; inset: 0; background: rgba(4, 8, 18, .6); }
.ofx-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 72vh; overflow-y: auto; padding: 18px 18px 22px;
  background: #111d37; border-radius: 18px 18px 0 0; border-top: 1px solid #2a3c66; box-shadow: 0 -12px 32px rgba(0, 0, 0, .5);
}
.ofx-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #fbfdff; font: 800 17px Inter, sans-serif; }
.ofx-sheet__close { background: none; border: 0; color: #8a9ab5; font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.ofx-sheet ul { list-style: none; margin: 0; padding: 0; }
.ofx-sheet li a {
  display: block; padding: 11px 12px; border-radius: 10px; color: #b4c6eb; text-decoration: none; font: 500 15px/1.35 Inter, sans-serif;
}
.ofx-sheet li.active a { background: rgba(45, 100, 241, .16); color: #fbfdff; }
.ofx-sheet__top {
  width: 100%; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid #34487a; background: #182444;
  color: #fbfdff; font: 700 14px Inter, sans-serif; cursor: pointer;
}

/* ── "Updated" freshness badge next to the publish date ──────────────── */
.ofx-updated { color: #3fcf8e; }

/* ── Related guides: keep inside the page gutter ─────────────────────── */
.related-guides { box-sizing: border-box; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
@media (max-width: 768px) { .related-guides { padding-left: 16px; padding-right: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .ofx-fab, .single-content .ofx-anchor { transition: none; }
}