/* site.css -- tema DrAde peste Bootstrap 5, pentru drade.app.
   Paleta si comportamentul (clar/intunecat dupa setarea sistemului) sunt cele
   de pe site-ul dinainte de trecerea la Bootstrap; ce s-a schimbat e structura
   paginii, nu identitatea vizuala. */

:root {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-alt: #edf1f8;
  --text: #0d1830;
  --text-muted: #52618a;
  --border: #dde3f0;
  --accent: #0e8f9c;
  --accent-soft: #0e8f9c1a;
  --accent-2: #2c4f8c;
  --glow: rgba(14, 143, 156, 0.16);
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #060b18;
    --surface: #0c1730;
    --surface-alt: #101d3c;
    --text: #eaf1fb;
    --text-muted: #8ea1c7;
    --border: #1d2e54;
    --accent: #4fd9e8;
    --accent-soft: #4fd9e829;
    --accent-2: #7b97ec;
    --glow: rgba(79, 217, 232, 0.28);
    --on-accent: #04141a;
  }
}

:root[data-theme="dark"] {
  --bg: #060b18;
  --surface: #0c1730;
  --surface-alt: #101d3c;
  --text: #eaf1fb;
  --text-muted: #8ea1c7;
  --border: #1d2e54;
  --accent: #4fd9e8;
  --accent-soft: #4fd9e829;
  --accent-2: #7b97ec;
  --glow: rgba(79, 217, 232, 0.28);
  --on-accent: #04141a;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.text-accent { color: var(--accent); font-style: normal; }
.text-muted-drade { color: var(--text-muted); }
.py-section { padding: 72px 0; }
@media (max-width: 767px) { .py-section { padding: 48px 0; } }

.eyebrow {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); font-family: ui-monospace, 'IBM Plex Mono', 'Courier New', monospace;
  margin-bottom: .75rem;
}
.lede { color: var(--text-muted); font-size: 1.05rem; max-width: 62ch; }
.section-head { max-width: 760px; margin-bottom: 2.5rem; }

/* --- navbar --- */
.navbar-drade {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbar-drade .navbar-brand { color: var(--text); font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: .5rem; }
.navbar-drade .nav-link { color: var(--text-muted); font-weight: 600; font-size: .92rem; }
.navbar-drade .nav-link:hover, .navbar-drade .nav-link:focus { color: var(--accent); }
.navbar-drade .navbar-toggler { border-color: var(--border); }
.navbar-drade .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2352618a' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.lang-switch {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  width: auto; min-width: 8.5rem;
}

/* --- butoane --- */
.btn-drade {
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  font-weight: 700; padding: .6rem 1.25rem; border-radius: .6rem;
  box-shadow: 0 8px 24px -10px var(--accent);
}
.btn-drade:hover, .btn-drade:focus {
  background: color-mix(in srgb, var(--accent) 85%, #ffffff);
  color: var(--on-accent); border-color: var(--accent);
}
.btn-drade-ghost {
  background: transparent; color: var(--text); border: 1px solid var(--border);
  font-weight: 700; padding: .6rem 1.25rem; border-radius: .6rem;
}
.btn-drade-ghost:hover { border-color: var(--accent); color: var(--accent); }
.dropdown-menu-drade {
  background: var(--surface); border: 1px solid var(--border); border-radius: .7rem;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.5);
}
.dropdown-menu-drade .dropdown-item { color: var(--text); }
.dropdown-menu-drade .dropdown-item:hover { background: var(--accent-soft); color: var(--accent); }

/* --- hero --- */
.hero-band { padding: 84px 0 64px; position: relative; overflow: hidden; }
.hero-band::before {
  content: ""; position: absolute; inset: -30% 40% 40% -20%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
  pointer-events: none;
}
.hero-badge {
  display: inline-block; margin-top: 1rem; padding: .4rem .8rem;
  border: 1px solid var(--accent); border-radius: 100px;
  color: var(--accent); background: var(--accent-soft);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.hero-graphic { position: relative; display: grid; place-items: center; min-height: 320px; }
.hero-graphic svg { width: 100%; max-width: 380px; }
.hero-graphic img {
  position: absolute; width: 42%; max-width: 160px;
  filter: drop-shadow(0 10px 30px var(--glow));
}
.hero-graphic .ring { transform-origin: 50% 50%; animation: dradeSpin 38s linear infinite; }
.hero-graphic .ring-rev { transform-origin: 50% 50%; animation: dradeSpin 26s linear infinite reverse; }
@keyframes dradeSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hero-graphic .ring, .hero-graphic .ring-rev { animation: none; }
}

/* --- carduri --- */
.card-drade {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.5rem; height: 100%;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card-drade:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 16px 34px -22px var(--accent);
}
.card-drade h3 { color: var(--text); font-weight: 700; }
.card-drade p { color: var(--text-muted); font-size: .95rem; }
.step-num {
  font-family: ui-monospace, 'IBM Plex Mono', 'Courier New', monospace;
  color: var(--accent); font-size: 1.4rem; font-weight: 700;
}

/* --- file (app / MDM) --- */
.nav-drade .nav-link {
  color: var(--text-muted); border: 1px solid var(--border); background: var(--surface);
  font-weight: 700; margin-right: .5rem; border-radius: .6rem;
}
.nav-drade .nav-link.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}

