/* ══════════════════════════════════════════════════════════════════════════
   AfriDevMonitor — Modern Layer (v2)
   Loaded LAST. Responsibilities:
     1. Bridge legacy colour variables (custom.css / theme-color.php) to the
        --adm-* tokens so light AND dark mode are always legible.
     2. Modern home page, cards, rail, ticker, newsletter.
     3. Structured, highly readable article page.
     4. Motion: load-in, hover, spotlight, reveal.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKEN BRIDGE ────────────────────────────────────────────────────── */
:root {
  --color-title: var(--adm-ink);
  --color-title-two: var(--adm-ink);
  --color-text: var(--adm-ink-soft);
  --color-light: var(--adm-muted);
  --surface-one: var(--adm-bg);
  --surface-two: var(--adm-surface);
  --surface-three: var(--adm-surface-2);
  --line-soft: var(--adm-border);
  --news-surface: var(--adm-surface);
  --news-surface-soft: var(--adm-bg);
  --news-border: var(--adm-border);
  --news-title: var(--adm-ink);
  --news-text: var(--adm-ink-soft);
  --headline-font: var(--adm-display);
  --body-font: var(--adm-body);
  --adm-grad: linear-gradient(120deg, var(--adm-accent), #ff8a5c);
}
html[data-theme="dark"] {
  --adm-ink-soft: #c5cad8;
  --adm-muted: #9aa2b5;
  --adm-accent-soft: rgba(255, 96, 96, 0.16);
  color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

html body,
html body[class*="theme-template-"] {
  background-color: var(--adm-bg);
  color: var(--adm-ink-soft);
  font-family: var(--adm-body);
}
html main,
html body main {
  background:
    radial-gradient(900px 380px at 12% -80px, var(--adm-accent-soft), transparent 70%),
    radial-gradient(800px 320px at 92% -60px, rgba(255, 138, 92, 0.10), transparent 70%),
    var(--adm-bg);
  overflow: visible;
}
html[data-theme="dark"] main {
  background:
    radial-gradient(900px 380px at 12% -80px, rgba(255, 96, 96, 0.10), transparent 70%),
    radial-gradient(800px 320px at 92% -60px, rgba(255, 138, 92, 0.06), transparent 70%),
    var(--adm-bg);
}
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 { color: var(--adm-ink); }

html body .section-title h2,
html body .section-title h3,
html body .widget .widget-title { color: var(--adm-ink); }

html body .widget,
html body .auth-card,
html body .comment-respond,
html body .post--item.top-img-overlay .post--content {
  background: var(--adm-surface);
  border-color: var(--adm-border);
}
html body .widget:hover { transform: none; box-shadow: var(--adm-shadow-sm); }
html body .post--item .post--title a,
html body .post--title a { color: var(--adm-ink); }
html body .post--item.bg-img-style .post--title a,
html body .post--item.image-overlay .post--title a,
html body .post--item.content-overlay .post--title a { color: #fff; }
html body a:hover { color: var(--adm-accent); }
html body .post-single,
html body .post--content,
html body .main-content--section { color: var(--adm-ink-soft); }

/* Admin “white header” override must not blind dark mode */
html body .adm-nav#header_bottom_h1,
html body .adm-nav {
  background: color-mix(in srgb, var(--adm-surface) 90%, transparent) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--adm-border);
}
html body .header .header-bottom { background: var(--adm-surface); }

/* Footer copy on the dark base */
html body .footer,
html body .footer p, html body .footer li, html body .footer span,
html body .footer a, html body .footer h1, html body .footer h2,
html body .footer h3, html body .footer h4, html body .footer h5,
html body .footer h6, html body .footer .widget-title { color: rgba(255, 255, 255, 0.78); }
html body .footer h1, html body .footer h2, html body .footer h3,
html body .footer h4, html body .footer h5, html body .footer h6,
html body .footer .widget-title { color: #fff; }
html body .footer a:hover { color: #fff; }

/* Focus ring */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body textarea:focus-visible {
  outline: 2px solid var(--adm-accent) !important;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── 2. HEADER POLISH ───────────────────────────────────────────────────── */
.adm-topbar { font-weight: 500; letter-spacing: 0.01em; }
.adm-nav-inner { min-height: 72px; }
.horizontal-menu > .nav > li > a { color: var(--adm-ink); font-size: 12.5px; }
.horizontal-menu > .nav > li:hover > a,
.horizontal-menu > .nav > li.current-menu-item > a { color: var(--adm-accent); }
.adm-nav.is-stuck { animation: adm-nav-drop 0.45s var(--adm-ease); }
.nav-action-btn { color: var(--adm-ink); border-color: var(--adm-border-strong); }
.adm-theme-toggle { color: rgba(255, 255, 255, 0.85); }
.adm-nav .adm-theme-toggle { color: var(--adm-ink); }

/* Ticker: calmer, readable, gradient */
.breaking--news {
  background: linear-gradient(90deg, var(--adm-accent-dark, var(--adm-accent)), var(--adm-accent) 40%, #ff7a4d 130%);
}
.breaking--news .news-updates--list a { font-weight: 600; font-size: 13px; color: #fff; }
.breaking--news .news-updates--list li { position: relative; }
.breaking--news .news-updates--list li + li::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

/* ── 3. MOTION PRIMITIVES ───────────────────────────────────────────────── */
@keyframes adm-rise {
  from { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes adm-kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.2%, -1%, 0); }
}
@keyframes adm-orb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(28px, -24px, 0) scale(1.12); }
}
@keyframes adm-shine {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(260%) skewX(-18deg); }
}
@keyframes adm-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes adm-ticker-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

[data-reveal] {
  transition: opacity 0.85s var(--adm-ease), transform 0.85s var(--adm-ease), filter 0.85s var(--adm-ease);
  filter: blur(5px);
}
[data-reveal].adm-in { filter: blur(0); }

/* Spotlight that follows the pointer (set by afridev.js) */
.adm-card { position: relative; isolation: isolate; }
.adm-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 62%);
  transition: opacity 0.35s ease;
}
[data-theme="light"] .adm-card:not(.adm-card--hero-overlay)::after {
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--adm-accent-soft), transparent 62%);
}
.adm-card:hover::after { opacity: 1; }

