/*
 Theme Name:   AX Hair Growth
 Description:  GeneratePress child. "Sprout & Honey": a white page, forest ink, sage tints, one honey highlighter. A white navbar (the logo sits inside the bar, a honey pill glides behind the links, search is a pill with live suggestions; it never marks the current page; on phones only the seal shows and it is the menu button), a large title block (no featured image), pine blocks for evidence and verdict. The footer is left to GeneratePress. Needs functions.php (breadcrumb, meta line, end row, Keep researching, navbar logo + links pill + search suggestions + phone menu, source popovers, timeline slider) Typography is left to WordPress / GeneratePress (no fonts or sizes are set here).
 Template:     generatepress
 Version:      2.0.0

 Article blocks (add as Custom HTML or a Group with this class; sample markup: AX30/parts/article.html):
   .ax-key        key takeaways: <div class="ax-key"><p class="ax-key-title">The short version</p><ul>...</ul></div>
   .ax-evidence   <div class="ax-evidence"><p class="ax-ev-title">..</p><ul><li><span class="ax-ev-claim">..</span><span class="ax-ev-grade" data-g="1-4">Strong</span><span class="ax-ev-basis">..</span></li></ul></div>
   .ax-study      <details class="ax-study"><summary>..</summary><dl><dt>..</dt><dd>..</dd></dl></details>
   .ax-timeline   <ol class="ax-timeline" data-scrub><li data-m="0" data-label="Weeks 0 to 4"><strong>..</strong><span>..</span></li>...</ol>  (data-m = month; the slider is added by JS)
   .ax-caution, .ax-method, .sx-verdict (verdict), sup.ax-cite > a[href="#ref-1"] with <ol class="ax-refs"><li id="ref-1"><span class="ax-ref-type">..</span><span class="ax-ref-text">..</span> <a>doi</a></li>
*/

:root {
  --ax-w: 1280px; --ax-wide: 940px; --ax-measure: 680px;
  --ax-ease: cubic-bezier(.22, 1, .36, 1);

  /* Sprout & Honey. The names are historical (plum = ink, citron = highlighter): every rule below reads them. */
  --link: #1a6b49; --link-hover: #0f4a31; --link-dark: #a9e0be;
  --plum: #17382a; --plum-2: #0f271c;
  --lilac: #dbe8d3; --lilac-2: #edf4e6;
  --citron: #f4c04e;
  --ax-bg: #fff; --ax-text: #26382d; --ax-muted: #4a6153;
  --ax-line: #cddcc4; --ax-line-2: #a3bf9d;
  --pills: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 18'%3E%3Crect width='16' height='18' rx='8'/%3E%3Crect x='18' width='16' height='18' rx='8'/%3E%3Crect x='36' width='16' height='18' rx='8'/%3E%3Crect x='54' width='16' height='18' rx='8'/%3E%3C/svg%3E");
}

html { scroll-padding-top: 100px; scrollbar-color: var(--plum) var(--lilac); accent-color: var(--plum); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: var(--citron); color: var(--plum); }
body { background: var(--ax-bg); color: var(--ax-text); }
body :is(a, button, summary, input, [tabindex]):focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 3px var(--citron); }
body :is(.ax-evidence, .sx-verdict) :focus-visible { outline-color: var(--citron); box-shadow: none; }

/* ==========================================================================
   Navigation: Seal. A white bar. The logo is a round seal (forest ring, honey halo) that hangs below the
   bar like a stamp and tilts when touched; once you scroll it settles into the bar as a plain logo.
   The links sit in the middle on a honey pill that glides to the pointer (functions.php draws it).
   Search is a compact pill on the right; focus opens topics and the newest guides.
   The bar never marks the current page. On phones there is no bar at all: only the seal, which is the
   menu button, and the menu pulls out of it.
   ========================================================================== */

body .site-header { position: sticky; top: 0; z-index: 900; margin-bottom: 18px; background: transparent; }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

body #site-navigation {
  position: relative; z-index: 100; box-sizing: border-box; width: auto; max-width: none; margin: 0; padding: 0;
  border: 0; border-bottom: 1px solid var(--ax-line); border-radius: 0; color: var(--plum);
  background: #fff !important; box-shadow: none !important; transition: box-shadow .3s ease;
}
body #site-navigation.ax-scrolled { box-shadow: 0 12px 24px -22px rgb(15 39 28 / 60%) !important; }
body #site-navigation .inside-navigation { position: relative; box-sizing: border-box; display: flex; align-items: center; flex-wrap: nowrap; gap: 0; width: min(1280px, 100%); max-width: none; min-height: 72px !important; margin: 0 auto; padding: 0 28px !important; border: 0; background: transparent !important; box-shadow: none !important; }

/* brand: the logo sits inside the bar (48px) next to the site title; it tilts a little when touched */
body #site-navigation .navigation-branding { display: flex !important; align-items: center; gap: 12px; flex: 0 0 auto; margin: 0 24px 0 0; padding: 0; background: transparent !important; }
body #site-navigation .navigation-branding .main-title { margin: 0; }
body #site-navigation .navigation-branding .main-title a { display: flex; align-items: center; min-height: 56px; color: var(--plum) !important; text-decoration: none; white-space: nowrap; background: transparent !important; }
body #site-navigation .ax-seal { --sr: 0deg; --ss: 1; display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; transform: rotate(var(--sr)) scale(var(--ss)); transition: transform .45s var(--ax-ease); -webkit-tap-highlight-color: transparent; }
body #site-navigation .ax-seal .ax-logo { width: 48px; height: 48px; }
body #site-navigation button.ax-seal { padding: 0; border: 0; font: inherit; color: inherit; cursor: pointer; }
body #site-navigation .ax-seal-btn { display: none; }
body #site-navigation .ax-seal:hover { --sr: -8deg; --ss: 1.08; }
body #site-navigation .ax-seal:focus-visible { outline: 3px solid var(--plum); outline-offset: 4px; }

