/* ============================================================
   Pixellize — Custom Stylesheet (Astra Child)
   Header & footer are owned by Astra / Customizer.
   This file styles the homepage content sections only.
   ============================================================ */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --clr-primary:       #754ffe;
  --clr-primary-dark:  #5c3dd8;
  --clr-primary-light: #9b7ffe;
  --clr-primary-glow:  rgba(117,79,254,0.12);
  --clr-text:          #1a1a2e;
  --clr-muted:         #6b7280;
  --clr-bg:            #ffffff;
  --clr-bg-2:          #f8f7ff;
  --clr-border:        #e5e7eb;
  --clr-card:          #ffffff;
  --font:              'Inter', system-ui, sans-serif;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --sh-sm: 0 2px 8px  rgba(117,79,254,0.08);
  --sh-md: 0 4px 20px rgba(117,79,254,0.12);
  --sh-lg: 0 8px 40px rgba(117,79,254,0.15);
  --t:     0.25s ease;
}

[data-theme="dark"] {
  --clr-text:   #e2e2f0;
  --clr-muted:  #9ca3af;
  --clr-bg:     #0f0e1a;
  --clr-bg-2:   #16152a;
  --clr-border: #2d2b4e;
  --clr-card:   #1d1c35;
}

/* ── Safe global ──────────────────────────────────────────── */
/* box-sizing only — no margin/padding reset so Astra nav is untouched */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ── Hide site title text (logo used instead) ────────────────── */
.ast-site-title-wrap { display: none !important; }

/* ── Header logo: dark-mode swap ──────────────────────────────
   Light mode keeps Astra's default logo. Dark mode replaces it
   with the white variant. Path is domain-relative so it works
   on any host. */
[data-theme="dark"] .custom-logo-link .custom-logo,
[data-theme="dark"] .ast-builder-html-element img.custom-logo,
[data-theme="dark"] .site-logo-img .custom-logo {
  content: url('/wp-content/uploads/2026/05/pixellize_logo_white.webp');
}

/* ── Scope resets to our content so Astra header is unaffected ── */
#main-content {
  font-family: var(--font);
  color: var(--clr-text);
  line-height: 1.6;
}

#main-content a           { text-decoration: none; color: inherit; }
#main-content img         { max-width: 100%; }
#main-content button      { font-family: var(--font); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.4rem;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  color: #fff !important;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: opacity var(--t), transform var(--t), box-shadow var(--t);
  white-space: nowrap;
  text-decoration: none !important;
}

.btn-primary-custom:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(117,79,254,0.4);
  color: #fff !important;
  text-decoration: none !important;
}

.btn-outline-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.5rem;
  border: 1.5px solid var(--clr-primary);
  color: var(--clr-primary) !important;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background var(--t), color var(--t);
  text-decoration: none !important;
}

.btn-outline-custom:hover { background: var(--clr-primary); color: #fff !important; text-decoration: none !important; }

.btn-white-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.5rem;
  background: #fff;
  color: var(--clr-primary) !important;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: opacity var(--t), transform var(--t);
  text-decoration: none !important;
}

.btn-white-custom:hover { opacity: 0.92; transform: translateY(-1px); color: var(--clr-primary) !important; text-decoration: none !important; }

/* ── Section Shared ───────────────────────────────────────── */
.section { padding: 5rem 0; }

.section-label {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  background: var(--clr-primary-glow);
  color: var(--clr-primary);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--clr-text);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--clr-muted);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 6rem 0 5rem;
  overflow: hidden;
  background: var(--clr-bg);
}

.hero-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
}

.hero-bg-blob-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(117,79,254,0.14) 0%, transparent 70%);
  top: -150px; right: -100px;
}

.hero-bg-blob-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(92,61,216,0.10) 0%, transparent 70%);
  bottom: -120px; left: -80px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(117,79,254,0.1);
  border: 1px solid rgba(117,79,254,0.22);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clr-primary);
  margin-bottom: 1.5rem;
}

.hero-badge .dot {
  width: 7px; height: 7px;
  background: var(--clr-primary);
  border-radius: 50%;
  animation: dot-pulse 2.2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

.hero-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.13;
  color: var(--clr-text);
  margin-bottom: 1.25rem;
}

.hero-title .highlight {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-desc {
  font-size: 1.05rem;
  color: var(--clr-muted);
  line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero Search */
.hero-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--clr-bg);
  border: 1.5px solid var(--clr-border);
  border-radius: 100px;
  padding: 0.35rem 0.35rem 0.35rem 1.1rem;
  max-width: 520px;
  box-shadow: var(--sh-sm);
  transition: border-color var(--t), box-shadow var(--t);
}

.hero-search:focus-within {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(117,79,254,0.12);
}

.hero-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.9rem;
  color: var(--clr-text);
  min-width: 0;
  padding: 0.3rem 0;
  font-family: var(--font);
}

.hero-search input::placeholder { color: var(--clr-muted); }
.hero-search > i { color: var(--clr-muted); flex-shrink: 0; }


/* ── Tools Section ────────────────────────────────────────── */
.tools-section { background: var(--clr-bg-2); }

/* Filter Tabs */
.filter-tabs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2rem 0 2.5rem;
}

