/* ==========================================================================
   AnimalsCell — ac-article.css
   Premium single-post article template. Scoped to body.single-post only.
   Enqueued only when is_singular('post') — see functions.php.
   Reuses/restyles existing infrastructure (Ad-Ace widgets, LuckyWP TOC,
   Kadence related-posts carousel, ESSB) rather than duplicating it.

   STRUCTURAL REDESIGN (2026-09-16): the article header (breadcrumb,
   label, H1, meta) is now rendered by ac_article_render_full_header()
   at kadence_hero_header — a genuine full-width sibling of #primary,
   confirmed by reading single.php directly (do_action('kadence_hero_
   header') fires before <div id="primary"> even opens). This replaces
   the old width:100vw + margin-left:calc(50% - 50vw) breakout, which
   only "worked" by faking width from inside a narrower, off-center
   container (#main, which sits left of the sidebar and is therefore
   never centered in the viewport — the root cause of an earlier
   clipping bug). No viewport math is needed here at all, because this
   content is never nested inside the narrower grid to begin with.

   Featured image, Share and Topics render as real DOM siblings directly
   inside .entry-content-wrap, BEFORE the (now content-empty, hidden)
   native <header> — so all three sit inside the grid's actual main
   column (~892px), not the old ~1240px header band, and the article
   body genuinely cannot start before the featured image (they're
   siblings in that literal order).

   Structure: 1 header (full-width, own hook), 2 hero-media, 2c share+
   topics, 3 layout grid, 4 typography, 5 TOC, 6 callouts, 7 sidebar/
   ads, 8 trust block, 9 prev/next, 10 related-at-end, 11 responsive.
   ========================================================================== */

/* 1. Article header — full-width, natural block (no breakout math). ------ */
body.single-post .ac-article-header {
  max-width:1400px;
  margin-inline:auto;
  padding-inline:40px;
  padding-top:32px;
  box-sizing:border-box;
}
body.single-post .ac-article-breadcrumbs {
  display:block;
  margin-bottom:10px;
  font-size:13px;
  color:#627D98;
}
body.single-post .ac-article-breadcrumbs a {
  color:#627D98;
  text-decoration:none;
}
body.single-post .ac-article-breadcrumbs a:hover,
body.single-post .ac-article-breadcrumbs a:focus-visible {
  color:#0F766E;
  text-decoration:underline;
}
body.single-post .ac-article-breadcrumbs span[aria-hidden] {
  margin:0 6px;
  opacity:.6;
}
body.single-post .ac-article-label {
  display:block;
  margin-top:0;
  margin-bottom:0;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0F766E;
}
body.single-post .ac-article-header .entry-title {
  font-family:Manrope,var(--global-fallback-font,sans-serif);
  font-size:clamp(42px,3.6vw,58px)!important;
  line-height:1.04!important;
  font-weight:700!important;
  letter-spacing:-.9px!important;
  color:#102A43!important;
  max-width:1050px;
  margin:14px 0 24px!important;
}
body.single-post .ac-article-header .entry-meta {
  font-size:14px;
  line-height:1.5;
  color:#627D98;
  margin-bottom:32px;
  margin-top:0;
}
body.single-post .ac-article-header .entry-meta .meta-label {
  display:none;
}
body.single-post .entry.single-entry {
  box-shadow:none;
}
/* Kadence's native title/meta rendering (which included a redundant
   category chip alongside the real title+meta) is fully removed
   server-side via remove_action() — the article's own <header> now
   renders as an empty shell (no schema/content lost: confirmed by
   reading Kadence's real renderer, it was only the_title() plus a
   separate meta template, both reproduced above/via get_template_part
   in ac_article_render_full_header()). Hidden entirely rather than
   left as dead empty markup. */
body.single-post .entry-content-wrap > .entry-header.post-title {
  display:none;
}

/* 2. Hero image — Kadence's native featured-image hero is disabled
      site-wide for posts (kadence_post_layout filter, functions.php).
      Selector kept (dormant, harmless) in case ever re-enabled. */
