/* ══════════════════════════════════════════════════════════════════════════
   AfriDevMonitor — Modern Editorial Design System
   Modern editorial premium · light/dark · motion-rich · mobile-first
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────────── */
:root {
  /* Admin-configurable accent (overridden inline by style.blade.php) */
  --adm-accent: #d92b2b;
  --adm-accent-dark: #b01f1f;
  --adm-accent-soft: rgba(217, 43, 43, 0.08);

  /* Surfaces */
  --adm-bg: #faf8f5;
  --adm-surface: #ffffff;
  --adm-surface-2: #f4f1ec;
  --adm-border: #e8e4dc;
  --adm-border-strong: #d8d3c8;

  /* Ink */
  --adm-ink: #17181c;
  --adm-ink-soft: #4a5058;
  --adm-muted: #7a8089;
  --adm-inverse: #ffffff;

  /* Editorial dark surfaces */
  --adm-night: #12141a;
  --adm-night-2: #1a1d26;
  --adm-night-3: #232734;

  /* Type */
  --adm-display: "Fraunces", "Playfair Display", Georgia, serif;
  --adm-body: "Inter", "Source Sans Pro", -apple-system, sans-serif;

  /* Motion */
  --adm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --adm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --adm-speed: 0.35s;

  /* Elevation */
  --adm-shadow-sm: 0 2px 10px rgba(20, 22, 26, 0.06);
  --adm-shadow-md: 0 10px 30px rgba(20, 22, 26, 0.1);
  --adm-shadow-lg: 0 24px 60px rgba(20, 22, 26, 0.16);

  --adm-radius: 14px;
  --adm-radius-sm: 9px;
}

[data-theme="dark"] {
  --adm-bg: #0e1016;
  --adm-surface: #161923;
  --adm-surface-2: #1d2130;
  --adm-border: #272c3c;
  --adm-border-strong: #333952;
  --adm-ink: #eceef4;
  --adm-ink-soft: #b4bac8;
  --adm-muted: #7e8698;
  --adm-inverse: #101218;
  --adm-accent-soft: rgba(230, 70, 70, 0.14);
  --adm-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4);
  --adm-shadow-md: 0 12px 34px rgba(0, 0, 0, 0.5);
  --adm-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.6);
}

/* ── 2. BASE ────────────────────────────────────────────────────────────── */
body[class*="theme-template-"],
body {
  font-family: var(--adm-body);
  background: var(--adm-bg);
  color: var(--adm-ink);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.45s ease, color 0.45s ease;
}

h1, h2, h3, h4, h5, h6,
.post--title, .section-title h2, .section-title h3,
.page-title-wrap h1, .page-title-wrap h3 {
  font-family: var(--adm-display);
  letter-spacing: -0.015em;
  color: var(--adm-ink);
}

::selection {
  background: var(--adm-accent);
  color: #fff;
}

img { max-width: 100%; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--adm-surface-2); }
::-webkit-scrollbar-thumb {
  background: var(--adm-border-strong);
  border-radius: 8px;
  border: 3px solid var(--adm-surface-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--adm-muted); }

/* ── 3. ANIMATION UTILITIES ─────────────────────────────────────────────── */
@keyframes adm-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes adm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes adm-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes adm-slide-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes adm-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.55; }
}
@keyframes adm-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Scroll-reveal (JS adds .adm-in when element enters viewport) */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.7s var(--adm-ease), transform 0.7s var(--adm-ease);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(32px); }
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="zoom"]  { transform: scale(0.93); }
[data-reveal].adm-in {
  opacity: 1;
  transform: none;
}

.adm-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ── 4. BUTTONS / INPUTS ────────────────────────────────────────────────── */
.btn, .theme-btn {
  border-radius: 999px;
  font-family: var(--adm-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 11px 26px;
  transition: transform var(--adm-speed) var(--adm-ease),
              box-shadow var(--adm-speed) ease,
              background-color 0.25s ease, color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }

.theme-btn, .btn.c1-bg, button[type="submit"].btn,
.login-btn, .register-btn, .accept-cookie {
  background: var(--adm-accent);
  border-color: var(--adm-accent);
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.theme-btn:hover, .btn.c1-bg:hover, button[type="submit"].btn:hover,
.login-btn:hover, .accept-cookie:hover {
  background: var(--adm-accent-dark);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

.c2-bg { background: var(--adm-night-3) !important; }
.title-color-two { color: inherit !important; }

.btn-borderd, .btn-outline-primary {
  border: 1.5px solid var(--adm-border-strong);
  color: var(--adm-ink);
  background: transparent;
}
.btn-borderd:hover, .btn-outline-primary:hover {
  border-color: var(--adm-accent);
  color: var(--adm-accent);
  background: transparent;
}

.theme-input-style,
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea, select {
  background: var(--adm-surface);
  border: 1.5px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  color: var(--adm-ink);
  font-size: 14px;
  padding: 12px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.theme-input-style:focus, .form-control:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--adm-accent);
  box-shadow: 0 0 0 4px var(--adm-accent-soft);
}
label { color: var(--adm-ink-soft); font-weight: 600; font-size: 13px; }

.theme-input-group {
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: var(--adm-surface);
  border: 1.5px solid var(--adm-border);
}
.theme-input-group input {
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  flex: 1;
  min-width: 0;
}
.theme-input-group button, .newsletter-form button {
  border-radius: 999px;
  margin: 4px;
  padding: 9px 22px;
  flex-shrink: 0;
}

.text-danger { color: #e05252 !important; }

/* ── 5. TOP UTILITY BAR ─────────────────────────────────────────────────── */
.adm-topbar {
  background: var(--adm-night);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.adm-topbar a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}
.adm-topbar a:hover { color: #fff; }
.adm-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
}
.adm-topbar-left { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.adm-topbar-links { display: flex; align-items: center; gap: 16px; }

.adm-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--adm-accent);
  margin-right: 7px;
  animation: adm-pulse-dot 1.8s infinite;
  vertical-align: middle;
}

/* ── 6. MAIN NAV ────────────────────────────────────────────────────────── */
.adm-nav {
  background: var(--adm-surface);
  border-bottom: 1px solid var(--adm-border);
  position: relative;
  z-index: 200;
  transition: background-color 0.45s ease, box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.adm-nav.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: var(--adm-shadow-md);
  animation: adm-nav-drop 0.4s var(--adm-ease);
}
@keyframes adm-nav-drop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.adm-nav.is-stuck::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--adm-accent), transparent 85%);
}