/* links: all alike, no current-page mark; the honey pill (.ax-pill) glides behind them */
body #site-navigation .main-nav { flex: 1 1 auto; float: none; margin: 0; }
body #site-navigation .main-nav > ul { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 0; }
body #site-navigation .main-nav > ul > li { position: relative; z-index: 1; display: flex; float: none; }
body #site-navigation .main-nav > ul > li > a {
  display: flex; align-items: center; gap: 7px; min-height: 46px; margin: 0; padding: 0 16px; border: 0 !important; border-radius: 12px;
  background: transparent !important; color: var(--plum) !important; text-decoration: none !important; white-space: nowrap;
}
html:not(.ax-js) body #site-navigation .main-nav > ul > li:is(:hover, .sfHover, :focus-within) > a { background: var(--lilac-2) !important; }
body #site-navigation .main-nav > ul > li > a:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; box-shadow: none; }
.ax-pill { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 46px; border-radius: 12px; background: var(--citron); opacity: 0; pointer-events: none; transition: transform .4s var(--ax-ease), width .4s var(--ax-ease), height .4s var(--ax-ease), top .4s var(--ax-ease), opacity .2s ease; }
body #site-navigation .dropdown-menu-toggle { display: inline-flex; padding: 0; color: inherit !important; }
body #site-navigation .dropdown-menu-toggle .gp-icon svg { width: 12px; height: 12px; transition: transform .3s var(--ax-ease); }
body #site-navigation .main-nav > ul > li:is(:hover, .sfHover) > a .dropdown-menu-toggle .gp-icon svg { transform: rotate(180deg); }
.main-nav li.ax-msearch, .main-nav li.ax-mhome { display: none; }

/* search: a compact pill on the right; focus opens the suggestion panel */
body #site-navigation .menu-bar-items { display: flex; align-items: center; flex: 0 0 auto; margin: 0 0 0 12px; padding: 0; border: 0; }
.ax-bsearch { display: none; }
.ax-finder { position: relative; width: 260px; }
:is(.ax-msearch, .ax-finder) form { margin: 0; }
:is(.ax-msearch, .ax-finder) label { box-sizing: border-box; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 10px 0 16px; border-radius: 999px; background: var(--lilac-2); box-shadow: inset 0 0 0 1px var(--ax-line-2); color: var(--plum); cursor: text; transition: background-color .2s ease, box-shadow .2s ease; }
:is(.ax-msearch, .ax-finder) label:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--plum), 0 0 0 4px var(--citron); }
:is(.ax-msearch, .ax-finder) svg { flex: 0 0 auto; width: 20px; height: 20px; }
:is(.ax-msearch, .ax-finder) input[type="search"] { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--plum); font: inherit; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; }
:is(.ax-msearch, .ax-finder) input[type="search"]::placeholder { color: var(--ax-muted); opacity: 1; }
:is(.ax-msearch, .ax-finder) input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.ax-finder kbd { font: inherit; display: grid; place-items: center; flex: 0 0 auto; min-width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--plum); box-shadow: inset 0 0 0 1px var(--ax-line-2); }