.filter-tab {
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  border: 1.5px solid var(--clr-border);
  background: var(--clr-bg);
  color: var(--clr-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
  font-family: var(--font);
}

.filter-tab:hover {     border-color: #754ffe;
    background: #754ffe; }

.filter-tab.active {
    border-color: #754ffe;
    background: #754ffe;
  color: #fff;
}

/* Tool Cards */
.tool-card-wrap.hidden { display: none !important; }

.tool-card {
  display: block;
  background: var(--clr-card);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  height: 100%;
  position: relative;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  color: var(--clr-text);
  overflow: hidden;
  text-decoration: none;
}

.tool-card:hover {
  border-color: rgba(117,79,254,0.5);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
  color: var(--clr-text);
  text-decoration: none;
}

.tool-card-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.tool-card-title {
  font-size: 0.975rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 0.5rem;
}

.tool-card-desc {
  font-size: 0.855rem;
  color: var(--clr-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.tool-card-tag {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
}

.tool-card-arrow {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  color: var(--clr-muted);
  font-size: 1rem;
  transition: color var(--t), transform var(--t);
}

.tool-card:hover .tool-card-arrow {
  color: var(--clr-primary);
  transform: translate(2px, -2px);
}

.tool-badge-new {
  position: absolute;
  top: 1rem;
  right: 2.5rem;
  padding: 0.15rem 0.55rem;
  background: var(--clr-primary);
  color: #fff;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ── Stats Banner ─────────────────────────────────────────── */
.stats-banner {
  padding: 3.5rem 0;
  background: linear-gradient(135deg, #12093d 0%, #2a196b 50%, #12093d 100%);
}

.stat-block .num {
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.stat-block .lbl {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  margin-top: 0.4rem;
}

/* ── Features ─────────────────────────────────────────────── */
.features-section { background: var(--clr-bg); }

.feature-card {
  background: var(--clr-card);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem;
  height: 100%;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

.feature-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
  border-color: rgba(117,79,254,0.3);
}

.feature-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, #754ffe, #9b7ffe);
  color: #fff;
}

.feature-title { font-size: 1.05rem; font-weight: 700; color: var(--clr-text); margin-bottom: 0.5rem; }
.feature-desc  { font-size: 0.875rem; color: var(--clr-muted); line-height: 1.7; margin: 0; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-section { background: var(--clr-bg-2); }

.faq-item {
  background: var(--clr-card);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  margin-bottom: 0.75rem;
  transition: border-color var(--t);
}

.faq-item[open] { border-color: rgba(117,79,254,0.5); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  color: var(--clr-text);
  user-select: none;
  gap: 1rem;
  font-family: var(--font);
}

.faq-question::-webkit-details-marker { display: none; }

.faq-icon {
  flex-shrink: 0;
  color: var(--clr-primary);
  transition: transform var(--t);
  font-size: 1.1rem;
}

.faq-item[open] .faq-icon { transform: rotate(0deg); }

.faq-answer {
  padding: 0 1.5rem 1.25rem;
  color: var(--clr-muted);
  font-size: 0.9rem;
  line-height: 1.75;
}

/* ── CTA Banner ───────────────────────────────────────────── */
.cta-banner { padding: 5rem 0; background: var(--clr-bg); }

.cta-box {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  border-radius: var(--r-xl);
  padding: 4.5rem 2rem;
  text-align: center;
  color: #fff;
}

.cta-box h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 900;
  margin-bottom: 0.75rem;
  color: #fff;
}

.cta-box p {
  font-size: 1.05rem;
  opacity: 0.85;
  margin-bottom: 2rem;
}

/* ── Back to Top ──────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  width: 44px; height: 44px;
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t), transform var(--t);
  z-index: 9999;
  box-shadow: var(--sh-md);
}

.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover   { transform: translateY(-3px); }

/* ── Animations ───────────────────────────────────────────── */
.fade-in-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible { opacity: 1; transform: translateY(0); }

.fade-delay-1 { transition-delay: 0.1s; }
.fade-delay-2 { transition-delay: 0.2s; }
.fade-delay-3 { transition-delay: 0.3s; }
.fade-delay-4 { transition-delay: 0.4s; }

/* ── Astra container fix for front-page ──────────────────── */
/* Astra wraps content in .ast-container which has its own max-width.
   Our full-width sections (hero, stats-banner, cta-banner) must break out. */
.ast-container > #main-content {
  margin-left:  calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 575px) {
  .hero         { padding: 4rem 0 3.5rem; }
  .cta-box      { padding: 3rem 1.25rem; }
  .filter-tabs  { gap: 0.35rem; }
  .filter-tab   { padding: 0.45rem 0.9rem; font-size: 0.8rem; }
}

/* ============================================================
   Tool Page Template
   ============================================================ */

#tool-page-content {
  font-family: var(--font);
  color: var(--clr-text);
  line-height: 1.6;
}

#tool-page-content a { text-decoration: none; color: inherit; }

/* Same Astra breakout as front-page so full-width sections work */
.ast-container > #tool-page-content {
  margin-left:  calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

/* ── Tool Hero ────────────────────────────────────────────── */
.tool-hero {
  position: relative;
  padding: 5rem 0 4rem;
  background: var(--clr-bg);
  overflow: hidden;
}

.tool-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(117,79,254,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.tool-hero-icon {
  width: 80px; height: 80px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #754ffe, #9b7ffe);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 32px rgba(117,79,254,0.35);
}

nav.tool-breadcrumb {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .85rem;
  color: var(--clr-muted);
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
nav.tool-breadcrumb a,
nav.tool-breadcrumb span,
nav.tool-breadcrumb i {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
nav.tool-breadcrumb a { color: var(--clr-muted); text-decoration: none; transition: color var(--t); }
nav.tool-breadcrumb a:hover { color: var(--clr-primary); }
nav.tool-breadcrumb span[aria-current="page"] { color: var(--clr-text); font-weight: 600; }
nav.tool-breadcrumb .bi { font-size: .7rem; opacity: .6; }
@media (max-width: 575.98px) {
  nav.tool-breadcrumb { font-size: .78rem; gap: .3rem; }
}

.tool-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--clr-text);
  margin-bottom: 1rem;
}

.tool-hero-subtitle {
  font-size: 1.05rem;
  color: var(--clr-muted);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.tool-hero-badge {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  background: var(--clr-primary-glow);
  color: var(--clr-primary);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Tool Embed ───────────────────────────────────────────── */
.tool-embed-section {
  padding: 3rem 0;
  background: var(--clr-bg-2);
}

.tool-embed-box {
  margin-top: 40px;
}

/* ── How to Use ───────────────────────────────────────────── */
.tool-howto-section { background: var(--clr-bg); }

.step-card {
  background: var(--clr-card);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem;
  height: 100%;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

.step-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
  border-color: rgba(117,79,254,0.3);
}

.step-number {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #754ffe, #9b7ffe);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-bottom: 1.25rem;
}

.step-title { font-size: 1rem; font-weight: 700; color: var(--clr-text); margin-bottom: 0.5rem; }
.step-desc  { font-size: 0.875rem; color: var(--clr-muted); line-height: 1.7; margin: 0; }

/* ── Similar Blog ─────────────────────────────────────────── */
.tool-blog-section { background: var(--clr-bg-2); }

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--clr-card);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

.blog-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-4px);
  border-color: rgba(117,79,254,0.3);
}

.blog-card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--clr-bg-2);
}

.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

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

.blog-card-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--clr-primary-light);
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}

.blog-card-date {
  font-size: .75rem;
  font-weight: 600;
  color: var(--clr-primary);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}

.blog-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.4;
  margin-bottom: .75rem;
}

.blog-card-excerpt {
  font-size: .875rem;
  color: var(--clr-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-read {
  font-size: .85rem;
  font-weight: 600;
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: gap var(--t);
}

.blog-card:hover .blog-card-read { gap: .6rem; }

/* ── Tool Features ────────────────────────────────────────── */
.tool-features-section { background: var(--clr-bg-2); }

/* ── Similar Tools ────────────────────────────────────────── */
.tool-similar-section { background: var(--clr-bg); }

/* ── Tool FAQ ─────────────────────────────────────────────── */
.tool-faq-section { background: var(--clr-bg-2); }

/* ── Tool Page Responsive ─────────────────────────────────── */
@media (max-width: 767px) {
  .tool-hero { padding: 3.5rem 0 3rem; }
  .tool-embed-box { padding: 1.5rem; }
  .step-card { padding: 1.5rem 1.25rem; }
}

@media (max-width: 575px) {
  .tool-hero-icon { width: 64px; height: 64px; font-size: 1.6rem; }
  .tool-hero-title { font-size: 1.8rem; }
}

/* ── Header Dropdown ──────────────────────────────────────── */

/* Dropdown container */
.main-header-menu .sub-menu,
#ast-hf-menu-1 .sub-menu {
  background: #ffffff !important;
  border: 1px solid #ede9fe !important;
  border-top: 2px solid var(--clr-primary) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 8px 32px rgba(117,79,254,0.13), 0 2px 8px rgba(0,0,0,0.07) !important;
  padding: 6px 0 10px !important;
  min-width: 200px !important;
  overflow: hidden;
}

/* Dropdown items */
.main-header-menu .sub-menu li,
#ast-hf-menu-1 .sub-menu li {
  border: none !important;
  margin: 0 !important;
}

/* Dropdown links */
.main-header-menu .sub-menu a.menu-link,
#ast-hf-menu-1 .sub-menu a.menu-link {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: 9px 18px !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: #1a1a2e !important;
  text-decoration: none !important;
  transition: background .15s, color .15s !important;
  border-radius: 0 !important;
  line-height: 1.4 !important;
}

.main-header-menu .sub-menu a.menu-link:hover,
#ast-hf-menu-1 .sub-menu a.menu-link:hover,
.main-header-menu .sub-menu .current-menu-item > a.menu-link,
#ast-hf-menu-1 .sub-menu .current-menu-item > a.menu-link {
  background: rgba(117,79,254,0.07) !important;
  color: var(--clr-primary) !important;
}

/* Hide Astra's arrow SVG inside sub-menu links */
.main-header-menu .sub-menu a .ast-icon,
#ast-hf-menu-1 .sub-menu a .ast-icon {
  display: none !important;
}

/* Parent item arrow — refine color */
.main-header-menu > li > a .ast-icon svg path,
#ast-hf-menu-1 > li > a .ast-icon svg path {
  fill: var(--clr-primary);
}

/* Active / current parent */
.main-header-menu > li.current-menu-parent > a,
.main-header-menu > li.current-menu-ancestor > a,
#ast-hf-menu-1 > li.current-menu-parent > a,
#ast-hf-menu-1 > li.current-menu-ancestor > a {
  color: var(--clr-primary) !important;
}

/* Divider between groups (optional: first child separator) */
.main-header-menu .sub-menu li + li a.menu-link,
#ast-hf-menu-1 .sub-menu li + li a.menu-link {
  border-top: none !important;
}