/* ── 4. CARDS (refined) ─────────────────────────────────────────────────── */
.adm-card {
  border-radius: 18px;
  border-color: var(--adm-border);
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 8px 24px rgba(20, 22, 26, 0.05);
}
html[data-theme="dark"] .adm-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35); }
.adm-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 2px 4px rgba(20, 22, 26, 0.05), 0 22px 48px rgba(20, 22, 26, 0.14);
  border-color: var(--adm-border-strong);
}
.adm-card-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(10, 12, 18, 0.35), transparent 45%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.adm-card:hover .adm-card-img::before { opacity: 1; }
.adm-card-img .adm-chip { z-index: 4; }
.adm-card-body { gap: 0; }
.adm-card-title { color: var(--adm-ink); letter-spacing: -0.012em; }
.adm-card-title a { color: var(--adm-ink); }
.adm-card-excerpt { color: var(--adm-ink-soft); font-size: 14px; }
.adm-card-more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--adm-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.adm-card-more svg { transition: transform 0.35s var(--adm-ease); }
.adm-card:hover .adm-card-more svg { transform: translateX(5px); }

.adm-meta { color: var(--adm-muted); font-weight: 500; }
.adm-meta li { display: inline-flex; align-items: center; gap: 6px; }
.adm-meta li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  margin-right: 4px;
}
.adm-meta a { color: var(--adm-ink-soft); font-weight: 600; }

