/*
Theme Name: Psihologul Online
Theme URI: https://psihologulonline.ro
Author: Psihologul Online
Author URI: https://psihologulonline.ro
Description: Temă WordPress standalone pentru homepage-ul Psihologul Online. Reproduce fidel template-ul HTML original (burnout, anxietate, echilibru emoțional).
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: psihologul-online
*/

:root{
  --bg:#faf7f2;
  --surface:#ffffff;
  --surface-2:#f4eee6;
  --text:#1f2937;
  --muted:#667085;
  --accent:#8b5e4a;
  --accent-2:#b98c75;
  --line:#e8ddd4;
  --shadow:0 18px 50px rgba(46, 33, 23, .08);
  --radius:26px;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(139,94,74,.12), transparent 35%),
    linear-gradient(180deg, #fffdfb 0%, var(--bg) 100%);
  line-height:1.65;
}
a{color:inherit}
img{max-width:100%; display:block}
.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(232,221,212,.9);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:800; letter-spacing:-.02em}
.brand-mark{width:40px; height:40px; border-radius:13px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 10px 24px rgba(139,94,74,.22)}
.nav{display:flex; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--muted); align-items:center}
.nav a{text-decoration:none}
.nav a:hover{color:var(--accent)}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px 20px;
  border-radius:999px; text-decoration:none; font-weight:700;
  border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover{transform:translateY(-1px)}
.button.primary{background:linear-gradient(135deg, var(--accent), #6f4737); color:#fff; box-shadow:0 16px 34px rgba(139,94,74,.24)}
.button.secondary{background:#fff; border-color:rgba(139,94,74,.18); color:var(--accent)}
.hero{padding:42px 0 28px}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:26px; align-items:start}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border:1px solid rgba(139,94,74,.18);
  background:rgba(255,255,255,.72); border-radius:999px; color:var(--accent);
  font-size:13px; font-weight:700;
}
h1,h2,h3{letter-spacing:-.03em; line-height:1.12; margin:0}
h1{font-size:clamp(2.1rem, 5vw, 4.45rem); margin:18px 0 16px}
h2{font-size:clamp(1.5rem, 3vw, 2.25rem); margin-bottom:14px}
h3{font-size:1.08rem}
.lead{font-size:1.05rem; color:var(--muted); max-width:62ch; margin:0 0 24px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.micro{font-size:13px; color:var(--muted); margin-top:12px}
.panel,.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel{overflow:hidden}
.video-slot{
  aspect-ratio:16/9;
  background:
    linear-gradient(135deg, rgba(139,94,74,.95), rgba(185,140,117,.9)),
    radial-gradient(circle at top left, rgba(255,255,255,.25), transparent 55%);
  display:flex; align-items:center; justify-content:center; padding:20px; color:#fff;
}
.video-content{text-align:center; max-width:380px}
.play{
  width:84px; height:84px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.44);
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.04);
  margin-bottom:12px;
}
.video-copy{padding:20px 22px 22px}
.video-copy p{margin:0; color:var(--muted)}
.section{padding:22px 0}
.section .card{padding:26px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px}
.cards-6{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:18px}
.service{
  padding:20px; border-radius:20px; background:linear-gradient(180deg, #fff 0%, #fff8f3 100%);
  border:1px solid var(--line);
  min-height:162px;
}
.service .tag{
  display:inline-flex; padding:6px 10px; border-radius:999px;
  background:rgba(139,94,74,.1); color:var(--accent); font-size:12px; font-weight:700; margin-bottom:12px;
}
.muted{color:var(--muted)}
.list{display:grid; gap:10px; margin:0; padding-left:18px}
.list li{padding-left:4px}
.steps{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-top:18px}
.step{padding:18px; border-radius:18px; border:1px solid var(--line); background:#fff}
.num{
  width:36px; height:36px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(139,94,74,.12); color:var(--accent); font-weight:800; margin-bottom:12px
}
.about{display:grid; grid-template-columns:.88fr 1.12fr; gap:18px; align-items:start}
.portrait{
  min-height:360px; border-radius:28px; overflow:hidden;
  background:
    linear-gradient(160deg, rgba(139,94,74,.94), rgba(255,255,255,.08)),
    linear-gradient(180deg, #e9ddd3 0%, #f8f1e9 100%);
  box-shadow:var(--shadow); color:#fff; padding:24px; display:flex; flex-direction:column; justify-content:flex-end;
}
.portrait .name{font-size:1.45rem; font-weight:800; margin:0 0 6px}
.portrait .role{margin:0; opacity:.92}
.quote{
  font-size:1.08rem; padding:18px 20px; border-left:4px solid var(--accent);
  background:#fff; border-radius:0 16px 16px 0;
}
.faq{display:grid; gap:12px; margin-top:18px}
details{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:16px 18px; box-shadow:0 10px 20px rgba(46,33,23,.04)
}
summary{cursor:pointer; font-weight:800; list-style:none}
summary::-webkit-details-marker{display:none}
.footer-cta{
  text-align:center; padding:32px 24px;
  background:linear-gradient(135deg, rgba(139,94,74,.08), rgba(185,140,117,.16));
  border:1px solid rgba(139,94,74,.12); border-radius:28px;
}
.footer{padding:28px 0 42px; color:var(--muted); font-size:14px}
.center{text-align:center}
.trustbar{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-top:18px;
}
.trust{
  padding:14px 16px; border-radius:16px; background:#fff; border:1px solid var(--line); color:var(--muted); font-size:14px;
  text-align:center;
}
.service-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.chip{
  text-decoration:none; padding:10px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:14px;
}
.chip:hover{border-color:rgba(139,94,74,.35); color:var(--accent)}
.banner{
  margin:18px 0 0;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(139,94,74,.14);
  background:rgba(139,94,74,.05);
  color:#46362f;
}
@media (max-width: 980px){
  .hero-grid,.grid-2,.about,.steps,.cards-6,.grid-3,.trustbar{grid-template-columns:1fr}
  .nav{display:none}
  .topbar-inner{padding:12px 0}
}

/* WordPress admin-bar compatibility */
body.admin-bar .topbar{ top:32px; }
@media screen and (max-width: 782px){
  body.admin-bar .topbar{ top:46px; }
}