.adm-nav-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 68px;
}

.adm-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.adm-logo img {
  max-height: 46px;
  width: auto;
  transition: max-height 0.3s var(--adm-ease);
}
.adm-nav.is-stuck .adm-logo img { max-height: 36px; }

/* Horizontal menu */
.horizontal-menu > .nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.horizontal-menu > .nav > li { position: relative; }
.horizontal-menu > .nav > li > a {
  display: block;
  padding: 22px 13px;
  color: var(--adm-ink-soft);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: color 0.22s ease;
}
.horizontal-menu > .nav > li > a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 15px;
  height: 2px;
  background: var(--adm-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--adm-ease);
}
.horizontal-menu > .nav > li:hover > a,
.horizontal-menu > .nav > li.current-menu-item > a,
.horizontal-menu > .nav > li.current-menu-parent > a {
  color: var(--adm-accent);
}
.horizontal-menu > .nav > li:hover > a::after,
.horizontal-menu > .nav > li.current-menu-item > a::after {
  transform: scaleX(1);
}
.horizontal-menu .menu-chevron { transition: transform 0.25s var(--adm-ease); }
.horizontal-menu > .nav > li:hover > a .menu-chevron { transform: rotate(180deg); }

/* Dropdowns */
.submenu,
.sub-menu,
.children,
.horizontal-menu > .nav > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 0 0 var(--adm-radius-sm) var(--adm-radius-sm);
  box-shadow: var(--adm-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.28s var(--adm-ease), transform 0.28s var(--adm-ease),
              visibility 0.28s;
  z-index: 300;
}
.megamenu { z-index: 300; }
.horizontal-menu > .nav > li:hover > .submenu,
.horizontal-menu > .nav > li:hover > .sub-menu,
.horizontal-menu > .nav > li:hover > .children,
.horizontal-menu > .nav > li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu li,
.sub-menu li,
.children li,
.horizontal-menu > .nav > li > ul li { position: relative; }
.submenu li a,
.sub-menu li a,
.children li a,
.horizontal-menu > .nav > li > ul li > a {
  display: block;
  padding: 10px 22px;
  color: var(--adm-ink-soft);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.submenu li a:hover,
.sub-menu li a:hover,
.children li a:hover,
.horizontal-menu > .nav > li > ul li > a:hover {
  background: var(--adm-accent-soft);
  color: var(--adm-accent);
  padding-left: 28px;
}

/* Nav action buttons */
.nav-actions-item { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--adm-border);
  background: transparent;
  color: var(--adm-ink-soft);
  cursor: pointer;
  transition: all 0.25s var(--adm-ease);
}
.nav-action-btn:hover {
  background: var(--adm-accent);
  border-color: var(--adm-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

/* Theme toggle */
.adm-theme-toggle {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
}
.adm-theme-toggle .icon-moon,
.adm-theme-toggle .icon-sun {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--adm-ease), opacity 0.3s ease;
}
[data-theme="dark"] .adm-theme-toggle .icon-moon { transform: translateY(140%); opacity: 0; }
[data-theme="dark"] .adm-theme-toggle .icon-sun  { transform: translateY(0); opacity: 1; }
.adm-theme-toggle .icon-sun { transform: translateY(-140%); opacity: 0; }

/* Burger */
.adm-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--adm-border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0 10px;
}
.adm-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--adm-ink);
  transition: transform 0.3s var(--adm-ease), width 0.3s var(--adm-ease);
}
.adm-burger span:nth-child(2) { width: 70%; }
.adm-burger:hover span { width: 100%; background: var(--adm-accent); }

@media (max-width: 991px) {
  .adm-burger { display: flex; }
  .horizontal-menu { display: none !important; }
  .adm-nav-inner { min-height: 60px; }
  .adm-logo img { max-height: 38px; }
}

