/* copyright Razvan Malciu - razvan.malciu@gmail.com */
/* Tema "Chart room" (oct 2026): fundal de harta nautica, cerneala navy, magenta de ruta.
   Se incarca dupa site.css si suprascrie tokenii; componentele vechi raman valabile. */

:root {
    --ink: #10283F;
    --ink-2: #1D3D5C;
    --magenta: #A3195B;
    --magenta-2: #7E1246;
    --shoal: #D7EAF2;
    --land: #EFE3B8;
    --bg: #F6FAFB;
    --bg-deep: #EAF2F6;
    --band: #EDF4F7;
    --surface: #FFFFFF;
    --surface-2: #F3F8FA;
    --line: #D6E3E9;
    --line-2: #C3D5DE;
    --line-3: #9DB6C3;
    --line-4: #6F8B99;
    --text: #10283F;
    --text-2: #1F3A52;
    --text-3: #2D4860;
    --muted: #3E566C;
    --dim: #4E667B;
    --faint: #5E7488;
    --green: #A3195B;
    --green-hover: #7E1246;
    --green-ink: #FFFFFF;
    --amber: #E9A825;
    --amber-hover: #D6961A;
    --amber-ink: #2A1D00;
    --red: #C62828;
    --red-2: #C62828;
    --red-ink: #FFFFFF;
    --blue: #1F6FA8;
    --radius: 8px;
    --radius-sm: 4px;
}

body { background: var(--bg); color: var(--text); font-size: 18px; }
a { color: var(--magenta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--magenta-2); }
:focus-visible { outline: 2px solid var(--magenta); }