.adm-chip {
  background: var(--adm-accent);
  letter-spacing: 0.1em;
  font-size: 10px;
  padding: 5px 13px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.adm-chip--glass {
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* ── 5. HOME — HERO ─────────────────────────────────────────────────────── */
.adm-home-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  animation: adm-rise 0.8s var(--adm-ease) both;
}
.adm-home-intro h1 {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}
.adm-home-intro h1 em {
  font-style: normal;
  background: var(--adm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.adm-home-date {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--adm-muted);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.adm-home-date .adm-live-dot { margin: 0; }

.adm-hero { gap: 22px; }
.adm-hero-main { animation: adm-rise 0.9s var(--adm-ease) 0.05s both; }
.adm-hero-side-stack > * { animation: adm-rise 0.8s var(--adm-ease) both; }
.adm-hero-side-stack > *:nth-child(1) { animation-delay: 0.15s; }
.adm-hero-side-stack > *:nth-child(2) { animation-delay: 0.25s; }
.adm-hero-side-stack > *:nth-child(3) { animation-delay: 0.35s; }
.adm-hero-side-stack > *:nth-child(4) { animation-delay: 0.45s; }
/* Hero cards are visible immediately; disable the reveal transition on them */
.adm-hero [data-reveal] { opacity: 1; transform: none; filter: none; }

.adm-card--hero-overlay {
  border-radius: 24px;
  min-height: 520px;
  box-shadow: 0 30px 70px rgba(10, 12, 18, 0.28);
}
.adm-card--hero-overlay:hover { transform: translateY(-4px); }
.adm-card--hero-overlay .adm-card-img img { animation: adm-kenburns 22s ease-in-out infinite alternate; }
.adm-card--hero-overlay:hover .adm-card-img img { transform: none; }
.adm-card--hero-overlay .adm-card-img::after {
  background:
    linear-gradient(to top, rgba(7, 8, 13, 0.96) 0%, rgba(7, 8, 13, 0.72) 32%, rgba(7, 8, 13, 0.18) 66%, rgba(7, 8, 13, 0.08) 100%);
}
.adm-card--hero-overlay .adm-card-body { padding: 40px !important; }
.adm-card--hero-overlay .adm-card-title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.adm-card--hero-overlay .adm-card-title a { color: #fff; }
.adm-card--hero-overlay:hover .adm-card-title a { color: #fff; }
.adm-card--hero-overlay .adm-card-excerpt { color: rgba(255, 255, 255, 0.88); font-size: 15.5px !important; }
.adm-card--hero-overlay .adm-meta,
.adm-card--hero-overlay .adm-meta a { color: rgba(255, 255, 255, 0.86); }
.adm-card--hero-overlay .adm-meta a:hover { color: #fff; text-decoration: underline; }
.adm-card--hero-overlay::after { display: none; }

.adm-hero-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 18px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #fff;
  color: #101218 !important;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--adm-ease), box-shadow 0.35s ease;
}
.adm-hero-cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  transform: translateX(-120%) skewX(-18deg);
}
.adm-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); }
.adm-hero-cta:hover::after { animation: adm-shine 0.9s ease; }
.adm-hero-cta svg { transition: transform 0.35s var(--adm-ease); }
.adm-hero-cta:hover svg { transform: translateX(4px); }

.adm-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--adm-grad);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Side stack: row cards */
.adm-hero-side-stack { gap: 16px; }
.adm-hero-side-stack .adm-card--row {
  align-items: center;
  border-radius: 18px;
  counter-increment: adm-side;
}
.adm-hero-side-stack { counter-reset: adm-side; }
.adm-hero-side-stack .adm-card--row .adm-card-img { position: relative; }
.adm-hero-side-stack .adm-card--row .adm-card-img::after {
  content: counter(adm-side);
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 4;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(10, 12, 18, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adm-hero-side-stack .adm-card-title { color: var(--adm-ink); }
.adm-hero-side-stack .adm-card--row:hover { transform: translateX(6px); }

@media (max-width: 991px) {
  .adm-card--hero-overlay { min-height: 440px !important; }
  .adm-card--hero-overlay .adm-card-body { padding: 26px !important; }
}
@media (max-width: 575px) {
  .adm-card--hero-overlay { min-height: 400px !important; border-radius: 20px; }
  .adm-card--hero-overlay .adm-card-body { padding: 22px !important; }
  .adm-hero-side-stack .adm-card--row { flex-direction: row; }
  .adm-hero-side-stack .adm-card--row .adm-card-img {
    width: 112px !important;
    min-height: 92px !important;
    aspect-ratio: auto;
    margin: 10px !important;
  }
  .adm-hero-side-stack .adm-card--row .adm-card-img img { position: absolute; }
}

/* ── 6. HOME — TOPIC PILLS ──────────────────────────────────────────────── */
.adm-topics {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
}
.adm-topics::-webkit-scrollbar { display: none; }
.adm-topic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--adm-border);
  background: var(--adm-surface);
  color: var(--adm-ink) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s var(--adm-ease);
}
.adm-topic::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--adm-accent);
  transition: transform 0.3s var(--adm-ease);
}
.adm-topic:hover {
  background: var(--adm-accent);
  border-color: var(--adm-accent);
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}
.adm-topic:hover::before { background: #fff; transform: scale(1.4); }

/* ── 7. HOME — TRENDING ─────────────────────────────────────────────────── */
.adm-trending-strip {
  border-radius: 20px;
  box-shadow: 0 8px 26px rgba(20, 22, 26, 0.06);
  position: relative;
}
.adm-trending-strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--adm-grad);
  transform-origin: left;
  animation: adm-line-grow 1.2s var(--adm-ease) 0.3s both;
}
.adm-trending-item { padding: 22px 24px; position: relative; }
.adm-trending-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--adm-accent-soft);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.adm-trending-item:hover::after { opacity: 1; }
.adm-trending-item > * { position: relative; z-index: 1; }
.adm-trending-rank {
  font-size: 34px;
  background: var(--adm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.4s var(--adm-ease-spring);
}
.adm-trending-item:hover .adm-trending-rank { transform: scale(1.12) rotate(-3deg); }
.adm-trending-label { color: var(--adm-muted); }
.adm-trending-title { color: var(--adm-ink); font-size: 13.5px; }

/* ── 8. HOME — SECTION HEADS & RAIL ─────────────────────────────────────── */
.adm-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.adm-section-head h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  margin: 0;
  color: var(--adm-ink);
}
.adm-link-all {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--adm-accent) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.adm-link-all svg { transition: transform 0.35s var(--adm-ease); }
.adm-link-all:hover svg { transform: translateX(5px); }