/* ── Mobile / Tablet (≤920px): inline accordion, not floating dropdown ── */
@media (max-width: 920px) {

  /* Hide desktop main-header menu (Astra normally does this; ensure no leak) */
  .ast-desktop-header-content { display: none !important; }

  /* Make every menu item the natural width of the panel */
  .ast-mobile-header-wrap .main-header-menu,
  .ast-mobile-header-wrap #ast-hf-mobile-menu,
  .ast-mobile-popup-content .main-header-menu,
  .ast-mobile-popup-content #ast-hf-mobile-menu,
  #ast-hf-mobile-menu {
    display: block !important;
    width: 100% !important;
  }

  .ast-mobile-header-wrap .main-header-menu li,
  .ast-mobile-popup-content .main-header-menu li,
  #ast-hf-mobile-menu li {
    position: relative !important;
    width: 100% !important;
    display: block !important;
  }

  /* Sub-menus: relative + full width + accordion (no shadow / floating) */
  .ast-mobile-header-wrap .main-header-menu .sub-menu,
  .ast-mobile-popup-content .main-header-menu .sub-menu,
  #ast-hf-mobile-menu .sub-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 .25rem !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(0,0,0,.07) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide expanded panel by default; show only when Astra opens it */
  #ast-hf-mobile-menu li > .sub-menu,
  .ast-mobile-popup-content #ast-hf-mobile-menu li > .sub-menu {
    display: none !important;
  }
  #ast-hf-mobile-menu li.dropdown-open > .sub-menu,
  #ast-hf-mobile-menu li.ast-submenu-expanded > .sub-menu,
  #ast-hf-mobile-menu li.menu-item-has-children[aria-expanded="true"] > .sub-menu,
  #ast-hf-mobile-menu li.menu-item-has-children > .sub-menu[style*="display: block"],
  .ast-mobile-popup-content #ast-hf-mobile-menu li.dropdown-open > .sub-menu,
  .ast-mobile-popup-content #ast-hf-mobile-menu li.ast-submenu-expanded > .sub-menu {
    display: block !important;
  }

  /* Sub-menu links — inline list look, indented */
  #ast-hf-mobile-menu .sub-menu a.menu-link,
  .ast-mobile-popup-content #ast-hf-mobile-menu .sub-menu a.menu-link {
    padding: .75rem 1rem .75rem 2rem !important;
    font-size: .92rem !important;
    color: inherit !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  #ast-hf-mobile-menu .sub-menu a.menu-link:hover {
    background: rgba(117,79,254,0.10) !important;
    color: var(--clr-primary) !important;
  }

  /* Toggle button (the chevron next to parent items) — make it tappable */
  #ast-hf-mobile-menu .ast-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
  }
  #ast-hf-mobile-menu .ast-menu-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
  #ast-hf-mobile-menu li.dropdown-open > .menu-link .ast-menu-toggle svg,
  #ast-hf-mobile-menu li.ast-submenu-expanded > .menu-link .ast-menu-toggle svg { transform: rotate(180deg); }
}

/* ── Astra Footer Builder ─────────────────────────────────── */

/* Backgrounds */
.site-primary-footer-wrap {
  background: #0d0c1a !important;
}

.site-below-footer-wrap {
  background: #080712 !important;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Base font */
.site-footer,
.site-footer .textwidget,
.site-footer .ast-builder-html-element {
  font-family: var(--font);
  color: #8b8ba7;
}

/* Primary row padding */
.site-primary-footer-inner-wrap.ast-builder-grid-row {
  padding-top: 4rem !important;
  padding-bottom: 3rem !important;
}

/* Below row padding */
.site-below-footer-inner-wrap.ast-builder-grid-row {
  padding-top: 1.1rem !important;
  padding-bottom: 1.1rem !important;
}

/* ── Column 1: brand block ───────────────────────────────── */
.site-footer .footer-logo {
  display: block;
  max-width: 140px;
  height: auto;
  margin-bottom: 1rem;
}

.site-footer .ast-builder-html-element p {
  font-size: .875rem;
  line-height: 1.75;
  color: #8b8ba7;
  max-width: 260px;
  margin-bottom: 1.25rem;
}

/* Social links row — fix wpautop br tags */
.site-footer .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

 .social-links br { display: none; }

.site-footer .social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  color: #8b8ba7 !important;
  font-size: 1rem;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}

.site-footer .social-btn:hover {
  background: #754ffe;
  border-color: #754ffe;
  color: #fff !important;
}


.social-links { display: flex; gap: 10px; margin-top: 6px; }

/* .social-btn {
  width: 38px; height: 38px;
  border-radius: var(--border-radius-sm);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  font-size: 0.95rem;
  transition: var(--transition);
  text-decoration: none;
}

.social-btn:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  transform: translateY(-3px);
} */

/* ── Widget columns ──────────────────────────────────────── */
.site-footer .footer-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
  margin-top: 0;
}

.site-footer .footer-title.mt-4 { margin-top: 1.5rem !important; }

.site-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 .5rem;
}

.site-footer .footer-links li { margin-bottom: .55rem; }

.site-footer .footer-links a,
.site-footer .textwidget a {
  color: #8b8ba7;
  font-size: .875rem;
  text-decoration: none;
  transition: color .2s;
  display: inline;
}