.ax-sug { position: absolute; right: 0; top: calc(100% + 14px); z-index: 20; box-sizing: border-box; width: min(600px, 92vw); padding: 22px; border-radius: 26px; background: #fff; color: var(--plum); box-shadow: 0 0 0 1px var(--ax-line), 0 34px 50px -26px rgb(15 39 28 / 50%); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .35s var(--ax-ease), visibility 0s .2s; }
.ax-finder:focus-within .ax-sug { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ax-sug-label { margin: 0 0 10px; color: var(--ax-muted); }
.ax-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ax-chips a { padding: 10px 16px; border-radius: 999px; background: var(--lilac); color: var(--plum); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.ax-chips a:first-child { background: var(--citron); }
.ax-chips a:hover { background: var(--plum); color: var(--lilac-2); }
.ax-rows { display: grid; gap: 2px; }
.ax-rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 12px 14px; border-radius: 16px; color: var(--plum); text-decoration: none; transition: background-color .2s ease; }
.ax-rows a:hover { background: var(--lilac-2); }
.ax-rows small { grid-column: 1; color: var(--ax-muted); }
.ax-rows a::after { content: "\2192"; grid-row: 1 / span 2; grid-column: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--plum); color: var(--citron); transition: transform .3s var(--ax-ease); }
.ax-rows a:hover::after { transform: translateX(3px); }

@media (min-width: 769px) {
  body #site-navigation .menu-toggle { display: none !important; }
  body #site-navigation .menu-bar-items:has(.ax-bsearch) .search-item { display: none; }
  body #site-navigation .ax-bsearch { display: block; margin: 0; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  body #site-navigation .inside-navigation { padding-inline: 18px !important; }
  body #site-navigation .navigation-branding { margin-right: 12px; }
  body #site-navigation .navigation-branding .main-title { display: none; }
  body #site-navigation .main-nav > ul > li > a { padding-inline: 12px; }
  .ax-finder { width: 210px; }
  .ax-finder kbd { display: none; }
}

/* dropdown (menus with sub-items): a white card under the bar */
body #site-navigation .main-nav ul ul { box-sizing: border-box; width: 270px; margin: 0; padding: 6px; border: 0; border-radius: 0 0 20px 20px; background: #fff !important; box-shadow: 0 0 0 1px var(--ax-line), 0 26px 38px -22px rgb(15 39 28 / 55%); }
body #site-navigation .main-nav > ul > li > ul { top: calc(100% + 6px); }
body #site-navigation .main-nav > ul > li > ul::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
body #site-navigation .main-nav ul ul li a { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border: 0 !important; border-bottom: 1px solid rgb(23 56 42 / 12%) !important; border-radius: 0; background: transparent !important; color: var(--plum) !important; text-decoration: none !important; transition: background-color .2s ease; }
body #site-navigation .main-nav ul ul li:last-child a { border-bottom: 0 !important; }
body #site-navigation .main-nav ul ul li:is(:hover, .sfHover, :focus-within) > a { background: var(--lilac-2) !important; }

/* slideout */
body #generate-slideout-menu { background: var(--plum) !important; }
body #generate-slideout-menu .main-nav > ul > li > a { margin: 2px 12px; padding: 14px 20px; border: 0 !important; border-radius: 12px; background: transparent !important; color: var(--lilac) !important; }
body #generate-slideout-menu .main-nav > ul > li:is(:hover, .sfHover, :focus-within) > a { background: rgb(255 255 255 / 9%) !important; color: var(--citron) !important; }
body #generate-slideout-menu .slideout-exit { min-width: 44px; min-height: 44px; color: var(--lilac) !important; }

/* phone: no bar. Only the seal, floating top left; it is the menu button and the menu pulls out of it */
@keyframes ax-dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes ax-pull { from { opacity: 0; transform: translate(14px, -22px) scale(.6); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) {
  body .site-header { height: 0; margin: 0; }
  body:not(.ax-post) .site-content { padding-top: 64px !important; }
  body #site-navigation, body #site-navigation.ax-scrolled { border: 0; background: transparent !important; box-shadow: none !important; pointer-events: none; }
  body #site-navigation .inside-navigation { display: block; width: 100%; min-height: 0 !important; padding: 0 !important; }
  body #site-navigation .navigation-branding { display: block !important; margin: 0; }
  body #site-navigation .navigation-branding .main-title, body #site-navigation .menu-bar-items, body #site-navigation .menu-toggle, body #site-navigation a.ax-seal { display: none !important; }
  body #site-navigation .ax-seal-btn { display: grid; }
  body #site-navigation .ax-seal-btn { --ss: 1; position: absolute; z-index: 3; left: auto; right: 12px; top: 10px; width: 48px; height: 48px; pointer-events: auto; cursor: pointer; background: #fff; box-shadow: 0 0 0 1px var(--ax-line), 0 6px 14px -6px rgb(15 39 28 / 45%); }
  body #site-navigation .ax-seal-btn .ax-logo { width: 34px; height: 34px; }
  body #site-navigation .ax-seal-btn:hover { --sr: -6deg; --ss: 1.06; }
  body #site-navigation.toggled .ax-seal-btn { --sr: -8deg; box-shadow: 0 0 0 2px var(--citron), 0 6px 14px -6px rgb(15 39 28 / 45%); }
  body:has(#site-navigation.toggled)::after { content: ""; position: fixed; inset: 0; z-index: 800; background: rgb(15 39 28 / 45%); pointer-events: none; animation: ax-dim .35s ease both; }

  body #site-navigation .main-nav { display: none; float: none; }
  body #site-navigation.toggled .main-nav { display: block; position: fixed; top: 66px; left: 12px; right: 12px; z-index: 5; box-sizing: border-box; width: auto; max-height: calc(100dvh - 82px); margin: 0; padding: 10px; overflow-y: auto; overscroll-behavior: contain; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--ax-line), 0 30px 50px -20px rgb(15 39 28 / 55%); pointer-events: auto; transform-origin: calc(100% - 24px) -24px; animation: ax-pull .45s var(--ax-ease) both; }
  body.admin-bar #site-navigation.toggled .main-nav { top: 112px; max-height: calc(100dvh - 128px); }
  body #site-navigation .main-nav > ul { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; }
  body #site-navigation .main-nav > ul > li { display: block; width: 100%; float: none; }
  body #site-navigation .main-nav > ul > li > a { justify-content: space-between; min-height: 54px; padding: 0 6px 0 18px; white-space: normal; }
  body #site-navigation .main-nav > ul > li:is(:hover, .sfHover, :focus-within) > a { background: var(--lilac-2) !important; }
  body #site-navigation .main-nav > ul > li > a .dropdown-menu-toggle { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0 !important; }
  body #site-navigation .main-nav > ul > li:has(> .sub-menu.toggled-on) > a .dropdown-menu-toggle .gp-icon svg { transform: rotate(180deg); }
  body #site-navigation .main-nav ul ul { position: static; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  body #site-navigation .main-nav > ul > li > ul::before { display: none; }
  body #site-navigation .main-nav ul ul.toggled-on { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; height: auto; margin: 4px 0 6px; padding: 8px; border-radius: 18px; background: var(--lilac-2) !important; animation: ax-in .3s var(--ax-ease) both; }
  body #site-navigation .main-nav ul ul li { width: auto; min-width: 0; margin: 0; padding: 0; border: 0; }
  body #site-navigation .main-nav ul ul li a { min-height: 48px; padding: 0 10px; }
  body #site-navigation .main-nav ul ul li:nth-child(odd) a { border-right: 1px solid rgb(23 56 42 / 12%) !important; }
  body #site-navigation.toggled .main-nav li.ax-msearch { display: block; padding: 2px 0 8px; }
  body #site-navigation.toggled .main-nav li.ax-mhome { display: block; }
  body #site-navigation .ax-msearch label { width: 100%; height: 52px; }
  .ax-pill { display: none; }
}
@keyframes ax-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* GeneratePress extras: its own mobile toggle bar is replaced by the round button; the bar runs full width */
body .site-header .inside-header { display: block; max-width: none; margin: 0; padding: 0; }
body #mobile-menu-control-wrapper { display: none !important; }
body #site-navigation .main-nav > ul > li.ax-msearch { display: none; }

/* ==========================================================================
   Page shell + compact title block (breadcrumb, H1, byline, one meta line)
   ========================================================================== */

html:has(body:is(.ax-post, .page)), body:is(.ax-post, .page) { overflow-x: hidden; overflow-x: clip; }
body:is(.ax-post, .page) #page { width: 100%; max-width: none; margin: 0; padding: 0; background: transparent; overflow-x: hidden; overflow-x: clip; }
body:is(.ax-post, .page) .site-content { display: block; box-sizing: border-box; width: min(var(--ax-w), calc(100% - 40px)); max-width: none; margin: 0 auto; padding: 0 0 40px; }
body:is(.ax-post, .page) :is(.content-area, .site-main) { width: 100%; max-width: none !important; margin: 0; }
body:is(.ax-post, .page) :is(article.type-post, .inside-article) { margin: 0; padding: 0; background: transparent; border: 0; }

body:is(.ax-post, .page) .inside-article > :is(.entry-header, .entry-content, .ax-end) { box-sizing: border-box; width: min(var(--ax-wide), 100%); max-width: 100%; margin-inline: auto; overflow-wrap: anywhere; }
body:is(.ax-post, .page) .entry-header { margin-block: 34px 28px; padding: 0; border: 0; background: transparent; }
body:is(.ax-post, .page) .entry-title { max-width: none; margin: 0 0 16px; color: var(--plum); text-wrap: balance; }
body.ax-post .entry-header { margin-block: 44px 36px; }
body:is(.ax-post, .page) .entry-header > div[itemscope] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; color: var(--ax-muted); }
body:is(.ax-post, .page) .entry-header > div[itemscope] a { color: var(--link) !important; text-decoration: none; }
body:is(.ax-post, .page) .entry-header > div[itemscope] a:hover { color: var(--link-hover) !important; text-decoration: underline; }
body:is(.ax-post, .page) .entry-header > div[itemscope] img { display: none; }

.ax-crumbs { margin: 0 0 14px; }
.ax-crumbs ol { display: flex; flex-flow: row wrap; align-items: center; gap: 0 8px; margin: 0; padding: 0; list-style: none; }
.ax-crumbs li { display: flex; align-items: center; margin: 0; white-space: nowrap; }
.ax-crumbs a { padding: 10px 0; color: var(--ax-muted); text-decoration: none; }
.ax-crumbs a:hover { color: var(--plum); }
.ax-crumbs li:last-child a { color: var(--plum); }
.ax-crumbs li + li::before { content: ""; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--citron); box-shadow: 0 0 0 1.5px var(--plum); }

.ax-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.ax-meta span { padding: 6px 14px 5px; border-radius: 999px; background: var(--lilac); color: var(--plum); }
.ax-meta .ax-upd { background: var(--citron); }
.ax-meta b { margin-right: .35em; }


/* ==========================================================================
   Article text
   ========================================================================== */

body:is(.ax-post, .page) .entry-content { padding: 0 0 56px; color: var(--ax-text); }
body:is(.ax-post, .page) .entry-content :is(img, picture, video, iframe, embed, object, svg) { max-width: 100%; }
body:is(.ax-post, .page) .entry-content :is(img, video) { height: auto; }
body:is(.ax-post, .page) .entry-content pre { max-width: 100%; overflow-x: auto; }
body:is(.ax-post, .page) .entry-content > :where(p, ul, ol, h2, h3, h4, blockquote, details, dl) { max-width: var(--ax-measure); }
body:is(.ax-post, .page) .entry-content > * { margin-block: 0 1.4em; }
body:is(.ax-post, .page) .entry-content > :first-child { margin-top: 0; }
body:is(.ax-post, .page) .entry-content > :is(ul, ol) { padding-inline-start: 1.35em; }
body:is(.ax-post, .page) .entry-content > :is(ul, ol):not(.ax-timeline) > li { margin-block: .5em; padding-inline-start: .2em; }
body:is(.ax-post, .page) .entry-content > :is(ul, ol) > li::marker { color: var(--plum); }
body:is(.ax-post, .page) .entry-content :is(strong, b) { color: var(--plum); }

body:is(.ax-post, .page) .entry-content :where(p, li, dd, td, figcaption) a:not(.btn, .button, .wp-element-button, .wp-block-button__link, [role=button]):not(:has(img, picture, svg)) { color: var(--link); text-decoration: none; background: none; }
body:is(.ax-post, .page) .entry-content :where(p, li, dd, td, figcaption) a:not(.btn, .button, .wp-element-button, .wp-block-button__link, [role=button]):hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: .18em; background: none; }

