/* =========================================================================
   Névtárs — shared site chrome.
   SINGLE SOURCE OF TRUTH for the header (nav), footer, and language system.
   Loaded by index.html, privacy.html, terms.html and support/index.html.
   Edit the header/footer/language CSS here only — never inline per page.
   ========================================================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --teal: #4DADA5;
    --teal-dark: #3D8D87;
    --peach: #F0A488;
    --peach-light: #F5C4B0;
    --cream: #FFF5EE;
    --cream-dark: #FFF0E6;
    --white: #FFFFFF;
    --text-primary: #1A2B3C;
    --text-secondary: #5A6B7C;
    --text-light: #8A9BAC;
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-bg-hover: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: rgba(77, 173, 165, 0.08);
    --radius: 20px;
    --radius-sm: 12px;
    --radius-xs: 8px;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--cream);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);
}

/* =========================================
   NAVIGATION (identical on every page)
   ========================================= */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: all 0.4s ease;
}
.nav.scrolled {
    background: rgba(255, 245, 238, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding: 10px 0;
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
}
.nav-logo img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}
.nav-logo span {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}
.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
}
.nav-links a:hover { color: var(--teal); }

.lang-switch {
    display: flex;
    gap: 4px;
    background: rgba(77, 173, 165, 0.08);
    border-radius: 8px;
    padding: 3px;
}
.lang-btn {
    border: none;
    background: transparent;
    padding: 6px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    font-family: inherit;
}
.lang-btn.active {
    background: var(--teal);
    color: white;
}
.lang-btn:hover:not(.active) { color: var(--teal); }

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.nav-toggle svg { display: block; }

@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 245, 238, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 20px 24px;
        gap: 16px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .nav-toggle { display: block; }
}

/* =========================================
   FOOTER (identical on every page)
   ========================================= */
footer {
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.05);
}
.footer-links {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--teal); }
.footer-copy {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* =========================================
   i18n: hide/show by language
   ========================================= */
[data-i18n] { display: none; }
[data-lang="hu"] [data-i18n="hu"],
[data-lang="en"] [data-i18n="en"],
[data-lang="de"] [data-i18n="de"],
[data-lang="cs"] [data-i18n="cs"] {
    display: revert;
}
/* For inline elements that need to stay inline */
span[data-i18n] { display: none; }
[data-lang="hu"] span[data-i18n="hu"],
[data-lang="en"] span[data-i18n="en"],
[data-lang="de"] span[data-i18n="de"],
[data-lang="cs"] span[data-i18n="cs"] {
    display: inline;
}
/* For flex items */
.hero-buttons [data-i18n],
.cta-buttons [data-i18n],
.nav-links [data-i18n] { display: none; }
[data-lang="hu"] .hero-buttons [data-i18n="hu"],
[data-lang="en"] .hero-buttons [data-i18n="en"],
[data-lang="de"] .hero-buttons [data-i18n="de"],
[data-lang="cs"] .hero-buttons [data-i18n="cs"],
[data-lang="hu"] .cta-buttons [data-i18n="hu"],
[data-lang="en"] .cta-buttons [data-i18n="en"],
[data-lang="de"] .cta-buttons [data-i18n="de"],
[data-lang="cs"] .cta-buttons [data-i18n="cs"],
[data-lang="hu"] .nav-links [data-i18n="hu"],
[data-lang="en"] .nav-links [data-i18n="en"],
[data-lang="de"] .nav-links [data-i18n="de"],
[data-lang="cs"] .nav-links [data-i18n="cs"] {
    display: inline-flex;
}
/* For list items */
li[data-i18n] { display: none; }
[data-lang="hu"] li[data-i18n="hu"],
[data-lang="en"] li[data-i18n="en"],
[data-lang="de"] li[data-i18n="de"],
[data-lang="cs"] li[data-i18n="cs"] {
    display: flex;
}
/* Premium feature list: the page-inline rule `.premium-features li
   { display:flex }` ties specificity with `li[data-i18n]` and wins on
   source order (inline <style> loads after this file), so all three
   language copies showed at once. Scope the i18n rule to
   .premium-features so it out-specifies the inline rule (order-independent). */
.premium-features li[data-i18n] { display: none; }
[data-lang="hu"] .premium-features li[data-i18n="hu"],
[data-lang="en"] .premium-features li[data-i18n="en"],
[data-lang="de"] .premium-features li[data-i18n="de"],
[data-lang="cs"] .premium-features li[data-i18n="cs"] {
    display: flex;
}
/* For grid/flex children (feature cards, steps) */
.feature-card[data-i18n],
.step[data-i18n] { display: none; }
[data-lang="hu"] .feature-card[data-i18n="hu"],
[data-lang="en"] .feature-card[data-i18n="en"],
[data-lang="de"] .feature-card[data-i18n="de"],
[data-lang="cs"] .feature-card[data-i18n="cs"],
[data-lang="hu"] .step[data-i18n="hu"],
[data-lang="en"] .step[data-i18n="en"],
[data-lang="de"] .step[data-i18n="de"],
[data-lang="cs"] .step[data-i18n="cs"] {
    display: block;
}
/* Footer links */
.footer-links [data-i18n] { display: none; }
[data-lang="hu"] .footer-links [data-i18n="hu"],
[data-lang="en"] .footer-links [data-i18n="en"],
[data-lang="de"] .footer-links [data-i18n="de"],
[data-lang="cs"] .footer-links [data-i18n="cs"] {
    display: inline;
}

/* =========================================
   DOCUMENT PAGES (privacy, terms, support)
   Header/footer come from the shared chrome above; this is the
   readable body styling for the legal/support text.
   ========================================= */
.doc {
    max-width: 820px;
    margin: 0 auto;
    padding: 116px clamp(20px, 5vw, 48px) 40px;
}
.doc section { display: none; }
[data-lang="hu"] .doc section[data-i18n="hu"],
[data-lang="en"] .doc section[data-i18n="en"],
[data-lang="de"] .doc section[data-i18n="de"],
[data-lang="cs"] .doc section[data-i18n="cs"] {
    display: block;
}
.doc h1 {
    color: var(--peach);
    border-bottom: 2px solid var(--peach);
    padding-bottom: 10px;
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.doc h2 { color: var(--teal); margin-top: 32px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.doc h3 { color: var(--text-secondary); margin-top: 24px; font-size: 1.1rem; }
.doc p { color: var(--text-secondary); margin: 12px 0; }
.doc a { color: var(--teal); }
.doc ul, .doc ol { padding-left: 22px; color: var(--text-secondary); }
.doc li { margin: 6px 0; }
.doc strong { color: var(--text-primary); }
.doc table { border-collapse: collapse; width: 100%; margin: 20px 0; }
.doc th, .doc td { border: 1px solid rgba(0,0,0,0.12); padding: 12px; text-align: left; }
.doc th { background: var(--peach); color: white; }
.doc td { color: var(--text-secondary); }
.doc hr { border: none; border-top: 2px solid var(--peach); margin: 40px 0; }
.doc .updated { color: var(--text-light); font-size: 0.9rem; }