/* ================================================================
   protection-settings.css — Stránkové styly pro protection-settings
   Načítáno pouze na: protection-settings.php
   Závisí na: common.css, components.css, protection.css
   ================================================================ */


/* ===== 0. LOKÁLNÍ PROMĚNNÉ ===== */
/* Přechodové barvy spektra — nemají ekvivalent v common.css */
:root {
    --ps-marker-3: #8fad27;   /* žlutozelená — Cookie Policies */
    --ps-marker-4: #c49a20;   /* žlutá       — Disable IPv6 */
    --ps-marker-6: #d96a1e;   /* tmavší oranžová — fingerprintingProtection */
    --ps-marker-7: #d45a1e;   /* oranžovočervená — resistFingerprinting */
}


/* ===== 1. SPECTRUM OVERRIDE ===== */
/* Na této stránce je gradient obrácený: zelená (bez dopadu) → červená (rozbije weby).
   Barvy labelů jsou taktéž prohozené oproti sdílenému protection.css. */

.spectrum-labels .lbl-left  { color: var(--color-green); }
.spectrum-labels .lbl-right { color: var(--spectrum-red-text); }

.spectrum-bar {
    background: linear-gradient(to right,
        var(--spectrum-green)  0%,
        var(--spectrum-orange) 50%,
        var(--spectrum-red)    100%);
}

/* Legenda je vždy 3-sloupcový grid (9 položek: 3-3-3).
   protection.css má flex — toto přebíjí na grid pro celou stránku. */
.spectrum-legend {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px 12px;
}

.spectrum-legend-item:nth-child(1),
.spectrum-legend-item:nth-child(2),
.spectrum-legend-item:nth-child(3) { grid-column: 1; }
.spectrum-legend-item:nth-child(4),
.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) { grid-column: 3; }

.spectrum-legend-item { align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 600px) {
    .spectrum-legend { gap: 5px 6px; }
    .spectrum-legend-item { font-size: var(--size-11); }
}


/* ===== 2. PRIVACY VS. USABILITY ZÓNY (.pu-*) ===== */
/* 3 zóny pod spektrem: Safe for everyone / Some trade-offs / Significant breakage */

.pu-zones {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-block-start: 16px;
}

.pu-zone {
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    border: 1.5px solid;
}

.pu-zone-title {
    font-size: var(--size-12);
    font-weight: 700;
    margin-block-end: 4px;
}

.pu-zone-note {
    font-size: var(--size-11);
    color: var(--text-muted);
    line-height: 1.4;
}

.pu-zone--safe     { border-color: var(--spectrum-green);  background: color-mix(in srgb, var(--spectrum-green)  6%, var(--bg-data-box)); }
.pu-zone--moderate { border-color: var(--spectrum-orange); background: color-mix(in srgb, var(--spectrum-orange) 6%, var(--bg-data-box)); }
.pu-zone--danger   { border-color: var(--spectrum-red);    background: color-mix(in srgb, var(--spectrum-red)    6%, var(--bg-data-box)); }

.pu-zone--safe     .pu-zone-title { color: var(--color-green); }
.pu-zone--moderate .pu-zone-title { color: var(--color-orange); }
.pu-zone--danger   .pu-zone-title { color: var(--spectrum-red-text); }

@media (max-width: 480px) {
    .pu-zones { grid-template-columns: 1fr; }
}


/* ===== 3. SPECTRUM MARKERY A LEGENDA ===== */
/* Pozice a barvy — datové hodnoty specifické pro tuto stránku (9 nastavení) */

.spectrum-marker:nth-child(1) { left: 8%;  border-color: var(--spectrum-green); }
.spectrum-marker:nth-child(2) { left: 18%; border-color: var(--spectrum-green); }
.spectrum-marker:nth-child(3) { left: 35%; border-color: var(--ps-marker-3); }
.spectrum-marker:nth-child(4) { left: 42%; border-color: var(--ps-marker-4); }
.spectrum-marker:nth-child(5) { left: 52%; border-color: var(--spectrum-orange); }
.spectrum-marker:nth-child(6) { left: 62%; border-color: var(--ps-marker-6); }
.spectrum-marker:nth-child(7) { left: 73%; border-color: var(--ps-marker-7); }
.spectrum-marker:nth-child(8) { left: 83%; border-color: var(--spectrum-red); }
.spectrum-marker:nth-child(9) { left: 95%; border-color: var(--spectrum-red); }

.spectrum-legend-item:nth-child(1) .spectrum-legend-num { border-color: var(--spectrum-green); }
.spectrum-legend-item:nth-child(2) .spectrum-legend-num { border-color: var(--spectrum-green); }
.spectrum-legend-item:nth-child(3) .spectrum-legend-num { border-color: var(--ps-marker-3); }
.spectrum-legend-item:nth-child(4) .spectrum-legend-num { border-color: var(--ps-marker-4); }
.spectrum-legend-item:nth-child(5) .spectrum-legend-num { border-color: var(--spectrum-orange); }
.spectrum-legend-item:nth-child(6) .spectrum-legend-num { border-color: var(--ps-marker-6); }
.spectrum-legend-item:nth-child(7) .spectrum-legend-num { border-color: var(--ps-marker-7); }
.spectrum-legend-item:nth-child(8) .spectrum-legend-num { border-color: var(--spectrum-red); }
.spectrum-legend-item:nth-child(9) .spectrum-legend-num { border-color: var(--spectrum-red); }