/* --- lista de noduri --- */
.node-list { list-style: none; padding: 0; margin: 0; }
.node-list li {
  position: relative; padding: .9rem 0 .9rem 1.75rem;
  border-top: 1px solid var(--border); color: var(--text);
}
.node-list li:first-child { border-top: none; }
.node-list li::before {
  content: ""; position: absolute; left: 0; top: 1.35rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
}

/* --- banda de actiune + subsol --- */
.cta-band {
  padding: 72px 0; background: var(--surface-alt);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.cta-band .lede { max-width: 60ch; }
.site-footer {
  padding: 28px 0; color: var(--text-muted); font-size: .85rem;
  border-top: 1px solid var(--border);
}

/* RTL (araba) -- Bootstrap se descurca cu directia, doar cateva retusuri. */
[dir="rtl"] .node-list li { padding: .9rem 1.75rem .9rem 0; }
[dir="rtl"] .node-list li::before { left: auto; right: 0; }

/* --- tema aleasa din panou -----------------------------------------------
   Paleta vine din <style>-ul scris de generator (site-render.js); aici raman
   doar variabilele de forma, ca sa aiba valori si daca pagina n-are tema. */
body { font-family: var(--font-body, 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif); }
.card-drade { border-radius: var(--radius, 14px); }
.btn-drade, .btn-drade-ghost { border-radius: var(--radius-btn, .6rem); }
.nav-drade .nav-link { border-radius: var(--radius-btn, .6rem); }
.dropdown-menu-drade { border-radius: var(--radius, .7rem); }

/* Textele lungi pot avea randuri noi: JS-ul de limba scrie textContent, deci
   nu se poate pune <br> in traduceri -- pre-line face treaba fara HTML. */
.lede, .card-drade p, .accordion-body p, .price-body, .quote-text { white-space: pre-line; }

/* --- optiuni de sectiune (fundal / latime) --- */
.band-alt { background: var(--surface-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band-tinted { background: var(--accent-soft); }
.band-narrow .container { max-width: 820px; }

/* --- carduri cu iconuri --- */
.feat-icon {
  font-size: 1.6rem; line-height: 1; margin-bottom: .75rem;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border-radius: var(--radius, 14px); background: var(--accent-soft); color: var(--accent);
  font-weight: 800;
}
.card-link { text-decoration: none; display: block; height: 100%; color: inherit; }

/* --- acordeon (intrebari frecvente) --- */
.acc-drade { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 14px); margin-bottom: .75rem; overflow: hidden; }
.acc-drade .accordion-button { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: none; }
.acc-drade .accordion-button:not(.collapsed) { background: var(--accent-soft); color: var(--accent); }
.acc-drade .accordion-button:focus { box-shadow: 0 0 0 .2rem var(--accent-soft); }
.acc-drade .accordion-body { color: var(--text-muted); }

/* --- cifre --- */
.stat-row { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2rem 0; }
.stat-value { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--accent); line-height: 1.1; }
.stat-label { color: var(--text-muted); font-size: .9rem; margin-top: .35rem; }

/* --- citat --- */
.quote-block { max-width: 760px; margin: 0 auto; text-align: center; }
.quote-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 1px solid var(--border); }
.quote-text { font-size: 1.3rem; line-height: 1.5; color: var(--text); font-weight: 600; }
.quote-text::before { content: "\201C"; color: var(--accent); margin-right: .15em; }
.quote-text::after { content: "\201D"; color: var(--accent); margin-left: .15em; }
.quote-author { font-weight: 700; display: block; margin-top: .75rem; }
.quote-role { color: var(--text-muted); font-size: .9rem; }

/* --- pachete / preturi --- */
.price-card { display: flex; flex-direction: column; }
.price-hot { border-color: var(--accent); box-shadow: 0 16px 34px -22px var(--accent); }
.price-line { display: flex; align-items: baseline; gap: .35rem; margin: .5rem 0 1rem; }
.price-value { font-size: 2rem; font-weight: 800; color: var(--accent); }
.price-period { color: var(--text-muted); font-size: .9rem; }
.price-body { color: var(--text-muted); font-size: .95rem; flex: 1 1 auto; }

/* --- date de contact --- */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; align-items: center; gap: .6rem; padding: .9rem 0; border-top: 1px solid var(--border); }
.contact-list li:first-child { border-top: none; }
.contact-icon { color: var(--accent); }
.contact-label { color: var(--text-muted); min-width: 7rem; }
.contact-value { color: var(--text); font-weight: 600; }
.contact-list a { color: var(--accent); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* --- imagine + text, galerie, hero cu imagine --- */
.media-frame {
  border: 1px solid var(--border); border-radius: var(--radius, 14px); overflow: hidden;
  background: var(--surface-alt); min-height: 220px; display: grid; place-items: center;
}
.media-frame img { width: 100%; height: auto; display: block; }
.gallery-cell { margin: 0; }
.gallery-cell img {
  width: 100%; height: 200px; object-fit: cover; display: block;
  border: 1px solid var(--border); border-radius: var(--radius, 14px);
}
.gallery-cell figcaption { color: var(--text-muted); font-size: .88rem; margin-top: .5rem; }
.hero-graphic-img img { width: 100%; max-width: 420px; border-radius: var(--radius, 14px); }

[dir="rtl"] .contact-list li { flex-direction: row; }