body:is(.ax-post, .page) .entry-content > :is(h2, h3, h4) { color: var(--plum); text-wrap: balance; }
body:is(.ax-post, .page) .entry-content > h2 { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; align-items: start; max-width: 18em; margin-block: 3em .8em; }
body:is(.ax-post, .page) .entry-content > h2:first-child { margin-top: 0; }
body:is(.ax-post, .page) .entry-content > h2::before { content: ""; width: 18px; height: 18px; margin-top: .42em; border-radius: 50%; background: var(--citron); box-shadow: 0 0 0 2.5px var(--plum); }
body:is(.ax-post, .page) .entry-content > h3 { margin-block: 1.8em .5em; }
body:is(.ax-post, .page) .entry-content > h4 { margin-block: 1.6em .5em; }

/* citations + source popover */
body:is(.ax-post, .page) .entry-content sup.ax-cite a:not(.btn) { display: inline-block; padding: 3px 5px 2px; border-radius: 6px; background: var(--plum); color: var(--citron) !important; vertical-align: baseline; position: relative; top: -.5em; transition: background-color .2s ease; }
body:is(.ax-post, .page) .entry-content sup.ax-cite a:not(.btn):is(:hover, :focus-visible) { background: var(--citron); color: var(--plum) !important; }
.ax-pop { position: absolute; top: 0; left: 0; z-index: 1500; width: min(340px, calc(100vw - 24px)); padding: 16px 18px; border-radius: 20px; background: var(--plum); color: var(--lilac-2); box-shadow: 0 24px 40px -16px rgb(15 39 28 / 70%); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .18s ease, transform .25s var(--ax-ease), visibility 0s .18s; pointer-events: none; }
.ax-pop.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ax-pop b { display: block; margin-bottom: 4px; color: var(--citron); }

/* featured images are not shown (posts and archives) */
body :is(.featured-image, .page-header-image-single, .post-image) { display: none; }

/* images */
body:is(.ax-post, .page) .entry-content :is(figure.wp-block-image, figure.wp-caption, .wp-block-image) { max-width: var(--ax-wide); margin: 2.2rem auto; text-align: center; }
body:is(.ax-post, .page) .entry-content :is(figure.wp-block-image, .wp-block-image) :is(.alignleft, .alignright, .aligncenter, .alignnone) { float: none; margin-inline: auto; }
body:is(.ax-post, .page) .entry-content :is(figure.wp-block-image, .wp-block-image, figure.wp-caption, p) > :is(img, a) { max-width: 100%; }
body:is(.ax-post, .page) .entry-content :is(figure.wp-block-image, .wp-block-image, figure.wp-caption) img, body:is(.ax-post, .page) .entry-content > p > img:not(.emoji), body:is(.ax-post, .page) .entry-content > img { display: block; max-width: 100%; height: auto; margin-inline: auto; border: 2px solid var(--plum); border-radius: 26px; }
body:is(.ax-post, .page) .entry-content > p:has(> img:only-child, > a:only-child > img) { text-align: center; max-width: var(--ax-wide); margin-block: 2.2rem; }
body:is(.ax-post, .page) .entry-content > :is(.alignleft, .alignright, .aligncenter) { float: none; display: block; margin-inline: auto; }
body:is(.ax-post, .page) .entry-content :is(figure.wp-block-image, .wp-block-image, figure.wp-caption) figcaption { margin-top: .7em; color: var(--ax-muted); text-align: center; }

