/**
 * Axadle Modern — News/Magazine Theme Design Enhancement
 *
 * Modernises the existing Publisher-based theme: CSS custom properties,
 * dark mode, reading progress bar, sticky header, modern card effects,
 * breaking ticker, newsletter section, author box, footer, and all
 * custom WPBakery element styles.
 *
 * @package Axadle
 * @version 1.0.0
 */

/* ==========================================================================
   1. CSS DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand */
  --ax-primary:       #d71920;
  --ax-primary-dark:  #b31217;
  --ax-primary-light: #ff3340;

  /* Ink / text */
  --ax-ink:           #171717;
  --ax-ink-light:     #2d2d2d;
  --ax-muted:         #6b7280;
  --ax-muted-light:   #9ca3af;

  /* Surfaces */
  --ax-surface:       #ffffff;
  --ax-surface-2:     #f9fafb;
  --ax-surface-3:     #f3f4f6;

  /* Borders */
  --ax-border:        #e5e7eb;
  --ax-border-light:  #f3f4f6;

  /* Typography */
  --ax-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --ax-font-size-xs:   0.75rem;   /* 12 */
  --ax-font-size-sm:   0.8125rem; /* 13 */
  --ax-font-size-base: 1rem;      /* 16 */
  --ax-font-size-lg:   1.125rem;  /* 18 */
  --ax-font-size-xl:   1.25rem;   /* 20 */
  --ax-font-size-2xl:  1.5rem;    /* 24 */
  --ax-font-size-3xl:  1.875rem;  /* 30 */
  --ax-font-size-4xl:  2.25rem;   /* 36 */

  /* Shadows */
  --ax-shadow-sm:  0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
  --ax-shadow:     0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
  --ax-shadow-lg:  0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --ax-shadow-xl:  0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);

  /* Radius */
  --ax-radius-sm: 4px;
  --ax-radius:    6px;
  --ax-radius-lg: 10px;
  --ax-radius-xl: 16px;

  /* Transitions */
  --ax-transition-fast: 150ms ease;
  --ax-transition:      250ms ease;
  --ax-transition-slow: 350ms ease;

  /* Header */
  --ax-header-bg:     #ffffff;
  --ax-header-shadow: 0 1px 0 var(--ax-border), 0 2px 8px rgba(0,0,0,.06);

  /* Z-indices */
  --ax-z-header:   1000;
  --ax-z-progress: 9999;
  --ax-z-ticker:   100;
}

/* Dark mode is handled entirely by the CSS filter in section 18.
   No token overrides needed — the filter inverts every element including
   Publisher's hardcoded colours without requiring per-component rules. */

/* ==========================================================================
   2. READING PROGRESS BAR
   ========================================================================== */
#ax-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--ax-primary);
  z-index: var(--ax-z-progress);
  transition: width 50ms linear;
  pointer-events: none;
}

body.admin-bar #ax-reading-progress { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar #ax-reading-progress { top: 46px; }
}

/* ==========================================================================
   3. STICKY HEADER  —  hide-on-scroll-down / reveal-on-scroll-up
   ========================================================================== */
.site-header,
header.site-header,
.header-style-5,
.header-style-6,
.header-style-8 {
  position: sticky;
  top: 0;
  z-index: var(--ax-z-header);
  background: var(--ax-header-bg);
  box-shadow: var(--ax-header-shadow);
  transition: transform var(--ax-transition),
              background var(--ax-transition),
              box-shadow var(--ax-transition);
  will-change: transform;
}

/* Admin-bar offset */
body.admin-bar .site-header,
body.admin-bar header.site-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Scroll-triggered states (set by JS) */
.site-header.ax-header-hidden {
  transform: translateY(-100%);
}

.site-header.ax-scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ax-shadow-lg);
}

/* Scrolled header dark bg removed — handled by filter inversion */

/* ==========================================================================
   4. DARK MODE TOGGLE BUTTON  (fixed-position, bottom-right above back-to-top)
   ========================================================================== */
.ax-dark-mode-toggle {
  position: fixed;
  bottom: 80px;
  right: 28px;
  z-index: 998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--ax-ink);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: background var(--ax-transition), transform var(--ax-transition),
              box-shadow var(--ax-transition);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

/* Show once user has scrolled a little (class added by JS) */
.ax-dark-mode-toggle.ax-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ax-dark-mode-toggle:hover {
  background: var(--ax-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

.ax-dark-mode-toggle svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.ax-dark-mode-toggle .ax-icon-moon { display: block;  }
.ax-dark-mode-toggle .ax-icon-sun  { display: none;   }
body.ax-dark-mode .ax-dark-mode-toggle .ax-icon-moon { display: none;  }
body.ax-dark-mode .ax-dark-mode-toggle .ax-icon-sun  { display: block; }

@media print { .ax-dark-mode-toggle { display: none !important; } }

/* ==========================================================================
   5. BREAKING NEWS TICKER  —  modernises the existing .better-newsticker
   ========================================================================== */
.better-newsticker,
.bs-shortcode.better-newsticker {
  display: flex;
  align-items: center;
  background: var(--ax-surface);
  border-bottom: 1px solid var(--ax-border);
  font-size: var(--ax-font-size-sm);
  overflow: hidden;
  position: relative;
  z-index: var(--ax-z-ticker);
}

/* Label pill */
.better-newsticker .newsticker-title,
.better-newsticker .block-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  height: 42px;
  background: var(--ax-primary);
  color: #fff;
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  padding-right: 24px;
}

/* Pulsing live dot */
.better-newsticker .newsticker-title::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  animation: ax-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes ax-pulse {
  0%, 100% { opacity: 1;  transform: scale(1);   }
  50%       { opacity: .4; transform: scale(.75); }
}

/* Items wrapper */
.better-newsticker .newsticker-items-wrapper,
.better-newsticker ul.newsticker-items {
  flex: 1;
  overflow: hidden;
  height: 42px;
  position: relative;
}

.better-newsticker ul.newsticker-items li,
.better-newsticker .newsticker-item {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  color: var(--ax-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.better-newsticker ul.newsticker-items li a,
.better-newsticker .newsticker-item a {
  color: var(--ax-ink);
  text-decoration: none;
  transition: color var(--ax-transition-fast);
}

.better-newsticker ul.newsticker-items li a:hover,
.better-newsticker .newsticker-item a:hover {
  color: var(--ax-primary);
}

/* ==========================================================================
   6. POST CARD MODERNISATION  (targets existing listing-item-grid-1 etc.)
   ========================================================================== */
.listing-item-grid-1,
.listing-item-grid {
  background: var(--ax-surface);
  border-radius: var(--ax-radius);
  overflow: hidden;
  transition: transform var(--ax-transition), box-shadow var(--ax-transition);
}

.listing-item-grid-1:hover,
.listing-item-grid:hover {
  transform: translateY(-3px);
  box-shadow: var(--ax-shadow-lg);
}

/* Image zoom on hover */
.listing-item-grid-1 .featured,
.listing-item-grid .featured {
  overflow: hidden;
  position: relative;
}

.listing-item-grid-1 .featured img,
.listing-item-grid .featured img {
  transition: transform var(--ax-transition-slow);
  width: 100%;
  height: auto;
  display: block;
}

.listing-item-grid-1:hover .featured img,
.listing-item-grid:hover .featured img {
  transform: scale(1.04);
}

/* Category badge — visual polish only, NO colour override.
   Publisher already sets the background/color per term via .main-term-X
   and inline --term-color. Overriding here forces red on everything. */
.post-categories-badge,
.cat-label,
.badge-style-floated .cat-name,
.badge-style-default .cat-name {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  transition: opacity var(--ax-transition-fast);
  line-height: 1.6;
}

.post-categories-badge:hover,
.cat-label:hover { opacity: .85; }

/* Title links — weight & transition only, NO colour override.
   Publisher controls the hover colour via its own theme-colour CSS. */
.listing-item .title a,
.listing-item-grid-1 .title a,
.title a.post-title {
  text-decoration: none;
  line-height: 1.35;
  font-weight: 700;
  transition: opacity var(--ax-transition-fast);
}

.listing-item .title a:hover,
.listing-item-grid-1 .title a:hover,
.title a.post-title:hover {
  opacity: 0.75;
}

/* Meta row — layout & size only, NO colour override */
.post-meta,
.loop-post-meta,
.item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: var(--ax-font-size-xs);
  margin-top: 6px;
}

.post-meta a, .loop-post-meta a, .item-meta a { text-decoration: none; }
.post-meta a:hover, .loop-post-meta a:hover    { opacity: 0.75; }

/* Reading-time badge — rendered by PHP inside publisher_loop_meta() */
.ax-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #4b5563;
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 4px;
}

.ax-reading-time svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ==========================================================================
   7. SLIDER / HERO  —  modernises .bs-slider-1  / .bs-slider
   ========================================================================== */
.bs-slider-1,
.bs-shortcode.bs-slider { border-radius: var(--ax-radius-lg); overflow: hidden; }

.bs-slider-1 .content-container,
.bs-slider   .content-container {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 32px 28px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 55%, transparent 100%);
  color: #fff;
}