/* ── 7. BREAKING NEWS TICKER ────────────────────────────────────────────── */
.breaking--news {
  background: var(--adm-accent);
  position: relative;
  overflow: hidden;
}
.breaking-title {
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.breaking--news .news-updates--list a {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.breaking--news .news-updates--list a:hover { color: #ffe08a; }
.breaking--news .current--date {
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.9);
  padding: 12px 20px;
  font-size: 12px;
  white-space: nowrap;
}

/* ── 8. SEARCH OVERLAY ──────────────────────────────────────────────────── */
.adm-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(10, 12, 18, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--adm-ease), visibility 0.35s;
}
.adm-search-overlay.is-open { opacity: 1; visibility: visible; }
.adm-search-box {
  width: min(640px, 88vw);
  transform: translateY(30px) scale(0.97);
  transition: transform 0.4s var(--adm-ease);
}
.adm-search-overlay.is-open .adm-search-box { transform: none; }
.adm-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--adm-surface);
  border-radius: 999px;
  padding: 10px 14px 10px 26px;
  box-shadow: var(--adm-shadow-lg);
}
.adm-search-form input {
  flex: 1;
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  font-size: 17px;
  padding: 12px 0;
  color: var(--adm-ink);
}
.adm-search-form input::placeholder { color: var(--adm-muted); }
.adm-search-hint {
  margin-top: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

/* ── 9. MOBILE DRAWER ───────────────────────────────────────────────────── */
.adm-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(8, 10, 16, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.adm-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.adm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  width: min(340px, 88vw);
  background: var(--adm-night-2);
  color: rgba(255, 255, 255, 0.88);
  transform: translateX(102%);
  transition: transform 0.45s var(--adm-ease);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
}
.adm-drawer.is-open {
  display: flex;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* Global horizontal overflow guard */
html,
body,
.wrapper,
.main-content,
.content-wrap,
.site-content {
  overflow-x: clip;
}

/* Breaking news/marquee containment across all breakpoints */
.breaking--news .row {
  margin-left: 0;
  margin-right: 0;
}

.breaking--news .news-updates--list {
  width: 100%;
  overflow: hidden !important;
  white-space: nowrap;
}

.breaking--news .js-marquee-wrapper,
.breaking--news .js-marquee,
.breaking--news [class*='marquee'] {
  white-space: nowrap !important;
}

.breaking--news .js-marquee {
  display: inline-block;
}

.breaking--news .news-updates--list .nav {
  flex-wrap: nowrap !important;
}

.breaking--news .news-updates--list .nav > li {
  flex: 0 0 auto;
}

.adm-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.adm-drawer-head img { max-height: 40px; filter: brightness(0) invert(1); }
.adm-drawer-close {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.adm-drawer-close:hover { background: var(--adm-accent); border-color: var(--adm-accent); transform: rotate(90deg); }

.adm-drawer-menu { list-style: none; margin: 0; padding: 12px 0; flex: 1; }
.adm-drawer-menu > li { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.adm-drawer-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.25s var(--adm-ease);
}
.adm-drawer-menu a:hover,
.adm-drawer-menu li.current-menu-item > a {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  padding-left: 30px;
}
.adm-drawer-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--adm-ease);
}
.adm-drawer-sub a {
  padding-left: 44px;
  font-weight: 500;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
.adm-drawer-chevron { transition: transform 0.3s var(--adm-ease); flex-shrink: 0; }
li.open > a .adm-drawer-chevron { transform: rotate(180deg); }

.adm-drawer-foot {
  padding: 22px 24px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* Legacy offcanvas neutralized (replaced by adm drawer/search) */
.offcanvas, .offcanvas-panel { display: none !important; }

/* ── 10. POST CARDS ─────────────────────────────────────────────────────── */
.adm-card {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  overflow: hidden;
  box-shadow: var(--adm-shadow-sm);
  transition: transform var(--adm-speed) var(--adm-ease),
              box-shadow var(--adm-speed) ease, border-color 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.adm-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--adm-shadow-md);
  border-color: transparent;
}
.adm-card-img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--adm-surface-2);
}
.adm-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--adm-ease), filter 0.5s ease;
}
.adm-card:hover .adm-card-img img { transform: scale(1.06); }

.adm-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.adm-card-title {
  font-family: var(--adm-display);
  font-weight: 700;
  line-height: 1.28;
  margin-bottom: 10px;
  font-size: 19px;
}
.adm-card-title a {
  color: var(--adm-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--adm-accent), var(--adm-accent));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 96%;
  transition: background-size 0.35s var(--adm-ease), color 0.25s ease;
}
.adm-card:hover .adm-card-title a {
  background-size: 100% 2px;
  color: var(--adm-accent);
}
.adm-card-excerpt {
  color: var(--adm-ink-soft);
  font-size: 13.5px;
  line-height: 1.65;
  margin-bottom: 14px;
}
.adm-card-more {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--adm-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.adm-card-more svg { transition: transform 0.3s var(--adm-ease); }
.adm-card:hover .adm-card-more svg { transform: translateX(4px); }

/* Category chip */
.adm-chip,
.cat-btn, .post--category {
  display: inline-block;
  background: var(--adm-accent);
  color: #fff !important;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 12px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s var(--adm-ease), filter 0.2s ease;
}
.adm-chip:hover, .cat-btn:hover, .post--category:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  color: #fff;
}

