/*
Theme Name:  AI Tools Directory v3
Theme URI:   https://github.com/aqdas-rasheed/ai-tools-directory
Author:      Aqdas Rasheed
Author URI:  https://rankviz.co
Description: Modern AI tools directory theme with dark & light mode, glassmorphism cards, glow effects, and interactive UI. Built with Tailwind CSS.
Version:     3.1
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.1
License:     GPL-2.0-or-later
Text Domain: aidir
Tags:        dark, light-mode, directory, ai-tools, glassmorphism, custom-post-types, tailwindcss
*/

/* ══════════════════════════════════════════════════════════════
   DARK MODE TOKENS  (default / html[data-theme="dark"])
══════════════════════════════════════════════════════════════ */
:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* ── Backgrounds */
  --bg:           #070711;
  --bg-nav:       rgba(7,7,17,.85);
  --bg-footer:    rgba(0,0,0,.6);
  --bg-card:      rgba(255,255,255,.035);
  --bg-card-h:    rgba(255,255,255,.065);
  --bg-glass:     rgba(255,255,255,.05);
  --bg-input:     rgba(255,255,255,.06);
  --bg-stat:      rgba(255,255,255,.04);
  --bg-badge-cat: rgba(139,92,246,.08);
  --bg-hero-stats:rgba(0,0,0,.3);

  /* ── Borders */
  --border:       rgba(255,255,255,.08);
  --border-h:     rgba(255,255,255,.18);
  --border-input: rgba(255,255,255,.1);

  /* ── Text */
  --text-1:  #F1F5F9;
  --text-2:  #94A3B8;
  --text-3:  #475569;
  --text-4:  #334155;

  /* ── Shadows / Glows */
  --shadow-card:   0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-card-h: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,246,.4), 0 0 40px rgba(139,92,246,.12);
  --shadow-blog-h: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,246,.3);

  /* ── Stars */
  --star-off: rgba(255,255,255,.15);

  /* ── Scrollbar */
  --scrollbar-track: #070711;
  --scrollbar-thumb: rgba(139,92,246,.4);

  /* ── Prose */
  --prose-body:       #94A3B8;
  --prose-heading:    #F1F5F9;
  --prose-blockquote: rgba(139,92,246,.06);
  --prose-code-bg:    rgba(139,92,246,.1);
  --prose-code-color: #C4B5FD;
  --prose-code-border:rgba(139,92,246,.2);
  --prose-pre-bg:     rgba(0,0,0,.4);
  --prose-pre-color:  #E2E8F0;
  --prose-th-bg:      rgba(139,92,246,.1);
  --prose-th-border:  rgba(139,92,246,.3);

  /* ── Tool card gradient overlay */
  --card-overlay: linear-gradient(135deg, rgba(139,92,246,.06) 0%, transparent 60%);
  --card-hover-border: rgba(139,92,246,.5);
  --card-hover-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,246,.4), 0 0 50px rgba(139,92,246,.1);

  /* ── Category pill active */
  --pill-active-bg:     rgba(139,92,246,.12);
  --pill-active-color:  #C4B5FD;
  --pill-active-border: rgba(139,92,246,.5);
  --pill-active-shadow: 0 0 20px rgba(139,92,246,.15);

  /* ── Sidebar */
  --sidebar-active-bg:     rgba(139,92,246,.12);
  --sidebar-active-color:  #C4B5FD;
  --sidebar-active-border: rgba(139,92,246,.3);
  --sidebar-hover-bg:      rgba(139,92,246,.08);
  --sidebar-hover-border:  rgba(139,92,246,.15);

  /* ── Hero */
  --hero-bg:       linear-gradient(180deg,#0D0F22 0%,#070711 100%);
  --hero-grid:     rgba(255,255,255,.025);
  --hero-eyebrow:  rgba(139,92,246,.1);
  --hero-chip-bg:  rgba(255,255,255,.05);
  --hero-chip-border:rgba(255,255,255,.08);
  --hero-chip-color:#64748b;

  /* ── Toggle button */
  --toggle-bg:     rgba(255,255,255,.06);
  --toggle-border: rgba(255,255,255,.1);
  --toggle-color:  #94A3B8;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE TOKENS  (html[data-theme="light"])
══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  color-scheme: light;

  /* ── Backgrounds */
  --bg:           #F8F7FF;
  --bg-nav:       rgba(255,255,255,.9);
  --bg-footer:    #1E1B4B;
  --bg-card:      #FFFFFF;
  --bg-card-h:    #F5F3FF;
  --bg-glass:     rgba(255,255,255,.8);
  --bg-input:     #F5F3FF;
  --bg-stat:      #FFFFFF;
  --bg-badge-cat: rgba(139,92,246,.07);
  --bg-hero-stats:rgba(255,255,255,.7);

  /* ── Borders */
  --border:       rgba(139,92,246,.12);
  --border-h:     rgba(139,92,246,.3);
  --border-input: rgba(139,92,246,.2);

  /* ── Text */
  --text-1:  #1E1B4B;
  --text-2:  #4B5563;
  --text-3:  #6B7280;
  --text-4:  #9CA3AF;

  /* ── Shadows / Glows */
  --shadow-card:   0 4px 24px rgba(139,92,246,.08), 0 0 0 1px rgba(139,92,246,.1);
  --shadow-card-h: 0 12px 40px rgba(139,92,246,.18), 0 0 0 1px rgba(139,92,246,.25);
  --shadow-blog-h: 0 12px 40px rgba(139,92,246,.15), 0 0 0 1px rgba(139,92,246,.2);

  /* ── Stars */
  --star-off: #E5E7EB;

  /* ── Scrollbar */
  --scrollbar-track: #F8F7FF;
  --scrollbar-thumb: rgba(139,92,246,.3);

  /* ── Prose */
  --prose-body:       #374151;
  --prose-heading:    #1E1B4B;
  --prose-blockquote: rgba(139,92,246,.05);
  --prose-code-bg:    rgba(139,92,246,.07);
  --prose-code-color: #7C3AED;
  --prose-code-border:rgba(139,92,246,.15);
  --prose-pre-bg:     #1E1B4B;
  --prose-pre-color:  #E2E8F0;
  --prose-th-bg:      rgba(139,92,246,.07);
  --prose-th-border:  rgba(139,92,246,.2);

  /* ── Tool card */
  --card-overlay: linear-gradient(135deg, rgba(139,92,246,.04) 0%, transparent 60%);
  --card-hover-border: rgba(139,92,246,.4);
  --card-hover-shadow: 0 16px 50px rgba(139,92,246,.15), 0 0 0 1px rgba(139,92,246,.3);

  /* ── Category pill active */
  --pill-active-bg:     rgba(139,92,246,.1);
  --pill-active-color:  #7C3AED;
  --pill-active-border: rgba(139,92,246,.4);
  --pill-active-shadow: 0 0 20px rgba(139,92,246,.12);

  /* ── Sidebar */
  --sidebar-active-bg:     rgba(139,92,246,.08);
  --sidebar-active-color:  #7C3AED;
  --sidebar-active-border: rgba(139,92,246,.25);
  --sidebar-hover-bg:      rgba(139,92,246,.05);
  --sidebar-hover-border:  rgba(139,92,246,.12);

  /* ── Hero */
  --hero-bg:      linear-gradient(180deg,#EDE9FE 0%,#F8F7FF 100%);
  --hero-grid:    rgba(139,92,246,.04);
  --hero-eyebrow: rgba(139,92,246,.08);
  --hero-chip-bg: rgba(139,92,246,.06);
  --hero-chip-border:rgba(139,92,246,.15);
  --hero-chip-color:#7C3AED;

  /* ── Toggle button */
  --toggle-bg:     rgba(139,92,246,.06);
  --toggle-border: rgba(139,92,246,.15);
  --toggle-color:  #7C3AED;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL BASE
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Prevent flash — body hidden until theme applied */
html:not([data-theme]) body { visibility: hidden; }

body {
  background-color: var(--bg);
  color: var(--text-1);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color .3s ease, color .3s ease;
}

h1,h2,h3,h4,h5,h6,.font-display {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb        { background: var(--scrollbar-thumb); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover  { background: var(--purple, #8B5CF6); }

/* ═══ ADMIN BAR OFFSET ═══ */
body.admin-bar #site-header     { top: 32px; }
body.admin-bar #site-header + div { height: 100px; } /* 68px spacer + 32px admin bar */
@media (max-width: 782px) {
  body.admin-bar #site-header     { top: 46px; }
  body.admin-bar #site-header + div { height: 114px; }
}

/* ═══ SKIP NAV (Accessibility) ═══ */
.skip-to-content {
  position: absolute; top: -100px; left: 8px;
  z-index: 9999; padding: 12px 20px;
  background: var(--grad-main); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: 0 4px 20px rgba(139,92,246,.4);
  transition: top .15s ease;
}
.skip-to-content:focus { top: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid #8B5CF6;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   BRAND / GRADIENT CONSTANTS  (same in both modes)
══════════════════════════════════════════════════════════════ */
:root {
  --purple:     #8B5CF6;
  --purple-d:   #7C3AED;
  --blue:       #3B82F6;
  --cyan:       #06B6D4;
  --pink:       #EC4899;
  --amber:      #F59E0B;
  --green:      #10B981;
  --grad-main:  linear-gradient(135deg, #8B5CF6, #3B82F6);
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --t-fast: 150ms;
  --t-mid:  250ms;
  --t-slow: 400ms;
}

/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════════════════════════════════════ */
#theme-toggle {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  color: var(--toggle-color);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-mid) ease;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
#theme-toggle:hover {
  background: rgba(139,92,246,.15);
  border-color: rgba(139,92,246,.4);
  color: var(--purple);
  box-shadow: 0 0 16px rgba(139,92,246,.2);
}
#theme-toggle .icon-sun,
#theme-toggle .icon-moon {
  position: absolute;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  width: 18px; height: 18px;
}
html[data-theme="dark"]  #theme-toggle .icon-sun  { transform: translateY(0)    rotate(0deg);    opacity: 1; }
html[data-theme="dark"]  #theme-toggle .icon-moon { transform: translateY(30px) rotate(-90deg); opacity: 0; }
html[data-theme="light"] #theme-toggle .icon-sun  { transform: translateY(-30px) rotate(90deg); opacity: 0; }
html[data-theme="light"] #theme-toggle .icon-moon { transform: translateY(0)    rotate(0deg);   opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   NAVBAR (uses tokens)
══════════════════════════════════════════════════════════════ */
#nav-glass {
  transition: background var(--t-mid) ease, backdrop-filter var(--t-mid) ease, border-color var(--t-mid) ease;
}
html[data-theme="light"] #nav-glass.scrolled {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(139,92,246,.12) !important;
}

/* ══════════════════════════════════════════════════════════════
   GLASS CARD
══════════════════════════════════════════════════════════════ */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: background var(--t-mid) ease, border-color var(--t-mid) ease,
              box-shadow var(--t-mid) ease, transform var(--t-mid) ease;
}
.glass-card:hover {
  background: var(--bg-card-h);
  border-color: var(--border-h);
  box-shadow: var(--shadow-card-h);
  transform: translateY(-3px);
}

/* ══════════════════════════════════════════════════════════════
   TOOL CARD
══════════════════════════════════════════════════════════════ */
.tool-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  transition: all var(--t-mid) ease;
  cursor: pointer;
}
.tool-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--card-overlay);
  opacity: 0;
  transition: opacity var(--t-mid) ease;
  pointer-events: none;
}
.tool-card:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-4px);
}
.tool-card:hover::before { opacity: 1; }