.bs-slider-1 .content-container .title a,
.bs-slider   .content-container .title a {
  color: #fff;
  text-decoration: none;
  font-size: var(--ax-font-size-2xl);
  font-weight: 800;
  line-height: 1.25;
}

/* Flex control nav dots */
.flex-control-nav li a {
  background: rgba(255,255,255,.45);
  box-shadow: none;
  width: 8px; height: 8px;
  transition: background var(--ax-transition), transform var(--ax-transition);
}

.flex-control-nav li a:hover,
.flex-control-nav li a.flex-active {
  background: #fff;
  transform: scale(1.35);
}

/* ==========================================================================
   8. SECTION HEADINGS  —  modernises .block-head / .listing-header
   ========================================================================== */
.bs-shortcode .block-head,
.section-header,
.listing-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ax-border);
  position: relative;
}

.bs-shortcode .block-head::after,
.section-header::after,
.listing-header::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 48px; height: 2px;
  background: var(--ax-primary);
}

.bs-shortcode .block-head .title,
.listing-header h2,
.listing-header h3 {
  font-size: var(--ax-font-size-lg);
  font-weight: 800;
  color: var(--ax-ink);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}

.bs-shortcode .block-head .see-all,
.section-header .see-all {
  margin-left: auto;
  font-size: var(--ax-font-size-xs);
  font-weight: 700;
  color: var(--ax-primary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--ax-transition-fast);
}

.bs-shortcode .block-head .see-all:hover { gap: 8px; }

/* ==========================================================================
   9. SIDEBAR WIDGETS
   ========================================================================== */
.sidebar .widget,
#secondary .widget,
.sidebar-widget {
  background: var(--ax-surface);
  border-radius: var(--ax-radius);
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--ax-border-light);
}

.sidebar .widget-title,
#secondary .widget-title {
  font-size: var(--ax-font-size-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ax-ink);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--ax-border);
  position: relative;
}

.sidebar .widget-title::after,
#secondary .widget-title::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--ax-primary);
}

/* Trending rank badges */
.ax-trending-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 4px;
  background: var(--ax-surface-3);
  color: var(--ax-muted);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background var(--ax-transition-fast), color var(--ax-transition-fast);
}