/* Meta row */
.adm-meta,
.post--meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--adm-muted);
}
.adm-meta a, .post--meta a {
  color: var(--adm-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.adm-meta a:hover, .post--meta a:hover { color: var(--adm-accent); }

/* Row card */
.adm-card--row { flex-direction: row; }
.adm-card--row .adm-card-img {
  aspect-ratio: auto;
  width: 260px;
  flex-shrink: 0;
  min-height: 170px;
  align-self: stretch;
}
/* img fills the flex-stretched container via absolute positioning since
   height:100% is unreliable when the parent has no explicit height */
.adm-card--row .adm-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 575px) {
  .adm-card--row { flex-direction: column; }
  .adm-card--row .adm-card-img { width: 100%; aspect-ratio: 16/10; align-self: auto; }
  .adm-card--row .adm-card-img img { position: static; }
}

/* Hero card */
.adm-card--hero { border-radius: 18px; }
.adm-card--hero .adm-card-img { aspect-ratio: 16 / 9.5; }
.adm-card--hero .adm-card-title { font-size: clamp(22px, 3vw, 30px); line-height: 1.2; }

.adm-card--hero-overlay {
  position: relative;
  border: none;
  background: var(--adm-night);
  justify-content: flex-end;
}
.adm-card--hero-overlay .adm-card-img {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
}
.adm-card--hero-overlay .adm-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 14, 0.92) 0%, rgba(8, 9, 14, 0.25) 55%, rgba(8, 9, 14, 0.05) 100%);
  transition: opacity 0.4s ease;
}
.adm-card--hero-overlay .adm-card-body {
  position: relative;
  z-index: 2;
  background: transparent;
}
.adm-card--hero-overlay .adm-card-title a { color: #fff; }
.adm-card--hero-overlay .adm-card-excerpt { color: rgba(255, 255, 255, 0.72); }
.adm-card--hero-overlay .adm-meta,
.adm-card--hero-overlay .adm-meta a { color: rgba(255, 255, 255, 0.6); }

/* Numbered compact item */
.adm-numbered { counter-reset: admnum; }
.adm-numbered-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px dashed var(--adm-border);
  counter-increment: admnum;
}
.adm-numbered-item:last-child { border-bottom: none; }
.adm-numbered-item::before {
  content: counter(admnum, decimal-leading-zero);
  font-family: var(--adm-display);
  font-weight: 800;
  font-size: 21px;
  color: var(--adm-border-strong);
  line-height: 1;
  min-width: 34px;
  transition: color 0.3s ease;
}
.adm-numbered-item:hover::before { color: var(--adm-accent); }
.adm-numbered-item a {
  color: var(--adm-ink);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.2s ease;
}
.adm-numbered-item a:hover { color: var(--adm-accent); }

/* Legacy post--item restyle (builder sections / untouched templates) */
.post--item {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-sm);
  transition: transform var(--adm-speed) var(--adm-ease), box-shadow var(--adm-speed) ease;
}
.post--item:hover {
  transform: translateY(-5px);
  box-shadow: var(--adm-shadow-md);
}
/* Image-style cards need overflow:hidden so the bg image fills the rounded card */
.post--item.bg-img-style, .post--item.image-overlay,
.post--item.content-overlay { border: none; overflow: hidden; }
/* Non-image cards: clip only the image, not the text area below */
.post--item:not(.bg-img-style):not(.image-overlay):not(.content-overlay) .post--img {
  overflow: hidden;
  border-radius: var(--adm-radius) var(--adm-radius) 0 0;
}
/* Reset any widget heading styles that bleed onto card titles */
.post--title { border-bottom: none; padding-bottom: 0; margin-bottom: 0; font-size: inherit; }
.post--title a { color: var(--adm-ink); transition: color 0.22s ease; }
.post--title a:hover { color: var(--adm-accent); }
/* theme-color.php sets --color-title (fixed dark) on .post--item .post--title a;
   override so titles stay readable in dark mode */
[data-theme="dark"] .post--item .post--title a { color: var(--adm-ink) !important; }
[data-theme="dark"] .post--item .post--title a:hover { color: var(--adm-accent) !important; }
/* Category badges inside flex-column post--content must not stretch to full width */
.post--content .post--category,
.post--content .cat-btn { align-self: flex-start; width: fit-content !important; max-width: 100%; }
/* Constrain placeholder ad images so they don't inflate column heights */
#section_189_widget_453 img,
#section_189_widget_455 img { max-height: 220px; width: auto; max-width: 100%; object-fit: contain; }
.post--item.bg-img-style .post--title a,
.post--item.image-overlay .post--title a,
.post--item.content-overlay .post--title a { color: #fff; }

/* ── 11. SECTION TITLES / KICKERS ───────────────────────────────────────── */
.section-title {
  position: relative;
  border-bottom: 1px solid var(--adm-border);
  padding-bottom: 12px;
  margin-bottom: 26px;
}
.section-title h2, .section-title h3, .section-title h5 {
  position: relative;
  font-weight: 700;
  margin: 0;
}
.section-title h2::before, .section-title h3::before, .section-title h5::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -13px;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--adm-accent);
}
.adm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--adm-accent);
  margin-bottom: 10px;
}
.adm-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--adm-accent);
  border-radius: 2px;
}

/* ── 12. WIDGETS ────────────────────────────────────────────────────────── */
.widget {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-sm);
  padding: 16px;
  margin-bottom: 16px;
}
.widget .widget-title, .widget h4:not(.post--title), .widget h5:not(.post--title) {
  font-family: var(--adm-display);
  font-weight: 700;
  font-size: 17px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--adm-border);
  position: relative;
  color: var(--adm-ink);
}
.widget .widget-title::after, .widget h4:not(.post--title)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 42px;
  height: 2.5px;
  background: var(--adm-accent);
  border-radius: 3px;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li a:not(.btn) { color: var(--adm-ink-soft); transition: color 0.2s ease; }
.widget ul li a:hover { color: var(--adm-accent); }
.widget.widget_newsletter {
  background: linear-gradient(140deg, var(--adm-night) 0%, #2a1620 130%);
  border: none;
  color: rgba(255, 255, 255, 0.82);
}
.widget.widget_newsletter .widget-title,
.widget.widget_newsletter h5 { color: #fff; border-color: rgba(255, 255, 255, 0.14); }
.widget-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--adm-border);
  color: var(--adm-ink-soft);
  font-size: 14px;
  margin: 3px;
  transition: all 0.28s var(--adm-ease);
}
.widget-socials a:hover {
  background: var(--adm-accent);
  border-color: var(--adm-accent);
  color: #fff;
  transform: translateY(-3px);
}

