/* ============================================================
   ALCHIMIA LUNII : Global site fixes
   Lizibilitate (fonturi mai mari), centrare, accente subtile.
   Acest fișier se încarcă DUPĂ stilurile din <head> pe fiecare
   pagină, deci regulile de mai jos (cu !important) au prioritate.
   ============================================================ */

/* ---------- 1. Lizibilitate generală ---------- */
/* Bază de 18px; nu mai forțăm niciun bump global de font-size peste asta —
   fiecare pagină își păstrează dimensiunile proprii, definite deja corect
   în <style>. */
html { font-size: 18px !important; }

/* ---------- 2. Header / meniu ---------- */
/* Mai mult spațiu pentru antet, ca meniul + butonul să încapă pe un rând
   pe ecrane obișnuite de laptop/desktop, nu doar pe monitoare foarte late. */
header .container { max-width: 1300px !important; }
header nav a { font-size: 19px !important; }
header .logo { font-size: 28px !important; }

.cta-button {
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 13px 28px !important;
}

/* ===== Mobile nav: hamburger toggle =====
   The header stays visible at the top at all times (no hide-on-scroll).
   On small screens the links collapse behind a toggle button; when
   opened, the menu is a compact card that drops down just below the
   header, not a full-screen list. (JS injects an !important version of
   this same design too, as a safety net against page-specific styles.) */
.slm-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border, #d8cfc0);
  border-radius: 8px;
  width: 42px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 210;
}
.slm-nav-toggle span,
.slm-nav-toggle span::before,
.slm-nav-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--primary, #1a1a2e);
  position: relative;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}
.slm-nav-toggle span::before,
.slm-nav-toggle span::after { content: ""; position: absolute; left: 0; }
.slm-nav-toggle span::before { top: -6px; }
.slm-nav-toggle span::after { top: 6px; }
.slm-nav-toggle.is-open span { background: transparent; }
.slm-nav-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.slm-nav-toggle.is-open span::after { top: 0; transform: rotate(-45deg); }

.slm-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,12,20,0.28);
  z-index: 150;
}
.slm-nav-backdrop.is-visible { display: block; }