.ax-trending-item:nth-child(1) .ax-trending-number { background: var(--ax-primary); color: #fff; }
.ax-trending-item:nth-child(2) .ax-trending-number { background: var(--ax-ink);     color: #fff; }
.ax-trending-item:nth-child(3) .ax-trending-number { background: #b45309;            color: #fff; }

/* ==========================================================================
   10. NEWSLETTER SECTION
   ========================================================================== */
.ax-newsletter-section,
.bs-newsletter-shortcode,
.bs-shortcode.bs-newsletter {
  background: linear-gradient(135deg, var(--ax-primary) 0%, var(--ax-primary-dark) 100%);
  border-radius: var(--ax-radius-lg);
  padding: 48px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* Decorative circles */
.ax-newsletter-section::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}

.ax-newsletter-section::after {
  content: '';
  position: absolute; bottom: -40px; left: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}

.ax-newsletter-section h3,
.bs-newsletter-shortcode .title {
  font-size: var(--ax-font-size-2xl);
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.ax-newsletter-section p,
.bs-newsletter-shortcode .desc {
  color: rgba(255,255,255,.8);
  font-size: var(--ax-font-size-base);
  margin-bottom: 24px;
}

.ax-newsletter-form,
.bs-newsletter-shortcode form {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--ax-radius);
  overflow: hidden;
  box-shadow: var(--ax-shadow-lg);
}

.ax-newsletter-form input[type="email"],
.bs-newsletter-shortcode form input[type="email"] {
  flex: 1;
  padding: 14px 18px;
  border: none;
  font-size: var(--ax-font-size-base);
  outline: none;
  background: #fff;
  color: var(--ax-ink);
}

.ax-newsletter-form button,
.ax-newsletter-form input[type="submit"],
.bs-newsletter-shortcode form button,
.bs-newsletter-shortcode form input[type="submit"] {
  padding: 14px 24px;
  background: var(--ax-ink);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: var(--ax-font-size-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background var(--ax-transition-fast);
  white-space: nowrap;
}

.ax-newsletter-form button:hover,
.bs-newsletter-shortcode form button:hover { background: #000; }

@media (max-width: 575px) {
  .ax-newsletter-section { padding: 32px 20px; }
  .ax-newsletter-form,
  .bs-newsletter-shortcode form { flex-direction: column; }
}

/* ==========================================================================
   11. SINGLE ARTICLE PAGE
   ========================================================================== */
.single .entry-content,
.post-content-wrap .entry-content {
  line-height: 1.8;
  color: var(--ax-ink-light);
}

.single .entry-content p { margin-bottom: 1.5em; }

.single .entry-content h2,
.single .entry-content h3 {
  font-weight: 800;
  color: var(--ax-ink);
  margin: 2em 0 .75em;
  line-height: 1.3;
}

/* Only inline text links within paragraphs — not widget/related-post blocks */
.single .entry-content > p a,
.single .entry-content > ol a,
.single .entry-content > ul a {
  color: var(--ax-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.single .entry-content blockquote {
  border-left: 4px solid var(--ax-primary);
  margin: 1.5em 0;
  padding: 16px 24px;
  background: var(--ax-surface-2);
  border-radius: 0 var(--ax-radius) var(--ax-radius) 0;
  font-style: italic;
  color: var(--ax-ink-light);
}

/* Article meta bar (above content) */
.ax-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--ax-border);
  border-bottom: 1px solid var(--ax-border);
  margin-bottom: 32px;
  font-size: var(--ax-font-size-sm);
  color: var(--ax-muted);
}

.ax-article-meta .ax-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ax-article-meta svg {
  width: 14px; height: 14px;
  color: var(--ax-primary);
  flex-shrink: 0;
}

/* Author box */
.post-author-section,
.bs-author-box,
.author-info-widget {
  background: var(--ax-surface-2);
  border-radius: var(--ax-radius-lg);
  padding: 28px;
  margin: 40px 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  border: 1px solid var(--ax-border-light);
}

.post-author-section .author-avatar img,
.bs-author-box .author-avatar img {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--ax-surface);
  box-shadow: var(--ax-shadow);
}

.post-author-section .author-name a,
.bs-author-box .author-name a {
  font-weight: 800;
  font-size: var(--ax-font-size-lg);
  color: var(--ax-ink);
  text-decoration: none;
}

.post-author-section .author-name a:hover,
.bs-author-box .author-name a:hover { color: var(--ax-primary); }

.post-author-section .author-bio,
.bs-author-box .author-bio {
  font-size: var(--ax-font-size-sm);
  color: var(--ax-muted);
  margin-top: 6px;
  line-height: 1.6;
}

/* Social share pills */
.ax-share-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 32px 0;
  flex-wrap: wrap;
}

.ax-share-bar .ax-share-label {
  font-size: var(--ax-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ax-muted);
  margin-right: 4px;
}

.ax-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: var(--ax-font-size-xs);
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--ax-border);
  color: var(--ax-ink);
  background: var(--ax-surface);
  transition: all var(--ax-transition-fast);
}

.ax-share-btn:hover          { transform: translateY(-1px); border-color: currentColor; }
.ax-share-btn.ax-share-twitter:hover   { color: #1da1f2; }
.ax-share-btn.ax-share-facebook:hover  { color: #1877f2; }
.ax-share-btn.ax-share-whatsapp:hover  { color: #25d366; }
.ax-share-btn.ax-share-linkedin:hover  { color: #0a66c2; }

/* ==========================================================================
   12. BACK-TO-TOP BUTTON
   ========================================================================== */
.back-top,
span.back-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ax-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--ax-transition),
              visibility var(--ax-transition),
              transform var(--ax-transition),
              background var(--ax-transition);
  z-index: 999;
  box-shadow: var(--ax-shadow-lg);
}

.back-top.ax-visible,
span.back-top.ax-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-top:hover,
span.back-top:hover {
  background: var(--ax-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--ax-shadow-xl);
}

/* ==========================================================================
   13. FOOTER MODERNISATION
   ========================================================================== */
.site-footer,
footer.site-footer {
  background: var(--ax-ink);
  color: rgba(255,255,255,.7);
}

.site-footer .widget-title,
.site-footer .footer-widget-title {
  color: #fff;
  font-size: var(--ax-font-size-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  position: relative;
}

.site-footer .widget-title::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 28px; height: 1px;
  background: var(--ax-primary);
}

.site-footer a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color var(--ax-transition-fast);
}

.site-footer a:hover { color: #fff; }

.site-footer ul li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.site-footer ul li:last-child { border-bottom: none; }

.site-footer-bottom {
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--ax-font-size-xs);
  color: rgba(255,255,255,.4);
}

/* ==========================================================================
   14. CATEGORY ACCENT COLOURS
   Publisher manages per-category badge colours via its own theme settings.
   Do not set background/color on .cat-label or .main-term-* here —
   Publisher's generated CSS or inline styles handle this.
   ========================================================================== */

/* ==========================================================================
   15. LAZY-LOAD FADE-IN
   Scoped to only custom ax-* components. Listing-item images are handled
   in axadle-listings.css with a :not([data-src]) safety net.
   ========================================================================== */
.ax-card-thumb img[loading="lazy"],
.ax-trending-thumb img[loading="lazy"],
.ax-hero-bg[loading="lazy"] {
  opacity: 0;
  transition: opacity .4s ease;
}

.ax-card-thumb img[loading="lazy"].ax-loaded,
.ax-card-thumb img[loading="lazy"].lazyloaded,
.ax-trending-thumb img[loading="lazy"].ax-loaded,
.ax-trending-thumb img[loading="lazy"].lazyloaded { opacity: 1; }

/* ==========================================================================
   16. SCROLL-ENTRY ANIMATIONS  (class toggled by IntersectionObserver)
   ========================================================================== */
.ax-animate {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}

.ax-animate.ax-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.ax-animate:nth-child(2) { transition-delay: .06s; }
.ax-animate:nth-child(3) { transition-delay: .12s; }
.ax-animate:nth-child(4) { transition-delay: .18s; }
.ax-animate:nth-child(5) { transition-delay: .24s; }
.ax-animate:nth-child(6) { transition-delay: .30s; }

/* ==========================================================================
   17. CUSTOM WPBAKERY ELEMENT STYLES
   ========================================================================== */

/* ── Axadle News Grid ──────────────────────────────────────────────────── */
.ax-news-grid-wrap.bs-shortcode { /* outer wrapper */ }

.ax-news-grid {
  display: grid;
  gap: 24px;
}

.ax-news-grid.ax-grid-col-2 { grid-template-columns: repeat(2, 1fr); }
.ax-news-grid.ax-grid-col-3 { grid-template-columns: repeat(3, 1fr); }
.ax-news-grid.ax-grid-col-4 { grid-template-columns: repeat(4, 1fr); }
.ax-news-grid.ax-grid-list  { grid-template-columns: 1fr; }

.ax-news-grid.ax-grid-list .ax-news-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ax-news-grid.ax-grid-list .ax-news-card .ax-card-thumb {
  width: 140px;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
}

@media (max-width: 991px) {
  .ax-news-grid.ax-grid-col-3,
  .ax-news-grid.ax-grid-col-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .ax-news-grid.ax-grid-col-2,
  .ax-news-grid.ax-grid-col-3,
  .ax-news-grid.ax-grid-col-4     { grid-template-columns: 1fr; }
  .ax-news-grid.ax-grid-list .ax-news-card { flex-direction: column; }
  .ax-news-grid.ax-grid-list .ax-news-card .ax-card-thumb { width: 100%; }
}

/* Card shell */
.ax-news-card {
  background: var(--ax-surface);
  border-radius: var(--ax-radius);
  overflow: hidden;
  border: 1px solid var(--ax-border-light);
  transition: transform var(--ax-transition), box-shadow var(--ax-transition),
              border-color var(--ax-transition);
}

.ax-news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ax-shadow-lg);
  border-color: transparent;
}