.aside-sticky { position: sticky; top: 90px; }

/* ── 13. BREADCRUMB / PAGE HEADERS ──────────────────────────────────────── */
.page-title-wrap, .breadcrumb-area {
  background:
    radial-gradient(ellipse 60% 130% at 85% -20%, var(--adm-accent-soft), transparent),
    var(--adm-surface);
  border-bottom: 1px solid var(--adm-border);
  padding: 34px 0;
}
.breadcrumb, .breadcrumb.nav {
  background: none;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.breadcrumb li a, .breadcrumb li span { color: var(--adm-muted); }
.breadcrumb li a:hover { color: var(--adm-accent); }
.breadcrumb li.active span, .breadcrumb li.active {
  color: var(--adm-ink);
  font-weight: 600;
}

/* ── 14. PAGINATION ─────────────────────────────────────────────────────── */
.pagination ul, .pagination .list-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pagination li a, .pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--adm-border);
  background: var(--adm-surface);
  color: var(--adm-ink-soft);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.25s var(--adm-ease);
}
.pagination li a:hover {
  border-color: var(--adm-accent);
  color: var(--adm-accent);
  transform: translateY(-2px);
}
.pagination li span.current {
  background: var(--adm-accent);
  border-color: var(--adm-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.pagination-wrapper .pagination { display: flex; gap: 6px; justify-content: center; }
.pagination-wrapper .page-link {
  border-radius: 50% !important;
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--adm-border);
  background: var(--adm-surface);
  color: var(--adm-ink-soft);
  font-weight: 600;
  transition: all 0.25s var(--adm-ease);
}
.pagination-wrapper .page-item.active .page-link {
  background: var(--adm-accent) !important;
  border-color: var(--adm-accent) !important;
  color: #fff !important;
}

/* ── 15. FOOTER ─────────────────────────────────────────────────────────── */
.footer, .site-footer {
  background: var(--adm-night);
  color: rgba(255, 255, 255, 0.66);
  position: relative;
  margin-top: 40px;
}
.footer::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--adm-accent), #ff8a5c 45%, transparent 90%);
}
.footer a { color: rgba(255, 255, 255, 0.66); transition: color 0.2s ease; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer .widget {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.footer .widget .widget-title, .footer .widget h4, .footer .widget h5 {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}
.footer .widget ul li a { color: rgba(255, 255, 255, 0.66); transition: all 0.25s ease; }
.footer .widget ul li a:hover { color: #fff; padding-left: 4px; }
.footer .widget-socials a {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.72);
}
.footer .widget-socials a:hover {
  background: var(--adm-accent);
  border-color: var(--adm-accent);
  color: #fff;
}

/* Gallery grid in footer */
.footer .widget_gallery ul,
.footer .widget_gallery > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer .widget_gallery li a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
}
.footer .widget_gallery li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.footer .widget_gallery li a:hover img { transform: scale(1.08); }
.adm-footer-newsletter {
  background: linear-gradient(135deg, rgba(255, 138, 92, 0.12), rgba(217, 43, 43, 0.15));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.adm-footer-newsletter .theme-input-group {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.35);
  max-width: 560px;
}
.adm-footer-newsletter .theme-input-group:focus-within {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.15);
}
.adm-footer-newsletter .theme-input-group input { color: #fff; font-size: 14px; }
.adm-footer-newsletter .theme-input-group input::placeholder { color: rgba(255, 255, 255, 0.65); }
.adm-footer-newsletter .newsletter-form button {
  background: var(--adm-accent) !important;
  color: #fff !important;
  border: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.2s ease;
}
.adm-footer-newsletter .newsletter-form button:hover {
  background: var(--adm-accent-dark, #b81e1e) !important;
  transform: translateY(-1px);
}
.adm-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  padding: 20px 0;
}
.adm-footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  justify-content: center;
  list-style: none;
  padding: 0;
}

/* ── 16. GDPR COOKIE / BACK TO TOP / PRELOADER ──────────────────────────── */
.gdpr-box {
  background: var(--adm-night-2) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-lg);
  padding: 22px;
  max-width: 320px;
  animation: adm-slide-right 0.6s var(--adm-ease);
}
.back-to-top, #back-to-top, .scrollToTop {
  background: var(--adm-accent) !important;
  border: none;
  border-radius: 12px !important;
  width: 44px;
  height: 44px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.3s var(--adm-ease), filter 0.2s ease;
}
.back-to-top:hover { transform: translateY(-4px); filter: brightness(1.1); }

.adm-preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--adm-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.adm-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.adm-preloader-mark {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid var(--adm-border);
  border-top-color: var(--adm-accent);
  animation: adm-spin 0.9s linear infinite;
}
@keyframes adm-spin { to { transform: rotate(360deg); } }

/* ── 17. HOME HERO GRID ─────────────────────────────────────────────────── */
.adm-hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 20px;
}
@media (max-width: 991px) { .adm-hero { grid-template-columns: 1fr; } }

.adm-hero-side-stack { display: grid; gap: 20px; align-content: start; }

.adm-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.adm-rail-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.adm-rail-scroll > * { scroll-snap-align: start; }
.adm-rail-nav {
  display: flex;
  gap: 8px;
}
.adm-rail-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--adm-border);
  background: var(--adm-surface);
  color: var(--adm-ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--adm-ease);
}
.adm-rail-btn:hover {
  background: var(--adm-accent);
  border-color: var(--adm-accent);
  color: #fff;
}