.adm-rail-head h2 { color: var(--adm-ink); font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.adm-rail-scroll {
  scrollbar-width: none;
  padding: 6px 4px 22px;
  margin: 0 -4px;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent 100%);
}
.adm-rail-scroll::-webkit-scrollbar { display: none; }
.adm-rail-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.adm-rail-scroll.is-dragging a { pointer-events: none; }
.adm-rail-scroll.is-start { -webkit-mask-image: none; mask-image: none; }
.adm-rail-btn {
  width: 44px;
  height: 44px;
  color: var(--adm-ink);
  border-color: var(--adm-border-strong);
}
.adm-rail-btn:disabled { opacity: 0.35; pointer-events: none; }
.adm-rail-progress {
  height: 3px;
  border-radius: 3px;
  background: var(--adm-border);
  overflow: hidden;
  margin-top: -6px;
}
.adm-rail-progress span {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 3px;
  background: var(--adm-grad);
  transition: transform 0.15s linear;
  transform-origin: left;
}

/* ── 9. HOME — MOST READ / SECTIONS ─────────────────────────────────────── */
.aside-sticky .widget {
  border-radius: 20px;
  padding: 22px 24px;
  background: var(--adm-surface);
}
.aside-sticky .widget h4 { color: var(--adm-ink); }
.adm-numbered-item { align-items: center; padding: 15px 0; }
.adm-numbered-item::before {
  font-size: 26px;
  min-width: 42px;
  color: var(--adm-border-strong);
}
.adm-numbered-item a { color: var(--adm-ink); font-size: 14px; }
.adm-numbered-item:hover::before { color: var(--adm-accent); transform: translateX(3px); }
.adm-numbered-item::before { transition: color 0.3s ease, transform 0.35s var(--adm-ease); }

.adm-filter-chip { color: var(--adm-ink); background: var(--adm-surface-2); border-color: var(--adm-border); }
.adm-filter-chip:hover { background: var(--adm-accent); color: #fff; border-color: var(--adm-accent); }

/* Section tiles */
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.adm-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  padding: 26px 22px 22px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: #fff !important;
  background: var(--adm-night-2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.4s var(--adm-ease), box-shadow 0.4s ease;
}
.adm-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 100% 0, var(--tile-a, rgba(217, 43, 43, 0.55)), transparent 62%),
    radial-gradient(circle at 0 100%, var(--tile-b, rgba(255, 138, 92, 0.35)), transparent 60%);
  transition: transform 0.6s var(--adm-ease);
}
.adm-tile:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3); }
.adm-tile:hover::before { transform: scale(1.25); }
.adm-tile-name { font-family: var(--adm-display); font-weight: 700; font-size: 19px; line-height: 1.2; }
.adm-tile-go {
  align-self: flex-end;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.4s var(--adm-ease);
}
.adm-tile:hover .adm-tile-go { background: #fff; color: #101218; transform: rotate(-45deg); }
.adm-tile:nth-child(3n+2) { --tile-a: rgba(42, 157, 143, 0.55); --tile-b: rgba(233, 196, 106, 0.25); }
.adm-tile:nth-child(3n+3) { --tile-a: rgba(131, 56, 236, 0.5); --tile-b: rgba(239, 71, 111, 0.3); }

/* ── 10. HOME — NEWSLETTER ──────────────────────────────────────────────── */
.adm-newsletter-band { border-radius: 28px; padding: 60px 52px; isolation: isolate; }
.adm-newsletter-band::before,
.adm-newsletter-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  z-index: -1;
  animation: adm-orb 12s ease-in-out infinite;
}
.adm-newsletter-band::before { width: 280px; height: 280px; right: -60px; top: -80px; background: rgba(255, 138, 92, 0.35); }
.adm-newsletter-band::after  { width: 240px; height: 240px; left: 20%; bottom: -120px; background: rgba(217, 43, 43, 0.4); animation-delay: -6s; }
.adm-newsletter-band h2 { color: #fff; }
.adm-newsletter-band p { color: rgba(255, 255, 255, 0.82); }
.adm-newsletter-band .theme-input-group { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); max-width: none; }
.adm-newsletter-band .theme-input-group:focus-within { border-color: rgba(255, 255, 255, 0.7); background: 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.7); }
@media (max-width: 767px) { .adm-newsletter-band { padding: 40px 24px; border-radius: 22px; } }

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.adm-article-head { padding: 34px 0 10px; position: relative; }
.adm-article-head .breadcrumb { margin-bottom: 18px !important; }
.adm-article-head .breadcrumb li a { color: var(--adm-muted); font-weight: 600; }
.adm-article-head .breadcrumb li a:hover { color: var(--adm-accent); }
.adm-article-head .breadcrumb li + li::before { content: "/"; margin: 0 9px; color: var(--adm-border-strong); }
.adm-article-head-inner { max-width: 900px; animation: adm-rise 0.8s var(--adm-ease) both; }
.adm-article-title {
  color: var(--adm-ink);
  font-size: clamp(30px, 4.8vw, 52px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
  text-wrap: balance;
}
.adm-standfirst {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.6;
  color: var(--adm-ink-soft);
  max-width: 760px;
  margin: 0 0 26px;
  padding-left: 18px;
  border-left: 3px solid var(--adm-accent);
}
.adm-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.adm-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding: 16px 0;
  border-top: 1px solid var(--adm-border);
  border-bottom: 1px solid var(--adm-border);
}
.adm-byline-author { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.adm-byline-author img,
.adm-byline-author .adm-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 16px;
  border: 2px solid var(--adm-accent-soft);
}
.adm-byline-name { display: block; font-weight: 800; font-size: 14.5px; color: var(--adm-ink); line-height: 1.2; }
.adm-byline-role { display: block; font-size: 12px; color: var(--adm-muted); font-weight: 500; }
.adm-byline-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 0; }
.adm-byline-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--adm-ink-soft);
}
.adm-byline-facts svg { color: var(--adm-accent); flex-shrink: 0; }
.adm-byline-actions { margin-left: auto; display: flex; gap: 8px; }
.adm-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--adm-border-strong);
  background: var(--adm-surface);
  color: var(--adm-ink);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.28s var(--adm-ease);
}
.adm-icon-btn:hover { background: var(--adm-accent); border-color: var(--adm-accent); color: #fff; transform: translateY(-2px); }
.adm-icon-btn.is-done { background: #219653; border-color: #219653; color: #fff; }
@media (max-width: 767px) { .adm-byline-actions { margin-left: 0; width: 100%; } }

.adm-article-hero { margin: 28px 0 40px; border-radius: 26px; box-shadow: 0 30px 70px rgba(10, 12, 18, 0.2); }
.adm-article-hero img { max-height: 620px; display: block; }
@media (max-width: 575px) { .adm-article-hero { border-radius: 18px; margin: 20px 0 28px; } }

/* Table of contents */
.adm-toc {
  border: 1px solid var(--adm-border);
  background: var(--adm-surface);
  border-radius: 18px;
  margin-bottom: 34px;
  overflow: hidden;
  box-shadow: var(--adm-shadow-sm);
}
.adm-toc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adm-ink);
}
.adm-toc summary::-webkit-details-marker { display: none; }
.adm-toc summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--adm-accent);
  border-bottom: 2px solid var(--adm-accent);
  transform: rotate(45deg);
  transition: transform 0.3s var(--adm-ease);
  margin-top: -4px;
}
.adm-toc[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.adm-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0 22px 18px; }
.adm-toc li { counter-increment: toc; }
.adm-toc li a {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  color: var(--adm-ink-soft) !important;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.4;
  text-decoration: none;
  border-top: 1px dashed var(--adm-border);
  transition: color 0.2s ease, padding-left 0.3s var(--adm-ease);
}
.adm-toc li:first-child a { border-top: none; }
.adm-toc li a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--adm-display);
  font-weight: 800;
  color: var(--adm-accent);
  min-width: 26px;
}
.adm-toc li a:hover,
.adm-toc li a.is-active { color: var(--adm-accent) !important; padding-left: 6px; }
.adm-toc li.is-sub a { padding-left: 38px; font-weight: 500; font-size: 13.5px; }
.adm-toc li.is-sub a::before { content: "–"; min-width: 14px; }