/* pull quote: a calm marker line */
body:is(.ax-post, .page) .entry-content > blockquote { max-width: var(--ax-measure); margin-block: 1.8em; padding: 20px 24px; border: 0; border-radius: 20px; background: var(--lilac-2); color: var(--plum); }
body:is(.ax-post, .page) .entry-content > blockquote p { margin: 0; color: var(--plum); }
body:is(.ax-post, .page) .entry-content > blockquote p + p { margin-top: .8em; }
body:is(.ax-post, .page) .entry-content > blockquote cite { display: block; width: max-content; max-width: 100%; margin-top: 14px; padding: 5px 12px 4px; border-radius: 999px; background: var(--plum); color: var(--citron); }

/* ==========================================================================
   Blocks
   ========================================================================== */

/* key takeaways: lilac card, citron pill bullets */
body:is(.ax-post, .page) .entry-content > .ax-key { max-width: none; margin-block: 2.6em; padding: 32px 32px 26px; border-radius: 30px; background: var(--lilac); color: var(--plum); }
.ax-key-title { display: inline-block; margin: 0 0 18px; padding: 0; color: var(--plum); }
.ax-key ul { margin: 0; padding: 0; list-style: none; }
.ax-key li { position: relative; margin: 0 0 1em; padding-left: 40px; color: var(--ax-text); }
.ax-key li:last-child { margin-bottom: 0; }
.ax-key li::before { content: ""; position: absolute; left: 0; top: .5em; width: 26px; height: 14px; border-radius: 999px; background: var(--citron); box-shadow: 0 0 0 2px var(--plum); }

/* evidence: plum card, citron pill meter (the data-g on .ax-ev-grade is 1 to 4) */
body:is(.ax-post, .page) .entry-content > .ax-evidence { max-width: none; margin-block: 2.6em; padding: 32px 32px 12px; border-radius: 30px; background: var(--plum); color: var(--lilac-2); }
.ax-ev-title { margin: 0 0 8px; color: var(--lilac-2); }
.ax-evidence ul { margin: 0; padding: 0; list-style: none; }
.ax-evidence li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: 22px 0; border-top: 1px solid rgb(219 232 211 / 24%); }
.ax-evidence li:first-child { border-top: 2px solid var(--citron); }
.ax-ev-claim { color: #fff; }
.ax-ev-grade { --g: 2; display: inline-flex; align-items: center; align-self: start; gap: 12px; color: var(--citron); }
.ax-ev-grade[data-g="1"] { --g: 1; } .ax-ev-grade[data-g="3"] { --g: 3; } .ax-ev-grade[data-g="4"] { --g: 4; }
.ax-ev-grade::before { content: ""; flex: 0 0 auto; width: 76px; height: 18px; background: linear-gradient(90deg, var(--citron) calc(var(--g) * 25%), rgb(255 255 255 / 20%) 0); mask: var(--pills) 0 0 / 100% 100% no-repeat; -webkit-mask: var(--pills) 0 0 / 100% 100% no-repeat; }
.ax-ev-basis { grid-column: 1 / -1; color: #d6e4cf; }
body:is(.ax-post, .page) .ax-evidence sup.ax-cite a:not(.btn) { background: var(--citron); color: var(--plum) !important; }
@media (max-width: 600px) { .ax-evidence li { grid-template-columns: 1fr; } }

/* study: a disclosure that opens the trial's facts */
body:is(.ax-post, .page) .entry-content > .ax-study { border: 2px solid var(--plum); border-radius: 26px; background: #fff; overflow: hidden; }
.ax-study summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 18px 24px; color: var(--plum); list-style: none; cursor: pointer; transition: background-color .2s ease; }
.ax-study summary::-webkit-details-marker { display: none; }
.ax-study summary:hover, .ax-study[open] summary { background: var(--lilac); }
.ax-study summary::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--plum); color: var(--citron); }
.ax-study[open] summary::after { content: "\2212"; }
.ax-study dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 22px; margin: 0; padding: 10px 24px 22px; }
.ax-study :is(dt, dd) { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--ax-line); }
.ax-study :is(dt:last-of-type, dd:last-child) { border-bottom: 0; }
.ax-study dt { color: var(--plum); }
@media (max-width: 520px) { .ax-study dl { grid-template-columns: 1fr; } .ax-study dt { padding-bottom: 0; border: 0; } .ax-study dd { padding-top: 2px; } }

