/* Voice Of Raluca — service pages shared CSS (vor-v2)
   Used by: dubbing-romana, ivr-voiceover, sesiuni-live (RO + EN)
   Last update: 2026-04-08 */

:root {
            --font-d: 'DM Serif Display', Georgia, serif;
            --font-b: 'Space Grotesk', sans-serif;
            --font-m: 'JetBrains Mono', monospace;
            --ease: cubic-bezier(0.16, 1, 0.3, 1);
            --tr: 0.35s var(--ease);
            --ac: #8B5CF6;
            --ac-l: #A78BFA;
            --ac-s: rgba(139, 92, 246, 0.1);
        }
        [data-theme="light"] {
            --bg1: #F8F8FB; --bg2: #F0F0F5; --bg3: #FFFFFF;
            --tx1: #111118; --tx2: #555566; --tx3: #999AAA; --txI: #FFFFFF;
            --brd: rgba(0,0,0,0.07); --brdH: rgba(0,0,0,0.13);
            --glass: rgba(248,248,251,0.88);
        }
        [data-theme="dark"] {
            --bg1: #08080A; --bg2: #0E0E12; --bg3: #151519;
            --tx1: #F5F5F5; --tx2: #9E9EB1; --tx3: #65657A; --txI: #08080A;
            --brd: rgba(255,255,255,0.07); --brdH: rgba(255,255,255,0.14);
            --glass: rgba(14,14,18,0.85);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; }
        body { font-family:var(--font-b); background:var(--bg1); color:var(--tx1); line-height:1.65; overflow-x:hidden; transition:background var(--tr), color var(--tr); }
        a { color:var(--ac); text-decoration:none; transition:color var(--tr); }
        a:hover { color:var(--ac-l); }
        ::selection { background:var(--ac); color:var(--txI); }
        h1,h2,h3 { font-family:var(--font-d); color:var(--tx1); line-height:1.15; font-weight:400; }
        img { max-width:100%; height:auto; display:block; }

        body > nav { background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--brd); padding:16px 24px; position:sticky; top:0; z-index:100; }
        .nav-wrap { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
        .nav-left { display:flex; align-items:center; gap:24px; flex:1; }
        .logo { font-family:var(--font-d); font-size:1.3rem; font-weight:400; color:var(--tx1); white-space:nowrap; }
        .logo i { color:var(--ac); font-style:italic; }
        .nav-home { color:var(--tx2); font-size:0.9rem; transition:color var(--tr); }
        .nav-home:hover { color:var(--tx1); }
        .nav-right { display:flex; align-items:center; gap:16px; }
        
        
        

        article { max-width:720px; margin:0 auto; padding:60px 24px; }
        .post-hero-img { width:100%; height:400px; object-fit:cover; border-radius:12px; margin-bottom:40px; background:var(--bg2); }
        @media(max-width:768px) { .post-hero-img { height:250px; } }
        .post-tags { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
        .post-tag { display:inline-block; background:var(--ac-s); color:var(--ac); padding:4px 10px; border-radius:4px; font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; }
        .post-title { font-size:clamp(1.8rem,4vw,2.4rem); margin-bottom:20px; line-height:1.2; }
        .post-meta { display:flex; flex-wrap:wrap; gap:20px; color:var(--tx2); font-size:0.9rem; padding-bottom:20px; border-bottom:1px solid var(--brd); margin-bottom:40px; }
        .post-content { font-size:1rem; line-height:1.8; color:var(--tx1); }
        .post-content h2 { font-size:1.4rem; margin-top:1.5em; margin-bottom:0.5em; }
        .post-content p { margin-bottom:1.2em; }
        .post-content a { text-decoration:underline; }

        .faq-section { margin-top:3em; }
        .faq-title { font-size:1.4rem; margin-bottom:1em; margin-top:2em; }
        .faq-item { border:1px solid var(--brd); border-radius:8px; margin-bottom:12px; overflow:hidden; }
        .faq-item summary { padding:16px 20px; cursor:pointer; font-weight:500; font-size:0.95rem; list-style:none; display:flex; justify-content:space-between; align-items:center; transition:background var(--tr); }
        .faq-item summary:hover { background:var(--bg2); }
        .faq-item summary::after { content:'+'; font-size:1.2rem; color:var(--ac); transition:transform 0.3s; }
        .faq-item[open] summary::after { transform:rotate(45deg); }
        .faq-item[open] summary { background:var(--ac-s); }
        .faq-item .faq-answer { padding:0 20px 16px; color:var(--tx2); line-height:1.7; }

        .cta-section { background:var(--ac-s); border:1px solid var(--ac); border-radius:12px; padding:40px; margin-top:3em; text-align:center; }
        .cta-section h3 { font-size:1.3rem; margin-bottom:1em; }
        .cta-section p { margin-bottom:1.5em; color:var(--tx2); }
        .cta-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
        .cta-btn { background:var(--ac); color:var(--txI); padding:12px 24px; border-radius:6px; text-decoration:none; font-weight:500; transition:background var(--tr),transform var(--tr),box-shadow var(--tr); border:none; cursor:pointer; }
        .cta-btn:hover { background:var(--ac-l); }
        .cta-btn.secondary { background:transparent; border:2px solid var(--ac); color:var(--ac); }
        .cta-btn.secondary:hover { background:var(--ac); color:var(--txI); }

        .post-controls { display:flex; gap:16px; margin-top:40px; padding-top:40px; border-top:1px solid var(--brd); flex-wrap:wrap; }
        .btn-back { background:var(--bg2); border:1px solid var(--brd); color:var(--tx1); padding:10px 16px; border-radius:6px; cursor:pointer; font-family:inherit; font-weight:500; transition:border-color var(--tr),color var(--tr); text-decoration:none; display:inline-block; }
        .btn-back:hover { background:var(--bg3); border-color:var(--ac); color:var(--ac); }

        body > footer { background:var(--bg2); border-top:1px solid var(--brd); padding:40px 24px; margin-top:80px; }
        .footer-content { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:40px; }
        @media(max-width:768px) { .footer-content { flex-direction:column; text-align:center; } }
        .footer-text { color:var(--tx2); font-size:0.9rem; }
        .footer-link { color:var(--tx2); font-weight:500; }

        
    /* cookie banner */
.cookie-banner{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(calc(100% + 40px));max-width:580px;width:calc(100% - 48px);background:rgba(248,248,251,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,0.08);border-radius:14px;padding:18px 24px;z-index:9999;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:0.82rem;color:#6B6B80;box-shadow:0 8px 32px rgba(0,0,0,0.12);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1)}
.cookie-banner.visible{transform:translateX(-50%) translateY(0)}
.cookie-banner a{color:#8B5CF6;text-decoration:none;font-weight:500}
.cookie-banner .cookie-btn{padding:8px 18px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:none;cursor:pointer;font-size:0.78rem;font-weight:600}
.cookie-btn-accept{background:#7C3AED;color:#fff}
.cookie-btn-decline{background:transparent;color:#555566;border:1px solid rgba(0,0,0,0.08)!important}
@media (max-width:600px){.cookie-banner{flex-direction:column;text-align:center;bottom:16px;padding:16px 20px}}

/* === Adaugat 2026-07-24: a11y — focus vizibil, touch targets, cookie banner dark === */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
[data-theme="dark"] .cookie-banner{background:rgba(14,14,18,0.92);border-color:rgba(255,255,255,0.1);color:#9E9EB1}
[data-theme="dark"] .cookie-btn-decline{color:#9E9EB1;border-color:rgba(255,255,255,0.15)!important}
.cookie-banner .cookie-btn{min-height:44px}
.btn-back{padding:12px 18px}

/* Fix contrast CTA light mode (review 2026-07-24) */
[data-theme="light"] .cta-btn:not(.secondary){background:#7C3AED;color:#fff}
[data-theme="light"] .cta-btn:not(.secondary):hover{background:#6D28D9;color:#fff}
[data-theme="light"] .cta-btn.secondary{background:transparent;border:2px solid #7C3AED;color:#6D28D9}
[data-theme="light"] .cta-btn.secondary:hover{background:#7C3AED;color:#fff}
[data-theme="dark"] .cta-btn:not(.secondary){background:#A78BFA;color:#08080A}
[data-theme="dark"] .cta-btn:not(.secondary):hover{background:#C4B5FD;color:#08080A}
[data-theme="dark"] .cta-btn.secondary{background:transparent;border:2px solid #A78BFA;color:#C4B5FD}
[data-theme="dark"] .cta-btn.secondary:hover{background:#A78BFA;color:#08080A}

/* === SVG hero tematic pe paginile de serviciu (2026-07-24, inlocuieste stock Unsplash) === */
.svg-hero{background:linear-gradient(150deg, rgba(139,92,246,0.08), rgba(139,92,246,0.02) 60%, transparent);border:1px solid var(--brd);border-radius:12px;margin-bottom:40px;padding:12px 0}
[data-theme="dark"] .svg-hero{background:linear-gradient(150deg, rgba(139,92,246,0.14), rgba(139,92,246,0.04) 60%, transparent)}
.svg-hero svg{display:block;width:100%;height:auto;max-height:340px}
@keyframes vh-pulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(0.55)}}
@keyframes vh-blink{0%,100%{opacity:1}50%{opacity:0.25}}
.svg-hero .wave-dub line,.svg-hero .ivr-bars line,.svg-hero .live-bars line{transform-box:fill-box;transform-origin:center;animation:vh-pulse 1.6s ease-in-out infinite}
.svg-hero .wave-dub line:nth-child(2n){animation-delay:0.25s}
.svg-hero .wave-dub line:nth-child(3n){animation-delay:0.5s}
.svg-hero .ivr-bars line:nth-child(2n),.svg-hero .live-bars line:nth-child(2n){animation-delay:0.3s}
.svg-hero .live-dot{animation:vh-blink 1.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.svg-hero .wave-dub line,.svg-hero .ivr-bars line,.svg-hero .live-bars line,.svg-hero .live-dot{animation:none}}
@media(max-width:600px){.svg-hero{margin-bottom:28px}}


        /* ===== NAV SUBPAGINI: meniu complet + burger (adaugat 2026-07-25) ===== */
        .nav-menu { display:flex; align-items:center; gap:22px; margin-left:auto; }
        .nav-menu a { color:var(--tx2); font-size:0.9rem; font-weight:500; white-space:nowrap; text-decoration:none; }
        .nav-menu a:hover, .nav-menu a[aria-current="page"] { color:var(--tx1); }
        .nav-menu a.nav-cta { background:#7C3AED; color:#fff; padding:9px 16px; border-radius:8px; font-weight:600; }
        .nav-menu a.nav-cta:hover { background:#6D28D9; color:#fff; }
        [data-theme="dark"] .nav-menu a.nav-cta { background:#A78BFA; color:#08080A; }
        [data-theme="dark"] .nav-menu a.nav-cta:hover { background:#C4B5FD; color:#08080A; }
        .nav-burger { display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:0; }
        .nav-burger span { display:block; width:22px; height:2px; background:var(--tx1); transition:transform var(--tr), opacity var(--tr); }
        .nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
        .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
        .nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
        .nav-theme { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:var(--bg2); border:1px solid var(--brd); border-radius:8px; color:var(--tx1); cursor:pointer; font-size:1rem; }
        .lang-toggle { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
        @media (max-width:1080px) {
            .nav-burger { display:flex; }
            .nav-menu { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--bg1); border-bottom:1px solid var(--brd); padding:8px 24px 20px; display:none; }
            .nav-menu.open { display:flex; }
            .nav-menu a { padding:14px 0; border-bottom:1px solid var(--brd); font-size:1rem; }
            .nav-menu a.nav-cta { margin-top:14px; text-align:center; border-bottom:0; }
        }
        @media (prefers-reduced-motion: reduce) { .nav-burger span { transition:none; } }

        /* ===== NAV MOBIL: nimic nu iese din ecran la 375px (2026-07-28) =====
           Cauza veche: .nav-left avea flex:1 fara min-width:0, iar .nav-right (tema +
           limba + burger, 164px) era impins in afara ecranului, deci butonul de meniu
           ramanea taiat de marginea dreapta. Se strange nav-left, nu se ascunde nimic. */
        .nav-wrap { flex-wrap:nowrap; }
        .nav-left { min-width:0; }
        .nav-right { flex:0 0 auto; }
        @media (max-width:600px) {
            body > nav { padding:14px 16px; }
            .nav-wrap { gap:10px; }
            .nav-left { gap:12px; }
            .logo { font-size:1.12rem; }
            .nav-home { display:none; }  /* logo-ul duce acasa, iar meniul burger are lista completa */
            .nav-right { gap:8px; }
            .nav-theme { width:40px; height:40px; }
            .nav-burger { width:40px; }
            .nav-menu { padding-left:16px; padding-right:16px; }
        }


/* ===== TINTE TACTILE 44px pe ecrane cu deget (2026-07-28) ===== */
@media (pointer: coarse) {
    .burger, .nav-burger, .nav-theme { min-width:44px; min-height:44px; }
    .lang-btn, .lang-toggle, .lang-switch { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
    form button[type="submit"], form input[type="submit"], .cookie-btn { min-height:44px; }
    /* butonul flotant de WhatsApp sta fix la 20-28px de baza si acoperea ultimul rand
       de linkuri din footer cand pagina e derulata pana jos, unde nu mai poti scapa de el */
    footer, .foot { padding-bottom: 96px; }
    .footer-link { display:inline-flex; align-items:center; min-height:40px; }
}