/* Prose — maximum legibility */
html body .adm-prose {
  font-size: 18px;
  line-height: 1.85;
  color: var(--adm-ink);
  font-family: var(--adm-body);
  overflow-wrap: anywhere;
}
html[data-theme="dark"] body .adm-prose { color: #dfe3ee; }
.adm-prose > p,
.adm-prose > div > p { margin-bottom: 1.4em; color: inherit; }
.adm-prose p, .adm-prose li, .adm-prose td, .adm-prose span:not(.adm-avatar) { color: inherit; }
.adm-prose strong, .adm-prose b { color: var(--adm-ink); font-weight: 700; }
.adm-prose h2, .adm-prose h3, .adm-prose h4 {
  color: var(--adm-ink);
  scroll-margin-top: 100px;
  position: relative;
  line-height: 1.25;
}
.adm-prose h2 {
  font-size: clamp(25px, 3vw, 31px);
  margin: 2.1em 0 0.7em;
  padding-top: 0.9em;
  border-top: 1px solid var(--adm-border);
}
.adm-prose h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 54px;
  height: 3px;
  background: var(--adm-grad);
  border-radius: 3px;
}
.adm-prose h3 { font-size: 22px; margin: 1.8em 0 0.6em; }
.adm-prose h4 { font-size: 18px; margin: 1.6em 0 0.5em; }
.adm-prose .adm-anchor {
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: var(--adm-accent);
  text-decoration: none;
  font-size: 18px;
  transition: opacity 0.2s ease;
}
.adm-prose h2:hover .adm-anchor,
.adm-prose h3:hover .adm-anchor,
.adm-prose h4:hover .adm-anchor { opacity: 1; }
.adm-prose a { color: var(--adm-accent); font-weight: 600; text-decoration-thickness: 1.5px; }
.adm-prose a:hover { text-decoration-thickness: 2.5px; }
.adm-prose ul, .adm-prose ol { padding-left: 1.5em; margin: 0 0 1.5em; }
.adm-prose ul li::marker { color: var(--adm-accent); }
.adm-prose ol li::marker { color: var(--adm-accent); font-weight: 800; }
.adm-prose li { margin-bottom: 0.6em; padding-left: 4px; }
.adm-prose img { max-width: 100%; height: auto; border-radius: 18px; }
.adm-prose .row { margin-left: 0; margin-right: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.adm-prose .row > [class*="col-"] { width: auto !important; flex: 1 1 260px; padding: 0; }
.adm-prose figure { margin: 2em 0; }
.adm-prose figcaption { font-size: 13px; color: var(--adm-muted); text-align: center; margin-top: 10px; }
.adm-prose hr { border: 0; height: 1px; background: var(--adm-border); margin: 2.4em 0; opacity: 1; }
.adm-prose blockquote {
  background: linear-gradient(135deg, var(--adm-accent-soft), transparent 70%), var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 20px;
  padding: 28px 32px 26px 66px;
  font-size: 21px;
  font-style: normal;
  color: var(--adm-ink);
  box-shadow: var(--adm-shadow-sm);
}
.adm-prose blockquote::before { left: 20px; top: 12px; font-size: 72px; color: var(--adm-accent); }
.adm-prose blockquote cite,
.adm-prose blockquote footer {
  display: block;
  margin-top: 14px;
  font-family: var(--adm-body);
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--adm-muted);
}
.adm-prose blockquote cite::before { content: "— "; }
.adm-prose table {
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 15px;
  border: 1px solid var(--adm-border);
  border-radius: 14px;
}
.adm-prose th { background: var(--adm-surface-2); color: var(--adm-ink); font-weight: 800; text-align: left; }
.adm-prose th, .adm-prose td { padding: 12px 16px; border-bottom: 1px solid var(--adm-border); white-space: nowrap; }
.adm-prose tr:last-child td { border-bottom: none; }
.adm-prose pre,
.adm-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
}
.adm-prose code { background: var(--adm-surface-2); color: var(--adm-accent); padding: 2px 7px; border-radius: 6px; }
.adm-prose pre { background: var(--adm-night); color: #e8eaf2; padding: 20px 24px; border-radius: 16px; overflow-x: auto; line-height: 1.6; }
.adm-prose pre code { background: none; color: inherit; padding: 0; }
.adm-prose .dropcap > p:first-of-type::first-letter { color: var(--adm-accent); }

/* End-of-article: facts panel */
.adm-facts {
  border: 1px solid var(--adm-border);
  background: var(--adm-surface);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 34px;
  box-shadow: var(--adm-shadow-sm);
}
.adm-facts-head {
  padding: 16px 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adm-ink);
  background: var(--adm-surface-2);
  border-bottom: 1px solid var(--adm-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.adm-facts-head::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--adm-accent); }