.site-footer .footer-links a:hover,
.site-footer .textwidget a:hover { color: #9b7ffe; }

/* ── Below footer: copyright bar ────────────────────────── */
.site-footer .ast-footer-copyright {
  width: 100%;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .82rem;
  color: #5a5a72;
  width: 100%;
}

/* Suppress wpautop br tags inside footer-bottom */
.footer-bottom br { display: none; }

.footer-bottom span { color: #5a5a72; }

.footer-bottom a {
  color: #5a5a72;
  text-decoration: none;
  transition: color .2s;
  display: inline;
}

.footer-bottom a:hover { color: #9b7ffe; }

/* ── Astra built-in social icons (if used) ───────────────── */
.site-footer .ast-social-icon-wrap a {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  color: #8b8ba7 !important;
  transition: background .2s, color .2s !important;
}

.site-footer .ast-social-icon-wrap a:hover {
  background: #754ffe !important;
  border-color: #754ffe !important;
  color: #fff !important;
}

/* ── Widget title fallback (Astra default) ───────────────── */
.site-footer .widget-title,
.site-footer .widgettitle {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff !important;
  margin-bottom: 1rem;
}

/* Desktop column gap */
.site-primary-footer-inner-wrap.ast-builder-grid-row {
  column-gap: 2.5rem !important;
  row-gap: 2rem !important;
}

/* ── Tablet (544px – 920px): 2-col grid ──────────────────── */
@media (max-width: 920px) {
  .site-primary-footer-inner-wrap.ast-builder-grid-row {
    grid-template-columns: repeat(2, 1fr) !important;
    padding-top: 3rem !important;
    padding-bottom: 2.5rem !important;
    column-gap: 2rem !important;
    row-gap: 2.5rem !important;
  }

  .site-footer .ast-builder-html-element p {
    max-width: 100%;
  }

  .footer-bottom {
    justify-content: center;
    gap: .4rem;
  }
}

/* ── Mobile (<544px): 2-column grid ─────────────────────── */
@media (max-width: 543px) {
  .site-primary-footer-inner-wrap.ast-builder-grid-row {
    grid-template-columns: repeat(2, 1fr) !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
    column-gap: 1.25rem !important;
    row-gap: 1.75rem !important;
  }

  .site-footer .ast-builder-html-element p {
    max-width: 100%;
  }

  /* Logo a touch smaller so brand cell fits half-width nicely */
  .site-footer .footer-logo { max-width: 110px; }

  /* Slightly tighter widget titles + links on mobile */
  .site-footer .footer-title,
  .site-footer .widget-title,
  .site-footer .widgettitle {
    font-size: .7rem;
    margin-bottom: .75rem;
  }
  .site-footer .footer-links a,
  .site-footer .textwidget a { font-size: .82rem; }
  .site-footer .footer-links li { margin-bottom: .4rem; }

  .site-footer .social-links { justify-content: flex-start; }

  /* Below footer */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: .4rem;
  }

  .site-below-footer-inner-wrap.ast-builder-grid-row {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* ── About Page ───────────────────────────────────────────── */

/* Full-width override */
.page-template-template-about #primary,
.page-template-template-about #content,
.page-template-template-about #main-content .ast-container,
.page-template-template-about .site-content > .ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
.page-template-template-about .entry-content,
.page-template-template-about .ast-article-single {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Breadcrumb */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--clr-muted);
  margin-bottom: 1.5rem;
}
.page-breadcrumb a { color: var(--clr-muted); text-decoration: none; transition: color var(--t); }
.page-breadcrumb a:hover { color: var(--clr-primary); }
.page-breadcrumb .bi { font-size: .7rem; opacity: .6; }

/* Hero */
.about-hero {
  position: relative;
  padding: 5rem 0 4.5rem;
  overflow: hidden;
  background: var(--clr-bg);
  text-align: center;
}
.about-hero-inner { position: relative; z-index: 1; }
.about-hero-title { font-size: clamp(2rem, 4vw, 3rem); }
.text-gradient {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-hero-desc {
  max-width: 620px;
  font-size: 1.1rem;
  color: var(--clr-muted);
  line-height: 1.75;
}
.text-strong { color: var(--clr-text); }

/* Mission */
.mission-section { background: var(--clr-bg-2); }
.mission-card {
  background: var(--clr-card);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  height: 100%;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.mission-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
  border-color: rgba(117,79,254,.3);
}
.mission-card-icon {
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 1.25rem;
}
.icon-grad-1 { background: linear-gradient(135deg, #754ffe, #9b7ffe); }
.icon-grad-2 { background: linear-gradient(135deg, #5c3dd8, #754ffe); }
.icon-grad-3 { background: linear-gradient(135deg, #8a65fe, #b09ffe); }
.mission-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--clr-text); margin-bottom: .6rem; }
.mission-card p  { font-size: .9rem; color: var(--clr-muted); line-height: 1.75; margin: 0; }

/* Categories */
.categories-section { background: var(--clr-bg); }
.category-card {
  background: var(--clr-card);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  height: 100%;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.category-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
  border-color: rgba(117,79,254,.3);
}
.category-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.1rem;
}
.icon-purple { background: rgba(117,79,254,.12); color: #754ffe; }
.icon-indigo { background: rgba(117,79,254,.10); color: #5c3dd8; }
.icon-soft   { background: rgba(117,79,254,.08); color: #5c3dd8; }
.category-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--clr-text); margin-bottom: .5rem; }
.category-card p  { font-size: .875rem; color: var(--clr-muted); line-height: 1.7; margin-bottom: 1rem; }
.category-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.category-tag {
  display: inline-block;
  padding: .2rem .65rem;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--clr-muted);
}

/* Values */
.values-section { background: var(--clr-bg-2); }
.value-item {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--clr-card);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  height: 100%;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.value-item:hover {
  box-shadow: var(--sh-sm);
  transform: translateY(-2px);
  border-color: rgba(117,79,254,.3);
}
.value-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--clr-primary-glow);
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.value-text h4 { font-size: .95rem; font-weight: 700; color: var(--clr-text); margin-bottom: .35rem; }
.value-text p  { font-size: .875rem; color: var(--clr-muted); line-height: 1.7; margin: 0; }

/* Privacy */
.privacy-section { background: var(--clr-bg); }
.privacy-subtitle { margin-bottom: 2.25rem; }
.privacy-card {
  background: var(--clr-bg);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 2rem 2.25rem;
}
.privacy-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--clr-border);
}
.privacy-item:last-child { border-bottom: none; padding-bottom: 0; }
.privacy-item:first-child { padding-top: 0; }
.privacy-dot {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--clr-primary);
  margin-top: .45rem;
}
.privacy-item p { font-size: .9rem; color: var(--clr-muted); line-height: 1.75; margin: 0; }
.privacy-item p strong { color: var(--clr-text); }
.privacy-footnote { font-size: .875rem; color: var(--clr-muted); }
.privacy-footnote a { color: var(--clr-primary); font-weight: 600; text-decoration: none; }
.privacy-footnote a:hover { text-decoration: underline; }

/* CTA — light outline button (for use on dark gradient bg) */
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1.5rem;
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff !important;
  border-radius: 100px;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: background var(--t), border-color var(--t);
}
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* Dark mode adjustments */
[data-theme="dark"] .mission-section,
[data-theme="dark"] .values-section { background: #16152a; }
[data-theme="dark"] .categories-section,
[data-theme="dark"] .privacy-section  { background: #0f0e1a; }
[data-theme="dark"] .privacy-card { background: #1d1c35; border-color: #2d2b4e; }
[data-theme="dark"] .category-tag { background: #1d1c35; border-color: #2d2b4e; color: #9ca3af; }

/* ── Tools Listing — full-width content area ──────────────── */
#tool-listing-page.tl-full-width {
  width: 100%;
}
/* Remove Astra's default page padding/max-width — content only, not header */
.page-template-template-tools-listing #primary,
.page-template-template-tools-listing #content,
.page-template-template-tools-listing #main-content .ast-container,
.page-template-template-tools-listing .site-content > .ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
.page-template-template-tools-listing .entry-content,
.page-template-template-tools-listing .ast-article-single {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Tools Listing Page ───────────────────────────────────── */

/* Hero */
.tl-hero {
  position: relative;
  padding: 5rem 0 3rem;
  overflow: hidden;
  background: var(--clr-bg);
}
.tl-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% -20%, rgba(117,79,254,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 110%, rgba(92,61,216,.07) 0%, transparent 55%);
  pointer-events: none;
}
.tl-hero-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: var(--clr-text);
  line-height: 1.15;
  margin-bottom: .75rem;
}
.tl-hero-subtitle {
  font-size: 1.05rem;
  color: var(--clr-muted);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 2rem;
}

/* Search */
.tl-search-wrap {
  max-width: 500px;
  margin: 0 auto;
}
.tl-search {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--clr-bg);
  border: 1.5px solid var(--clr-border);
  border-radius: 100px;
  padding: .4rem .5rem .4rem 1.1rem;
  box-shadow: var(--sh-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.tl-search:focus-within {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(117,79,254,.12);
}
.tl-search > .bi-search { color: var(--clr-muted); flex-shrink: 0; font-size: .95rem; }
.tl-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: .9rem;
  color: var(--clr-text);
  font-family: var(--font);
  min-width: 0;
}
.tl-search input::placeholder { color: var(--clr-muted); }
.tl-search-clear {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--clr-muted);
  font-size: 1rem;
  line-height: 1;
  border-radius: 50%;
  transition: color var(--t), background var(--t);
}
.tl-search-clear:hover { color: var(--clr-primary); background: var(--clr-primary-glow); }
.tl-tool-count {
  margin-top: .75rem;
  font-size: .85rem;
  color: var(--clr-muted);
}
.tl-tool-count strong { color: var(--clr-primary); }

/* Grid section */
.tl-grid-section { padding-top: 3rem; }

/* Empty state */
.tl-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--clr-muted);
}
.tl-empty .bi { font-size: 2.5rem; margin-bottom: 1rem; display: block; opacity: .4; }
.tl-empty p { font-size: 1rem; }
.tl-empty button {
  background: none;
  border: none;
  color: var(--clr-primary);
  cursor: pointer;
  font-weight: 600;
  padding: 0;
  font-family: var(--font);
  text-decoration: underline;
}

/* Intro / SEO content */
.tl-intro-section { background: var(--clr-bg-2); }
.tl-intro-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--clr-text);
}
.tl-intro-content h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: .6rem; }
.tl-intro-content h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: .4rem; }
.tl-intro-content p  { margin-bottom: 1rem; color: var(--clr-muted); }
.tl-intro-content ul, .tl-intro-content ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.tl-intro-content li { margin-bottom: .35rem; color: var(--clr-muted); }