/* Thumbnail */
.ax-card-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.ax-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--ax-transition-slow);
  display: block;
}

.ax-news-card:hover .ax-card-thumb img { transform: scale(1.05); }

/* Category badge on thumb */
.ax-card-cat {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--ax-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 3px;
  text-decoration: none;
  transition: opacity var(--ax-transition-fast);
}

.ax-card-cat:hover { opacity: .88; color: #fff; }

/* Card body */
.ax-card-body { padding: 16px; }

.ax-card-title {
  font-size: var(--ax-font-size-base);
  font-weight: 700;
  color: var(--ax-ink);
  line-height: 1.35;
  margin: 0 0 8px;
}

.ax-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ax-transition-fast);
}

.ax-card-title a:hover { color: var(--ax-primary); }

.ax-card-excerpt {
  font-size: var(--ax-font-size-sm);
  color: var(--ax-muted);
  line-height: 1.6;
  margin: 0 0 10px;
}

.ax-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--ax-muted);
}

/* ── Axadle Breaking Ticker ─────────────────────────────────────────────── */
.ax-breaking-ticker {
  display: flex;
  align-items: stretch;
  height: 44px;
  background: var(--ax-surface);
  border-bottom: 1px solid var(--ax-border);
  overflow: hidden;
  font-size: var(--ax-font-size-sm);
}

/* Chevron label */
.ax-ticker-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 14px;
  background: var(--ax-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .10em;
  flex-shrink: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  padding-right: 24px;
  white-space: nowrap;
}

.ax-ticker-live-dot {
  width: 7px; height: 7px;
  background: #fff;
  border-radius: 50%;
  animation: ax-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* Scrolling track */
.ax-ticker-track-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.ax-ticker-track {
  display: flex;
  animation: ax-ticker-scroll linear infinite;
  animation-duration: var(--ax-ticker-duration, 30s);
  white-space: nowrap;
}

.ax-ticker-track:hover { animation-play-state: paused; }

.ax-ticker-item {
  padding: 0 40px 0 0;
  color: var(--ax-ink);
  white-space: nowrap;
}

.ax-ticker-item::before {
  content: '//';
  color: var(--ax-primary);
  font-weight: 700;
  margin-right: 12px;
}

.ax-ticker-item a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ax-transition-fast);
}

.ax-ticker-item a:hover { color: var(--ax-primary); }

@keyframes ax-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause button */
.ax-ticker-controls {
  display: flex;
  align-items: center;
  padding: 0 12px;
  flex-shrink: 0;
  border-left: 1px solid var(--ax-border);
}

.ax-ticker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: none;
  border-radius: var(--ax-radius-sm);
  background: var(--ax-surface-3);
  color: var(--ax-muted);
  cursor: pointer;
  transition: background var(--ax-transition-fast), color var(--ax-transition-fast);
}

.ax-ticker-btn:hover { background: var(--ax-primary); color: #fff; }

/* ── Axadle Category Section ─────────────────────────────────────────────── */
.ax-category-section { margin-bottom: 40px; }

.ax-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--ax-border);
  position: relative;
}

.ax-category-header::before {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 56px; height: 3px;
  background: var(--section-color, var(--ax-primary));
}

.ax-cat-title {
  font-size: var(--ax-font-size-xl);
  font-weight: 900;
  color: var(--ax-ink);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0;
}

.ax-cat-link {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--ax-muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: color var(--ax-transition-fast);
}

.ax-cat-link:hover { color: var(--section-color, var(--ax-primary)); }

/* ── Axadle Featured Hero ───────────────────────────────────────────────── */
.ax-featured-hero {
  position: relative;
  border-radius: var(--ax-radius-xl);
  overflow: hidden;
  background: #111;
  min-height: 480px;
  display: flex;
}

.ax-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 6s ease;
}

.ax-featured-hero:hover .ax-hero-bg { transform: scale(1.03); }

.ax-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.30) 50%,
    rgba(0,0,0,.10) 100%);
}

.ax-hero-content {
  position: relative;
  margin-top: auto;
  padding: 40px 36px;
  color: #fff;
  z-index: 2;
  width: 100%;
}

.ax-hero-cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--ax-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 3px;
  text-decoration: none;
  margin-bottom: 12px;
}

.ax-hero-title {
  font-size: var(--ax-font-size-3xl);
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 14px;
  max-width: 680px;
}

.ax-hero-title a {
  color: #fff;
  text-decoration: none;
  transition: text-shadow var(--ax-transition-fast);
}

.ax-hero-title a:hover {
  text-shadow: 0 2px 20px rgba(255,255,255,.3);
}

.ax-hero-excerpt {
  color: rgba(255,255,255,.8);
  font-size: var(--ax-font-size-base);
  margin-bottom: 14px;
  max-width: 560px;
  line-height: 1.6;
}

.ax-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--ax-font-size-sm);
  color: rgba(255,255,255,.7);
}

