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


/* ===== 1. H4 OVERRIDE ===== */
/* Na této stránce jsou h4 nadpisy rozšíření (uBlock Origin apod.)
   — accent barva místo výchozí var(--text-main) z common.css */
h4 {
    color: var(--accent-color);
    font-size: var(--size-16);
}


/* ===== 2. EXTENSION PARADOX WIDGET ===== */
/* Vizualizace "Privacy Level vs. Number of Extensions":
   gradient bar + 3 zóny (Exposed / Sweet Spot / Unique Fingerprint) */

.ep-wrap { margin-block: 20px; }

.ep-title {
    text-align: center;
    font-weight: 700;
    font-size: var(--size-14);
    color: var(--text-main);
    margin-block-end: 14px;
}

.ep-bar {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right,
        var(--spectrum-red)    0%,
        var(--spectrum-orange) 28%,
        var(--spectrum-green)  50%,
        var(--spectrum-orange) 72%,
        var(--spectrum-red)    100%);
    margin: 0 4px 14px;
}

.ep-zones {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.ep-zone {
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    border: 1.5px solid var(--border-color);
    background: var(--bg-data-box);
}

.ep-zone-good {
    background: var(--bg-info-box);
    border: 2px solid var(--accent-color);
}

.ep-zone-num {
    font-size: var(--size-11);
    color: var(--text-muted);
    margin-block-end: 6px;
}

.ep-zone-label-bad {
    font-size: var(--size-13);
    font-weight: 700;
    color: var(--spectrum-red-text);
    margin-block-end: 5px;
}

.ep-zone-badge {
    display: inline-block;
    background: var(--accent-on-solid);
    color: var(--white);
    font-size: var(--size-11);
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    margin-block-end: 6px;
}

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

.ep-axis {
    text-align: center;
    font-size: var(--size-11);
    color: var(--text-muted);
    margin-block-start: 10px;
}

@media (max-width: 480px) {
    .ep-zone-num       { font-size: var(--size-11); }
    .ep-zone-label-bad { font-size: var(--size-12); }
    .ep-zone-note      { font-size: var(--size-11); }
}


/* ===== 3. RECOMMENDED COMBINATIONS KARTY ===== */
/* Grid 3 karet (Basic / Moderate / Advanced) s barevnými záhlavími,
   extension pills, progress barem a popisem úrovně ochrany */

.rc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-block: 20px;
}

.rc-card {
    background: var(--bg-data-box);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rc-header {
    padding: 12px 16px;
    text-align: center;
    color: var(--white);
    font-weight: 700;
    font-size: var(--size-13);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Barevné varianty záhlaví karet */
.rc-header--basic    { background: var(--color-green-on-solid); }
.rc-header--moderate { background: var(--color-orange-on-solid); }
.rc-header--advanced { background: var(--color-purple-on-solid); }

.rc-browser {
    text-align: center;
    font-size: var(--size-12);
    font-weight: 600;
    color: var(--text-label);
    padding: 10px 12px 4px;
}

.rc-pills {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rc-pill {
    background: var(--accent-on-solid);
    color: var(--white);
    font-size: var(--size-12);
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    text-align: center;
}

/* pill-2/pill-3 = doplňková rozšíření (méně důležité než pill-1) —
   dřív řešeno přes opacity, ale to ředí text i pozadí dohromady a
   v dark módu propadalo pod WCAG 4.5:1. Stejný "filled vs. outline"
   vzor jako .btn-primary / .btn-ghost — obrys místo plné výplně
   čitelně signalizuje nižší důležitost bez ztráty kontrastu. */
.rc-pill.pill-2,
.rc-pill.pill-3 {
    background: transparent;
    color: var(--accent-color);
    border: 1.5px solid var(--accent-color);
}

.rc-desc {
    font-size: var(--size-12);
    color: var(--text-label);
    text-align: center;
    padding: 6px 16px 2px;
    line-height: 1.5;
}

.rc-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 8px 16px;
}

.rc-bestfor {
    font-size: var(--size-11);
    color: var(--text-muted);
    text-align: center;
    padding: 0 16px 10px;
    line-height: 1.5;
    flex: 1;
}

.rc-bar-wrap {
    margin: 4px 16px 6px;
    background: var(--border-color);
    border-radius: 3px;
    height: 6px;
}

.rc-bar {
    height: 6px;
    border-radius: 3px;
}

/* Barevné varianty progress barů — šířka odpovídá úrovni ochrany */
.rc-bar--basic    { width: 33%;  background: var(--spectrum-green); }
.rc-bar--moderate { width: 67%;  background: var(--spectrum-orange); }
.rc-bar--advanced { width: 100%; background: var(--color-purple); }

.rc-bar-label {
    font-size: var(--size-11);
    color: var(--text-muted);
    text-align: center;
    padding: 4px 0 14px;
}

.rc-note {
    font-size: var(--size-11);
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
    margin-block-start: 4px;
}

@media (max-width: 600px) {
    .rc-grid { grid-template-columns: 1fr; }
}