body.single-post .content-wrap > .post-thumbnail .post-thumbnail-inner {
  aspect-ratio:16/9;
  max-height:620px;
  overflow:hidden;
  border-radius:10px;
}
body.single-post .content-wrap > .post-thumbnail .post-thumbnail-inner img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
/* 2b. Featured image — now always shown (see ac_article_render_hero_
      media() in functions.php), sized to the FULL main-column width
      rather than a text-width cap, so it reads as genuine "large media"
      per this pass's brief. The old conditional hero-ad-or-image slot
      is retired: the square ad now lives in its own dedicated sidebar
      position (real Ad-Ace widget, see section 7). */
body.single-post .ac-article-hero-media {
  margin:0 0 24px;
  width:100%;
}
body.single-post .ac-article-hero-media__img {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:8px;
}

/* 2c. Share. Topics is fully removed from single-post presentation this
   pass (ac_article_render_topics() still exists and still runs — real
   category/tag/taxonomy data in WordPress is completely untouched —
   only its rendered wrapper is hidden here, collapsing to zero height
   so no empty spacing is left behind). Share is now one compact
   horizontal row directly under the featured image: the old layout
   stacked the "Share" label above the icons (block-level label with its
   own margin-bottom) and let the icon row wrap/spread, which is what
   made this area feel tall and spread-out; both are fixed by making
   .ac-article-share itself a flex row (label + icons on one line) and
   pinning the icon row's justify-content to flex-start so icons group
   on the left instead of spreading via ESSB's own flex defaults. */
body.single-post .ac-article-topics {
  display:none;
}
body.single-post .ac-article-share {
  max-width:500px;
  margin:0 auto;
  padding:40px 0;
  border-top:1px solid rgba(16,42,67,.10);
  text-align:center;
}
body.single-post .ac-article-share__label {
  display:block;
  margin:0 0 20px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#334E68;
}
/* Real ESSB output, restyled: plain 1px outline circles, centered as a
   group, no colored network backgrounds, no shadow. Padding-based
   interaction area so ESSB's real icon artwork is never clipped
   regardless of native size. */
body.single-post .ac-article-share__buttons .essb_links_list {
  display:flex!important;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center!important;
  gap:13px!important;
  list-style:none!important;
  margin:0!important;
  padding:0!important;
}
body.single-post .ac-article-share__buttons .essb_item {
  margin:0!important;
  flex:0 0 auto;
}
body.single-post .ac-article-share__buttons .essb_item a {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:46px!important;
  height:46px!important;
  padding:0!important;
  border-radius:50%!important;
  background:#FFFFFF!important;
  border:1px solid #CBD8DE!important;
  color:#102A43!important;
  line-height:1;
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
body.single-post .ac-article-share__buttons .essb_item a:hover,
body.single-post .ac-article-share__buttons .essb_item a:focus-visible {
  border-color:#0F766E!important;
  color:#0F766E!important;
  background:#FFFFFF!important;
  transform:translateY(-1px);
}
body.single-post .ac-article-share__buttons .essb_item a:focus-visible {
  outline:2px solid #0F766E;
  outline-offset:3px;
}
body.single-post .ac-article-share__buttons .essb_network_name {
  display:none!important;
}
/* X (formerly Twitter): ESSB's own icon glyph is neutralized (covers
   both an icon-font glyph and a sprite background, whichever it uses)
   and replaced with a real X mark drawn via CSS mask so it inherits the
   same currentColor hover transition as the other icons. The button's
   real link/aria text already reads "X" (see ac_article_render_share()
   in functions.php); this only changes the glyph shown inside it. */
body.single-post .ac-article-share__buttons .essb_link_twitter .essb_icon {
  font-size:0!important;
  color:transparent!important;
  background-image:none!important;
  position:relative;
}
body.single-post .ac-article-share__buttons .essb_link_twitter .essb_icon::before {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%);
  background-color:#102A43;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2.1h3.3l-7.2 8.2L23.4 22h-6.6l-5.2-6.8L5.6 22H2.3l7.7-8.8L1.6 2.1h6.8l4.7 6.2 5.8-6.2Zm-1.1 18h1.8L7.3 4H5.4l12.4 16.1Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2.1h3.3l-7.2 8.2L23.4 22h-6.6l-5.2-6.8L5.6 22H2.3l7.7-8.8L1.6 2.1h6.8l4.7 6.2 5.8-6.2Zm-1.1 18h1.8L7.3 4H5.4l12.4 16.1Z'/%3E%3C/svg%3E");
}
body.single-post .ac-article-share__buttons .essb_link_twitter a:hover .essb_icon::before,
body.single-post .ac-article-share__buttons .essb_link_twitter a:focus-visible .essb_icon::before {
  background-color:#0F766E;
}
/* ESSB is already configured site-wide to auto-insert its own share row
   at the bottom of post content (data-essb-position="bottom") — a
   pre-existing setting, not something this project added. Hidden here
   only (visually) so the block above stays the single visible share
   block; the ESSB setting itself is untouched. */
