/* ============================================================
 * page-glow.css
 * Suprascrie clasele Tailwind pre-compilate *-brand-glow
 * ca să folosească culoarea paginii (data-page-color)
 * in loc de verde hard-codat (#10B981).
 *
 * Se încarcă DUPĂ tailwind.css in head.
 * Pagina își setează --page-glow din data-page-color.
 *
 * IMPORTANT: folosim rgba() cu sintaxa veche, NU rgb(R G B / A),
 * pentru compatibilitate cu browsere mai vechi unde slash-syntax
 * e invalid și cade pe inherited.
 * ============================================================ */

/* ---- 1. Sursa: câte o culoare per pagină ---- */
:root {
  --page-glow: #FF4D2E;          /* fallback PORTOCALIU DEEP — Boosted Leads energy (Ali 14-Iul) */
  --page-glow-rgb: 255, 77, 46;  /* fallback RGB */
}

[data-page-color^="#06B6D4"] { --page-glow: #06B6D4; --page-glow-rgb: 6, 182, 212; }     /* home  - cyan */
[data-page-color^="#D4AF37"] { --page-glow: #D4AF37; --page-glow-rgb: 212, 175, 55; }    /* lgm   - gold */
[data-page-color^="#A855F7"] { --page-glow: #A855F7; --page-glow-rgb: 168, 85, 247; }    /* galerie - purple */
[data-page-color^="#EC4899"] { --page-glow: #EC4899; --page-glow-rgb: 236, 72, 153; }    /* pachete-legacy - pink */
[data-page-color^="#FF4D2E"] { --page-glow: #FF4D2E; --page-glow-rgb: 255, 77, 46; }     /* pachete - portocaliu deep (Ali 14-Iul) */
[data-page-color^="#10B981"] { --page-glow: #10B981; --page-glow-rgb: 16, 185, 129; }    /* lgm    - emerald (Ali 15-Iul) */
[data-page-color^="#22C55E"] { --page-glow: #22C55E; --page-glow-rgb: 34, 197, 94; }     /* lgm-alt - emerald alt */
[data-page-color^="#FB923C"] { --page-glow: #FB923C; --page-glow-rgb: 251, 146, 60; }    /* pachete-alt - portocaliu mid (legacy) */
[data-page-color^="#F97316"] { --page-glow: #F97316; --page-glow-rgb: 249, 115, 22; }    /* pachete-alt - portocaliu deep (legacy) */
[data-page-color^="#6366F1"] { --page-glow: #6366F1; --page-glow-rgb: 99, 102, 241; }    /* link  - indigo */
[data-page-color^="#F59E0B"] { --page-glow: #F59E0B; --page-glow-rgb: 245, 158, 11; }   /* screencasts - orange */

/* ---- 2. Suprascrieri pentru clasele Tailwind compilate ---- */

/* text-brand-glow */
.text-brand-glow {
  color: rgba(var(--page-glow-rgb), var(--tw-text-opacity, 1)) !important;
}

/* background solid */
.bg-brand-glow {
  background-color: rgba(var(--page-glow-rgb), var(--tw-bg-opacity, 1)) !important;
}

/* background cu opacități (slashes din Tailwind: /5, /10, /20, /30 etc.) */
.bg-brand-glow\/5   { background-color: rgba(var(--page-glow-rgb), 0.05) !important; }
.bg-brand-glow\/10  { background-color: rgba(var(--page-glow-rgb), 0.10) !important; }
.bg-brand-glow\/20  { background-color: rgba(var(--page-glow-rgb), 0.20) !important; }
.bg-brand-glow\/30  { background-color: rgba(var(--page-glow-rgb), 0.30) !important; }
.bg-brand-glow\/50  { background-color: rgba(var(--page-glow-rgb), 0.50) !important; }

/* border */
.border-brand-glow         { border-color: rgba(var(--page-glow-rgb), 1) !important; }
.border-brand-glow\/20     { border-color: rgba(var(--page-glow-rgb), 0.20) !important; }
.border-brand-glow\/30     { border-color: rgba(var(--page-glow-rgb), 0.30) !important; }
.border-brand-glow\/40     { border-color: rgba(var(--page-glow-rgb), 0.40) !important; }
.border-brand-glow\/50     { border-color: rgba(var(--page-glow-rgb), 0.50) !important; }

/* hover */
.hover\:text-brand-glow:hover           { color: rgba(var(--page-glow-rgb), var(--tw-text-opacity, 1)) !important; }
.hover\:bg-brand-glow:hover             { background-color: rgba(var(--page-glow-rgb), var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-brand-glow\/20:hover         { background-color: rgba(var(--page-glow-rgb), 0.20) !important; }
.hover\:border-brand-glow\/20:hover     { border-color: rgba(var(--page-glow-rgb), 0.20) !important; }
.hover\:border-brand-glow\/40:hover     { border-color: rgba(var(--page-glow-rgb), 0.40) !important; }

/* focus */
.focus\:border-brand-glow\/50:focus     { border-color: rgba(var(--page-glow-rgb), 0.50) !important; }

/* selection */
.selection\:bg-brand-glow ::selection,
.selection\:bg-brand-glow::selection {
  background-color: rgba(var(--page-glow-rgb), var(--tw-bg-opacity, 1)) !important;
}

/* gradient from */
.from-brand-glow\/5 {
  --tw-gradient-from: rgba(var(--page-glow-rgb), 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to:   rgba(var(--page-glow-rgb), 0)    var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* shadow */
.shadow-brand-glow {
  --tw-shadow-color: rgb(var(--page-glow-rgb)) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}
.shadow-brand-glow\/20 {
  --tw-shadow-color: rgba(var(--page-glow-rgb), 0.20) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

/* group-hover */
.group:hover .group-hover\:text-brand-glow {
  color: rgba(var(--page-glow-rgb), var(--tw-text-opacity, 1)) !important;
}

/* ---- 3. Helper pt clasele custom din head ---- */
.text-glow-green {
  color: var(--page-glow) !important;
  text-shadow: 0 0 12px rgba(var(--page-glow-rgb), 0.6) !important;
}

.glow-button-green {
  box-shadow: 0 0 20px rgba(var(--page-glow-rgb), 0.35) !important;
}

/* ---- 4. Smooth transition ---- */
.text-brand-glow,
.bg-brand-glow,
.border-brand-glow,
[class*="hover\\:text-brand-glow"]:hover {
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* ---- 5. Clase custom definite local în <style> per pagină ----
   Unele pagini (LGM, Galerie, etc) au clase custom ca .label, .num,
   .tag etc definite cu #10B981 sau #34d399 direct. Le suprascriem
   aici ca să se alinieze cu culoarea paginii.
   IMPORTANT: pagina trebuie să aibă data-page-color setat. */
.label,
.num,
.arrow-down,
.flow-arr,
.label.hook,
.flow-step .num,
.flow-step .label,
.flow-num,
.flow-label,
.check,
.cross,
.pill.active,
.pill.active:hover {
  color: var(--page-glow) !important;
}

.pill.active,
.pill.active:hover {
  background: rgba(var(--page-glow-rgb), 0.15) !important;
  border-color: var(--page-glow) !important;
}

/* Tag-uri cu bg + text (LGM) - textul devine page-glow, bg ramane neutru-transparent */
.tag.email,
.tag.hook,
.tag.value {
  color: var(--page-glow) !important;
}

/* Glow pentru tag-uri - folosim page-glow cu transparență */
.tag.email,
.tag.hook,
.tag.value {
  box-shadow: 0 0 12px rgba(var(--page-glow-rgb), 0.15);
}

/* ---- 6. Clase specifice LGM ---- */
.hero .badge .text {
  color: var(--page-glow) !important;
}
.hero .badge span {
  background: var(--page-glow) !important;
  box-shadow: 0 0 8px rgba(var(--page-glow-rgb), 0.5) !important;
}
.hero h1 {
  background: linear-gradient(135deg, var(--page-glow) 0%, rgba(var(--page-glow-rgb), 0.7) 50%, rgba(var(--page-glow-rgb), 0.4) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.post-card .body .hook-text em {
  color: var(--page-glow) !important;
}
.cta-box a {
  background: var(--page-glow) !important;
  color: #0a0a0c !important;
}
.cta-box a:hover {
  background: rgba(var(--page-glow-rgb), 0.85) !important;
  box-shadow: 0 8px 32px rgba(var(--page-glow-rgb), 0.4) !important;
}

/* Header LGM: link "LGM" (pagina activa) si butonul "Test Sistem" */
header a[href="/lgm/"][style*="#10B981"],
a.cta-mobile[style*="#10B981"] {
  color: var(--page-glow) !important;
}
a[style*="background:#10B981"],
a[style*="background: #10B981"] {
  background: var(--page-glow) !important;
}

/* ---- 7. SVG-uri din diagrama LGM ----
   Au fill/stroke="#10B981" sau "#34d399" direct in markup.
   Le suprascriem prin selector pe culoare. */
svg [fill="#10B981"], svg [fill="#34d399"] {
  fill: var(--page-glow) !important;
}
svg [stroke="#10B981"], svg [stroke="#34d399"] {
  stroke: var(--page-glow) !important;
}
/* SVG text fill - folosim match mai permisiv */
svg text[fill="#10B981"], svg text[fill="#34d399"] {
  fill: var(--page-glow) !important;
}
/* Marker arrow ends */
svg marker path {
  fill: var(--page-glow) !important;
  stroke: var(--page-glow) !important;
}

/* ---- 8. Glow orbs de pe home ----
   .glow-orb.g1 era verde (.18 alpha), .g2 indigo (.12), .g3 albastru (.10).
   Le facem sa foloseasca page-glow-ul paginii. */
.glow-orb.g1 {
  background: rgba(var(--page-glow-rgb), 0.18) !important;
}
.glow-orb.g2 {
  background: rgba(var(--page-glow-rgb), 0.12) !important;
}
.glow-orb.g3 {
  background: rgba(var(--page-glow-rgb), 0.10) !important;
}

/* SVG ellipse verde cu alpha mic (decorativ home) */
svg ellipse[fill="rgba(16,185,129,0.03)"],
svg ellipse[fill="rgba(16, 185, 129, 0.03)"] {
  fill: rgba(var(--page-glow-rgb), 0.03) !important;
}