/* Dark mode adjustments */
[data-theme="dark"] .tl-hero { background: #0f0e1a; }
[data-theme="dark"] .tl-search { background: #1d1c35; border-color: #2d2b4e; }
[data-theme="dark"] .tl-intro-section { background: #16152a; }

/* ── Dark / Light Mode Toggle Button ─────────────────────── */
.pxl-theme-toggle-item {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin-left: 4px !important;
  border: none !important;
}
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(117,79,254,0.35);
  background: transparent;
  color: #1a1a2e;
  cursor: pointer;
  font-size: .95rem;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--clr-primary, #754ffe);
  color: var(--clr-primary, #754ffe);
  background: rgba(117,79,254,0.08);
  transform: scale(1.1);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--clr-primary, #754ffe);
  outline-offset: 2px;
}
.theme-toggle .toggle-icon {
  pointer-events: none;
  font-size: .95rem;
  line-height: 1;
}

/* ── Dark Mode — Astra + Site-wide Overrides ──────────────── */
[data-theme="dark"] body {
  background-color: #0f0e1a !important;
  color: #e2e2f0 !important;
}

/* Astra header */
[data-theme="dark"] #masthead,
[data-theme="dark"] .site-header,
[data-theme="dark"] .main-header-bar,
[data-theme="dark"] .main-header-bar-wrap,
[data-theme="dark"] .ast-desktop-header,
[data-theme="dark"] .ast-mobile-header-wrap,
[data-theme="dark"] #ast-desktop-header,
[data-theme="dark"] .ast-builder-grid-row-primary,
[data-theme="dark"] .ast-builder-grid-row-primary-inner {
  background-color: #0d0c1a !important;
  border-color: #2d2b4e !important;
}

/* Header nav links */
[data-theme="dark"] .main-header-menu > li > a,
[data-theme="dark"] #ast-hf-menu-1 > li > a,
[data-theme="dark"] .ast-builder-menu a {
  color: #e2e2f0 !important;
}
[data-theme="dark"] .main-header-menu > li > a:hover,
[data-theme="dark"] #ast-hf-menu-1 > li > a:hover,
[data-theme="dark"] .main-header-menu > li.current-menu-item > a,
[data-theme="dark"] .main-header-menu > li.current-menu-parent > a,
[data-theme="dark"] .main-header-menu > li.current-menu-ancestor > a {
  color: var(--clr-primary) !important;
}

/* Header dropdown in dark mode */
[data-theme="dark"] .main-header-menu .sub-menu,
[data-theme="dark"] #ast-hf-menu-1 .sub-menu {
  background: #16152a !important;
  border-color: #2d2b4e !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .main-header-menu .sub-menu a.menu-link,
[data-theme="dark"] #ast-hf-menu-1 .sub-menu a.menu-link {
  color: #c5c5e0 !important;
}
[data-theme="dark"] .main-header-menu .sub-menu a.menu-link:hover,
[data-theme="dark"] #ast-hf-menu-1 .sub-menu a.menu-link:hover {
  background: rgba(117,79,254,0.14) !important;
  color: var(--clr-primary) !important;
}

/* Site background and content */
[data-theme="dark"] .site,
[data-theme="dark"] #page,
[data-theme="dark"] .entry-content,
[data-theme="dark"] .ast-article-single {
  background-color: #0f0e1a !important;
}

/* Toggle button dark mode face */
[data-theme="dark"] .theme-toggle {
  background: transparent;
  border-color: rgba(117,79,254,0.45);
  color: #e2e2f0;
}
[data-theme="dark"] .theme-toggle:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: rgba(117,79,254,0.12);
}


.site-below-footer-wrap[data-section="section-below-footer-builder"]{
    border-top-width: 0.1px !important;
    border-top-color: #8b8ba757 !important;
    background: #0c0c1a !important;
}

/* ══════════════════════════════════════════════════════════════
   LEGAL PAGE (template-legal.php)
══════════════════════════════════════════════════════════════ */
.page-template-template-legal #content,
.page-template-template-legal #main-content .ast-container,
.page-template-template-legal .site-content > .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

.page-template-template-legal .entry-content,
.page-template-template-legal .ast-article-single {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

#legal-page {
  font-family: var(--font);
}

.legal-hero {
  padding: 4rem 0 2.5rem;
  background: linear-gradient(135deg, rgba(117,79,254,0.08) 0%, rgba(80,46,200,0.04) 100%);
  border-bottom: 1px solid var(--clr-border);
  text-align: center;
}

.legal-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--clr-text);
  margin-bottom: 0.5rem;
}

.legal-updated {
  font-size: 0.85rem;
  color: var(--clr-muted);
  margin: 0;
}

.legal-body { padding: 3rem 0 5rem; }

.legal-content {
  color: var(--clr-text);
  font-size: 1rem;
  line-height: 1.8;
}

.legal-content h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-text);
  margin: 2.5rem 0 0.75rem;
}

.legal-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-text);
  margin: 1.75rem 0 0.5rem;
}

.legal-content p  { margin-bottom: 1rem; }
.legal-content ul,
.legal-content ol { margin-left: 0; margin-bottom: 1rem;}
.legal-content li { margin-bottom: 0.4rem; }

.legal-content a {
  color: var(--clr-primary) !important;
  text-decoration: underline;
}

.legal-content a:hover { opacity: 0.8; }

.legal-content strong { font-weight: 600; color: var(--clr-text); }

/* dark mode */
[data-theme="dark"] .legal-hero {
  background: linear-gradient(135deg, rgba(117,79,254,0.12) 0%, rgba(80,46,200,0.06) 100%);
  border-bottom-color: rgba(255,255,255,0.07);
}

/* ══════════════════════════════════════════════════════════════
   BLOG INDEX PAGE (template-blog.php)
══════════════════════════════════════════════════════════════ */
.page-template-template-blog #content,
.page-template-template-blog #main-content .ast-container,
.page-template-template-blog .site-content > .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

.page-template-template-blog .entry-content,
.page-template-template-blog .ast-article-single {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* full-width for blog posts page (WordPress adds .blog body class) */
.blog #content,
.blog #main-content .ast-container,
.blog .site-content > .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

.blog .entry-content,
.blog .ast-article-single {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.blog-index-hero {
  padding: 4rem 0 3rem;
  background: linear-gradient(135deg, rgba(117,79,254,0.08) 0%, rgba(80,46,200,0.04) 100%);
  border-bottom: 1px solid var(--clr-border);
}

.blog-index-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--clr-text);
  margin-bottom: 0.5rem;
}

.blog-index-subtitle {
  font-size: 1rem;
  color: var(--clr-muted);
  margin: 0;
}

.blog-index-section { background: var(--clr-bg); }

.blog-card-cat {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  padding: 0.25rem 0.7rem;
  background: var(--clr-primary-glow);
  color: var(--clr-primary);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pagination */
.blog-pagination ul {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.blog-pagination ul li a,
.blog-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.75rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  color: var(--clr-text) !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background var(--t), border-color var(--t), color var(--t);
  background: var(--clr-bg);
}

.blog-pagination ul li a:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary) !important;
}

.blog-pagination ul li span.current {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff !important;
}

/* dark mode */
[data-theme="dark"] .blog-index-hero {
  background: linear-gradient(135deg, rgba(117,79,254,0.12) 0%, rgba(80,46,200,0.06) 100%);
  border-bottom-color: rgba(255,255,255,0.07);
}

/* ══════════════════════════════════════════════════════════════
   SINGLE POST (single.php)
══════════════════════════════════════════════════════════════ */
.single-post #content,
.single-post #main-content .ast-container,
.single-post .site-content > .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

.single-post .entry-content,
.single-post .ast-article-single {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hero */
.single-hero {
  padding: 3rem 0 2.5rem;
  background: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
}

.single-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--clr-muted);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.single-breadcrumb a { color: var(--clr-muted) !important; text-decoration: none !important; }
.single-breadcrumb a:hover { color: var(--clr-primary) !important; }
.single-breadcrumb i { font-size: 0.7rem; }

.single-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.single-cat {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  background: var(--clr-primary-glow);
  color: var(--clr-primary) !important;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none !important;
}

.single-date,
.single-read-time {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--clr-muted);
}

.single-title {
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--clr-text);
  margin: 0;
}

/* Featured image */
.single-featured-wrap {
  background: var(--clr-bg);
  padding: 2rem 0 0;
}

.single-featured-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16/7;
}

.single-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content */
.single-body { background: var(--clr-bg); padding-top: 3rem; }

.single-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--clr-text);
}

.single-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2.5rem 0 0.75rem;
  color: var(--clr-text);
}

.single-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 2rem 0 0.6rem;
  color: var(--clr-text);
}

.single-content h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
  color: var(--clr-text);
}

.single-content p { margin-bottom: 1.25rem; }

.single-content a { color: var(--clr-primary) !important; text-decoration: underline; }
.single-content a:hover { opacity: 0.8; }

.single-content ul,
.single-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
      margin-left: 0 !important;
}

.single-content li { margin-bottom: 0.4rem; }

.single-content blockquote {
  border-left: 4px solid var(--clr-primary);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: var(--clr-primary-glow);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-style: italic;
  color: var(--clr-text);
}