.ax-hero-meta a { color: rgba(255,255,255,.7); text-decoration: none; }
.ax-hero-meta a:hover { color: #fff; }

/* ==========================================================================
   18. DARK MODE — CSS filter inversion
       Inverts the entire rendered page so every Publisher element goes dark,
       including hardcoded colours. Images/videos are re-inverted so photos
       look natural (double inversion = original colours).
   ========================================================================== */

/* Invert the whole page */
body.ax-dark-mode {
  filter: invert(1) hue-rotate(180deg);
}

/* Re-invert media so images / videos / embeds keep natural colours */
body.ax-dark-mode img,
body.ax-dark-mode video,
body.ax-dark-mode iframe,
body.ax-dark-mode embed,
body.ax-dark-mode object,
body.ax-dark-mode [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

/* Publisher uses .img-cont as background-image containers */
body.ax-dark-mode .img-cont,
body.ax-dark-mode .featured .img-cont,
body.ax-dark-mode .img-holder .img-cont {
  filter: invert(1) hue-rotate(180deg);
}

/* The toggle button itself should not double-invert */
body.ax-dark-mode .ax-dark-mode-toggle {
  filter: invert(1) hue-rotate(180deg);
}

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
  .ax-featured-hero { min-height: 320px; }
  .ax-hero-title    { font-size: var(--ax-font-size-2xl); }
  .ax-hero-content  { padding: 28px 20px; }

  .post-author-section,
  .bs-author-box { flex-direction: column; }

  .ax-article-meta { gap: 8px 14px; }
}

/* ==========================================================================
   20. ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ax-hero-bg,
  .ax-news-card:hover .ax-card-thumb img,
  .listing-item-grid-1:hover .featured img { transform: none !important; }
}

:focus-visible {
  outline: 2px solid var(--ax-primary);
  outline-offset: 3px;
  border-radius: var(--ax-radius-sm);
}

/* ==========================================================================
   21. PRINT
   ========================================================================== */
@media print {
  #ax-reading-progress,
  .ax-dark-mode-toggle,
  .back-top,
  .ax-breaking-ticker,
  .better-newsticker { display: none !important; }

  .single .entry-content { font-size: 12pt; color: #000; }
}

/* ==========================================================================
   26. LISTING CARD ENHANCEMENTS  (2026 editorial upgrade)
   ========================================================================== */

/* ── "NEW" badge ──────────────────────────────────────────────────────────── */
.ax-new-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--ax-primary);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
  line-height: 1.8;
  flex-shrink: 0;
  animation: ax-new-flash 1.6s ease-in-out 4;
}

@keyframes ax-new-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ── Post-format badges (VIDEO / PHOTOS / AUDIO) ─────────────────────────── */
.ax-format-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.5;
  pointer-events: none;
  z-index: 5;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ax-format-video   { background: rgba(185, 28, 28, .88); }
.ax-format-gallery { background: rgba(29, 78, 216, .88); }
.ax-format-audio   { background: rgba(5,  150, 105, .88); }

/* ── Relative timestamp tooltip ──────────────────────────────────────────── */
.listing-item [title] {
  cursor: default;
}

/* Reading-time on listing cards — inherits from base .ax-reading-time rule above */

/* ── Section header — 2026 upgrade ──────────────────────────────────────── */
/* Strengthen Publisher's .block-head labels to match Bloomberg/Reuters style */
.bs-shortcode .block-head .title,
.listing-header h2,
.listing-header h3,
.widget-title {
  font-size: var(--ax-font-size-sm) !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* Pill count badge ("18 stories") on section headers — JS can inject this */
.ax-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  background: var(--ax-surface-3, #f3f4f6);
  color: var(--ax-muted, #6b7280);
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  margin-left: 8px;
}

/* ── Social share micro-overlay on grid/blog card hover ─────────────────── */
/* position:relative already set by Publisher on listing items */

.ax-card-share {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 8;
  pointer-events: none;
}

.listing-item-grid-1:hover .ax-card-share,
.listing-item-blog-1:hover .ax-card-share,
.listing-item-blog-2:hover .ax-card-share {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ax-card-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--ax-ink, #171717);
  border: none;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: background .15s, color .15s, transform .15s;
  backdrop-filter: blur(4px);
}

.ax-card-share-btn:hover { transform: scale(1.12); }
.ax-card-share-btn.ax-share-tw:hover  { background: #1da1f2; color: #fff; }
.ax-card-share-btn.ax-share-fb:hover  { background: #1877f2; color: #fff; }
.ax-card-share-btn.ax-share-wa:hover  { background: #25d366; color: #fff; }

/* Red bar on hover removed — Publisher controls .featured ::after context */

/* ── "UPDATED" timestamp indicator ──────────────────────────────────────── */
.ax-updated-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ax-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: 4px;
}

@media (max-width: 600px) {
  .ax-format-badge { font-size: 9px; padding: 3px 8px; }
  .ax-new-badge    { font-size: 8px; }
  .ax-card-share   { display: none; } /* too cramped on mobile */
}

/* ==========================================================================
   22. TABLE OF CONTENTS  (.ax-toc)
   ========================================================================== */
.ax-toc {
  background: var(--ax-surface-2);
  border: 1px solid var(--ax-border);
  border-left: 3px solid var(--ax-primary);
  border-radius: var(--ax-radius);
  padding: 0;
  margin: 28px 0;
  font-size: var(--ax-font-size-sm);
  overflow: hidden;
}

/* Header row */
.ax-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ax-border);
  cursor: default;
}

.ax-toc-title {
  font-weight: 700;
  font-size: var(--ax-font-size-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ax-ink);
}

/* Collapse toggle */
.ax-toc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: none;
  border-radius: var(--ax-radius-sm);
  background: var(--ax-surface-3);
  color: var(--ax-muted);
  cursor: pointer;
  transition: background var(--ax-transition-fast), color var(--ax-transition-fast);
  flex-shrink: 0;
}

.ax-toc-toggle:hover { background: var(--ax-primary); color: #fff; }

.ax-toc-chevron {
  transition: transform var(--ax-transition);
}

.ax-toc.ax-toc-collapsed .ax-toc-chevron {
  transform: rotate(180deg);
}

.ax-toc.ax-toc-collapsed .ax-toc-list {
  display: none;
}

/* List */
.ax-toc-list {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  counter-reset: ax-toc-counter;
}

.ax-toc-list li { counter-increment: ax-toc-counter; }

.ax-toc-item {
  padding: 0;
}

.ax-toc-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 16px;
  color: var(--ax-muted);
  text-decoration: none;
  transition: color var(--ax-transition-fast), background var(--ax-transition-fast);
  line-height: 1.4;
}

.ax-toc-link::before {
  content: counter(ax-toc-counter) ".";
  font-size: 10px;
  font-weight: 700;
  color: var(--ax-primary);
  flex-shrink: 0;
  min-width: 18px;
}

/* Hide counter for un-numbered version */
.ax-toc:not(.ax-toc-numbered) .ax-toc-link::before { display: none; }

.ax-toc-link:hover {
  color: var(--ax-primary);
  background: var(--ax-surface-3);
}

/* Indentation for sub-headings */
.ax-toc-indent-1 .ax-toc-link { padding-left: 32px; font-size: 12px; }
.ax-toc-indent-2 .ax-toc-link { padding-left: 48px; font-size: 12px; }

/* Highlight currently-visible section */
.ax-toc-item.ax-toc-active .ax-toc-link {
  color: var(--ax-primary);
  font-weight: 600;
}

/* Dark mode handled by filter in section 18 */

/* ==========================================================================
   23. BREAKING ALERT BANNER  (.ax-alert-banner)
   ========================================================================== */
.ax-alert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  font-size: var(--ax-font-size-sm);
  line-height: 1.5;
  position: relative;
  margin-bottom: 0;
}