.adm-facts dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 0;
}
.adm-facts dl > div { padding: 18px 24px; border-right: 1px dashed var(--adm-border); border-bottom: 1px dashed var(--adm-border); }
.adm-facts dt {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--adm-muted);
  margin-bottom: 6px;
}
.adm-facts dd { margin: 0; font-weight: 700; color: var(--adm-ink); font-size: 15px; }
.adm-facts dd a { color: var(--adm-ink); text-decoration: none; }
.adm-facts dd a:hover { color: var(--adm-accent); }

.adm-tags a { color: var(--adm-ink); }
.adm-tags a:hover { color: #fff; }

.adm-author-box { border-radius: 22px; padding: 28px; align-items: flex-start; }
.adm-author-box h4 { color: var(--adm-ink); }
.adm-author-box p { color: var(--adm-ink-soft); font-size: 14.5px; }

.adm-postnav-card { border-radius: 18px; }
.adm-postnav-dir { color: var(--adm-accent); }
.adm-postnav-title { color: var(--adm-ink); }

/* Reading progress uses gradient + glow */
.adm-progress { height: 4px; box-shadow: 0 0 14px var(--adm-accent); }

/* Comments */
.comments-area, .comments-area p, .comments-area li { color: var(--adm-ink-soft); }
.comments-area h3, .comments-area h4, .comments-area h5, .comments-area .comment-author,
.comments-area .fn { color: var(--adm-ink); }
.comment-respond { border-radius: 22px; }

/* Related sections */
.adm-related-band { background: var(--adm-surface-2); border-top: 1px solid var(--adm-border); }

/* Share rail */
.adm-share-btn { color: var(--adm-ink); border-color: var(--adm-border-strong); }
.adm-share-rail-label { color: var(--adm-muted); }

/* ── Sidebar widgets on article page ────────────────────────────────────── */
.aside-sticky .widget { margin-bottom: 20px; }
.aside-sticky .widget .post--title a,
.aside-sticky .widget a { color: var(--adm-ink); }
.aside-sticky .widget .post--meta,
.aside-sticky .widget .post--meta a { color: var(--adm-muted); }

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .adm-topbar, .adm-nav, .breaking--news, .adm-share-rail, .adm-toc, .aside-sticky,
  .adm-byline-actions, .footer, .adm-progress, .comment-section, .adm-postnav { display: none !important; }
  html body .adm-prose { color: #000; font-size: 12pt; }
}

@media (prefers-reduced-motion: reduce) {
  .adm-card--hero-overlay .adm-card-img img,
  .adm-newsletter-band::before, .adm-newsletter-band::after { animation: none !important; }
  [data-reveal] { filter: none; }
}

/* ── 11. FIXES FROM VISUAL QA ───────────────────────────────────────────── */
/* Newsletter pill inputs: consistent height in every context */
.theme-input-group { align-items: center; min-height: 58px; padding: 0 6px 0 8px; }
.theme-input-group input,
.theme-input-group input[type="email"] {
  height: 48px;
  padding: 0 16px;
  line-height: 48px;
  border-radius: 0;
}
.theme-input-group button,
.newsletter-form button { height: 44px; padding: 0 24px; margin: 0; line-height: 1; border-radius: 999px; }

/* One newsletter per page: the home band replaces the footer strip */
body:has(.adm-newsletter-band) .adm-footer-newsletter { display: none; }

/* Ticker sits flush, never as a rounded chip */
.breaking--news, .breaking--news .container { border-radius: 0 !important; }

/* Sticky glass nav: opaque enough that content beneath never fights the menu */
.adm-nav.is-stuck,
html body .adm-nav.is-stuck#header_bottom_h1 {
  background: color-mix(in srgb, var(--adm-surface) 96%, transparent) !important;
}

