/* ================================================================
   protection.css — Sdílené styly pro protection stránky
   Načítáno na: protection-browsers, protection-extensions,
                protection-settings, protection-tor, protection-vpn
   ================================================================ */


/* ===== 0. CSS PROMĚNNÉ — spectrum barvy ===== */
/* Syté vizuální barvy pro gradient (ne sémantické textové barvy z common.css).
   Fungují v light i dark mode bez úprav — gradient vypadá stejně. */
:root {
    --spectrum-red:        #e74c3c;
    --spectrum-orange:     #e67e22;
    --spectrum-yellow:     #f1c40f;
    --spectrum-green:      #27ae60;
    --spectrum-dark-green: #1a8a4a;

    /* Textová varianta červené — --spectrum-red (#e74c3c) samo o sobě
       nesplňuje WCAG 4.5:1 jako barva TEXTU na neutrálním/tónovaném
       pozadí (bg-data-box a jeho tónované varianty), a to ani v light,
       ani v dark módu (ověřeno na 7 místech, nejhorší dark případ 3.36:1
       — štítek "Knows: your IP" na fialově tónované Guard kartě,
       protection-tor.php). --spectrum-red samo zůstává beze změny pro
       gradient/okraje/pozadí (tam kontrast textu neřešíme). Nesahá se
       ani na sdílenou --color-red z common.css (30+ použití po webu,
       funguje na vlastním bg-red pozadí) — tohle je čistě pro červený
       TEXT v kontextu protection stránek. */
    --spectrum-red-text: light-dark(#b52a2a, #ed7669);
}


/* ===== 1. SPECTRUM CHART ===== */
/* Sdílená struktura pro všechny stránky s barevným spektrem.
   Gradient v .spectrum-bar je definován zde — přepisovat pouze přes
   stránkový inline <style> pokud je potřeba jiné pořadí barev. */

.spectrum-wrap { margin-block: 25px; overflow: hidden; }
.spectrum-title { font-size: var(--size-14); font-weight: 700; color: var(--text-main); text-align: center; margin-block-end: 12px; }
.spectrum-labels { display: flex; justify-content: space-between; font-size: var(--size-11); font-weight: 600; margin-block-end: 5px; }
.spectrum-labels .lbl-left  { color: var(--color-red); }
.spectrum-labels .lbl-right { color: var(--color-green); }

.spectrum-bar {
    height: 24px;
    border-radius: 12px;
    position: relative;
    background: linear-gradient(to right,
        var(--spectrum-red)        0%,
        var(--spectrum-orange)    30%,
        var(--spectrum-yellow)    50%,
        var(--spectrum-green)     75%,
        var(--spectrum-dark-green) 100%);
}

.spectrum-marker {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--bg-container); border: 2px solid;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--size-08); font-weight: 700; color: var(--text-muted); line-height: 1;
}
.spectrum-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-block-start: 12px; }
.spectrum-legend-item { display: flex; align-items: center; gap: 5px; font-size: var(--size-11); color: var(--text-muted); }
.spectrum-legend-num {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg-container); border: 2px solid;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--size-08); font-weight: 700; color: var(--text-muted);
}
.spectrum-footnote { font-size: var(--size-11); color: var(--text-muted); font-style: italic; margin-block-start: 8px; }

/* Mobilní grid pro legendu — 10 položek ve 3 sloupcích.
   :nth-child() selektory nad počet položek na stránce jsou neaktivní. */
@media (max-width: 600px) {
    .spectrum-legend { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px 8px; }
    .spectrum-legend-item:nth-child(1),
    .spectrum-legend-item:nth-child(2),
    .spectrum-legend-item:nth-child(3),
    .spectrum-legend-item:nth-child(4) { grid-column: 1; }
    .spectrum-legend-item:nth-child(5),
    .spectrum-legend-item:nth-child(6) { grid-column: 2; }
    .spectrum-legend-item:nth-child(7),
    .spectrum-legend-item:nth-child(8),
    .spectrum-legend-item:nth-child(9),
    .spectrum-legend-item:nth-child(10) { grid-column: 3; }
}