@media (max-width: 768px) {
  .slm-nav-toggle { display: flex; }

  header { position: sticky; top: 0; }

  header .header-content {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
  }
  header .logo { width: auto !important; }

  header nav {
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    position: absolute !important;
    top: 100% !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: min(60vh, 420px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0 0 !important;
    padding: 6px !important;
    background: var(--bg, #fefcf8) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(20,15,10,0.22) !important;
    z-index: 200 !important;
  }
  header nav.slm-nav-open { display: flex !important; }
  header nav a {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    text-align: left !important;
    padding: 13px 14px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    border-radius: 8px !important;
    background: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    float: none !important;
    position: static !important;
  }
  header nav a:last-child { border-bottom: none !important; }
  header nav .nav-divider { display: none !important; }
  header nav .nav-featured,
  header nav .nav-podcast {
    background: none !important;
    color: var(--text, #2a2a3a) !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 13px 14px !important;
  }
  /* Corp & Cosmos : highlight subtil pe mobil */
  header nav a[href*="corp-cosmos"] {
    background: rgba(201,169,122,0.12) !important;
    color: var(--primary, #1a1a2e) !important;
    font-weight: 500 !important;
  }
  /* Programeaza o consultatie : auriu vizibil pe mobil */
  header nav a.cta-button {
    margin: 8px 2px 2px !important;
    border-radius: 8px !important;
    text-align: center !important;
    border-bottom: none !important;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--accent, #c9a97a) !important;
    color: white !important;
    font-weight: 600 !important;
  }
}

.nav-podcast {
  font-style: normal !important;
  background: var(--secondary, #2d3561) !important;
  border: 1px solid var(--secondary, #2d3561) !important;
  color: white !important;
  padding: 6px 16px !important;
  border-radius: 20px;
  position: relative;
  transition: background 0.25s, border-color 0.25s;
}
.nav-podcast:hover {
  background: var(--primary, #1a1a2e) !important;
  border-color: var(--primary, #1a1a2e) !important;
}
.nav-podcast::after { content: none; }

/* Corp & Cosmos : highlight subtil (desktop) */
header nav a[href*="corp-cosmos"] {
  background: rgba(201,169,122,0.15) !important;
  padding: 6px 16px !important;
  border-radius: 20px;
  transition: background 0.25s;
}
header nav a[href*="corp-cosmos"]:hover {
  background: rgba(201,169,122,0.30) !important;
}

/* ---------- 2b. Header : evită "bara ruptă" cu butonul rămas singur pe un rând
   Sub acest prag, tot meniul (inclusiv butonul) trece frumos pe coloană,
   centrat; peste prag, totul încape pe un singur rând. Eliminăm astfel
   starea intermediară în care doar butonul rămâne izolat pe un rând gol. */
@media (max-width: 1180px) {
  .header-content {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  header nav {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
  }
  header nav a.cta-button {
    margin-top: 6px;
  }
}
@media (max-width: 640px) {
  header nav { flex-direction: column !important; gap: 12px !important; }
  header nav .nav-divider { display: none !important; }
  header nav a.cta-button { width: 90% !important; text-align: center !important; }
}

/* ---------- 2c. Fără text descriptiv sub poze, nicăieri pe site ---------- */
figcaption, .img-block figcaption, .img-float-right figcaption,
.hp-banner-img figcaption, .caption {
  display: none !important;
}

/* ---------- 2d. Poze din articole : cadraj mai bun, mai puțin "tăiate" ----------
   Bannerul .hero e lat și scund; cu object-position centrat, ilustrațiile cu
   personaje (portret/pătrate) sunt tăiate sus și jos. Mutăm punctul de focus
   puțin mai sus, acolo unde e de regulă fața/bustul figurii ilustrate. */
/* Mai puțină tăiere pe verticală: bannerul era prea "lat și scund" față de
   ilustrațiile cu personaje; îi dăm ceva mai multă înălțime. */
.hero { height: clamp(380px, 46vw, 720px) !important; }
.hero img { object-position: 50% 20% !important; }

/* ---------- 2e. Casete "summary-grid" din articole : centrate, nu "orfane" ----------
   Cu 4 sau 5 casete într-un grid pe 3 coloane fixe, ultimul rând rămânea
   incomplet și aliniat la stânga. Trecem pe flex, cu wrap + centrare, ca
   rândul incomplet să fie mereu centrat, indiferent de numărul de casete. */
.summary-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 18px !important;
}
.summary-grid .summary-item {
  flex: 1 1 260px;
  max-width: 320px;
  box-sizing: border-box;
}
@media (max-width: 680px) {
  .summary-grid .summary-item { flex: 1 1 100%; max-width: 100%; }
}

/* ---------- 3. Bannere / hero-uri (Corp&Cosmos, Astrograma, Evenimente) ----------
   Fără inele orbitale, fără animații, fără layere subtile: doar bannerul,
   așa cum a cerut explicit. */

/* ---------- 4. Footer: centrare ---------- */
/* Doar centrare; fonturile rămân exact cele definite în pagină, fără
   niciun bump aici. */
.footer-content {
  text-align: center !important;
}
.footer-column { display: flex; flex-direction: column; align-items: center; }
.social-buttons { justify-content: center !important; }
.newsletter-form { margin: 0 auto !important; }

.footer-bottom {
  justify-content: center !important;
  text-align: center !important;
  flex-direction: column !important;
}
.footer-links { justify-content: center !important; font-size: 15px !important; }
.footer-links a { font-size: 15px !important; }
.payment-badges { justify-content: center !important; }

/* ---------- 5. Evenimente / carduri: text mai mare ---------- */
.ev-card, .service-card, .comparison-card, .process-step {
  font-size: 1.05em !important;
}

/* Utilitar general de reveal-la-scroll, reutilizabil oriunde pe site */
.reveal-on-scroll { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- 6. Formular newsletter : nu mai taie butonul pe mobil ----------
   Pe pagina Astrograma gratuită, formularul de Jurnal Astrologic e forțat
   pe rând (flex-direction: row) printr-un style inline, iar butonul cu text
   lung + white-space: nowrap ieșea din ecran pe telefon. Pe ecrane înguste
   îl trecem înapoi pe coloană, ca butonul să fie mereu complet vizibil. */
@media (max-width: 560px) {
  form.newsletter-form[style*="row"] {
    flex-direction: column !important;
  }
  form.newsletter-form[style*="row"] input[type="email"] {
    width: 100% !important;
    flex: none !important;
  }
  form.newsletter-form[style*="row"] button {
    width: 100% !important;
    white-space: normal !important;
  }
}

/* ---------- 7. Comunitatea WhatsApp : casetă subtilă la finalul articolelor ----------
   Elementul e inserat în afara div-ului .article-wrap (care limitează lățimea
   conținutului), deci îi dăm noi o lățime maximă + centrare, ca să nu se
   întindă pe toată lățimea paginii. */
.wa-community {
  margin: 52px auto 8px;
  max-width: 820px;
  width: calc(100% - 56px);
  padding: 26px 30px;
  border: 1px solid var(--border, #d8cfc0);
  border-radius: 10px;
  background: var(--cream-dark, var(--bg-alt, #f5f1eb));
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.wa-community-text { flex: 1 1 260px; }
.wa-community-text p {
  margin: 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  color: var(--text, #2a2a3a);
}
.wa-community-text strong { color: var(--primary, #1a1a2e); }
.wa-community-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 30px;
  border: 1.5px solid #25D366;
  color: #128C4A;
  background: rgba(37,211,102,0.10);
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.25s, transform 0.25s;
  flex-shrink: 0;
}
.wa-community-btn:hover { background: rgba(37,211,102,0.22); transform: translateY(-1px); }
.wa-community-btn svg { width: 24px; height: 24px; flex-shrink: 0; color: #25D366; }
@media (max-width: 600px) {
  .wa-community { flex-direction: column; align-items: flex-start; padding: 22px; }
  .wa-community-btn { width: 100%; justify-content: center; }
}

/* Mesaj de confirmare/eroare sub formularele de newsletter (DoCourse) */
.newsletter-msg {
  font-size: 14px;
  margin-top: 8px;
  min-height: 1.2em;
}
.newsletter-msg.is-success { color: #7fd9a6; }
.newsletter-msg.is-error { color: #f2a68f; }

/* Bifă obligatorie de consimțământ GDPR pe formularele de newsletter */
.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  opacity: 0.9;
}
.newsletter-consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent, #c9a97a);
}
.newsletter-consent a {
  color: inherit;
  text-decoration: underline;
}