body.single-post .entry-content [data-essb-position="bottom"] {
  display:none!important;
}
/* Native post-tag output ("#home-dog" etc.) is internal curation
   metadata, never meant for public display — hidden presentation-only,
   the taxonomy term itself is left completely intact in WordPress. */
body.single-post .entry-footer .entry-tags {
  display:none;
}
/* 3. Layout grid ------------------------------------------------------------
   Sidebar narrowed 380px → 320px and gap 48px → 40px this pass: 320px
   comfortably fits the sidebar's real content (a 300px-max-width ad,
   Related Guides) without leftover dead space, and frees width for the
   main column so the article reads as clearly dominant. Outer 1400px
   max-width / 40px padding and the separate ~1240px header band are
   unchanged (out of scope this pass). #main and <aside> stay a simple
   2-column grid; the article body stays capped at 800px internally
   (section 4) regardless of how wide the main column itself grows. */
body.single-post .content-container.site-container {
  max-width:1400px!important;
  padding-left:40px;
  padding-right:40px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:40px;
  align-items:start;
}
body.single-post #primary.content-area {
  margin-top:2rem;
  margin-bottom:3.5rem;
}
body.single-post #main.site-main {
  min-width:0;
}
body.single-post .content-wrap {
  max-width:none;
}
body.single-post .primary-sidebar {
  min-width:0;
}
body.single-post .primary-sidebar .sidebar-inner-wrap {
  display:flex;
  flex-direction:column;
  gap:28px;
}

body.single-post .entry-content-wrap {
  padding:0;
}