/* ===== 2. STEP-BY-STEP LIST — přesunuto do components.css SEKCE 15 ===== */


/* ===== 2c. STEP HEADER, BADGE, META ===== */
/* Rozšíření step-item o badge (štítek "All browsers / Firefox only")
   a meta řádek (Impact / Breakage risk / Time).
   Použití: protection-settings (Quick Start Guide) */

.step-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 5px;
}

.step-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: var(--size-11);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.step-badge--safe   { color: var(--color-green);  background: color-mix(in srgb, var(--color-green)  15%, transparent); }
.step-badge--warn   { color: var(--color-orange); background: color-mix(in srgb, var(--color-orange) 15%, transparent); }
.step-badge--danger { color: var(--color-red);    background: color-mix(in srgb, var(--color-red)    15%, transparent); }

.step-meta {
    font-size: var(--size-11);
    color: var(--text-muted);
    line-height: 1.4;
}


/* ===== 2d. STEP ARROW CONN ===== */
/* Šipka s labelem mezi step-item kroky (diagram Without VPN / With VPN).
   Použití: protection-vpn */

.step-arrow-conn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 2px 0;
    color: var(--text-muted);
}
.step-arrow-conn--danger { color: var(--color-red); }
.step-arrow-conn--safe   { color: var(--color-green); }

.step-conn-label {
    font-size: var(--size-11);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
}
.step-conn-label--danger { color: var(--color-red);   background: color-mix(in srgb, var(--color-red)   9%, transparent); }
.step-conn-label--safe   { color: var(--color-green); background: color-mix(in srgb, var(--color-green) 9%, transparent); }


/* ===== 3. WARNING TEXT (settings + tor + vpn) ===== */
.warning-text { color: var(--warning-color); font-weight: 700; }


/* ===== 4. TABLE LEGEND/FOOTNOTE PATTERNS ===== */
.table-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--size-11); color: var(--text-muted); margin-block-start: 8px; }
.table-legend span { display: flex; align-items: center; gap: 5px; }
.table-footnote { font-size: var(--size-11); color: var(--text-muted); font-style: italic; margin-block-start: 6px; }


/* ===== 5. VERDICT BADGE (browsers + extensions) ===== */
.verdict-badge {
    display: inline-block;
    font-size: var(--size-14);
    font-weight: 600;
    padding-block: 2px;
    padding-inline: 8px;
    border-radius: 10px;
    margin-inline-start: 8px;
    vertical-align: middle;
    line-height: 1.4;
}
.verdict-green { background: var(--bg-green); color: var(--color-green); }
.verdict-red   { background: var(--bg-red);   color: var(--color-red);   }

/* Štítky (platform-badge / verdict-badge) vždy na vlastním řádku pod názvem —
   na všech šířkách obrazovky, ne jen na mobilu. */
.h-badges {
    display: block;
    margin-top: 6px;
}
.h-badges > *:first-child { margin-inline-start: 0; }


/* ===== 6. BROWSER VERDICT (browsers + extensions) ===== */
.browser-verdict {
    margin-block-start: 14px;
    padding-block: 16px;
    padding-inline: 20px;
    border-radius: 8px;
    font-size: var(--size-14);
    line-height: 1.7;
}
.browser-verdict.positive {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-green) 7%, transparent) 0%, color-mix(in srgb, var(--color-green) 12%, transparent) 100%);
    border-inline-start: 3px solid var(--color-green);
}
.browser-verdict.negative {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-red) 7%, transparent) 0%, color-mix(in srgb, var(--color-red) 12%, transparent) 100%);
    border-inline-start: 3px solid var(--color-red);
}
.browser-verdict p { margin: 0; color: var(--text-main); }
.browser-verdict p:not(:last-child) { margin-block-end: 10px; }
.browser-verdict.positive strong { color: var(--color-green); }
.browser-verdict.negative strong { color: var(--color-red); }