/* timeline: citron nodes on a plum line that fills as you drag the slider */
.ax-scrub { max-width: none; margin: 0 0 14px; padding: 20px 24px 12px; border-radius: 24px; background: var(--lilac); color: var(--plum); }
.ax-scrub > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ax-scrub output { text-align: right; }
.ax-scrub input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 38px; margin: 0; background: transparent; accent-color: var(--plum); cursor: pointer; }
.ax-scrub input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: var(--plum); }
.ax-scrub input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; border: 4px solid var(--plum); border-radius: 50%; background: var(--citron); cursor: grab; box-shadow: 0 6px 10px -4px rgb(15 39 28 / 50%); }
.ax-scrub input[type=range]::-moz-range-track { height: 10px; border-radius: 5px; background: var(--plum); }
.ax-scrub input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: 4px solid var(--plum); border-radius: 50%; background: var(--citron); }
body:is(.ax-post, .page) .entry-content > .ax-timeline { --ax-prog: 0; position: relative; max-width: var(--ax-measure); margin: 8px auto 3em; padding: 0; list-style: none; }
.ax-timeline::before, .ax-timeline::after { content: ""; position: absolute; left: 12px; top: 22px; width: 4px; border-radius: 2px; }
.ax-timeline::before { bottom: 30px; background: var(--plum); }
.ax-timeline::after { height: calc((100% - 52px) * var(--ax-prog)); background: var(--citron); box-shadow: 0 0 0 1px var(--plum); transition: height .45s var(--ax-ease); }
.ax-timeline li { position: relative; display: flex; flex-direction: column; margin: 0; padding: 4px 0 30px 62px; cursor: pointer; }
.ax-timeline li::before { content: ""; position: absolute; z-index: 1; left: 5px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--citron); box-shadow: 0 0 0 3px var(--plum); transition: all .35s var(--ax-ease); }
.ax-timeline li.is-now ~ li::before { background: #fff; }
.ax-timeline li.is-now::before { left: 0; top: 3px; width: 28px; height: 28px; background: var(--citron); box-shadow: 0 0 0 5px var(--plum), 0 0 0 9px var(--ax-bg); }
.ax-timeline li::after { content: attr(data-label); order: -1; align-self: flex-start; margin: 0 0 8px; padding: 4px 12px 3px; border-radius: 999px; background: var(--lilac); color: var(--plum); }
.ax-timeline li.is-now::after { background: var(--citron); box-shadow: 0 0 0 2px var(--plum); }
.ax-timeline strong { display: block; background: none; color: var(--plum); }
.ax-timeline span { display: block; margin-top: 6px; }
.ax-timeline li:not(.is-now) strong { opacity: .78; }

/* tables (block editor): plum header, sideways scroll on phones */
body:is(.ax-post, .page) .entry-content > .wp-block-table { max-width: 100%; margin-block: 2.6em; overflow-x: auto; border: 2px solid var(--plum); border-radius: 26px; background: #fff; scrollbar-width: thin; }
body:is(.ax-post, .page) .entry-content .wp-block-table table { width: 100%; min-width: 560px; margin: 0 !important; border: 0 !important; border-collapse: collapse !important; background: transparent !important; }
body:is(.ax-post, .page) .entry-content .wp-block-table :is(th, td) { padding: 16px 18px !important; border: 0 !important; border-bottom: 1px solid var(--ax-line) !important; background: transparent !important; color: var(--ax-text) !important; text-align: left; vertical-align: top; }
body:is(.ax-post, .page) .entry-content .wp-block-table thead th { background: var(--plum) !important; border-bottom: 0 !important; color: var(--lilac-2) !important; vertical-align: bottom; }
body:is(.ax-post, .page) .entry-content .wp-block-table td:first-child { min-width: 150px; color: var(--plum) !important; }
body:is(.ax-post, .page) .entry-content .wp-block-table tbody tr:nth-child(even) { background: var(--lilac-2); }
body:is(.ax-post, .page) .entry-content .wp-block-table tbody tr:last-child :is(th, td) { border-bottom: 0 !important; }
body:is(.ax-post, .page) .entry-content .wp-block-table figcaption { margin: 0; padding: 12px 18px 14px; border-top: 2px solid var(--plum); background: var(--lilac); }

/* caution: citron block */
body:is(.ax-post, .page) .entry-content > .ax-caution { max-width: var(--ax-measure); padding: 28px 30px 24px; border-radius: 28px; background: var(--citron); color: var(--plum); }
.ax-caution-title { margin: 0 0 12px; color: var(--plum); }
.ax-caution ul { margin: 0; padding-left: 1.2em; }
.ax-caution li { margin: .45em 0; } .ax-caution li::marker { color: var(--plum); }

/* verdict: the plum block, a citron tab, a very large first sentence */
body:is(.ax-post, .page) .entry-content > .sx-verdict { position: relative; max-width: none; margin-block: 3em; padding: 70px clamp(24px, 5vw, 64px) 46px; border: 0; border-radius: 36px; background: var(--plum); color: var(--lilac-2); }
.sx-verdict::before { content: "Verdict"; position: absolute; left: clamp(24px, 5vw, 64px); top: 26px; padding: 8px 18px 7px; border-radius: 999px; background: var(--citron); color: var(--plum); }
.sx-verdict p { max-width: 24em; margin: 0; color: var(--lilac-2); }
.sx-verdict p + p { max-width: 36em; margin-top: 1.3em; color: #d6e4cf; }
.sx-verdict strong { color: var(--lilac-2); background: none; }
.sx-verdict a { color: var(--link-dark); background: none; text-decoration: none; }
.sx-verdict a:hover { text-decoration: underline; text-underline-offset: .18em; }

/* FAQ (Rank Math) */
body:is(.ax-post, .page) .entry-content .rank-math-list { display: grid; max-width: none; margin-block: 1.4em; border-top: 3px solid var(--plum); }
body:is(.ax-post, .page) .entry-content .rank-math-list-item { padding: 0; border: 0; border-bottom: 1.5px solid var(--ax-line-2); background: transparent; }
body:is(.ax-post, .page) .entry-content .rank-math-question { margin: 0 !important; padding: 0 !important; border: 0 !important; }
body:is(.ax-post, .page) .entry-content .rank-math-question::after { display: none !important; }
body:is(.ax-post, .page) .entry-content .rm-faq-question-btn { font: inherit; position: relative; display: block; width: 100%; min-height: 66px; padding: 20px 66px 20px 4px; border: 0; background: radial-gradient(circle 17px at calc(100% - 22px) 50%, var(--plum) 16.5px, #0000 17px) !important; color: var(--plum) !important; text-align: left; cursor: pointer; transition: color .2s ease; }
body:is(.ax-post, .page) .entry-content .rm-faq-question-btn:hover { color: var(--link) !important; }
body:is(.ax-post, .page) .entry-content .rm-faq-question-btn::before, body:is(.ax-post, .page) .entry-content .rm-faq-question-btn::after { content: ""; position: absolute; top: 50%; right: 13px; width: 16px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--citron); transition: transform .3s var(--ax-ease); }
body:is(.ax-post, .page) .entry-content .rm-faq-question-btn::after { transform: rotate(90deg); }
body:is(.ax-post, .page) .entry-content .rm-faq-question-btn[aria-expanded="true"]::after { transform: rotate(0); }
body:is(.ax-post, .page) .entry-content .rank-math-answer { padding: 0 4px 24px; }

/* references */
body:is(.ax-post, .page) .entry-content > .ax-refs { max-width: var(--ax-wide); margin-block: 1.4em; padding: 0; list-style: none; counter-reset: ref; border-top: 3px solid var(--plum); }
.ax-refs li { position: relative; margin: 0; padding: 20px 0 20px 56px; border-bottom: 1.5px solid var(--ax-line-2); counter-increment: ref; }
.ax-refs li::before { content: counter(ref); position: absolute; left: 0; top: 20px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--plum); color: var(--citron); }
.ax-refs li::marker { content: ""; }
.ax-refs li:target { background: var(--lilac-2); }
.ax-ref-type { display: inline-block; margin-bottom: 6px; padding: 3px 10px 2px; border-radius: 999px; background: var(--citron); color: var(--plum); }
.ax-ref-text { display: block; }
.ax-refs a { color: var(--link); text-decoration: none; word-break: break-all; }
.ax-refs a:hover { color: var(--link-hover); text-decoration: underline; }

/* method note */
body:is(.ax-post, .page) .entry-content > .ax-method { max-width: none; margin-top: 3em; padding: 28px 30px; border-radius: 28px; background: var(--lilac); }
.ax-method-title { display: inline-block; margin: 0 0 8px; padding: 0; color: var(--plum); }
.ax-method p:last-child { margin: 0; }

/* method cards: .ax-methods holds .ax-key cards side by side (pill, title, note, lists, steps, tip) */
body:is(.ax-post, .page) .entry-content > .ax-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; max-width: var(--ax-wide); margin-block: 2.4em; }
.ax-methods > .ax-key { margin: 0; padding: 28px 26px 24px; border-radius: 30px; background: var(--lilac); color: var(--plum); }
.ax-methods .ax-pill { display: inline-block; margin-bottom: 12px; padding: 4px 12px 3px; border-radius: 999px; background: var(--citron); box-shadow: inset 0 0 0 2px var(--plum); color: var(--plum); }
.ax-methods .ax-key-title { display: table; margin-bottom: 10px; }
.ax-methods .ax-key-note { margin: 0 0 6px; color: var(--ax-muted); }
.ax-methods h4 { margin: 22px 0 10px; color: var(--plum); }
.ax-methods ol { counter-reset: step; margin: 0; padding: 0; list-style: none; }
.ax-methods ol li { counter-increment: step; }
.ax-methods ol li::before { content: counter(step); display: grid; place-items: center; top: .05em; width: 26px; height: 26px; border-radius: 50%; background: var(--plum); box-shadow: none; color: var(--citron); }
.ax-methods .ax-key-tip { margin: 20px 0 0; padding: 14px 16px; border-radius: 18px; background: var(--citron); color: var(--plum); }
.ax-methods .ax-key-tip strong { margin-right: .3em; }

/* ==========================================================================
   End of entry + "Keep researching"
   ========================================================================== */

.ax-end { margin-top: 24px; }
.ax-endrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin: 0 0 56px; padding-top: 18px; border-top: 4px solid var(--plum); }
.ax-endrow b { color: var(--plum); }
.ax-endrow span { color: var(--ax-muted); }
.ax-endrow a { margin-left: auto; padding: 12px 0; color: var(--link); text-decoration: none; }
.ax-endrow a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: .18em; }
.ax-next h2 { margin: 0 0 20px; padding: 0; border: 0; color: var(--plum); }
.ax-next-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ax-next-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title read" "k read"; align-items: center; column-gap: 20px; row-gap: 4px; padding: 20px 26px; border-radius: 26px; background: var(--lilac); color: var(--plum); text-decoration: none; transition: background-color .25s ease, transform .3s var(--ax-ease); }
.ax-next-card strong { grid-area: title; color: var(--plum); transition: color .25s ease; }
.ax-next-card .k { grid-area: k; justify-self: start; color: var(--ax-muted); transition: color .25s ease; }
.ax-next-card small { grid-area: read; display: flex; align-items: center; gap: 12px; color: var(--ax-muted); transition: color .25s ease; }
.ax-next-card small::after { content: ""; width: 42px; height: 42px; border-radius: 50%; background: var(--plum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4c04e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat; transition: transform .3s var(--ax-ease); }
.ax-next-card:is(:hover, :focus-visible) { background: var(--plum); transform: translateY(-3px); }
.ax-next-card:is(:hover, :focus-visible) :is(strong, .k, small) { color: var(--lilac-2); }
.ax-next-card:is(:hover, :focus-visible) small::after { background-color: var(--citron); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317382a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); transform: translateX(4px); }
@media (max-width: 560px) { .ax-next-card { grid-template-columns: 1fr; grid-template-areas: "k" "title" "read"; padding: 18px 20px; } .ax-next-card small { margin-top: 6px; } }