/* --- Antet: logo in eticheta inchisa (Antenna alb + Pilot teal, ca in aplicatii) --- */
.site-header { background: rgba(246, 250, 251, .95); border-bottom: 1px solid var(--line-2); }
.brand { text-decoration: none; }
.brand-name { padding: 6px 11px 5px; border-radius: 4px; background: var(--ink); font-size: 25px; line-height: 1.05; }
.brand-a, .brand:hover .brand-a { color: #FFFFFF; }
.brand-p, .brand:hover .brand-p { color: #3ED6A8; }
.nav-link, .nav-sub-link { color: var(--ink); text-decoration: none; }
.nav-link:hover, .nav-sub-link:hover { color: var(--magenta); }
.nav-sub { background: #FFFFFF; border: 1px solid var(--line-2); box-shadow: 0 18px 40px -18px rgba(16, 40, 63, .35); }
.nav-sub small { color: var(--dim); }
.nav-toggle { color: var(--ink); background: #FFFFFF; border-color: var(--line-2); }

/* --- Butoane: actiunea principala in cerneala navy, secundara cu contur --- */
.btn { text-decoration: none; border-radius: 4px; }
.btn-primary { background: var(--ink); color: #FFFFFF; }
.btn-primary:hover { background: var(--ink-2); color: #FFFFFF; }
.btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #FFFFFF; }
.btn-link { color: var(--magenta); text-decoration: underline; text-underline-offset: 4px; }
.btn-amber { background: var(--amber); color: var(--amber-ink); }

/* --- Tipografie: fara etichete cu majuscule deasupra titlurilor --- */
.eyebrow { font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--magenta); }
.prose .prose-eyebrow { display: none; }
.display, .h-section, .h-cta, .h-card, .prose h2, .prose h3 { color: var(--ink); }
.lead, .lead-sm, .section-note, .muted { color: var(--muted); }
.prose { color: var(--text-2); }
.prose h2 { margin-top: 64px; }
.prose a { color: var(--magenta); }
.prose blockquote { border-left-color: var(--magenta); color: var(--muted); }
.prose table { background: #FFFFFF; }
.prose img { border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 14px 30px -20px rgba(16, 40, 63, .5); }

/* --- Antetul paginilor: curbe de adancime discrete, ca pe harta --- */
.page-hero { position: relative; background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='420' viewBox='0 0 1440 420'%3E%3Cpath d='M1020 0C1060 120 1180 160 1260 250C1330 330 1320 390 1440 420V0Z' fill='%23B4C9C2'/%3E%3Cpath d='M1170 0C1200 90 1290 130 1350 200C1400 260 1400 330 1440 350V0Z' fill='%23C9B078'/%3E%3Cg fill='none' stroke='%238BA39E'%3E%3Cpath d='M930 0C980 140 1110 190 1200 290C1280 380 1270 410 1300 420'/%3E%3Cpath d='M850 0C910 160 1050 220 1140 320C1200 390 1200 410 1210 420'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right top; background-size: auto 100%; border-bottom: 1px solid var(--line-2); }
.page-hero .eyebrow { display: none; }
.page-hero-side { display: none; }
.tabs { border-bottom-color: var(--line-2); }
.tab { color: var(--muted); text-decoration: none; }
.tab.is-active { color: var(--ink); border-bottom-color: var(--magenta); }
.section-top-0 { padding-top: 48px; }
.band { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* --- Carduri, chip-uri, formulare --- */
.side-card, .form-card, .product-card, .fact, .cta-band { background: #FFFFFF; border: 1px solid var(--line-2); box-shadow: 0 16px 34px -26px rgba(16, 40, 63, .45); }
.chip { background: var(--bg-deep); color: var(--ink); }
.chip-amber { background: var(--amber); color: var(--amber-ink); }
.field input, .field select, .field textarea { background: #FFFFFF; color: var(--ink); border-color: var(--line-4); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(163, 25, 91, .15); }
.form-alert { background: #FDECEC; border-color: #E5A3A3; color: #7A1414; }
.field-error { color: #B3261E; }
.legal-note { color: var(--dim); }
.check-list .icon { color: var(--magenta); }
.platform-option input:checked + span { border-color: var(--magenta); background: rgba(163, 25, 91, .07); box-shadow: inset 0 0 0 1px var(--magenta); }
.notice-band { background: #FFF6DE; color: var(--ink); }

/* --- Subsol: blocul de titlu al hartii, navy --- */
.site-footer { background: var(--ink); border-top: 0; color: #C9D6E1; }
.site-footer .brand-name { background: transparent; padding: 0; }
.footer-brand p, .footer-bottom { color: #AFC1D0; }
.footer-title { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #FFFFFF; }
.footer-links a { color: #C9D6E1; text-decoration: none; }
.footer-links a:hover, .footer-cookie:hover { color: #FFFFFF; text-decoration: underline; }
.footer-bottom { border-top-color: #2A4A68; }
.footer-cookie { color: #AFC1D0; }

/* --- Banner cookies --- */
.cookie-banner { background: #FFFFFF; border: 1px solid var(--line-2); color: var(--ink); box-shadow: 0 20px 50px -20px rgba(16, 40, 63, .45); }

/* --- Bara de administrare ramane vizibila pe fundal deschis --- */
.admin-bar { background: var(--ink); color: #FFFFFF; }
.admin-bar a { color: #FFFFFF; }

/* --- Prima pagina: harta, ruta si waypoint-urile --- */
.ch-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-2); }
.ch-hero .ch-chart { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ch-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; padding-top: 84px; padding-bottom: 96px; }
.ch-hero h1 { margin: 0 0 22px; font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 5.2vw, 72px); line-height: .98; letter-spacing: -.5px; color: var(--ink); }
.ch-hero .lead { max-width: 34em; margin: 0 0 30px; font-size: 20px; }
.ch-facts { display: flex; flex-wrap: wrap; gap: 18px 32px; margin: 34px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.ch-facts strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--ink); }
.ch-shot { position: relative; margin: 0; padding: 10px; border-radius: 10px; background: #0B171C; box-shadow: 0 30px 60px -22px rgba(16, 40, 63, .55); transform: rotate(-1.2deg); }
.ch-shot img { display: block; width: 100%; height: auto; border-radius: 4px; }
.ch-shot figcaption { position: absolute; left: -16px; bottom: -24px; max-width: 290px; padding: 10px 14px; background: #FFFFFF; border: 1px solid var(--line-2); border-left: 4px solid var(--magenta); font-size: 14px; line-height: 1.45; color: var(--ink); transform: rotate(1.2deg); }
.ch-route-line { stroke: var(--magenta); stroke-width: 3; stroke-dasharray: 10 8; fill: none; stroke-dashoffset: 600; animation: ch-draw 2.4s ease-out .3s forwards; }
@keyframes ch-draw { to { stroke-dashoffset: 0; } }

.ch-route { padding-top: 88px; padding-bottom: 40px; }
.ch-route-head { max-width: 760px; margin-bottom: 52px; }
.ch-route-head h2 { margin: 0 0 12px; }
.ch-legs { position: relative; margin: 0; padding: 0; list-style: none; }
.ch-legs::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; border-left: 3px dashed var(--magenta); opacity: .65; }
.ch-leg { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; padding: 30px 0 36px; border-top: 1px solid var(--line-2); }
.ch-wp { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--magenta); background: var(--bg); }
.ch-wp::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--magenta); }
.ch-quote { margin: 4px 0 10px; font-weight: 600; color: var(--magenta); }
.ch-leg h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.08; color: var(--ink); }
.ch-leg h3 a { color: inherit; text-decoration: none; }
.ch-leg p { margin: 0 0 14px; color: var(--muted); }
.ch-leg-meta { margin: 0 0 14px; font-size: 15px; color: var(--dim); }
.ch-leg-actions { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.ch-leg-media img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line-2); box-shadow: 0 16px 32px -20px rgba(16, 40, 63, .55); }
.ch-leg-media .ch-icon { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 6px; background: var(--ink); }
.ch-leg-note { margin: 12px 0 0; font-size: 13px; color: var(--dim); }

.ch-author { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 34px; align-items: center; margin: 64px 0 88px; padding: 36px; border-radius: 8px; background: var(--land); }
.ch-author img { width: 170px; height: 170px; object-fit: cover; border-radius: 50%; border: 4px solid #FFFFFF; }
.ch-author h2 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1.1; color: var(--ink); }
.ch-author p { margin: 0 0 12px; color: var(--text-3); }

.ch-offer { margin-bottom: 96px; padding: 40px; border-radius: 8px; background: var(--ink); color: #DCE6EE; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; }
.ch-offer h2 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1.08; color: #FFFFFF; }
.ch-offer p { margin: 0; color: #C3D2DE; }
.ch-offer .btn-primary { background: #FFFFFF; color: var(--ink); }
.ch-offer .btn-primary:hover { background: var(--shoal); color: var(--ink); }

@media (max-width: 900px) {
    .ch-hero-in { grid-template-columns: 1fr; gap: 44px; padding-top: 44px; padding-bottom: 72px; }
    .ch-leg { grid-template-columns: 44px minmax(0, 1fr); gap: 18px; }
    .ch-leg-media { grid-column: 2; }
    .ch-author { grid-template-columns: 1fr; padding: 26px; }
    .ch-author img { width: 120px; height: 120px; }
    .ch-offer { grid-template-columns: 1fr; padding: 28px; }
}
@media (max-width: 560px) {
    .ch-shot figcaption { position: static; max-width: none; margin-top: 10px; transform: none; }
    .ch-shot { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ch-route-line { animation: none; stroke-dashoffset: 0; }
}

/* Ghiduri: lista din /guides si linkul de intoarcere */
.guide-list { list-style: none; padding: 0; margin: 28px 0 0; }
.guide-list li { padding: 18px 0 18px 22px; border-top: 1px solid var(--line, #B9CCD6); border-left: 3px solid var(--magenta); margin-bottom: 0; }
.guide-list li + li { margin-top: 14px; }
.guide-list a { color: var(--ink); text-decoration-color: var(--magenta); text-underline-offset: 4px; font-size: 1.1em; }
.guide-back { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line, #B9CCD6); font-size: .95em; color: var(--ink-2, #3E566C); }
.prose pre { margin: 8px 0 24px; padding: 14px 16px; background: var(--ink); color: #E8F1F5; border-radius: 4px; overflow-x: auto; font-size: 14px; line-height: 1.55; }
.prose pre code { background: none; color: inherit; padding: 0; }
.prose p code, .prose li code { background: var(--shoal); padding: 1px 5px; border-radius: 3px; font-size: .92em; overflow-wrap: anywhere; }
.prose th { color: var(--ink-2); border-bottom-color: var(--line-3); }
.prose td { border-color: var(--line); }
/* Animatiile de pe margini se opresc la cei care au cerut mai putina miscare */
@media (prefers-reduced-motion: reduce) { html::before, html::after, body::after { animation: none !important; } }
.ch-shot figcaption strong { display: block; margin-bottom: 3px; font-size: 15px; color: var(--magenta); }
/* Titluri mutate in sus pentru SEO (prose_html): pastreaza aspectul nivelului original */
.prose [data-as="h3"] { margin: 12px 0 14px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; }
.prose [data-as="h4"] { margin: 52px 0 10px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); }
.prose h4, .prose [data-as="h4"] { color: var(--magenta); font-weight: 600; }