.tool-card-glow {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.3), transparent 70%);
  opacity: 0; transition: opacity var(--t-mid) ease; pointer-events: none;
}
.tool-card:hover .tool-card-glow { opacity: 1; }

/* Light mode: card footer divider */
html[data-theme="light"] .tool-card [style*="border-top:1px solid rgba(255,255,255,.06)"] {
  border-top-color: rgba(139,92,246,.08) !important;
}

/* ══════════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: 0.02em; border: 1px solid;
}
/* These use alpha so they work on both backgrounds */
.badge-free     { background: rgba(16,185,129,.1);  color: #059669; border-color: rgba(16,185,129,.3); }
.badge-freemium { background: rgba(59,130,246,.1);  color: #2563EB; border-color: rgba(59,130,246,.3); }
.badge-paid     { background: rgba(139,92,246,.1);  color: #7C3AED; border-color: rgba(139,92,246,.3); }
.badge-trial    { background: rgba(245,158,11,.1);  color: #D97706; border-color: rgba(245,158,11,.3); }
.badge-featured { background: rgba(245,158,11,.1);  color: #D97706; border-color: rgba(245,158,11,.3); }
.badge-verified { background: rgba(59,130,246,.1);  color: #2563EB; border-color: rgba(59,130,246,.3); }
.badge-new      { background: rgba(16,185,129,.1);  color: #059669; border-color: rgba(16,185,129,.3); }
.badge-editors  { background: rgba(236,72,153,.1);  color: #DB2777; border-color: rgba(236,72,153,.3); }
.badge-cat      { background: var(--bg-badge-cat);  color: var(--purple); border-color: rgba(139,92,246,.2); }

/* Dark mode gets lighter text for readability */
html[data-theme="dark"] .badge-free     { color: #34D399; }
html[data-theme="dark"] .badge-freemium { color: #60A5FA; }
html[data-theme="dark"] .badge-paid     { color: #A78BFA; }
html[data-theme="dark"] .badge-trial    { color: #FBBF24; }
html[data-theme="dark"] .badge-featured { color: #FBBF24; }
html[data-theme="dark"] .badge-verified { color: #60A5FA; }
html[data-theme="dark"] .badge-new      { color: #34D399; }
html[data-theme="dark"] .badge-editors  { color: #F472B6; }
html[data-theme="dark"] .badge-cat      { color: #C4B5FD; }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  background: var(--grad-main);
  color: #fff; font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 14px; border-radius: var(--r-sm); border: none; cursor: pointer;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 20px rgba(139,92,246,.4);
  transition: all var(--t-mid) ease;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.15); opacity: 0;
  transition: opacity var(--t-fast) ease;
}
.btn-primary:hover { box-shadow: 0 8px 30px rgba(139,92,246,.6); transform: translateY(-2px); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: scale(.97); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  background: var(--bg-glass);
  color: var(--text-2); font-size: 13px; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer;
  transition: all var(--t-mid) ease;
}
.btn-ghost:hover {
  background: rgba(139,92,246,.1); color: var(--text-1);
  border-color: rgba(139,92,246,.4);
}

.btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  background: transparent; color: var(--purple);
  border: 1px solid rgba(139,92,246,.5);
  font-size: 13px; font-weight: 600; border-radius: var(--r-sm); cursor: pointer;
  transition: all var(--t-mid) ease;
}
.btn-outline:hover {
  background: rgba(139,92,246,.1); border-color: var(--purple);
  box-shadow: 0 0 20px rgba(139,92,246,.2);
}

/* ══════════════════════════════════════════════════════════════
   INPUTS
══════════════════════════════════════════════════════════════ */
.input-dark {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: 14px; font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color var(--t-mid) ease, box-shadow var(--t-mid) ease, background var(--t-mid) ease;
}
.input-dark::placeholder { color: var(--text-3); }
.input-dark:focus {
  border-color: rgba(139,92,246,.6);
  background: rgba(139,92,246,.05);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

/* ══════════════════════════════════════════════════════════════
   CATEGORY PILL
══════════════════════════════════════════════════════════════ */
.cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-glass);
  color: var(--text-2);
  cursor: pointer; white-space: nowrap;
  transition: all var(--t-mid) ease;
}
.cat-pill:hover, .cat-pill.active {
  border-color: var(--pill-active-border);
  color: var(--pill-active-color);
  background: var(--pill-active-bg);
  box-shadow: var(--pill-active-shadow);
}

/* ══════════════════════════════════════════════════════════════
   STAR RATING
══════════════════════════════════════════════════════════════ */
.star-rating  { display: inline-flex; align-items: center; gap: 3px; }
.star-on      { color: #FBBF24; font-size: 13px; }
.star-off     { color: var(--star-off); font-size: 13px; }
.star-half    { font-size: 13px; background: linear-gradient(90deg, #FBBF24 50%, var(--star-off) 50%);
                -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.star-val     { font-size: 12px; font-weight: 600; color: var(--text-2); margin-left: 4px; }

/* ══════════════════════════════════════════════════════════════
   LOGO BOX
══════════════════════════════════════════════════════════════ */
.logo-box {
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; border: 1px solid var(--border);
  flex-shrink: 0; overflow: hidden;
  transition: box-shadow var(--t-mid) ease;
}
.tool-card:hover .logo-box {
  box-shadow: 0 0 20px rgba(139,92,246,.25);
  border-color: rgba(139,92,246,.3);
}

/* ══════════════════════════════════════════════════════════════
   GRADIENT TEXT
══════════════════════════════════════════════════════════════ */
.grad-text {
  background: var(--grad-main);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.grad-text-warm {
  background: linear-gradient(90deg, #FBBF24, #EF4444);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR FILTER ITEM
══════════════════════════════════════════════════════════════ */
.sidebar-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  color: var(--text-2); cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--t-mid) ease;
}
.sidebar-item:hover { background: var(--sidebar-hover-bg); color: var(--text-1); border-color: var(--sidebar-hover-border); }
.sidebar-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-color); border-color: var(--sidebar-active-border); }

/* ══════════════════════════════════════════════════════════════
   BLOG CARD
══════════════════════════════════════════════════════════════ */
.blog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: all var(--t-mid) ease;
  box-shadow: var(--shadow-card);
}
.blog-card:hover {
  border-color: var(--border-h);
  box-shadow: var(--shadow-blog-h);
  transform: translateY(-3px);
}

/* ══════════════════════════════════════════════════════════════
   STAT CARD
══════════════════════════════════════════════════════════════ */
.stat-card {
  text-align: center; padding: 20px 24px;
  background: var(--bg-stat);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--t-mid) ease;
}
.stat-card:hover {
  background: var(--bg-card-h);
  border-color: rgba(139,92,246,.3);
  box-shadow: 0 0 30px rgba(139,92,246,.1);
}

/* ══════════════════════════════════════════════════════════════
   SECTION EYEBROW
══════════════════════════════════════════════════════════════ */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--purple); margin-bottom: 12px;
}
.section-eyebrow::before, .section-eyebrow::after {
  content: ''; flex: 1; height: 1px; min-width: 20px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.4));
}
.section-eyebrow::after { background: linear-gradient(90deg, rgba(139,92,246,.4), transparent); }

/* ══════════════════════════════════════════════════════════════
   GLOW DIVIDER
══════════════════════════════════════════════════════════════ */
.glow-divider {
  height: 1px; border: none; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.4), rgba(59,130,246,.4), transparent);
}
html[data-theme="light"] .glow-divider {
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.25), rgba(59,130,246,.2), transparent);
}

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════════════ */
@keyframes float-blob {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(20px,-30px) scale(1.05); }
  66%     { transform: translate(-15px,15px) scale(.97); }
}
.blob   { animation: float-blob 10s ease-in-out infinite; }
.blob-2 { animation: float-blob 14s ease-in-out infinite reverse; animation-delay: -4s; }
.blob-3 { animation: float-blob 18s ease-in-out infinite; animation-delay: -8s; }

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.shimmer-text {
  background: linear-gradient(90deg, #8B5CF6, #3B82F6, #06B6D4, #8B5CF6);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer 4s linear infinite;
}

@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 20px rgba(139,92,246,.3); }
  50%     { box-shadow: 0 0 40px rgba(139,92,246,.6), 0 0 60px rgba(59,130,246,.2); }
}
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════════ */
ul.page-numbers { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; list-style: none; }
ul.page-numbers li a,
ul.page-numbers li span {
  padding: 8px 16px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-2); font-size: 13px; font-weight: 500;
  transition: all var(--t-mid) ease; display: inline-block;
}
ul.page-numbers li a:hover { background: rgba(139,92,246,.1); color: var(--purple); border-color: rgba(139,92,246,.4); }
ul.page-numbers li span.current { background: var(--grad-main); color: #fff; border-color: transparent; box-shadow: 0 4px 15px rgba(139,92,246,.4); }

/* ══════════════════════════════════════════════════════════════
   PROSE (blog body)
══════════════════════════════════════════════════════════════ */
.prose-dark { color: var(--prose-body); line-height: 1.85; }
.prose-dark h1,.prose-dark h2,.prose-dark h3,.prose-dark h4 {
  color: var(--prose-heading); font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em; margin-top: 2em; margin-bottom: .6em;
}
.prose-dark h2 { font-size: 1.5rem; }
.prose-dark h3 { font-size: 1.2rem; }
.prose-dark p  { margin-bottom: 1.25em; }
.prose-dark a  { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.prose-dark a:hover { color: var(--purple-d); }
.prose-dark ul,.prose-dark ol { padding-left: 1.5em; margin-bottom: 1.25em; }
.prose-dark li { margin-bottom: .4em; }
.prose-dark blockquote {
  border-left: 3px solid var(--purple);
  background: var(--prose-blockquote);
  padding: 16px 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 1.5em 0; font-style: italic; color: var(--prose-heading);
}
.prose-dark img { border-radius: var(--r-md); border: 1px solid var(--border); }
.prose-dark code {
  background: var(--prose-code-bg); color: var(--prose-code-color);
  padding: 2px 7px; border-radius: 5px; font-size: .875em;
  border: 1px solid var(--prose-code-border);
}
.prose-dark pre {
  background: var(--prose-pre-bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 20px; overflow-x: auto; margin: 1.5em 0;
}
.prose-dark pre code { background: none; border: none; padding: 0; color: var(--prose-pre-color); }
.prose-dark strong { color: var(--prose-heading); font-weight: 600; }
.prose-dark hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 2em 0; }
.prose-dark table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .9em; }
.prose-dark th { background: var(--prose-th-bg); color: var(--prose-heading); padding: 10px 14px; font-weight: 600; border-bottom: 1px solid var(--prose-th-border); text-align: left; }
.prose-dark td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.prose-dark tr:last-child td { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════
   WP ALIGNMENT / UTIL
══════════════════════════════════════════════════════════════ */
.alignleft   { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright  { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { text-align: center; margin: 0 auto 1rem; display: block; }
.wp-caption-text { font-size: .8rem; color: var(--text-3); text-align: center; margin-top: 6px; }
.line-clamp-1 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.line-clamp-3 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — TEMPLATE OVERRIDES
   (inline style="..." values in PHP templates that use hardcoded
   dark colors need CSS overrides here)
══════════════════════════════════════════════════════════════ */

/* Body bg + text */
html[data-theme="light"] body { background-color: #F8F7FF; color: #1E1B4B; }

/* Nav mobile dropdown */
html[data-theme="light"] #mobile-menu,
html[data-theme="light"] #search-overlay {
  background: rgba(255,255,255,.97) !important;
  border-color: rgba(139,92,246,.12) !important;
}

/* Nav links */
html[data-theme="light"] nav a { color: #4B5563; }
html[data-theme="light"] nav a:hover { color: #1E1B4B; background: rgba(139,92,246,.06); }
html[data-theme="light"] nav a.text-violet-300 { color: #7C3AED !important; background: rgba(139,92,246,.08); }

/* Hero section */
html[data-theme="light"] .hero-section { background: linear-gradient(180deg, #EDE9FE 0%, #F8F7FF 100%) !important; }
html[data-theme="light"] .hero-section .blob { opacity: 0.15; }
html[data-theme="light"] .hero-section h1 { color: #1E1B4B !important; }

/* Search bar in hero */
html[data-theme="light"] .hero-search-wrap {
  box-shadow: 0 0 0 1px rgba(139,92,246,.25), 0 16px 48px rgba(139,92,246,.12) !important;
}
html[data-theme="light"] .hero-search-input {
  background: rgba(255,255,255,.95) !important;
  color: #1E1B4B !important;
}

/* Stats bar */
html[data-theme="light"] .stats-bar { background: rgba(255,255,255,.8) !important; }
html[data-theme="light"] .stats-bar .stat-val { color: #1E1B4B !important; }

/* Footer */
html[data-theme="light"] footer { background: #1E1B4B !important; }
html[data-theme="light"] footer a,
html[data-theme="light"] footer p { color: #94A3B8; }
html[data-theme="light"] footer h4 { color: #fff; }
html[data-theme="light"] footer a:hover { color: #C4B5FD !important; }

/* Tool card — light mode tag chips */
html[data-theme="light"] .tool-card .tag-chip-inner {
  background: rgba(139,92,246,.06) !important;
  border-color: rgba(139,92,246,.12) !important;
  color: #7C3AED !important;
}

/* Single tool page sidebar rows */
html[data-theme="light"] .tool-detail-row {
  border-color: rgba(139,92,246,.1) !important;
}

/* Blog card meta divider */
html[data-theme="light"] .blog-card .meta-divider {
  border-color: rgba(139,92,246,.1) !important;
}

/* Inline style overrides for colors set as style="" in PHP */
/* Section eyebrow lines already use CSS var — fine */
/* Hardcoded #64748b text -> readable in light */
html[data-theme="light"] [style*="color:#64748b"]  { color: #4B5563 !important; }
html[data-theme="light"] [style*="color:#475569"]  { color: #374151 !important; }
html[data-theme="light"] [style*="color:#334155"]  { color: #6B7280 !important; }
html[data-theme="light"] [style*="color:#94A3B8"]  { color: #374151 !important; }
html[data-theme="light"] [style*="color:#F1F5F9"]  { color: #1E1B4B !important; }
html[data-theme="light"] [style*="color:#E2E8F0"]  { color: #1E1B4B !important; }
html[data-theme="light"] [style*="color:#C4B5FD"]  { color: #7C3AED !important; }

/* Hardcoded backgrounds */
html[data-theme="light"] [style*="background:rgba(7,7,17"]   { background: rgba(248,247,255,.97) !important; }
html[data-theme="light"] [style*="background:rgba(0,0,0,.3)"]{ background: rgba(255,255,255,.7) !important; }
html[data-theme="light"] [style*="background:rgba(0,0,0,.6)"]{ background: #1E1B4B !important; }
html[data-theme="light"] [style*="background:rgba(255,255,255,.05)"]  { background: rgba(139,92,246,.05) !important; }
html[data-theme="light"] [style*="background:rgba(255,255,255,.06)"]  { background: rgba(139,92,246,.06) !important; }
html[data-theme="light"] [style*="background:rgba(255,255,255,.10)"]  { background: rgba(139,92,246,.08) !important; }
html[data-theme="light"] [style*="background:rgba(139,92,246,.06)"]   { background: rgba(139,92,246,.05) !important; }
html[data-theme="light"] [style*="background:rgba(139,92,246,.08)"]   { background: rgba(139,92,246,.07) !important; }

/* Hardcoded borders */
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.08)"]  { border-color: rgba(139,92,246,.12) !important; }
html[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255,.06)"]  { border-top-color: rgba(139,92,246,.1) !important; }
html[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,.06)"]{ border-bottom-color: rgba(139,92,246,.1) !important; }
html[data-theme="light"] [style*="border-color:rgba(255,255,255,.08)"]  { border-color: rgba(139,92,246,.12) !important; }

/* Grid lines in hero */
html[data-theme="light"] [style*="linear-gradient(rgba(255,255,255,.025)"] {
  background-image:
    linear-gradient(rgba(139,92,246,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.04) 1px, transparent 1px) !important;
}

/* Logo placeholder gradient */
html[data-theme="light"] .logo-box[style*="rgba(139,92,246,.3)"] {
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(59,130,246,.1)) !important;
}

/* ══════════════════════════════════════════════════════════════
   HEADING TEXT UTILITY  (replaces hardcoded text-slate-100)
   Maps to --text-1 in both dark (#F1F5F9) and light (#1E1B4B)
══════════════════════════════════════════════════════════════ */
.text-heading,
.text-heading.group-hover\:text-violet-300:not(:hover) { color: var(--text-1); }

/* ══════════════════════════════════════════════════════════════
   SVG LOGO ANIMATIONS
══════════════════════════════════════════════════════════════ */
.logo-mark { position: relative; flex-shrink: 0; }
.logo-mark svg { display: block; }

/* Pulsing outer glow ring */
@keyframes logoRingPulse {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.15); }
}
.logo-ring { animation: logoRingPulse 3s ease-in-out infinite; transform-origin: center; }

/* Orbiting particle */
@keyframes logoOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.logo-orbit { animation: logoOrbit 6s linear infinite; transform-origin: 20px 20px; }

/* Core glow pulse */
@keyframes logoCoreGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(139,92,246,.4)); }
  50%      { filter: drop-shadow(0 0 10px rgba(139,92,246,.7)) drop-shadow(0 0 20px rgba(59,130,246,.3)); }
}
.logo-mark svg { animation: logoCoreGlow 3s ease-in-out infinite; }

/* Logo text shimmer */
.logo-text-animated {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 17px;
  background: linear-gradient(90deg, var(--text-1) 0%, #C4B5FD 40%, #8B5CF6 60%, var(--text-1) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoTextShimmer 4s ease-in-out infinite;
}
@keyframes logoTextShimmer {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Hover intensify */
a:hover .logo-mark svg {
  animation: logoCoreGlow 1.5s ease-in-out infinite;
}
a:hover .logo-text-animated {
  animation: logoTextShimmer 2s ease-in-out infinite;
}

/* Footer logo — always light text */
footer .logo-text-animated {
  background: linear-gradient(90deg, #E2E8F0 0%, #C4B5FD 40%, #8B5CF6 60%, #E2E8F0 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoTextShimmer 4s ease-in-out infinite;
}