/* Style variants */
.ax-alert-breaking {
  background: #fff1f2;
  border-bottom: 1px solid #fecdd3;
  color: #9f1239;
}

.ax-alert-warning {
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
}

.ax-alert-info {
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
  color: #1e40af;
}

.ax-alert-dark {
  background: var(--ax-ink);
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
}

/* Inner content */
.ax-alert-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}

/* Badge pill */
.ax-alert-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ax-alert-breaking .ax-alert-badge { background: var(--ax-primary); color: #fff; }
.ax-alert-warning  .ax-alert-badge { background: #d97706;            color: #fff; }
.ax-alert-info     .ax-alert-badge { background: #2563eb;            color: #fff; }
.ax-alert-dark     .ax-alert-badge { background: var(--ax-primary);  color: #fff; }

.ax-alert-message {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

/* "Read More" link inside the banner */
.ax-alert-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--ax-transition-fast);
  color: inherit;
}

.ax-alert-link:hover { opacity: .75; color: inherit; }

/* Close button */
.ax-alert-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: none;
  border-radius: var(--ax-radius-sm);
  background: transparent;
  cursor: pointer;
  color: currentColor;
  opacity: .6;
  flex-shrink: 0;
  transition: opacity var(--ax-transition-fast), background var(--ax-transition-fast);
}

.ax-alert-close:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* Hidden-after-dismiss */
.ax-alert-banner[hidden] { display: none !important; }

/* ==========================================================================
   24. AUTHOR SPOTLIGHT  (.ax-author-spotlight)
   ========================================================================== */
.ax-author-spotlight {
  background: var(--ax-surface-2);
  border: 1px solid var(--ax-border-light);
  border-radius: var(--ax-radius-lg);
  padding: 24px;
  display: flex;
  gap: 20px;
}

/* Vertical centred variant */
.ax-author-vertical {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ax-author-vertical .ax-author-name-row,
.ax-author-vertical .ax-author-social { justify-content: center; }

/* Avatar */
.ax-author-avatar-wrap { flex-shrink: 0; }

.ax-author-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ax-surface);
  box-shadow: var(--ax-shadow);
  display: block;
}

/* Info block */
.ax-author-info { flex: 1; min-width: 0; }

.ax-author-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ax-author-name {
  font-weight: 800;
  font-size: var(--ax-font-size-lg);
  color: var(--ax-ink);
  text-decoration: none;
  transition: color var(--ax-transition-fast);
}

.ax-author-name:hover { color: var(--ax-primary); }

.ax-author-post-count {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--ax-primary);
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.ax-author-bio {
  font-size: var(--ax-font-size-sm);
  color: var(--ax-muted);
  line-height: 1.65;
  margin: 0 0 14px;
}

/* Social icons */
.ax-author-social {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0; margin: 0;
  flex-wrap: wrap;
}

.ax-author-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ax-surface-3);
  color: var(--ax-muted);
  font-size: 13px;
  text-decoration: none;
  transition: background var(--ax-transition-fast), color var(--ax-transition-fast),
              transform var(--ax-transition-fast);
}

.ax-author-social-link:hover { transform: translateY(-2px); background: var(--ax-primary); color: #fff; }

/* Recent posts mini-list */
.ax-author-recent-posts {
  list-style: none;
  padding: 0; margin: 12px 0 0;
  border-top: 1px solid var(--ax-border-light);
  padding-top: 10px;
}

.ax-author-recent-posts li { padding: 4px 0; border-bottom: 1px dashed var(--ax-border-light); }
.ax-author-recent-posts li:last-child { border-bottom: none; }

.ax-author-recent-posts a {
  font-size: var(--ax-font-size-sm);
  color: var(--ax-ink);
  text-decoration: none;
  transition: color var(--ax-transition-fast);
}

.ax-author-recent-posts a:hover { color: var(--ax-primary); }

/* Dark mode handled by filter in section 18 */

/* ==========================================================================
   25. TRENDING POSTS  (.ax-trending)
   ========================================================================== */
.ax-trending { overflow: hidden; }

/* Header */
.ax-trending-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ax-border);
  position: relative;
}

.ax-trending-header::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 40px; height: 2px;
  background: var(--ax-primary);
}

.ax-trending-title {
  font-size: var(--ax-font-size-base);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ax-ink);
}

/* Prev / Next nav (strip layout) */
.ax-trending-nav {
  display: flex;
  gap: 4px;
}

.ax-trend-prev,
.ax-trend-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1.5px solid var(--ax-border);
  border-radius: var(--ax-radius-sm);
  background: var(--ax-surface);
  color: var(--ax-muted);
  cursor: pointer;
  transition: background var(--ax-transition-fast), color var(--ax-transition-fast),
              border-color var(--ax-transition-fast);
}

.ax-trend-prev:hover,
.ax-trend-next:hover { background: var(--ax-primary); border-color: var(--ax-primary); color: #fff; }

/* ── Strip layout ─────────────────────────────────────────────────────────── */
.ax-trending-strip .ax-trending-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.ax-trending-strip .ax-trending-track::-webkit-scrollbar { display: none; }

.ax-trending-strip .ax-trending-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 200px;
  scroll-snap-align: start;
  position: relative;
}

.ax-trending-strip .ax-trending-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ax-radius);
  overflow: hidden;
  flex-shrink: 0;
}

.ax-trending-strip .ax-trending-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--ax-transition-slow);
  display: block;
}

.ax-trending-strip .ax-trending-item:hover .ax-trending-thumb img { transform: scale(1.06); }

/* ── List layout ──────────────────────────────────────────────────────────── */
.ax-trending-list .ax-trending-track {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ax-trending-list .ax-trending-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ax-border-light);
}

.ax-trending-list .ax-trending-item:last-child { border-bottom: none; }

.ax-trending-list .ax-trending-thumb {
  width: 72px; height: 72px;
  border-radius: var(--ax-radius);
  overflow: hidden;
  flex-shrink: 0;
}

.ax-trending-list .ax-trending-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Rank badge (shared) ──────────────────────────────────────────────────── */
.ax-trending-rank {
  position: absolute;
  top: 8px; left: 8px;  /* strip */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 26px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  background: var(--ax-surface);
  color: var(--ax-muted);
  box-shadow: var(--ax-shadow-sm);
  line-height: 1;
  z-index: 1;
}