.single-content pre,
.single-content code {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.single-content code { padding: 0.15em 0.4em; }

/* Inline images inside blog content -------------------------------- */
.single-content figure.wp-block-image {
  display: block;
  width: 100%;
  max-width: none;
  margin: 2rem 0;
  padding: .5rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  background: var(--clr-card);
  box-shadow: var(--sh-sm);
  text-align: center;
}
.single-content figure.wp-block-image img {
  display: block;
  max-width: 600px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: calc(var(--r-md) - 4px);
}
.single-content figure.wp-block-image figcaption,
.single-content figure.wp-block-image .wp-element-caption {
  text-align: center;
  font-size: 14px;
  color: var(--clr-muted);
  margin: .65rem 0 .25rem;
  line-height: 1.5;
}
.single-content figure.wp-block-image figcaption a,
.single-content figure.wp-block-image .wp-element-caption a {
  color: var(--clr-muted) !important;
  text-decoration: underline;
}
.single-content figure.wp-block-image figcaption a:hover,
.single-content figure.wp-block-image .wp-element-caption a:hover {
  color: var(--clr-primary) !important;
}

/* Table of Contents ------------------------------------------------- */
.blog-toc {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 1.1rem 1.4rem;
  margin: 0 0 2rem;
  box-shadow: var(--sh-sm);
}
.blog-toc-toggle,
.blog-toc-toggle:hover,
.blog-toc-toggle:focus,
.blog-toc-toggle:active,
.blog-toc-toggle:focus-visible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
  color: var(--clr-text) !important;
  font-family: inherit;
  transform: none !important;
}
.blog-toc-title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
}
.blog-toc-title .bi { color: var(--clr-primary); font-size: 1.05rem; }
.blog-toc-chevron { transition: transform .25s ease; color: var(--clr-muted); }
.blog-toc-toggle[aria-expanded="false"] .blog-toc-chevron { transform: rotate(180deg); }
.blog-toc-list {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 1rem 0 0;
  counter-reset: toc;
}
.blog-toc[hidden-list] .blog-toc-list { display: none; }
.blog-toc-list li {
  margin: .35rem 0;
  font-size: .92rem;
  line-height: 1.5;
}
.blog-toc-list a {
  color: var(--clr-text);
  text-decoration: none;
  transition: color var(--t);
}
.blog-toc-list a:hover { color: var(--clr-primary); text-decoration: underline; }

@media (max-width: 575.98px) {
  .single-content figure.wp-block-image { padding: .35rem; }
  .blog-toc { padding: .9rem 1.1rem; }
  .blog-toc-list { padding-left: 1.25rem; }
}

.single-content pre {
  padding: 1.25rem;
  overflow-x: auto;
  margin-bottom: 1.25rem;
}

.single-content pre code { background: none; border: none; padding: 0; }

.single-content img {
  max-width: 100%;
  border-radius: var(--r-md);
  margin: 1rem 0;
}

.single-content hr {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: 2.5rem 0;
}

/* Tags */
/* Author bio (after FAQ, before tags) */
.single-author {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.single-author-avatar {
  flex: 0 0 auto;
}
.single-author-img,
.single-author-avatar img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--clr-card);
  box-shadow: 0 0 0 2px var(--clr-primary-light);
}
.single-author-body { flex: 1; min-width: 0; }
.single-author-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted);
  margin-bottom: 0.25rem;
}
.single-author-name {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  line-height: 1.25;
  color: var(--clr-text);
}
.single-author-name a { color: var(--clr-text) !important; transition: color var(--t); }
.single-author-name a:hover { color: var(--clr-primary) !important; }
.single-author-bio {
  color: var(--clr-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.single-author-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--clr-primary) !important;
  font-weight: 600;
  font-size: 0.92rem;
  transition: gap var(--t);
}
.single-author-link:hover { gap: 0.6rem; }

@media (max-width: 575.98px) {
  .single-author { flex-direction: column; gap: 1rem; padding: 1.25rem; }
  .single-author-img,
  .single-author-avatar img { width: 64px !important; height: 64px !important; }
}

[data-theme="dark"] .single-author { background: var(--clr-card); }
[data-theme="dark"] .single-author-img,
[data-theme="dark"] .single-author-avatar img { border-color: var(--clr-bg-2); }

.single-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--clr-border);
}

.single-tag {
  padding: 0.3rem 0.85rem;
  border: 1.5px solid var(--clr-border);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  transition: border-color var(--t), color var(--t);
}

.single-tag:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary) !important;
}

/* Post navigation */
.single-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--clr-border);
}

.single-nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  text-decoration: none !important;
  color: var(--clr-text) !important;
  transition: border-color var(--t), box-shadow var(--t);
}

.single-nav-item:hover {
  border-color: var(--clr-primary);
  box-shadow: var(--sh-sm);
}

.single-nav-next { text-align: right; }

.single-nav-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clr-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.single-nav-next .single-nav-label { justify-content: flex-end; }

.single-nav-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Related posts */
.single-related { background: var(--clr-bg-2); }

/* Single FAQ */
.single-faq {
  padding-top: 2rem;
  border-top: 1px solid var(--clr-border);
}

.single-faq-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 1.25rem;
}

/* Dark mode */
[data-theme="dark"] .single-hero { border-bottom-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .single-content blockquote { background: rgba(117,79,254,0.08); }


.site-primary-footer-wrap[data-section="section-primary-footer-builder"]{
      border-top-color: #8b8ba757 !important;
}

.tl-search input{
      box-shadow: none !important;
}

.tl-search input:hover,
.tl-search input:active,
.tl-search input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* ── Image + Content Section ─────────────────────────────── */
.tool-imgcontent-section {
    background: linear-gradient(to bottom, #f8f7ff 0%, #ffffff 100%);
}
.tool-imgcontent-section .imgcontent-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}
.tool-imgcontent-section .imgcontent-heading {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 1rem;
    color: #0f0e1a;
}
.tool-imgcontent-section p {
    font-size: 1rem;
    line-height: 1.75;
    color: #4a5568;
    margin: 0 0 1rem;
}
.tool-imgcontent-section p:last-child { margin-bottom: 0; }
.tool-imgcontent-section a {
    color: #754ffe;
    text-decoration: none;
    border-bottom: 1px solid rgba(117, 79, 254, .3);
}
.tool-imgcontent-section a:hover { border-bottom-color: #754ffe; }
.tool-imgcontent-section ul,
.tool-imgcontent-section ol { padding-left: 1.25rem; margin: 0 0 1rem; color: #4a5568; }
.tool-imgcontent-section li { margin-bottom: .35rem; line-height: 1.7; }

@media (max-width: 991.98px) {
    .tool-imgcontent-section { padding: 2.5rem 0; }
}

[data-theme="dark"] .tool-imgcontent-section { background: linear-gradient(to bottom, #16152a 0%, #0f0e1a 100%); }
[data-theme="dark"] .tool-imgcontent-section .imgcontent-heading { color: #f1f5f9; }
[data-theme="dark"] .tool-imgcontent-section p,
[data-theme="dark"] .tool-imgcontent-section ul,
[data-theme="dark"] .tool-imgcontent-section ol { color: #c5c5e0; }
[data-theme="dark"] .tool-imgcontent-section .imgcontent-image { box-shadow: 0 14px 40px rgba(0,0,0,.4); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */

#contact-page { background: var(--clr-bg); }

/* Hero */
.contact-hero {
    padding: 5rem 0 3rem;
    background: linear-gradient(180deg, var(--clr-bg-2) 0%, var(--clr-bg) 100%);
    position: relative;
}
.contact-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--clr-text);
    margin: 1rem 0 1.25rem;
}
.contact-hero-title .text-gradient {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.contact-hero-desc {
    font-size: 1.1rem;
    color: var(--clr-muted);
    max-width: 640px;
    margin: 0 auto 1.5rem;
}
.contact-hero-mail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: var(--clr-card);
    border: 1px solid var(--clr-border);
    border-radius: 100px;
    color: var(--clr-primary) !important;
    font-weight: 600;
    box-shadow: var(--sh-sm);
    transition: transform var(--t), box-shadow var(--t);
}
.contact-hero-mail:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

/* Info cards */
.contact-info-section { padding: 3rem 0 4rem; }
.contact-info-card {
    height: 100%;
    padding: 2rem 1.75rem;
    background: var(--clr-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
    border-color: var(--clr-primary-light);
}
.contact-info-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}
.contact-info-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0 0 0.6rem;
}
.contact-info-text {
    color: var(--clr-muted);
    font-size: 0.95rem;
    margin: 0 0 1rem;
    line-height: 1.55;
}
.contact-info-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--clr-primary) !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: gap var(--t);
}
.contact-info-link:hover { gap: 0.6rem; }

/* Form section */
.contact-form-section {
    padding: 4rem 0;
    background: var(--clr-bg-2);
}
.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: start;
}
.contact-form-side .section-label { display: inline-block; margin-bottom: 0.75rem; }
.contact-form-title {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    color: var(--clr-text);
    margin: 0 0 1rem;
    line-height: 1.2;
}
.contact-form-desc { color: var(--clr-muted); margin: 0 0 1.5rem; }
.contact-form-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.contact-form-perks li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--clr-text);
    font-size: 0.97rem;
}
.contact-form-perks i { color: var(--clr-primary); font-size: 1.05rem; }
.contact-form-direct {
    padding: 1rem 1.25rem;
    background: var(--clr-card);
    border: 1px dashed var(--clr-border);
    border-radius: var(--r-md);
}
.contact-form-direct-label {
    display: block;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--clr-muted);
    margin-bottom: 0.25rem;
}
.contact-form-direct a { color: var(--clr-primary) !important; font-weight: 600; }
.contact-form-card {
    background: var(--clr-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: 2rem;
}

/* Contact Form 7 — re-skin (scoped to #contact-page only) */
#contact-page .contact-form-card .wpcf7-form > p { margin: 0 0 1.1rem; }
#contact-page .contact-form-card label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--clr-text);
    margin-bottom: 0.45rem;
    letter-spacing: 0.01em;
}
/* CF7 wraps every field in this span — make it block so width:100% works */
#contact-page .contact-form-card .wpcf7-form-control-wrap { display: block; width: 100%;margin-top: 8px; }

