/* ─────────────────────────────────────────────────────────────────────
   ConferenceApp · Blockchain Education 2026
   Author: Viktor Georgiev
   ───────────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════
   PRIVACY POLICY / GDPR PAGE
   It uses exactly the tokens from mainStyle.css (--bg, --panel, --text,
   --muted, --line, --accent, --accent-soft) and introduces no palette of its
   own. What it adds is styling for the tags mainStyle.css and stylesFAQ.css do
   not cover, because the content comes from the Quill rich-text editor in the
   admin panel and can contain anything its toolbar can produce.

   The layout is a responsive grid: the content, plus a sticky table of
   contents. That table is built entirely by the script (see privacyPage.js)
   from whatever H2 headings the administrator writes — nothing is hard-coded,
   so the page stays correct however the text is edited.
   ═══════════════════════════════════════════════════════════════════════ */

.privacy-section {
    padding: 3.6rem 0 6rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.98), var(--bg));
    min-height: 60vh;
}

.privacy-container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Layout: content + sticky TOC sidebar on wide screens ────────────── */
.privacy-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.2rem;
    align-items: start;
}

@media (min-width: 960px) {
    .privacy-layout { grid-template-columns: minmax(0, 760px) 240px; }
    .privacy-toc-wrapper { order: 2; }
}

/* ── Header ────────────────────────────────────────────────────────── */
.privacy-header {
    margin-bottom: 2.6rem;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    animation: privacyFadeInUp 500ms ease both;
}

@keyframes privacyFadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .privacy-header, .privacy-content { animation: none !important; }
}

.privacy-header-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 8px 20px -4px var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.privacy-header-icon svg { width: 26px; height: 26px; }

.privacy-header-text { flex: 1; min-width: 0; }

.privacy-header h1 {
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 600;
    font-size: clamp(2.1rem, 5vw, 3rem);
    letter-spacing: 0.01em;
    line-height: 1.05;
    margin: 0 0 0.5rem;
    color: var(--text);
}

.privacy-updated {
    font-size: 0.82rem;
    color: var(--muted);
    letter-spacing: 0.03em;
    margin: 0;
}
.privacy-meta-dot { margin: 0 0.35em; opacity: 0.5; }

.privacy-print-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
    margin-top: 0.2rem;
}
.privacy-print-btn:hover { color: var(--text); border-color: var(--accent-soft); background: rgba(var(--ink), 0.03); }
.privacy-print-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.privacy-print-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Table of contents — auto-built by privacyPage.js from whatever H2s
     exist in the content. <details> gives free native collapse/expand on
     mobile; on desktop we force it permanently open and hide the toggle,
     turning the exact same markup into a plain sticky sidebar. ──────── */
.privacy-toc-wrapper { min-width: 0; }

.privacy-toc-details {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 2.4rem;
    background: rgba(var(--ink), 0.02);
}
.privacy-toc-details summary {
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.privacy-toc-details summary::-webkit-details-marker { display: none; }
.privacy-toc-details summary::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 200ms ease;
}
.privacy-toc-details[open] summary::after { transform: rotate(225deg); }
.privacy-toc-details[open] summary { margin-bottom: 0.7rem; }

.privacy-toc-nav { display: flex; flex-direction: column; gap: 0.45rem; }
.privacy-toc-nav a {
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
    padding-left: 0.7rem;
    transition: color 180ms ease, border-color 180ms ease;
}
.privacy-toc-nav a:hover { color: var(--text); }
.privacy-toc-nav a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 4px; }
.privacy-toc-nav a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.privacy-toc-nav a.is-sub { padding-left: 1.5rem; font-size: 0.8rem; opacity: 0.85; }

@media (min-width: 960px) {
    .privacy-toc-details {
        position: sticky;
        top: 2rem;
        border: none;
        background: none;
        padding: 0;
        margin: 0;
    }
    .privacy-toc-details summary { display: none; }
    /* <details> without [open] hides its children via the UA stylesheet —
       force the nav visible regardless, since on desktop this is meant to
       behave like a plain always-visible sidebar, not a collapsible. */
    .privacy-toc-details:not([open]) .privacy-toc-nav { display: flex; }
}