/* 4. Article body typography ---------------------------------------------- */
body.single-post .entry-content,
body.single-post .entry-content p,
body.single-post .entry-content li,
body.single-post .entry-content span {
  font-family:Manrope,var(--global-fallback-font,sans-serif)!important;
}
body.single-post .entry-content {
  max-width:800px;
  font-size:18px;
  line-height:1.76;
  color:#334E68;
}
body.single-post .entry-content p {
  margin:0 0 1.35em;
  font-size:inherit!important;
  line-height:inherit!important;
  color:inherit!important;
}
body.single-post .entry-content h2 {
  font-size:34px!important;
  line-height:1.16!important;
  font-weight:700!important;
  letter-spacing:-.35px!important;
  color:#102A43!important;
  margin-top:52px!important;
  margin-bottom:18px!important;
}
body.single-post .entry-content h3 {
  font-size:25px!important;
  line-height:1.24!important;
  font-weight:700!important;
  color:#102A43!important;
  margin-top:36px!important;
  margin-bottom:14px!important;
}
body.single-post .entry-content ul,
body.single-post .entry-content ol {
  padding-left:24px;
  margin:0 0 1.35em;
}
body.single-post .entry-content li {
  margin-bottom:10px;
  font-size:inherit;
  line-height:1.6;
}
body.single-post .entry-content a {
  color:#0F766E;
  text-decoration:underline;
  text-decoration-color:#B7D6D1;
  text-underline-offset:2px;
}
body.single-post .entry-content a:hover,
body.single-post .entry-content a:focus-visible {
  color:#0B5D56;
}
body.single-post .entry-content img {
  max-width:100%;
  height:auto;
  border-radius:8px;
}
body.single-post .entry-content .ac-article-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 28px 0 34px;
}
body.single-post .entry-content .ac-article-table-scroll table.ac-article-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  border: 1px solid #D8E3E6;
  border-radius: 9px;
  overflow: hidden;
}
body.single-post .entry-content .ac-article-table-scroll table.ac-article-table thead th {
  background: #F1F7F6;
  color: #102A43;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .01em;
  padding: 15px 18px;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 1px solid #CBDADB;
}
body.single-post .entry-content .ac-article-table-scroll table.ac-article-table tbody td {
  padding: 15px 18px;
  color: #334E68;
  vertical-align: top;
  border-bottom: 1px solid #E3EAEC;
}
body.single-post .entry-content .ac-article-table-scroll table.ac-article-table tbody tr:last-child td {
  border-bottom: none;
}
body.single-post .entry-content .ac-article-table-scroll table.ac-article-table tbody tr:nth-child(even) td {
  background: #FAFCFC;
}
body.single-post .entry-content .ac-article-table-scroll table.ac-article-table tbody td:first-child {
  font-weight: 600;
  color: #102A43;
}
body.single-post .entry-content .ac-article-table-scroll table.ac-table--compare {
  min-width: 620px;
}
body.single-post .entry-content .ac-article-table-scroll table.ac-table--compare th:nth-child(1),
body.single-post .entry-content .ac-article-table-scroll table.ac-table--compare td:nth-child(1) {
  width: 25%;
}
body.single-post .entry-content .ac-article-table-scroll table.ac-table--compare th:nth-child(2),
body.single-post .entry-content .ac-article-table-scroll table.ac-table--compare td:nth-child(2),
body.single-post .entry-content .ac-article-table-scroll table.ac-table--compare th:nth-child(3),
body.single-post .entry-content .ac-article-table-scroll table.ac-table--compare td:nth-child(3) {
  width: 37.5%;
}
@media (max-width: 767px) {
  body.single-post .entry-content .ac-article-table-scroll table.ac-article-table {
    font-size: 14.5px;
  }
  body.single-post .entry-content .ac-article-table-scroll table.ac-article-table thead th,
  body.single-post .entry-content .ac-article-table-scroll table.ac-article-table tbody td {
    padding: 12px 14px;
  }
  body.single-post .entry-content .ac-article-table-scroll.ac-article-table-scroll--wide::after {
    content: "Swipe to view table \2192";
    display: block;
    font-size: 12px;
    color: #829AB1;
    text-align: right;
    margin-top: 6px;
  }
}
body.single-post .entry-content iframe,
body.single-post .entry-content embed,
body.single-post .entry-content video {
  max-width:100%;
}

/* 5. Table of Contents (LuckyWP TOC — restyled, not rebuilt) --------------- */
body.single-post .lwptoc {
  max-width:100%!important;
  background:#F7FAF9!important;
  border:1px solid #DCE6E3!important;
  border-radius:8px!important;
  padding:18px 22px!important;
  margin:28px 0 38px!important;
  box-shadow:none!important;
}
body.single-post .lwptoc_header {
  margin-bottom:2px;
}
/* Visually swap the plugin's own "Contents" label for "In This Article"
   without touching LuckyWP's settings/markup. */
body.single-post .lwptoc_title {
  font-size:0!important;
  line-height:0!important;
}
body.single-post .lwptoc_title::before {
  content:"In This Article";
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#0F766E;
}
body.single-post .lwptoc_toggle_label {
  font-size:12px!important;
  color:#829AB1!important;
  text-decoration:none!important;
}
body.single-post .lwptoc_toggle_label:hover {
  color:#0F766E!important;
}
body.single-post .lwptoc_item {
  margin-bottom:7px;
}
body.single-post .lwptoc_item:last-child {
  margin-bottom:0;
}
body.single-post .lwptoc_item_number {
  color:#8A9BA8!important;
  margin-right:4px;
}
body.single-post .lwptoc_item a {
  color:#102A43!important;
  font-size:15.5px!important;
  line-height:1.45!important;
  text-decoration:none!important;
}
body.single-post .lwptoc_item a:hover,
body.single-post .lwptoc_item a:focus-visible {
  color:#0F766E!important;
}