/* Footer widget headings (rendered as .section-title h2.c1 by the widgets) */
html body .footer .section-title {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 0 14px;
  margin-bottom: 22px;
}
html body .footer .section-title h2,
html body .footer .section-title h2.c1 {
  font-family: var(--adm-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff !important;
  background: none;
  padding: 0;
  border: 0;
  line-height: 1.2;
}
html body .footer .section-title h2::after { content: none; display: none; }
html body .footer .section-title h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: auto;
  right: auto;
  bottom: -15px;
  width: 40px;
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: var(--adm-accent);
  transform: none;
}
html body .footer .widget_menu ul li a,
html body .footer .widget li a { font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, 0.72); }
html body .footer .widget_menu ul li a:hover { color: #fff; }
.adm-newsletter-band h2 { margin-bottom: 12px; }

/* Sidebar widget headings (section-title h2.c1 with legacy shape pseudo-elements) */
html body .widget > .section-title,
html body .widget .section-title.has-bg-shape,
html body .widget .section-title.has-left-shape {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--adm-border);
  padding: 0 0 14px;
  margin: 0 0 18px !important;
  position: relative;
}
html body .widget > .section-title h2,
html body .widget .section-title h2.c1,
html body .widget .section-title h2,
html body .widget .section-title h5 {
  font-family: var(--adm-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--adm-ink) !important;
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1.2;
}
html body .widget .section-title h2::after,
html body .widget .section-title h5::after { content: none; display: none; }
html body .widget .section-title h2::before,
html body .widget .section-title h5::before {
  content: "";
  position: absolute;
  left: 0;
  top: auto;
  right: auto;
  bottom: -1px;
  width: 44px;
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: var(--adm-accent);
  transform: none;
}
html body .footer .widget .section-title { border-bottom-color: rgba(255, 255, 255, 0.12); }
.adm-article-head .breadcrumb li::after,
.adm-article-head .breadcrumb li::before { content: none; }
.adm-article-head .breadcrumb li + li::before { content: "/"; margin: 0 9px; color: var(--adm-border-strong); }

/* Article blockquote/table resets against legacy post-single rules */
html body .adm-prose blockquote {
  text-align: left;
  font-size: 21px;
  line-height: 1.55;
  font-weight: 500;
  padding: 30px 34px 26px 68px;
}
html body .adm-prose blockquote p { font-size: inherit; margin: 0; color: var(--adm-ink); text-align: left; }
html body .adm-prose blockquote::after,
html body .adm-prose blockquote cite::after { content: none; display: none; }
html body .adm-prose blockquote cite {
  display: block;
  text-align: left;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--adm-muted);
  margin-top: 14px;
  padding: 0;
}
html body .adm-prose blockquote cite::before { content: "— "; position: static; width: auto; height: auto; background: none; display: inline; }
.adm-table-wrap {
  margin: 1.8em 0;
  overflow-x: auto;
  border: 1px solid var(--adm-border);
  border-radius: 16px;
  background: var(--adm-surface);
}
.adm-prose .adm-table-wrap table { display: table; margin: 0; border: 0; border-radius: 0; }
.adm-prose th, .adm-prose td { white-space: normal; }
.adm-prose .dropcap > p:first-of-type::first-letter,
.adm-prose.dropcap > p:first-of-type::first-letter { font-size: 58px; padding: 6px 12px 0 0; }