.adm-trending-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  overflow-x: auto;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-sm);
}
.adm-trending-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-right: 1px dashed var(--adm-border);
  min-width: 230px;
  text-decoration: none;
  transition: background 0.25s ease;
}
.adm-trending-item:last-child { border-right: none; }
.adm-trending-item:hover { background: var(--adm-surface-2); }
.adm-trending-rank {
  font-family: var(--adm-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--adm-accent);
  line-height: 1;
}
.adm-trending-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--adm-muted);
}
.adm-trending-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--adm-ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.adm-newsletter-band {
  background:
    radial-gradient(ellipse 70% 160% at 15% -30%, rgba(255, 138, 92, 0.28), transparent),
    radial-gradient(ellipse 60% 140% at 95% 120%, rgba(217, 43, 43, 0.32), transparent),
    var(--adm-night);
  border-radius: 20px;
  color: #fff;
  padding: 52px 44px;
  position: relative;
  overflow: hidden;
}
.adm-newsletter-band h2 { color: #fff; }
.adm-newsletter-band p { color: rgba(255, 255, 255, 0.72); }
.adm-newsletter-band .theme-input-group {
  max-width: 480px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.adm-newsletter-band .theme-input-group input { color: #fff; }
.adm-newsletter-band .theme-input-group input::placeholder { color: rgba(255, 255, 255, 0.45); }
@media (max-width: 767px) { .adm-newsletter-band { padding: 38px 24px; } }

/* ── 18. ARTICLE PAGE ───────────────────────────────────────────────────── */
.adm-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--adm-accent), #ff8a5c);
  z-index: 1000;
  transition: width 0.08s linear;
}

.adm-article-head { padding: 40px 0 26px; }
@media (max-width: 767px) { .adm-article-head { padding: 26px 0 18px; } }
.adm-article-title {
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.14;
  font-weight: 800;
  margin-bottom: 18px;
}
.adm-article-hero {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 34px;
  box-shadow: var(--adm-shadow-md);
  animation: adm-scale-in 0.7s var(--adm-ease);
}
.adm-article-hero img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
}

/* Sticky share rail */
.adm-share-rail {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.adm-share-rail-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adm-muted);
  writing-mode: vertical-rl;
  margin-bottom: 4px;
}
@media (max-width: 991px) {
  .adm-share-rail {
    position: static;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 22px;
  }
  .adm-share-rail-label { writing-mode: horizontal-tb; }
}
.adm-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--adm-border);
  background: var(--adm-surface);
  color: var(--adm-ink-soft);
  font-size: 15px;
  text-decoration: none;
  transition: all 0.28s var(--adm-ease);
}
.adm-share-btn:hover {
  background: var(--adm-accent);
  border-color: var(--adm-accent);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* Article prose */
.adm-prose {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--adm-ink-soft);
}
.adm-prose > p { margin-bottom: 1.35em; color: var(--adm-ink-soft); }
.adm-prose h2, .adm-prose h3, .adm-prose h4 {
  color: var(--adm-ink);
  font-family: var(--adm-display);
  font-weight: 700;
  margin: 1.7em 0 0.65em;
}
.adm-prose h2 { font-size: 27px; }
.adm-prose h3 { font-size: 22px; }
.adm-prose img {
  border-radius: var(--adm-radius);
  margin: 1.6em auto;
  box-shadow: var(--adm-shadow-sm);
}
.adm-prose blockquote {
  position: relative;
  margin: 2em 0;
  padding: 24px 28px 24px 58px;
  background: var(--adm-surface-2);
  border-radius: var(--adm-radius);
  font-family: var(--adm-display);
  font-size: 19px;
  line-height: 1.55;
  color: var(--adm-ink);
  border-left: none;
}
.adm-prose blockquote::before {
  content: "\201C";
  position: absolute;
  left: 18px;
  top: 6px;
  font-family: var(--adm-display);
  font-size: 64px;
  line-height: 1;
  color: var(--adm-accent);
  opacity: 0.85;
}
.adm-prose a { color: var(--adm-accent); text-decoration: underline; text-underline-offset: 3px; }
.adm-prose ul, .adm-prose ol { padding-left: 22px; margin-bottom: 1.35em; }
.adm-prose li { margin-bottom: 0.45em; }
.adm-prose iframe { max-width: 100%; border-radius: var(--adm-radius); }

/* Drop cap on first paragraph */
.adm-dropcap > p:first-of-type::first-letter,
.adm-prose.dropcap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--adm-display);
  font-size: 66px;
  line-height: 0.82;
  font-weight: 700;
  color: var(--adm-accent);
  padding: 6px 12px 0 0;
}

/* Tags */
.adm-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-tags a, .post--cats a {
  display: inline-block;
  background: var(--adm-surface-2);
  border: 1px solid var(--adm-border);
  color: var(--adm-ink-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
  text-decoration: none;
  transition: all 0.25s var(--adm-ease);
}
.adm-tags a:hover, .post--cats a:hover {
  background: var(--adm-accent);
  border-color: var(--adm-accent);
  color: #fff;
  transform: translateY(-2px);
}

/* Author box */
.adm-author-box {
  display: flex;
  gap: 20px;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  padding: 26px;
  box-shadow: var(--adm-shadow-sm);
}
.adm-author-box img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--adm-accent-soft);
}
.adm-author-box h4 { margin-bottom: 6px; }
.adm-author-box p { color: var(--adm-ink-soft); font-size: 13.5px; line-height: 1.6; margin-bottom: 8px; }