/* 6. Callouts — available classes for future editorial use ---------------- */
body.single-post .ac-article-callout {
  background:#EEF6F3;
  border-left:3px solid #0F766E;
  padding:22px 24px;
  border-radius:8px;
  margin:28px 0;
  box-shadow:none;
}
body.single-post .ac-article-callout__label {
  display:block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0F766E;
}
body.single-post .ac-article-warning {
  background:#FBF6EE;
  border-left:3px solid #B7791F;
  padding:22px 24px;
  border-radius:8px;
  margin:28px 0;
  box-shadow:none;
}
body.single-post .ac-article-warning__label {
  display:block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8A5A17;
}
body.single-post .ac-article-sources {
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid #DCE6E3;
}
body.single-post .ac-article-sources h2 {
  font-size:22px!important;
  margin-top:0!important;
}
body.single-post .ac-article-sources ol {
  font-size:14.5px;
  color:#627D98;
}
/* 7. Right sidebar / ad slots ----------------------------------------------
   Structure: Share → ad slot 1 → Related Guides → ad slot 2 (sticky).
   VERIFIED (checked every one of the site's 7 Ad-Ace ads' own postmeta,
   not assumed): NO genuine fixed-size 300x300/250x250 unit exists
   anywhere in the real ad inventory. widget1/7332 and widget2/7333
   (the two used here) are both real Google AdSense "auto/responsive"
   units (width=0, height=0 in Ad-Ace's own config) — there is nothing
   to distort into a square, and forcing aspect-ratio:1/1 on a
   responsive/auto AdSense container would squeeze its real creative
   into a shape Google's own algorithm didn't choose, which is exactly
   what this pass was asked NOT to do. So: no aspect-ratio is forced
   here — the container is just centered with a 300px max-width (a
   reasonable width hint for the "auto" format, not a forced shape),
   and the ad renders at whatever height AdSense's own algorithm
   produces for that width. A genuine dedicated 300x300/250x250 AdSense
   display unit needs to be created in Ad-Ace's own admin before a real
   square ad can render here — flagged in the report, not fabricated.
   No 600px-tall reservation exists anywhere in this file. ------------- */
body.single-post .primary-sidebar .widget {
  background:transparent;
  border:0;
  padding:0;
  margin:0;
}
body.single-post .primary-sidebar .widget-title {
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#102A43;
  margin:0 0 16px;
}
body.single-post .ac-ad-slot__label {
  display:block;
  margin-bottom:10px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8A9BA8;
  text-align:center;
}
body.single-post #adace_ads_widget-600060009,
body.single-post #adace_ads_widget-600060010 {
  display:flex;
  flex-direction:column;
  align-items:center;
}
body.single-post #adace_ads_widget-600060010 {
  position:sticky;
  top:110px;
  margin-top:32px;
}
body.single-post .ac-sidebar-related__list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.single-post .ac-sidebar-related__item {
  padding-top:14px;
  border-top:1px solid #DCE6E3;
}
body.single-post .ac-sidebar-related__item:first-child {
  padding-top:0;
  border-top:0;
}
body.single-post .ac-sidebar-related__link {
  display:flex;
  gap:14px;
  align-items:flex-start;
  text-decoration:none;
}
body.single-post .ac-sidebar-related__thumb {
  width:82px;
  height:70px;
  object-fit:cover;
  border-radius:6px;
  flex-shrink:0;
}
body.single-post .ac-sidebar-related__body {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
body.single-post .ac-sidebar-related__label {
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#0F766E;
}
body.single-post .ac-sidebar-related__title {
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  color:#102A43;
}
body.single-post .ac-sidebar-related__link:hover .ac-sidebar-related__title,
body.single-post .ac-sidebar-related__link:focus-visible .ac-sidebar-related__title {
  color:#0F766E;
}
body.single-post #adace_ads_widget-600060009 .adace-slot-wrapper,
body.single-post #adace_ads_widget-600060010 .adace-slot-wrapper {
  width:300px;
  max-width:300px;
  margin-inline:auto;
}