/* ── Back to top ───────────────────────────────────────────────────── */
.privacy-back-to-top {
    position: fixed;
    bottom: 26px; right: 26px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 40;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease, border-color 200ms ease, color 200ms ease;
}
.privacy-back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.privacy-back-to-top:hover { color: var(--accent); border-color: var(--accent-soft); }
.privacy-back-to-top:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.privacy-back-to-top svg { width: 18px; height: 18px; }

/* ── The content itself, as produced by Quill in the admin panel ─────── */
.privacy-content {
    color: var(--muted);
    font-weight: 300;
    font-size: 1.02rem;
    line-height: 1.85;
    letter-spacing: 0.01em;
    /* auto-numbering for every H2 the admin adds — "1. Introduction",
       "2. Data We Collect", etc. — with zero hardcoding on our end. */
    counter-reset: privacy-h2;
    animation: privacyFadeInUp 500ms ease both;
    animation-delay: 80ms;
}

.privacy-content > *:first-child { margin-top: 0; }
.privacy-content > *:last-child  { margin-bottom: 0; }

.privacy-content p {
    margin: 0 0 1.45rem;
}

/* Toolbar: { header: [2, 3, false] } */
.privacy-content h2 {
    counter-increment: privacy-h2;
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    letter-spacing: 0.01em;
    line-height: 1.3;
    margin: 2.8rem 0 1.1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    scroll-margin-top: 1.5rem; /* so a heading jumped to from the contents does not touch the top edge */
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}
.privacy-content > h2:first-of-type {
    border-top: none;
    padding-top: 0;
}
.privacy-content h2::before {
    content: counter(privacy-h2) ".";
    color: var(--accent);
    font-weight: 700;
    margin-right: 0.35rem;
}

/* Small "copy link" button, revealed on hover/focus next to each heading —
   appended by privacyPage.js, not part of the admin's own Quill content. */
.privacy-copy-link {
    background: none;
    border: none;
    color: var(--muted);
    opacity: 0;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    transition: opacity 150ms ease, color 150ms ease;
    flex-shrink: 0;
}
.privacy-content h2:hover .privacy-copy-link,
.privacy-copy-link:focus-visible { opacity: 0.7; }
.privacy-copy-link:hover { opacity: 1 !important; color: var(--accent); }
.privacy-copy-link svg { width: 15px; height: 15px; }
.privacy-copy-link.is-copied { opacity: 1 !important; color: #22c55e; }

.privacy-content h3 {
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 500;
    color: var(--text);
    font-size: 1.22rem;
    letter-spacing: 0.01em;
    margin: 2.1rem 0 0.9rem;
    scroll-margin-top: 1.5rem;
}

/* Toolbar: bold / italic / underline / strike */
.privacy-content strong,
.privacy-content b { color: var(--text); font-weight: 600; }

.privacy-content em,
.privacy-content i { font-style: italic; }

.privacy-content u {
    text-decoration-line: underline;
    text-decoration-color: var(--accent-soft);
    text-underline-offset: 3px;
}

.privacy-content s,
.privacy-content strike {
    text-decoration-line: line-through;
    text-decoration-color: var(--muted);
    opacity: 0.75;
}

/* Toolbar: text color / background color — Quill writes these as inline
   styles directly on the element, so no class-based rule is needed; this
   just makes sure a highlighted background still reads cleanly against
   the page's dark theme. */
.privacy-content [style*="background-color"] {
    padding: 0.05em 0.3em;
    border-radius: 4px;
}

/* Toolbar: alignment */
.privacy-content .ql-align-center { text-align: center; }
.privacy-content .ql-align-right  { text-align: right; }
.privacy-content .ql-align-justify { text-align: justify; }

/* Toolbar: link */
.privacy-content a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-soft);
    text-underline-offset: 3px;
    transition: color 200ms ease, text-decoration-color 200ms ease;
}
.privacy-content a:hover {
    color: rgb(var(--ink));
    text-decoration-color: rgb(var(--ink));
}