/* Top-3 rank colours */
.ax-trending-item:nth-child(1) .ax-trending-rank { background: var(--ax-primary); color: #fff; }
.ax-trending-item:nth-child(2) .ax-trending-rank { background: var(--ax-ink);     color: #fff; }
.ax-trending-item:nth-child(3) .ax-trending-rank { background: #b45309;            color: #fff; }

/* List layout rank — no absolute positioning */
.ax-trending-list .ax-trending-rank {
  position: static;
  flex-shrink: 0;
}

/* ── Body (shared) ────────────────────────────────────────────────────────── */
.ax-trending-body { flex: 1; min-width: 0; }

.ax-trending-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ax-primary);
  text-decoration: none;
  margin-bottom: 4px;
}

.ax-trending-post-title {
  font-size: var(--ax-font-size-sm);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ax-ink);
  margin: 0 0 4px;
}

.ax-trending-post-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ax-transition-fast);
}

.ax-trending-post-title a:hover { color: var(--ax-primary); }

.ax-trending-date {
  font-size: 11px;
  color: var(--ax-muted);
}

/* Dark mode handled by filter in section 18 */

/* ==========================================================================
   27. ARTICLE BODY — LEAD PARAGRAPH / BLOCKQUOTE / TABLE / FIGURE
   ========================================================================== */

.single .entry-content > p:first-of-type {
  font-size: 1.12em;
  line-height: 1.75;
  color: var(--ax-ink);
  font-weight: 400;
}

.single .entry-content blockquote {
  border-left: none !important;
  position: relative;
  padding: 28px 36px 22px 40px !important;
  margin: 2em 0 !important;
  background: var(--ax-surface-2) !important;
  border-radius: var(--ax-radius-lg) !important;
  font-size: 1.15em;
  font-style: italic;
  color: var(--ax-ink) !important;
  line-height: 1.6;
}
.single .entry-content blockquote::before {
  content: '\201C';
  position: absolute;
  top: -4px;
  left: 16px;
  font-size: 80px;
  line-height: 1;
  color: var(--ax-primary);
  font-style: normal;
  opacity: 0.18;
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
}
.single .entry-content blockquote p { margin: 0; }
.single .entry-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 0.78em;
  font-style: normal;
  font-weight: 700;
  color: var(--ax-muted);
  letter-spacing: .04em;
}

.single .entry-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2em 0;
  font-size: 0.88em;
  border-radius: var(--ax-radius);
  overflow: hidden;
  box-shadow: var(--ax-shadow-sm);
  border: 1px solid var(--ax-border);
}
.single .entry-content table thead tr th {
  background: var(--ax-ink) !important;
  color: #fff !important;
  padding: 13px 16px !important;
  text-align: left;
  font-weight: 700 !important;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: none !important;
}
.single .entry-content table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--ax-border);
  color: var(--ax-ink-light);
  vertical-align: middle;
}
.single .entry-content table tbody tr:last-child td { border-bottom: none; }
.single .entry-content table tbody tr:nth-child(even) td { background: var(--ax-surface-2); }
.single .entry-content table tbody tr:hover td { background: var(--ax-surface-3); transition: background .15s; }

.single .entry-content figure { margin: 2em 0; }
.single .entry-content figcaption,
.single .entry-content .wp-caption-text {
  font-size: 0.8rem;
  color: var(--ax-muted);
  font-style: italic;
  margin-top: 8px;
  padding: 7px 0 0;
  border-top: 2px solid var(--ax-primary);
  line-height: 1.5;
}

/* ==========================================================================
   28. BREADCRUMB
   ========================================================================== */
.breadcrumb, .bs-breadcrumb, .publisher-breadcrumb,
.breadcrumb-trail, .yoast-breadcrumbs, .rank-math-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  font-size: 0.78rem;
  color: var(--ax-muted);
  padding: 10px 0;
  line-height: 1.4;
}
.breadcrumb a, .bs-breadcrumb a, .breadcrumb-trail a,
.yoast-breadcrumbs a, .rank-math-breadcrumb a {
  color: var(--ax-muted);
  text-decoration: none;
  transition: color var(--ax-transition-fast);
}
.breadcrumb a:hover, .bs-breadcrumb a:hover,
.breadcrumb-trail a:hover, .yoast-breadcrumbs a:hover { color: var(--ax-primary); }
.breadcrumb .sep, .bs-breadcrumb .sep, .breadcrumb-trail .sep { opacity: 0.4; }

/* ==========================================================================
   29. TAG CLOUD — pill style
   ========================================================================== */
.tagcloud a, .post-tags a, .tags-links a,
.single .entry-content .tags-links a,
.listing-tags a, .bs-tag-cloud a, .wp-block-tag-cloud a {
  display: inline-block;
  padding: 4px 13px !important;
  border-radius: 20px;
  border: 1px solid var(--ax-border) !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  color: var(--ax-ink-light) !important;
  text-decoration: none !important;
  margin: 3px 2px;
  background: var(--ax-surface) !important;
  transition: background var(--ax-transition-fast), color var(--ax-transition-fast), border-color var(--ax-transition-fast);
  line-height: 1.4;
}
.tagcloud a:hover, .post-tags a:hover, .tags-links a:hover,
.listing-tags a:hover, .bs-tag-cloud a:hover, .wp-block-tag-cloud a:hover {
  background: var(--ax-primary) !important;
  color: #fff !important;
  border-color: var(--ax-primary) !important;
}

/* ==========================================================================
   30. CATEGORY ARCHIVE HERO
   ========================================================================== */
.ax-archive-hero {
  background: var(--ax-ink);
  color: #fff;
  padding: 44px 0 36px;
  margin-bottom: 36px;
  border-bottom: 3px solid var(--ax-primary);
}
.ax-archive-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ax-archive-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ax-primary);
  margin-bottom: 10px;
}
.ax-archive-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -.02em;
}
.ax-archive-hero-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,.6);
  max-width: 580px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.ax-archive-hero-count {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}

/* ==========================================================================
   31. 404 PAGE
   ========================================================================== */
.ax-404-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 55vh;
  padding: 60px 24px;
}
.ax-404-code {
  font-size: clamp(80px, 14vw, 150px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ax-border);
  margin: 0 0 4px;
  display: block;
}
.ax-404-title { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800; color: var(--ax-ink); margin: 0 0 12px; }
.ax-404-text { font-size: 1rem; color: var(--ax-muted); max-width: 440px; line-height: 1.65; margin: 0 auto 28px; }
.ax-404-search {
  display: flex;
  max-width: 420px;
  width: 100%;
  border-radius: var(--ax-radius);
  overflow: hidden;
  box-shadow: var(--ax-shadow);
  margin-bottom: 28px;
}
.ax-404-search input[type="search"],
.ax-404-search input[type="text"] {
  flex: 1;
  padding: 13px 18px;
  border: 1px solid var(--ax-border);
  border-right: none;
  border-radius: var(--ax-radius) 0 0 var(--ax-radius);
  font-size: 0.9rem;
  outline: none;
  background: var(--ax-surface);
  color: var(--ax-ink);
}
.ax-404-search button {
  padding: 13px 20px;
  background: var(--ax-primary);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 0 var(--ax-radius) var(--ax-radius) 0;
  transition: background var(--ax-transition-fast);
}
.ax-404-search button:hover { background: var(--ax-primary-dark); }
.ax-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ax-404-links a {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid var(--ax-border);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ax-ink-light);
  text-decoration: none;
  transition: all var(--ax-transition-fast);
}
.ax-404-links a:hover { background: var(--ax-primary); color: #fff; border-color: var(--ax-primary); }

/* ==========================================================================
   32. STICKY SIDEBAR
   ========================================================================== */
@media (min-width: 1025px) {
  .sidebar-column .theiaStickySidebar,
  .sidebar-column > .sidebar,
  .sidebar-column > #secondary,
  #secondary.sidebar {
    position: sticky;
    top: 88px;
  }
}