/* In-content Ad-Ace placements. */
body.single-post .entry-content .adace-slot-wrapper-main {
  margin:36px 0!important;
}
body.single-post .entry-content .adace-slot-wrapper-main::before {
  content:"Advertisement";
  display:block;
  margin-bottom:10px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8A9BA8;
  text-align:center;
}

/* 8. Previous / Next — premium two-column editorial navigation. Reuses
   Kadence's own real post-navigation (the_post_navigation(), which
   already resolves genuine adjacent posts via get_adjacent_post()) —
   only the prev/next label markup (functions.php:
   ac_article_post_navigation_args()) and this styling changed. The
   real adjacent-post title is always shown now (no more font-size:0
   hack hiding it), and the whole prev/next area is one native <a>, so
   it is entirely clickable, keyboard-reachable and screen-reader-real. */
body.single-post .navigation.post-navigation {
  max-width:800px;
  margin:0 auto;
  border-top:1px solid rgba(16,42,67,.10);
  border-bottom:1px solid rgba(16,42,67,.10);
}
body.single-post .navigation.post-navigation .nav-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
body.single-post .navigation.post-navigation .nav-links > div:only-child {
  grid-column:1 / -1;
}
body.single-post .navigation.post-navigation .nav-previous a,
body.single-post .navigation.post-navigation .nav-next a {
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
}
body.single-post .navigation.post-navigation .nav-previous a {
  padding:32px 32px 32px 0;
  align-items:flex-start;
  text-align:left;
  border-right:1px solid rgba(16,42,67,.10);
}
body.single-post .navigation.post-navigation .nav-next a {
  padding:32px 0 32px 32px;
  align-items:flex-end;
  text-align:right;
}
body.single-post .navigation.post-navigation .nav-links > div:only-child a {
  border-right:none;
  align-items:center;
  text-align:center;
  padding:32px;
}
body.single-post .ac-postnav__label {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#0F766E;
}
body.single-post .ac-postnav__arrow {
  display:inline-block;
  transition:transform .2s ease;
}
body.single-post .ac-postnav__title {
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:clamp(18px, 1.4vw, 22px);
  font-weight:700;
  line-height:1.35;
  color:#102A43;
  transition:color .2s ease;
}
body.single-post .navigation.post-navigation a:hover .ac-postnav__title,
body.single-post .navigation.post-navigation a:focus-visible .ac-postnav__title {
  color:#0F766E;
}
body.single-post .navigation.post-navigation .nav-previous a:hover .ac-postnav__arrow,
body.single-post .navigation.post-navigation .nav-previous a:focus-visible .ac-postnav__arrow {
  transform:translateX(-3px);
}
body.single-post .navigation.post-navigation .nav-next a:hover .ac-postnav__arrow,
body.single-post .navigation.post-navigation .nav-next a:focus-visible .ac-postnav__arrow {
  transform:translateX(3px);
}
body.single-post .navigation.post-navigation a:focus-visible {
  outline:2px solid #0F766E;
  outline-offset:-2px;
}