/* Toolbar: ordered list / bullet list */
.privacy-content ul,
.privacy-content ol {
    margin: 0 0 1.45rem;
    padding-left: 1.4rem;
}
.privacy-content li { margin-bottom: 0.55rem; }
.privacy-content li:last-child { margin-bottom: 0; }
.privacy-content ul li::marker { color: var(--accent); }
.privacy-content ol li::marker { color: var(--accent); font-weight: 600; }

/* Quill list-nesting indent levels (Tab within a list, or the standalone
   indent buttons on paragraphs) */
.privacy-content .ql-indent-1 { padding-left: 1.4rem; }
.privacy-content .ql-indent-2 { padding-left: 2.8rem; }
.privacy-content .ql-indent-3 { padding-left: 4.2rem; }
.privacy-content .ql-indent-4 { padding-left: 5.6rem; }

/* Toolbar: blockquote */
.privacy-content blockquote {
    margin: 2rem 0;
    padding: 0.15rem 0 0.15rem 1.4rem;
    border-left: 3px solid var(--accent);
    color: var(--text);
    font-style: italic;
    font-weight: 300;
}
.privacy-content blockquote p { margin-bottom: 0.5rem; }
.privacy-content blockquote p:last-child { margin-bottom: 0; }

/* Toolbar: image */
.privacy-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 2rem 0;
    display: block;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* ── Print — a clean, ink-friendly version with no site chrome ───────── */
@media print {
        .privacy-back-to-top,
    .privacy-print-btn,
    .privacy-toc-wrapper,
    .privacy-copy-link,
    header, footer, nav { display: none !important; }

    .privacy-section { background: none; padding: 0; }
    .privacy-layout { grid-template-columns: 1fr; }
    .privacy-header { border-bottom-color: #ccc; animation: none; }
    .privacy-header h1,
    .privacy-content h2,
    .privacy-content h3,
    .privacy-content strong { color: #000; }
    .privacy-content { animation: none; border-top-color: #ccc; }
    .privacy-content h2 { border-top-color: #ccc; }
    .privacy-content,
    .privacy-updated { color: #222; }
    .privacy-content a { color: #000; text-decoration: underline; }
}

@media (max-width: 640px) {
    .privacy-section { padding: 2.4rem 0 4rem; }
    .privacy-container { padding: 0 1.2rem; }
    .privacy-header { flex-wrap: wrap; }
    .privacy-print-btn .privacy-print-label { display: none; }
    .privacy-content { font-size: 0.95rem; line-height: 1.75; }
    .privacy-content h2 { margin-top: 2.2rem; }
    .privacy-content h3 { margin-top: 1.7rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COOKIES PAGE — dedicated /Cookies page, separate from /Privacy. Lists
   whatever categories exist in the DB (CookieCategory) — same data source
   that drives the preferences modal, so this page can never drift out of
   sync with what's actually configured.
   ═══════════════════════════════════════════════════════════════════════ */

.cookie-policy-heading {
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 1.3rem;
    letter-spacing: 0.01em;
    margin: 2.4rem 0 1.2rem;
}

.cookie-policy-categories {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.2rem;
}

.cookie-policy-category {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    background: rgba(var(--ink), 0.02);
}

.cookie-policy-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.cookie-policy-category-head h3 {
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--text);
    margin: 0;
}

.cookie-policy-badge {
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.cookie-policy-badge.is-required { background: var(--accent-soft); color: var(--accent); }
.cookie-policy-badge.is-optional { background: rgba(var(--ink), 0.06); color: var(--muted); }

.cookie-policy-category-desc,
.cookie-policy-category-desc p {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
}
.cookie-policy-category-desc a { color: var(--accent); text-decoration: underline; }

.cookie-policy-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    transition: filter 150ms ease, transform 150ms ease;
}
.cookie-policy-manage-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cookie-policy-manage-btn svg { width: 17px; height: 17px; flex-shrink: 0; }