/* Prev / next nav */
.adm-postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.adm-postnav-card {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  padding: 18px;
  text-decoration: none;
  transition: transform var(--adm-speed) var(--adm-ease), box-shadow var(--adm-speed) ease, border-color 0.25s ease;
}
.adm-postnav-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--adm-shadow-md);
  border-color: transparent;
}
.adm-postnav-card img { width: 84px; height: 62px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.adm-postnav-card.is-next { flex-direction: row-reverse; text-align: right; }
.adm-postnav-dir {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--adm-muted);
  margin-bottom: 5px;
}
.adm-postnav-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--adm-ink);
}
.adm-postnav-card:hover .adm-postnav-title { color: var(--adm-accent); }
@media (max-width: 575px) { .adm-postnav { grid-template-columns: 1fr; } }

/* Comments */
.comments-area .comment-item, .comment-list .comment-body {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  padding: 20px;
  margin-bottom: 16px;
}
.reply-btn { color: var(--adm-accent); font-weight: 600; cursor: pointer; }

/* ── 19. LISTING PAGE EXTRAS ────────────────────────────────────────────── */
.adm-filter-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-filter-chip {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--adm-border);
  background: var(--adm-surface);
  color: var(--adm-ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s var(--adm-ease);
}
.adm-filter-chip:hover {
  border-color: var(--adm-accent);
  color: var(--adm-accent);
  transform: translateY(-2px);
}
.adm-archive-title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  margin: 8px 0 6px;
}
.adm-archive-count { color: var(--adm-muted); font-size: 13px; letter-spacing: 0.03em; }

.adm-empty-state { text-align: center; padding: 70px 20px; }
.adm-empty-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--adm-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--adm-accent);
  font-size: 34px;
  animation: adm-float 3.4s ease-in-out infinite;
}