/* 10. "More Articles" — full-width module ------------------------------
   ROOT CAUSE OF THE PREVIOUS BUG (found by reading the actual DOM, not
   guessed): this module used to live inside .entry-related, itself
   inside #main — the LEFT column of the article+sidebar grid
   (.content-container.site-container{grid-template-columns:minmax(0,1fr)
   300px;}). The width:100vw + margin-left:calc(50% - 50vw) breakout
   trick only recenters correctly when its containing block is ITSELF
   centered in the viewport. #main is NOT centered — the 300px sidebar
   sits to its right, so #main's own midpoint sits left of true viewport
   center. The calc() therefore shifted the whole module further left,
   past the viewport edge (matches the reported clipping exactly).

   FIX: the module is no longer positioned via CSS breakout math at all.
   It's rendered by ac_article_render_more_articles() (functions.php) at
   kadence_after_content — a real Kadence hook that fires in footer.php
   ("Hook for bottom of inner wrap"), confirmed by reading single.php →
   template-parts/content/single.php → footer.php directly. That
   position is a genuine sibling of #primary (the whole grid), not a
   descendant of it, so a plain max-width + margin-inline:auto centers
   it correctly with no vw/calc/translate needed.

   Kadence's native entry_related carousel is left running (its
   post_related option has no safe per-request filter to disable
   cleanly) but hidden — this avoids a visible duplicate without
   fighting Kadence's own render path. overflow-x:hidden is kept: the
   article-header breakout (out of scope for this fix) still uses the
   same vw technique and still needs this safety net. ------------------ */
body.single-post {
  overflow-x:hidden;
}
body.single-post .entry-related {
  display:none;
}