/* ==========================================================================
   33. BACK-TO-TOP BUTTON
   ========================================================================== */
#ax-back-top {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ax-ink);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 997;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s;
  box-shadow: var(--ax-shadow);
}
#ax-back-top.ax-visible { opacity: 1; visibility: visible; transform: none; }
#ax-back-top:hover { background: var(--ax-primary); }
body.ax-share-bar-open #ax-back-top { bottom: calc(28px + 54px); }

/* ==========================================================================
   34. FONT-SIZE ADJUSTER
   ========================================================================== */
.ax-font-adjuster {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  border-radius: var(--ax-radius);
  border: 1px solid var(--ax-border);
  background: var(--ax-surface);
  vertical-align: middle;
}
.ax-font-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 800;
  color: var(--ax-muted);
  padding: 3px 7px;
  border-radius: 3px;
  line-height: 1;
  transition: background var(--ax-transition-fast), color var(--ax-transition-fast);
}
.ax-font-btn:hover { background: var(--ax-surface-3); color: var(--ax-ink); }
.ax-font-btn.ax-font-sm { font-size: 0.82rem; }
.ax-font-btn.ax-font-lg { font-size: 1.05rem; }
.ax-font-sep { width: 1px; height: 14px; background: var(--ax-border); margin: 0 2px; }
.single .entry-content.ax-text-sm { font-size: 0.9em !important; }
.single .entry-content.ax-text-lg { font-size: 1.15em !important; }
.ax-article-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   35. HIGHLIGHT-TO-TWEET
   ========================================================================== */
#ax-tweet-popover {
  position: absolute;
  z-index: 9990;
  display: none;
  background: #000;
  color: #fff;
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  text-decoration: none;
  transform: translateY(-6px);
  transition: transform .15s;
}
#ax-tweet-popover::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom: none;
  border-top-color: #000;
}
#ax-tweet-popover:hover { transform: translateY(-9px); }

/* ==========================================================================
   36. STICKY SHARE BAR
   ========================================================================== */
#ax-share-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 996;
  background: var(--ax-surface);
  border-top: 1px solid var(--ax-border);
  box-shadow: 0 -2px 16px rgba(0,0,0,.08);
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
#ax-share-bar.ax-visible { transform: none; }
.ax-share-bar-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ax-ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ax-share-bar-btns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ax-share-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .2s;
}
.ax-share-bar-btn:hover { opacity: 0.82; }
.ax-sbar-tw  { background: #000;     color: #fff; }
.ax-sbar-fb  { background: #1877f2;  color: #fff; }
.ax-sbar-wa  { background: #25d366;  color: #fff; }
.ax-sbar-copy { background: var(--ax-surface-3); color: var(--ax-ink); border-color: var(--ax-border); }
@media (max-width: 600px) {
  .ax-share-bar-title { display: none; }
  .ax-share-bar-btn span { display: none; }
  .ax-share-bar-btn { padding: 8px 11px; }
}

/* ==========================================================================
   37. IMAGE LIGHTBOX
   ========================================================================== */
#ax-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.93);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s, visibility .22s;
  cursor: zoom-out;
}
#ax-lightbox.ax-open { opacity: 1; visibility: visible; }
#ax-lightbox-img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--ax-radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.9);
  cursor: default;
  transform: scale(.96);
  transition: transform .22s;
  display: block;
}
#ax-lightbox.ax-open #ax-lightbox-img { transform: scale(1); }
#ax-lightbox-caption {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.65);
  color: rgba(255,255,255,.9);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.78rem;
  max-width: 80vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ax-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .18s;
  z-index: 1;
}
#ax-lightbox-close:hover { background: rgba(255,255,255,.22); }
.single .entry-content img:not([class*="emoji"]):not([class*="avatar"]):not([class*="icon"]) {
  cursor: zoom-in;
  transition: opacity .2s;
}
.single .entry-content img:not([class*="emoji"]):not([class*="avatar"]):not([class*="icon"]):hover { opacity: .88; }

/* ==========================================================================
   38. LIVE BADGE
   ========================================================================== */
.ax-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e30613;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}
.ax-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: ax-live-pulse 1.4s ease-in-out infinite;
}
@keyframes ax-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.75); }
}
.listing-item .ax-live-badge { margin-bottom: 4px; }

/* ==========================================================================
   39. ARTICLE HEADER META BAR (Bloomberg style)
   ========================================================================== */
.ax-article-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding: 14px 0;
  border-top: 1px solid var(--ax-border);
  border-bottom: 1px solid var(--ax-border);
  margin-bottom: 28px;
  font-size: 0.8rem;
  color: var(--ax-muted);
}
.ax-ahm-item { display: flex; align-items: center; gap: 5px; }
.ax-ahm-item svg { width: 13px; height: 13px; flex-shrink: 0; }
.ax-ahm-author a { font-weight: 700; color: var(--ax-ink); text-decoration: none; }
.ax-ahm-author a:hover { color: var(--ax-primary); }
.ax-ahm-tools { margin-left: auto; }

/* ==========================================================================
   40. TRENDING HORIZONTAL STRIP
   ========================================================================== */
.ax-trending-strip {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  border-top: 3px solid var(--ax-primary);
  background: var(--ax-surface);
  box-shadow: var(--ax-shadow-sm);
  margin: 0 0 28px;
  border-radius: 0 0 var(--ax-radius) var(--ax-radius);
}
.ax-trending-strip::-webkit-scrollbar { display: none; }
.ax-trending-strip.ax-dragging { cursor: grabbing; }
.ax-strip-label {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ax-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.ax-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-right: 1px solid var(--ax-border);
  scroll-snap-align: start;
  flex-shrink: 0;
  max-width: 280px;
  text-decoration: none;
  color: inherit;
  transition: background var(--ax-transition-fast);
}
.ax-strip-item:hover { background: var(--ax-surface-2); }
.ax-strip-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ax-border);
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.ax-strip-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ax-ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ax-strip-item:hover .ax-strip-title { color: var(--ax-primary); }