/* ==========================================================================
   One centred column, no sidebar: posts, pages, home, archives, search
   Text is 680px and centred; tables, images and the plum blocks break out to 940px;
   the title block and the end rows line up with the text.
   ========================================================================== */

body #page { width: 100%; max-width: none; margin: 0; padding: 0; background: transparent; overflow-x: hidden; overflow-x: clip; }
body .site-content { display: block; box-sizing: border-box; width: min(var(--ax-w), calc(100% - 40px)); max-width: none; margin: 0 auto; padding: 0 0 40px; }
body :is(.content-area, .site-main) { float: none; width: 100%; max-width: none !important; margin: 0; }
body :is(#right-sidebar, #left-sidebar, .widget-area.sidebar) { display: none; }

body:is(.ax-post, .page) .inside-article > :is(.entry-header, .ax-end) { width: min(var(--ax-measure), 100%); }
body:is(.ax-post, .page) .entry-content > * { max-width: var(--ax-measure); margin-inline: auto; }
body:is(.ax-post, .page) .entry-content > :is(figure, .wp-block-image, .wp-block-table, .alignwide, .ax-key, .ax-evidence, .sx-verdict, .ax-method, .ax-refs) { max-width: var(--ax-wide); }
body:is(.ax-post, .page) .entry-content > :is(h2, h3, h4, blockquote, .ax-caution, .ax-timeline, .rank-math-list) { max-width: var(--ax-measure); }
body:is(.ax-post, .page) .entry-content > :is(ul, ol) { padding-inline-start: 1.35em; }

/* the desktop bar has no menu button (the button above is for phones only) */
@media (min-width: 769px) { body :is(#site-navigation, #sticky-navigation) .menu-toggle { display: none !important; } }

/* home, categories, search: a page title, then one centred column of cards */
body:is(.blog, .archive, .search) #main { display: grid; gap: 18px; width: min(var(--ax-wide), 100%); margin-inline: auto; }
body:is(.blog, .archive, .search) .site-main > * { margin: 0; }
body:is(.blog, .archive, .search) .page-header { margin-top: 34px; padding: 0; border: 0; background: transparent; }
body:is(.blog, .archive, .search) .page-title { margin: 0; color: var(--plum); }
body:is(.blog, .archive, .search) .page-header .taxonomy-description { margin-top: 10px; color: var(--ax-muted); }
body:is(.blog, .archive, .search) article .inside-article { padding: 30px 34px 26px; border: 0; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--ax-line); }
body:is(.blog, .archive, .search) article .entry-header { margin: 0; }
body:is(.blog, .archive, .search) article .entry-title { margin: 0 0 8px; }
body:is(.blog, .archive, .search) article .entry-title a { color: var(--plum); text-decoration: none; }
body:is(.blog, .archive, .search) article .entry-title a:hover { color: var(--link); }
body:is(.blog, .archive, .search) article :is(.entry-meta, .entry-meta a) { color: var(--ax-muted); }
body:is(.blog, .archive, .search) article .entry-summary p { margin: 14px 0 0; }
body:is(.blog, .archive, .search) article .read-more { display: inline-block; margin-top: 6px; padding: 10px 0; color: var(--link); text-decoration: none; }
body:is(.blog, .archive, .search) article .read-more:hover { color: var(--link-hover); text-decoration: underline; }
body:is(.blog, .archive, .search) article footer.entry-meta { margin-top: 14px; }
body:is(.blog, .archive, .search) .paging-navigation .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
body:is(.blog, .archive, .search) .paging-navigation :is(a, .current) { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--lilac); color: var(--plum); text-decoration: none; }
body:is(.blog, .archive, .search) .paging-navigation :is(a:hover, .current) { background: var(--plum); color: var(--citron); }
@media (max-width: 768px) { body:is(.blog, .archive, .search) article .inside-article { padding: 24px 22px 20px; border-radius: 24px; } }

/* FAQ block without the Rank Math script: every answer stays open, set as a ruled list */
body:is(.ax-post, .page) .entry-content > .wp-block-rank-math-faq-block { margin-block: 1.4em; border-top: 3px solid var(--plum); }
.rank-math-faq-item { padding: 22px 4px; border-bottom: 1.5px solid var(--ax-line-2); }
.rank-math-faq-item .rank-math-question { margin: 0 0 8px; color: var(--plum); }
.rank-math-faq-item .rank-math-answer a { color: var(--link); text-decoration: none; }
.rank-math-faq-item .rank-math-answer a:hover { color: var(--link-hover); text-decoration: underline; }

/* affiliate pieces: top-pick card, product photo, Amazon button */
.ax-buy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--citron); box-shadow: inset 0 0 0 2px var(--plum); color: var(--plum) !important; text-align: center; text-decoration: none !important; transition: transform .25s var(--ax-ease), background-color .2s ease; }
.ax-buy::after { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--ax-ease); }
.ax-buy:hover { background: #fff; transform: translateY(-2px); }
.ax-buy:hover::after { transform: translateX(3px); }
.ax-buy-sm { min-height: 38px; padding: 0 16px; white-space: nowrap; }
.ax-buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 1.4em 0; }
@media (max-width: 520px) { .ax-buy-row .ax-buy { width: 100%; } }
body:is(.ax-post, .page) .entry-content > figure.ax-prod { max-width: var(--ax-measure); margin: 1.6em auto; text-align: center; }
.ax-prod img { display: block; width: min(260px, 70%); height: auto; margin: 0 auto; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 2px var(--plum); }
body:is(.ax-post, .page) .entry-content > .ax-pick { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: center; max-width: var(--ax-wide); margin-block: 2.2em; padding: 24px; border-radius: 30px; background: var(--lilac); }
.ax-pick-img img { display: block; width: 100%; height: auto; border-radius: 22px; background: #fff; }
.ax-pick-label { margin: 0 0 6px; color: var(--ax-muted); }
.ax-pick-name { margin: 0 0 8px; color: var(--plum); }
.ax-pick-body > p { margin: 0 0 .8em; }
.ax-pick .ax-buy-row { margin: 1em 0 0; }
.ax-pick-link { color: var(--link); text-decoration: none; }
.ax-pick-link:hover { color: var(--link-hover); text-decoration: underline; }
@media (max-width: 640px) { body:is(.ax-post, .page) .entry-content > .ax-pick { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; text-align: center; } .ax-pick-img { width: 190px; margin: 0 auto; } .ax-pick .ax-buy-row { justify-content: center; } }

/* below-the-fold end block: skip its layout and paint until it nears the viewport */
.ax-end { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* ==========================================================================
   Responsive + print
   ========================================================================== */


@media (max-width: 768px) {
  body:is(.ax-post, .page) .site-content { width: calc(100% - 32px); }
  body:is(.ax-post, .page) .entry-header { margin-block: 16px 24px; }
  body.ax-post .ax-crumbs { padding-right: 60px; }
  body:is(.ax-post, .page) .entry-content > :is(.ax-key, .ax-evidence) { padding: 26px 20px 22px; border-radius: 24px; }
  body:is(.ax-post, .page) .entry-content > .sx-verdict { border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print { :is(#mobile-header, #site-navigation, #sticky-navigation, .ax-end) { display: none !important; } }