body.single-post .ac-article-more {
  width:100%;
  max-width:1400px;
  margin-inline:auto;
  padding-inline:40px;
  margin-top:72px;
  padding-bottom:72px;
  box-sizing:border-box;
}
body.single-post .ac-more-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:30px;
}
body.single-post .ac-more-heading {
  font-family:Manrope,var(--global-fallback-font,sans-serif);
  font-size:clamp(34px,2.8vw,42px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.5px;
  color:#102A43;
  margin:0;
}
/* Previous/Next controls — populated into this (server-rendered, empty)
   container by ac-article-more.js only when more than 6 related posts
   exist. Measured from AllAboutVision's own compiled CSS: circular,
   40x40px, 1px solid border. */
body.single-post .ac-more-nav {
  display:flex;
  gap:12px;
  flex-shrink:0;
}
body.single-post .ac-more-nav:empty {
  display:none;
}
body.single-post .ac-more-nav__btn {
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #102A43;
  border-radius:50%;
  background:#FFFFFF;
  color:#102A43;
  cursor:pointer;
  padding:0;
  transition:background-color .18s ease, color .18s ease;
}
body.single-post .ac-more-nav__btn svg {
  width:14px;
  height:14px;
  display:block;
}
body.single-post .ac-more-nav__btn:hover:not(:disabled),
body.single-post .ac-more-nav__btn:focus-visible:not(:disabled) {
  background:#102A43;
  color:#FFFFFF;
}
body.single-post .ac-more-nav__btn:disabled {
  opacity:.35;
  cursor:default;
}

body.single-post .ac-more-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:24px;
  row-gap:24px;
  width:100%;
}
body.single-post .ac-more-card {
  background:#FFFFFF;
  border:1px solid #E1E9E6;
  border-radius:10px;
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
  box-shadow:none;
  text-decoration:none;
  transition:border-color .15s ease;
}
body.single-post .ac-more-card:hover,
body.single-post .ac-more-card:focus-visible {
  border-color:#B7D6D1;
}
body.single-post .ac-more-card__image {
  display:block;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
}
body.single-post .ac-more-card__image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
body.single-post .ac-more-card__body {
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  flex:1;
  font-family:Manrope,var(--global-fallback-font,sans-serif);
}
body.single-post .ac-more-card__label {
  display:block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#0F766E;
  margin-bottom:8px;
}
body.single-post .ac-more-card__title {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:20px;
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.25px;
  color:#102A43;
  margin:0 0 8px;
}
body.single-post .ac-more-card:hover .ac-more-card__title,
body.single-post .ac-more-card:focus-visible .ac-more-card__title {
  color:#0B5D56;
}
body.single-post .ac-more-card__excerpt {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:14.5px;
  line-height:1.45;
  color:#486581;
  margin-top:auto;
}/* 11. Responsive ------------------------------------------------------------ */
@media (max-width:1100px) {
  body.single-post .content-container.site-container {
    gap:32px;
  }
}
@media (max-width:1024px) {
  body.single-post .content-container.site-container {
    grid-template-columns:1fr;
    padding-left:24px;
    padding-right:24px;
  }
  body.single-post .primary-sidebar {
    display:none;
  }
  /* The sidebar is display:none here, but Ad-Ace's own inline loader script
     still runs regardless of an ANCESTOR's display:none (script execution
     is not gated by CSS display) and unconditionally calls
     adsbygoogle.push() once it decides to "unpack" — causing AdSense's
     own "No slot size for availableWidth=0" console error. Ad-Ace's
     inline loader already contains its own real gate before that happens:
     \`if ($wrapper.css('visibility') === 'visible') { adace_load_XXX(); }
     else { /* poll every 999ms, never load if it stays hidden * / }\`
     Setting the WRAPPER's own visibility (not just its display:none
     ancestor) to hidden makes that pre-existing gate fail, so Ad-Ace
     itself never calls its load function — the ad never initializes,
     never injects <ins>, and never pushes. This only engages the plugin's
     own built-in check; no plugin file is modified, and nothing else
     about .primary-sidebar's display:none changes. Scoped to exactly the
     two sidebar ad widgets; in-content Ad-Ace slots are untouched. */
  body.single-post #adace_ads_widget-600060009 .adace-slot-wrapper,
  body.single-post #adace_ads_widget-600060010 .adace-slot-wrapper {
    visibility:hidden;
  }
  body.single-post #adace_ads_widget-600060010 {
    position:static;
  }
  body.single-post #main.site-main {
    max-width:800px;
    margin:0 auto;
  }
  body.single-post .ac-article-header {
    max-width:880px;
    margin-inline:auto;
  }
  body.single-post .ac-more-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:767px) {
  body.single-post .content-container.site-container {
    padding-left:20px;
    padding-right:20px;
  }
  body.single-post .ac-article-header {
    padding-inline:20px;
    padding-top:24px;
  }
  body.single-post .ac-article-header .entry-title {
    font-size:clamp(34px,9vw,40px)!important;
    line-height:1.12!important;
    max-width:none;
    margin:12px 0 16px!important;
  }
  body.single-post .ac-article-header .entry-meta {
    margin-bottom:24px;
  }
  body.single-post .entry-content {
    max-width:none;
    font-size:17px;
    line-height:1.72;
  }
  body.single-post .entry-content h2 {
    font-size:28px!important;
    margin-top:44px!important;
  }
  body.single-post .entry-content h3 {
    margin-top:30px!important;
  }
  body.single-post .entry-content .adace-slot-wrapper-main {
    margin:28px 0!important;
  }
  body.single-post .content-wrap > .post-thumbnail .post-thumbnail-inner {
    border-radius:8px;
    max-height:none;
    aspect-ratio:4/3;
  }
  body.single-post .ac-article-more {
    margin-top:48px;
    padding-inline:20px;
    padding-bottom:48px;
  }
  body.single-post .ac-more-header {
    flex-wrap:wrap;
  }
  body.single-post .ac-more-nav {
    flex:1 0 100%;
    justify-content:flex-end;
    margin-top:8px;
  }
  body.single-post .ac-more-nav__btn {
    width:46px;
    height:46px;
  }
  body.single-post .ac-more-grid {
    grid-template-columns:1fr;
    gap:18px;
  }
  /* Excerpt hidden on mobile per this pass's preferred option — keeps
     cards scannable at a narrow single-column width. */
  body.single-post .ac-more-card__excerpt {
    display:none;
  }
  body.single-post .navigation.post-navigation .nav-links {
    grid-template-columns:1fr;
  }
  body.single-post .navigation.post-navigation .nav-links > div:only-child {
    grid-column:auto;
  }
  body.single-post .navigation.post-navigation .nav-previous a,
  body.single-post .navigation.post-navigation .nav-next a,
  body.single-post .navigation.post-navigation .nav-links > div:only-child a {
    padding:24px 0;
    align-items:flex-start;
    text-align:left;
    border-right:none;
  }
  body.single-post .navigation.post-navigation .nav-previous a {
    border-bottom:1px solid rgba(16,42,67,.10);
  }
  body.single-post .ac-postnav__title {
    font-size:17px;
  }
}