/* ── 20. AUTH PAGES ─────────────────────────────────────────────────────── */
.adm-auth-wrap {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: stretch;
  padding: 50px 0;
}
.adm-auth-card {
  display: grid;
  grid-template-columns: 5fr 7fr;
  width: 100%;
  max-width: 1020px;
  margin: auto;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--adm-shadow-lg);
}
.adm-auth-side {
  background:
    radial-gradient(ellipse 80% 90% at 80% 10%, rgba(255, 138, 92, 0.3), transparent),
    radial-gradient(ellipse 90% 100% at 10% 95%, rgba(217, 43, 43, 0.35), transparent),
    var(--adm-night);
  color: #fff;
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.adm-auth-side h3 { color: #fff; font-size: 30px; line-height: 1.25; }
.adm-auth-side p { color: rgba(255, 255, 255, 0.68); }
.adm-auth-form-col { padding: 52px 48px; }
.adm-auth-form-col h2 { margin-bottom: 26px; }
@media (max-width: 767px) {
  .adm-auth-card { grid-template-columns: 1fr; }
  .adm-auth-side { padding: 36px 30px; }
  .adm-auth-form-col { padding: 36px 30px; }
}

/* ── 21. PANELS (Press Office / Wallet / Dashboard) ─────────────────────── */
.adm-panel {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-sm);
  padding: 28px;
}
.adm-feed-item {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  padding: 24px 26px;
  margin-bottom: 18px;
  box-shadow: var(--adm-shadow-sm);
  transition: transform var(--adm-speed) var(--adm-ease),
              box-shadow var(--adm-speed) ease, border-color 0.3s ease;
}
.adm-feed-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--adm-shadow-md);
  border-color: transparent;
}
.adm-badge {
  display: inline-block;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 12px;
}
.adm-badge--accent { background: var(--adm-accent); color: #fff; }
.adm-badge--info   { background: rgba(41, 128, 220, 0.12); color: #2980dc; }
.adm-badge--ok     { background: rgba(33, 150, 83, 0.12); color: #219653; }
.adm-badge--warn   { background: rgba(240, 140, 20, 0.14); color: #e07f00; }
.adm-badge--danger { background: rgba(220, 53, 69, 0.14); color: #d92b2b; }
.adm-badge--neutral{ background: var(--adm-surface-2); color: var(--adm-muted); border: 1px solid var(--adm-border); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.stat-card {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  padding: 24px;
  box-shadow: var(--adm-shadow-sm);
  transition: transform var(--adm-speed) var(--adm-ease), box-shadow var(--adm-speed) ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--adm-shadow-md); }
.stat-card .stat-value {
  font-family: var(--adm-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--adm-ink);
}
.stat-card .stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--adm-muted);
}
.table-modern { width: 100%; border-collapse: collapse; }
.table-modern th {
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--adm-muted);
  padding: 12px 14px;
  border-bottom: 2px solid var(--adm-border);
}
.table-modern td {
  padding: 14px;
  border-bottom: 1px solid var(--adm-border);
  color: var(--adm-ink-soft);
  font-size: 13.5px;
}
.table-modern tbody tr { transition: background 0.2s ease; }
.table-modern tbody tr:hover { background: var(--adm-surface-2); }

/* ── 22. 404 ────────────────────────────────────────────────────────────── */
.adm-404 {
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  position: relative;
  overflow: hidden;
}
.adm-404-code {
  font-family: var(--adm-display);
  font-weight: 900;
  font-size: clamp(110px, 22vw, 210px);
  line-height: 1;
  background: linear-gradient(120deg, var(--adm-accent), #ff8a5c 55%, var(--adm-ink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: adm-float 5s ease-in-out infinite;
}

/* ── 23. MISC LEGACY HARMONISATION ──────────────────────────────────────── */
.bg-light { background: var(--adm-surface-2) !important; }
.bg-white, .bg-dark { background-color: var(--adm-surface) !important; }
.card, .auth-card {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
}
.badge-primary, .badge-info, .badge-success, .badge-danger, .badge-secondary {
  border-radius: 999px !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 12px;
}
.text-muted { color: var(--adm-muted) !important; }
a.text-dark:hover, a.text-primary { color: var(--adm-accent); }
.nav-tabs .nav-link.active { border-color: var(--adm-accent); color: var(--adm-accent); }
.dropdown-menu {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  box-shadow: var(--adm-shadow-md);
}
.dropdown-item { color: var(--adm-ink-soft); }
.dropdown-item:hover { background: var(--adm-accent-soft); color: var(--adm-accent); }
.modal-content {
  background: var(--adm-surface);
  border-radius: var(--adm-radius);
  border: none;
}
[data-theme="dark"] img { filter: brightness(0.96); }
/* Only invert the footer logo and drawer logo — NOT gallery/post images */
[data-theme="dark"] .footer > div > a > img,
[data-theme="dark"] .adm-drawer-head img { filter: brightness(0) invert(1); }
/* Gallery and post images in footer must show their real colours */
[data-theme="dark"] .footer .widget_gallery img,
[data-theme="dark"] .footer .post--img img,
[data-theme="dark"] .footer .adm-card-img img { filter: none; }

/* ─── Navigation dropdown stacking fix ────────────────────────────────────
   .widget:hover rules in theme-color.php and custom.css apply
   transform:translateY() which creates a z-index:auto stacking context on
   the widget. Because the nav widget appears early in the DOM, later page
   sections paint on top of it, hiding the dropdown. Prevent the transform
   on any widget that wraps the main navigation.                             */
.widget:has(.adm-nav):hover,
.widget:has(.horizontal-menu):hover {
  transform: none !important;
}

/* Ensure the nav bar and its dropdowns always sit above breaking-news and
   page content, regardless of any ancestor stacking context.               */
.adm-nav {
  isolation: isolate;
  z-index: 9999 !important;
}

.horizontal-menu > .nav li .submenu,
.horizontal-menu > .nav li .megamenu {
  z-index: 9999999 !important;
}

.breaking--news {
  position: relative !important;
  z-index: 1 !important;
}

/* ─── Responsive header & menu fixes ───────────────────────────────── */

/* 1. Zero out widget padding for the section that wraps the nav/breaking-
   news so it doesn’t add unwanted vertical whitespace on all viewports.  */
.widget:has(.adm-header),
.widget:has(.breaking--news):not(:has(.adm-card)) {
  padding: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* 2. Breaking news: always a single horizontal row on every viewport.
   Bootstrap’s d-lg-flex only activates flex at ≥1024px; below that the
   inner container stacks, adding extra height. We override here.         */
.breaking--news .container > div {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}

/* Remove the vertical margin Bootstrap adds on mobile via my-20 */
.breaking--news .news-updates--list {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-width: 0;
}

/* 3. Compact nav item spacing for all desktop widths — the menu has 8 items
   and the default 56px per-item horizontal space overflows Bootstrap’s
   container at any common screen width. */
@media (min-width: 992px) {
  .horizontal-menu > .nav > li { padding: 0 8px; }
  .horizontal-menu > .nav > li > a { padding-left: 10px; padding-right: 10px; }
}

/* 4. Ensure the nav list itself never scrolls — items must always be
   fully visible. */
@media (min-width: 992px) {
  .horizontal-menu > .nav {
    flex-wrap: nowrap;
    overflow: visible;
  }
}

/* 4b. Desktop overflow hardening for marquee/row wrappers and root containers */
@media (min-width: 992px) {
  html,
  body,
  .wrapper,
  .main-content,
  .content-wrap,
  .site-content {
    overflow-x: clip;
  }

  .breaking--news,
  .breaking--news .container,
  .breaking--news .row,
  .breaking--news .news-updates--list,
  .breaking--news .js-marquee,
  .breaking--news .js-marquee-wrapper,
  .breaking--news [class*='marquee'],
  .breaking--news [class*='col-'],
  .breaking--news [class^='col-'] {
    max-width: 100%;
    min-width: 0;
  }

  .breaking--news .row {
    margin-left: 0;
    margin-right: 0;
  }

  .breaking--news .news-updates--list,
  .breaking--news .js-marquee-wrapper {
    overflow: hidden !important;
  }
}

/* 5. Mobile: tighten the inter-section spacing so the gap between the
   header section and the first content section isn’t too large.          */
@media (max-width: 991px) {
  /* Remove inherited widget shadow/border/margin on nav+BN container */
  .widget:has(.adm-header),
  .widget:has(.breaking--news):not(:has(.adm-card)) {
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Compact breaking-news label on small screens */
  .breaking-title {
    padding: 10px 14px;
    font-size: 10px;
  }
  .breaking--news .current--date {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .breaking-title { padding: 8px 12px; }
  .breaking--news .news-updates--list a { font-size: 12px; }
}

@media (max-width: 420px) {
  .adm-nav-inner {
    min-height: 56px;
    gap: 8px;
  }

  .adm-logo img {
    max-height: 32px;
    max-width: 150px;
  }

  .adm-burger {
    width: 38px;
    height: 38px;
    padding: 0 9px;
  }

  .nav-action-btn {
    width: 34px;
    height: 34px;
  }
}