.cf7-row p{
  margin-bottom: 0 !important;
}

/* All single-line inputs + select: identical 52px height, identical text */
#contact-page .contact-form-card input[type="text"],
#contact-page .contact-form-card input[type="email"],
#contact-page .contact-form-card input[type="tel"],
#contact-page .contact-form-card input[type="url"],
#contact-page .contact-form-card input[type="number"],
#contact-page .contact-form-card input[type="search"],
#contact-page .contact-form-card input[type="date"],
#contact-page .contact-form-card select {
    width: 100%;
    height: 52px;
    padding: 0 1rem;
    background: var(--clr-bg);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--clr-text);
    box-shadow: none;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
    -webkit-appearance: none;
    appearance: none;
}

/* Textarea — match all input styling, just taller */
#contact-page .contact-form-card textarea {
    width: 100%;
    min-height: 156px;
    padding: 0.85rem 1rem;
    background: var(--clr-bg);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--clr-text);
    box-shadow: none;
    resize: vertical;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

/* Select chevron (since appearance:none stripped native one) */
#contact-page .contact-form-card select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
    padding-right: 2.5rem;
}

/* Hover */
#contact-page .contact-form-card input:not([type="submit"]):hover,
#contact-page .contact-form-card select:hover,
#contact-page .contact-form-card textarea:hover {
    border-color: var(--clr-primary-light);
}

/* Focus */
#contact-page .contact-form-card input:not([type="submit"]):focus,
#contact-page .contact-form-card select:focus,
#contact-page .contact-form-card textarea:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px var(--clr-primary-glow);
    background: var(--clr-bg);
}

/* Placeholder */
#contact-page .contact-form-card input::placeholder,
#contact-page .contact-form-card textarea::placeholder {
    color: var(--clr-muted);
    opacity: 1;
    font-size: 0.97rem;
}

/* Autofill — keep our colors */
#contact-page .contact-form-card input:-webkit-autofill,
#contact-page .contact-form-card input:-webkit-autofill:hover,
#contact-page .contact-form-card input:-webkit-autofill:focus,
#contact-page .contact-form-card textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--clr-text);
    -webkit-box-shadow: 0 0 0 1000px var(--clr-bg) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.contact-form-card input[type="submit"],
.contact-form-card button[type="submit"],
.contact-form-card .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.8rem 1.75rem;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: #fff !important;
    border: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity var(--t), transform var(--t), box-shadow var(--t);
    width: auto;
}
.contact-form-card input[type="submit"]:hover,
.contact-form-card .wpcf7-submit:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(117,79,254,0.35);
}
.contact-form-card .wpcf7-spinner { background-color: var(--clr-primary); margin-left: 0.6rem; }

.contact-form-card .cf7-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 575.98px) {
    .contact-form-card .cf7-row { grid-template-columns: 1fr; gap: 0; }
}

.contact-form-card .wpcf7-not-valid-tip {
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}
.contact-form-card .wpcf7-not-valid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
}
.contact-form-card .wpcf7-response-output {
    margin: 1.25rem 0 0 !important;
    padding: 0.9rem 1.1rem !important;
    border-radius: var(--r-sm) !important;
    font-size: 0.92rem;
    border-width: 1px !important;
}
.contact-form-card .wpcf7 form.sent .wpcf7-response-output {
    border-color: #16a34a !important;
    background: rgba(22,163,74,0.08);
    color: #15803d;
}
.contact-form-card .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-card .wpcf7 form.failed .wpcf7-response-output {
    border-color: #dc2626 !important;
    background: rgba(220,38,38,0.08);
    color: #b91c1c;
}

/* FAQ */
.contact-faq-section { padding: 4rem 0; }
.contact-faq-item {
    background: var(--clr-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-md);
    padding: 1rem 1.25rem;
    margin-bottom: 0.85rem;
    transition: border-color var(--t), box-shadow var(--t);
}
.contact-faq-item[open] {
    border-color: var(--clr-primary-light);
    box-shadow: var(--sh-sm);
}
.contact-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--clr-text);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.contact-faq-item summary::-webkit-details-marker { display: none; }
.contact-faq-item summary::after {
    content: '\F4FE';
    font-family: 'bootstrap-icons';
    color: var(--clr-primary);
    font-size: 1.2rem;
    transition: transform var(--t);
}
.contact-faq-item[open] summary::after { transform: rotate(45deg); }
.contact-faq-item p {
    color: var(--clr-muted);
    margin: 0.85rem 0 0;
    line-height: 1.6;
}
.contact-faq-item a { color: var(--clr-primary) !important; font-weight: 600; }

/* CTA */
.contact-cta-section { padding: 1rem 0 5rem; }
.contact-cta-card {
    text-align: center;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
    border-radius: var(--r-xl);
    color: #fff;
    box-shadow: var(--sh-lg);
}
.contact-cta-title {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 0.75rem;
    color: #fff;
}
.contact-cta-desc { font-size: 1.05rem; opacity: 0.92; margin: 0 0 1.75rem; }
.contact-cta-actions { display: inline-flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.contact-cta-card .btn-outline-custom {
    border-color: rgba(255,255,255,0.6);
    color: #fff !important;
}
.contact-cta-card .btn-outline-custom:hover { background: #fff; color: var(--clr-primary) !important; }

/* Responsive */
@media (max-width: 991.98px) {
    .contact-form-grid { grid-template-columns: 1fr; gap: 2rem; }
    .contact-hero { padding: 4rem 0 2rem; }
    .contact-info-section { padding: 2rem 0 3rem; }
    .contact-form-section,
    .contact-faq-section { padding: 3rem 0; }
}
@media (max-width: 575.98px) {
    .contact-form-card { padding: 1.5rem; }
    .contact-info-card { padding: 1.75rem 1.5rem; }
    .contact-cta-card { padding: 2.25rem 1.25rem; }
    .contact-cta-actions { flex-direction: column; align-items: stretch; }
}

/* Dark mode */
[data-theme="dark"] .contact-hero {
    background: linear-gradient(180deg, var(--clr-bg-2) 0%, var(--clr-bg) 100%);
}
[data-theme="dark"] .contact-form-card,
[data-theme="dark"] .contact-info-card,
[data-theme="dark"] .contact-faq-item,
[data-theme="dark"] .contact-form-direct { background: var(--clr-card); }
[data-theme="dark"] #contact-page .contact-form-card input:not([type="submit"]),
[data-theme="dark"] #contact-page .contact-form-card select,
[data-theme="dark"] #contact-page .contact-form-card textarea {
    background: var(--clr-bg-2);
    color: var(--clr-text);
    border-color: var(--clr-border);
}
[data-theme="dark"] #contact-page .contact-form-card input::placeholder,
[data-theme="dark"] #contact-page .contact-form-card textarea::placeholder { color: var(--clr-muted); }
[data-theme="dark"] #contact-page .contact-form-card select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239ca3af'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
}
[data-theme="dark"] #contact-page .contact-form-card input:-webkit-autofill,
[data-theme="dark"] #contact-page .contact-form-card textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--clr-bg-2) inset;
    -webkit-text-fill-color: var(--clr-text);
}
[data-theme="dark"] .contact-form-card .wpcf7 form.sent .wpcf7-response-output { background: rgba(22,163,74,0.18); color: #4ade80; }
[data-theme="dark"] .contact-form-card .wpcf7 form.invalid .wpcf7-response-output,
[data-theme="dark"] .contact-form-card .wpcf7 form.failed .wpcf7-response-output { background: rgba(220,38,38,0.18); color: #f87171; }

/* ============================================================
   NEWS & UPDATES PAGE
   ============================================================ */

#news-page { background: var(--clr-bg); }

.news-hero {
    padding: 5rem 0 3rem;
    background: linear-gradient(180deg, var(--clr-bg-2) 0%, var(--clr-bg) 100%);
}
.news-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--clr-text);
    margin: 1rem 0 1rem;
}
.news-hero-desc {
    font-size: 1.1rem;
    color: var(--clr-muted);
    max-width: 640px;
    margin: 0 auto;
}