.adm-prose th, .adm-prose td { border: 0; border-bottom: 1px solid var(--adm-border); }

/* Sidebar tab switcher → segmented control */
html body .widget_post_tab .post--tab {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px;
  margin: 0 0 20px !important;
  background: var(--adm-surface-2);
  border: 1px solid var(--adm-border);
  border-radius: 999px;
}
html body .widget_post_tab .post--tab li { flex: 1; margin: 0; padding: 0; }
html body .widget_post_tab .post--tab li::before,
html body .widget_post_tab .post--tab li::after { content: none; }
html body .widget_post_tab .post--tab li a {
  display: block;
  text-align: center;
  padding: 9px 6px;
  border-radius: 999px;
  font-family: var(--adm-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--adm-ink-soft);
  transition: all 0.3s var(--adm-ease);
}
html body .widget_post_tab .post--tab li a::before,
html body .widget_post_tab .post--tab li a::after { content: none; }
html body .widget_post_tab .post--tab li.active a,
html body .widget_post_tab .post--tab li a:hover {
  background: var(--adm-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
html body .widget_post_tab .post--item { background: transparent; border: 0; box-shadow: none; }

.adm-author-box .post-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--adm-border-strong);
  color: var(--adm-ink) !important;
  transition: all 0.28s var(--adm-ease);
}
.adm-author-box .post-social a:hover { background: var(--adm-accent); border-color: var(--adm-accent); color: #fff !important; transform: translateY(-2px); }

/* Comment thread */
.comments-area .single-comment {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 16px;
  padding: 18px 20px;
  gap: 14px;
}
.comments-area .comment-author-image img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.comments-area .author_name { font-family: var(--adm-body); font-size: 15px; font-weight: 800; color: var(--adm-ink); margin: 0 10px 0 0; }
.comments-area .commented-on { font-size: 12px; color: var(--adm-muted) !important; font-weight: 500; }
.comments-area .comment-content p { color: var(--adm-ink-soft); font-size: 15px; line-height: 1.7; margin: 6px 0 8px; }
.comments-area .comment-reply-links a,
.comments-area .reply-btn { color: var(--adm-accent) !important; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; margin-right: 14px; }
.comments-area .children { list-style: none; padding-left: 0; }
.comments-area h3, .comments-area .comment-title, .comments-area .comments-title { color: var(--adm-ink); font-size: 24px; }
.comments-area .no-more-comments, .comments-area .text-center { color: var(--adm-muted); }

/* Mobile drawer & search overlay must sit above the (z-index 9999) nav */
html body .adm-drawer-backdrop { z-index: 100000; }
html body .adm-drawer { z-index: 100001; }
html body .adm-search-overlay { z-index: 100002; }
html body .adm-drawer .widget,
html body .adm-drawer-foot .widget {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.adm-drawer-foot .widget-socials a { border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.85); background: transparent; }
.adm-drawer-menu a { font-size: 15px; }
.adm-drawer-foot a, .adm-drawer-foot i, .adm-drawer-foot svg { color: rgba(255, 255, 255, 0.88) !important; fill: currentColor; }
.adm-drawer-foot a:hover { color: #fff !important; }

/* Social counter: keep follower numbers on one line so they never wrap/clip */
.widget.widget_social_media_info ul li { align-items: center; padding: 7px 12px; }
.widget.widget_social_media_info ul li .social_icon { flex: 0 0 auto; width: 24px; }
.widget.widget_social_media_info ul li .media-body { flex: 1 1 auto; min-width: 0; margin-left: 8px; }
.widget.widget_social_media_info ul li .media-body h5 {
  white-space: nowrap;
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1.2;
}
.widget.widget_social_media_info ul li .media-body span { white-space: nowrap; }

/* Light theme: keep native form controls legible. Under an OS dark preference
   Chromium/WebKit paint native <select> value text white; pin the color scheme
   and (for selects) drop native chrome so the value uses our CSS colour. */
html[data-theme="light"] select,
html[data-theme="light"] .form-control,
html[data-theme="light"] input,
html[data-theme="light"] textarea {
  color-scheme: light;
  color: #17181c;
  -webkit-text-fill-color: #17181c;
  background-color: var(--adm-surface);
}
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
  color-scheme: dark;
  color: var(--adm-ink);
  -webkit-text-fill-color: var(--adm-ink);
}
html[data-theme="light"] select option { color: #17181c; background-color: #ffffff; }
html[data-theme="light"] ::placeholder { color: var(--adm-muted); -webkit-text-fill-color: var(--adm-muted); opacity: 1; }

/* Custom chevron so the appearance-reset select keeps a visible arrow. */
select, select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23555b66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
}
html[data-theme="dark"] select, html[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23b4bac8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}