.news-list-section { padding: 1rem 0 5rem; }

/* Timeline */
.news-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.news-timeline::before {
    content: '';
    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
    left: 11px;
    width: 2px;
    background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-light) 50%, var(--clr-border) 100%);
    border-radius: 2px;
}
.news-item {
    position: relative;
    padding: 0 0 1.5rem 3rem;
}
.news-item:last-child { padding-bottom: 0; }

.news-item-marker {
    position: absolute;
    left: 0;
    top: 1.5rem;
    width: 24px;
    height: 24px;
    background: var(--clr-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.news-item-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    box-shadow: 0 0 0 4px var(--clr-bg), 0 0 0 5px var(--clr-primary-light);
}

.news-item-card {
    background: var(--clr-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: var(--sh-sm);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.news-item-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-color: var(--clr-primary-light);
}
.news-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.news-item-date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-primary);
    background: var(--clr-primary-glow);
    padding: 0.25rem 0.7rem;
    border-radius: 100px;
}
.news-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    padding: 0.25rem 0.65rem;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(117,79,254,0.35);
}
.news-item-badge i { font-size: 0.85rem; }
.news-item.is-latest .news-item-card {
    border-color: var(--clr-primary-light);
    box-shadow: var(--sh-md);
}
.news-item.is-latest .news-item-dot {
    box-shadow: 0 0 0 4px var(--clr-bg), 0 0 0 5px var(--clr-primary), 0 0 16px rgba(117,79,254,0.5);
}
.news-item-date i { font-size: 0.95rem; }
.news-item-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 800;
    color: var(--clr-text);
    margin: 0 0 0.6rem;
    line-height: 1.3;
}
.news-item-content {
    color: var(--clr-text);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 0.5rem;
}
.news-item-content p { margin: 0 0 0.75rem; }
.news-item-content p:last-child { margin-bottom: 0; }
.news-item-content ul,
.news-item-content ol { padding-left: 1.25rem; margin: 0 0 0.75rem; }
.news-item-content li { margin-bottom: 0.35rem; }
.news-item-content a { color: var(--clr-primary) !important; font-weight: 600; }
.news-item-cta { margin-top: 1.1rem; }

.news-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    background: var(--clr-card);
    border: 1px dashed var(--clr-border);
    border-radius: var(--r-lg);
    color: var(--clr-muted);
}
.news-empty i {
    font-size: 2.5rem;
    color: var(--clr-primary);
    margin-bottom: 1rem;
    display: block;
}
.news-empty h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0 0 0.4rem;
}
.news-empty p { margin: 0 auto; max-width: 460px; }

@media (max-width: 575.98px) {
    .news-hero { padding: 3.5rem 0 2rem; }
    .news-list-section { padding: 0.5rem 0 3rem; }
    .news-item { padding-left: 2.25rem; }
    .news-timeline::before { left: 9px; }
    .news-item-marker { left: -2px; top: 1.25rem; }
    .news-item-card { padding: 1.4rem 1.25rem 1.25rem; }
}

[data-theme="dark"] .news-hero {
    background: linear-gradient(180deg, var(--clr-bg-2) 0%, var(--clr-bg) 100%);
}
[data-theme="dark"] .news-item-card,
[data-theme="dark"] .news-empty { background: var(--clr-card); }
[data-theme="dark"] .news-item-marker { background: var(--clr-bg); }
[data-theme="dark"] .news-item-dot { box-shadow: 0 0 0 4px var(--clr-bg), 0 0 0 5px var(--clr-primary); }
[data-theme="dark"] .news-item-date { background: rgba(117,79,254,0.18); color: var(--clr-primary-light); }

/* ============================================================
   404 PAGE — .e404-*
   ============================================================ */

/* Break out of Astra's .ast-container so 404 hero spans full viewport.
   Header + footer stay untouched (they live outside .site-content). */
.error404 #main-content .ast-container,
.error404 .site-content > .ast-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}
.error404 .entry-content,
.error404 .ast-article-single {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#error-404-page { background: var(--clr-bg); width: 100%; }

/* HERO */
.e404-hero {
    padding: 4.5rem 0 3rem;
    background:
        radial-gradient(900px 380px at 50% -10%, rgba(117,79,254,.18), transparent 60%),
        linear-gradient(180deg, var(--clr-bg-2) 0%, var(--clr-bg) 100%);
    text-align: center;
    overflow: hidden;
}

/* Big 4 _ 4 glyph */
.e404-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25em;
    margin: 0 0 1.25rem;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1;
}
.e404-digit {
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.e404-orb {
    width: clamp(72px, 14vw, 132px);
    height: clamp(72px, 14vw, 132px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 5vw, 3.25rem);
    box-shadow: 0 18px 50px rgba(117,79,254,.35), inset 0 -8px 24px rgba(0,0,0,.18);
    animation: e404-float 4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes e404-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.e404-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--clr-text);
    margin: .9rem 0 .65rem;
}
.e404-desc {
    font-size: 1.05rem;
    color: var(--clr-muted);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 1.75rem;
}

/* Search bar reuses the .hero-search component from the home page,
   with a small bump in max-width so the 404 hero looks balanced. */
.e404-hero .hero-search { max-width: 560px; margin: 0 auto 1.5rem; }

.e404-actions {
    display: inline-flex;
    gap: .65rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* HELP STRIP */
.e404-help-section { padding: 1rem 0 4rem; }
.e404-help-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(117,79,254,.08), rgba(117,79,254,.04));
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    flex-wrap: wrap;
}
.e404-help-icon {
    font-size: 2rem;
    color: var(--clr-primary);
    flex-shrink: 0;
}
.e404-help-text {
    flex: 1;
    min-width: 220px;
}
.e404-help-text strong {
    display: block;
    color: var(--clr-text);
    font-size: 1.05rem;
    margin-bottom: .15rem;
}
.e404-help-text span {
    color: var(--clr-muted);
    font-size: .92rem;
}

/* RESPONSIVE */
@media (max-width: 575.98px) {
    .e404-hero { padding: 3rem 0 2rem; }
    .e404-hero .hero-search { padding: .35rem .35rem .35rem .9rem; }
    .e404-actions .btn-primary-custom,
    .e404-actions .btn-outline-custom { width: 100%; justify-content: center; }
    .e404-help-card { flex-direction: column; text-align: center; }
}

/* DARK MODE */
[data-theme="dark"] .e404-hero {
    background:
        radial-gradient(900px 380px at 50% -10%, rgba(117,79,254,.22), transparent 60%),
        linear-gradient(180deg, var(--clr-bg-2) 0%, var(--clr-bg) 100%);
}
[data-theme="dark"] .e404-help-card {
    background: linear-gradient(135deg, rgba(117,79,254,.14), rgba(117,79,254,.06));
}