/* ================================================================
   learn-more.css — Sdílené styly pro learn-more stránky
   Načítáno na: network, location, technical, fingerprint,
                security, protection
   ================================================================ */

/* ===== DATA ROWS ===== */
.data-row {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    padding-block: 12px;
    gap: 15px;
}

.data-row:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.data-label-link {
    color: var(--accent-color);
    text-decoration: underline;
    cursor: pointer;
}

.data-label-link:hover {
    color: var(--accent-hover);
}

.data-value {
    color: var(--text-label);
    font-weight: 600;
    text-align: left;
    overflow-wrap: break-word;
    flex: 1;
}

.data-label-group {
    display: flex;
    align-items: center;
    min-width: 185px;
    flex-shrink: 0;
    gap: 0;
    font-weight: 600;
}

/* ===== TERM BOXES ===== */
.term {
    background: var(--bg-info-box);
    padding: 20px;
    border-radius: 8px;
    margin-block: 15px;
    border: 1px solid var(--border-color);
}

.term h3 {
    margin-block: 0 5px;
    color: var(--accent-color);
    font-size: var(--size-20);
}

.term p {
    margin-block: 0 10px;
}

.term p:last-child {
    margin-block-end: 0;
}

/* ===== STATUS TABLE INTRO ===== */
.status-table-intro {
    font-size: var(--size-13);
    color: var(--text-muted);
    margin-block: 14px 6px;
    font-style: italic;
}

/* ===== STATUS TABLE ===== */
.status-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-14);
    margin-block-end: 16px;
}

.status-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--bg-data-box);
    color: var(--text-label);
    font-weight: 700;
    border-bottom: 2px solid var(--border-color);
    font-size: var(--size-12);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.status-table td {
    padding: 9px 12px;
    color: var(--text-label);
    vertical-align: middle;
}

.status-table tr:not(:last-child) td {
    border-bottom: 1px solid var(--border-color);
}

.status-table .col-status {
    width: 210px;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 600px) {
    .data-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .data-label-link,
    .data-label-group {
        min-width: auto;
    }

    /* Status table: stack as cards on mobile */
    .status-table thead { display: none; }
    .status-table,
    .status-table tbody { display: block; width: 100%; }
    .status-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 10px;
        padding: 10px 4px;
        border-bottom: 1px solid var(--border-color);
    }
    .status-table tr:last-child { border-bottom: none; }
    .status-table td {
        padding: 0;
        border: none;
    }
    .status-table td:nth-child(1) { flex: 0 0 auto; }
    .status-table td:nth-child(2) {
        flex: 0 0 100%;
        margin-top: 6px;
        font-size: var(--size-13);
        color: var(--text-muted);
        line-height: 1.5;
    }

    code {
        word-break: break-all;
        overflow-wrap: break-word;
    }
}


/* ===== MAPA (learn-more-location) ===== */
#map {
    height: 350px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    z-index: 1;
}

/* Dark mode fix pro Leaflet popup — přebíjí hardcoded bílé pozadí z leaflet.css */
.leaflet-popup-content-wrapper {
    background: var(--bg-container);
    color: var(--text-main);
}

.leaflet-popup-tip {
    background: var(--bg-container);
}


/* ================================================================
   ZATÍM NEPOUŽITO - KDYŽ SE POUŽIJE, POSUNOUT NAHORU
   ================================================================ */

.ext-link {
    font-size: var(--size-11);
    color: var(--accent-color);
    text-decoration: none;
    margin-inline-start: 3px;
    vertical-align: middle;
}

.ext-link:hover {
    color: var(--accent-hover);
}

h3 .ext-link {
    font-size: var(--size-13);
}

/* ===== CODEC & PLATFORM TABLES ===== */
.codec-table, .platform-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-14);
    margin-block: 10px 15px;
}

.codec-table th, .codec-table td,
.platform-table th, .platform-table td {
    padding: 8px 10px;
    text-align: left;
}

.codec-table th, .platform-table th {
    background: var(--bg-data-box);
    font-weight: 600;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
}

.platform-table td {
    color: var(--text-label);
}

.codec-table tr:not(:last-child) td,
.platform-table tr:not(:last-child) td {
    border-bottom: 1px solid var(--border-color);
}

.codec-supported     { color: var(--color-green); font-weight: 600; }
.codec-not-supported { color: var(--color-red);   font-weight: 600; }

/* ===== FINGERPRINT DISPLAY (browser-fingerprint-test) ===== */
.fingerprint-display {
    text-align: center;
    background: var(--bg-data-box);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 30px 20px;
    margin-block: 30px;
}

.fingerprint-display-label {
    margin-block-start: 0;
}

.fingerprint-status {
    margin-block-start: 10px;
}

#fpGauge {
    margin-block-start: 15px;
}

#fpPercentile {
    margin-block-start: 15px;
    font-size: var(--size-20);
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.5;
}

#fpPercentile strong {
    color: var(--accent-color);
}

#fpPercentile .text-small {
    display: block;
    margin-block-start: 6px;
    font-weight: 400;
}

#fpBitsBar {
    margin-block-start: 14px;
}

.total-bits-label {
    margin: 0 0 8px;
    font-size: var(--size-14);
    color: var(--text-main);
}

.total-bits-label strong {
    color: var(--accent-color);
}

.fingerprint-stability {
    margin-block-start: 14px;
    font-size: var(--size-14);
}

.fingerprint-stability .text-small {
    display: block;
    margin-block-start: 4px;
}

#fpShareBtn {
    margin-block-start: 18px;
}

/* Velikost ikony (display/width/height) je od sjednocení v .btn svg (components.css) */
#fpShareBtn svg {
    vertical-align: -2px;
}

.impact-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--size-11);
    font-weight: 600;
    margin-inline-start: 8px;
}

.impact-high   { background: var(--status-danger-bg); color: var(--status-danger-color); }
.impact-medium { background: var(--status-warn-bg);   color: var(--status-warn-color); }
.impact-low    { background: var(--status-safe-bg);   color: var(--status-safe-color); }

/* ===== SCORE BREAKDOWN (browser-fingerprint-test, "What's Driving Your Score") ===== */
.breakdown-list {
    list-style: none;
    margin: 20px 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.breakdown-row-skeleton {
    color: var(--text-muted);
    font-size: var(--size-14);
}

.breakdown-row-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-block-end: 6px;
}

.breakdown-label {
    font-weight: 600;
    color: var(--text-main);
    font-size: var(--size-14);
}

.breakdown-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.impact-source-studied   { background: var(--status-safe-bg); color: var(--status-safe-color); }
.impact-source-estimated { background: var(--status-warn-bg); color: var(--status-warn-color); }

/* .box-info p sets color/margin-top with equal-or-higher specificity, so the
   compound selector is needed here to actually win on color. */
.box-info p.score-methodology-source {
    padding-block-start: 10px;
    border-top: 1px solid var(--border-color);
    font-size: var(--size-12);
    color: var(--text-muted);
    line-height: 1.5;
}

.score-methodology-source a {
    color: var(--accent-color);
}

.breakdown-bar-track {
    height: 8px;
    border-radius: 4px;
    background: var(--border-color);
    overflow: hidden;
}

.breakdown-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--accent-color);
    transition: width 0.4s ease;
}

.breakdown-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breakdown-bar-wrap .breakdown-bar-track {
    flex: 1 1 auto;
}

.breakdown-bits-edge {
    flex: 0 0 auto;
    font-size: var(--size-11);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Deliberately not .current-value — that class is a full styled box
   (background/padding/border-radius); stacking two of them for "Your value"
   and "Your bits" needed a negative margin to pull them together. This is
   plain muted text under the value box instead. */
.current-bits {
    color: var(--text-muted);
    font-size: var(--size-13);
    margin: 0 0 12px;
}

/* Modifier for a 4-column variant of the shared .score-explain-table (adds a
   "Bits Used" column) — used only on browser-fingerprint-test's "Understanding
   the Score" table. Scoped with the compound selector so it doesn't affect
   the shared 3-column table on ip-blacklist/am-i-being-tracked/tracker-test. */
@media (max-width: 600px) {
    .score-explain-table.score-explain-table--bits td:nth-child(3) {
        flex: 0 0 auto;
        font-weight: 600;
    }
    .score-explain-table.score-explain-table--bits td:nth-child(4) {
        flex: 0 0 100%;
        margin-block-start: 6px;
        font-size: var(--size-13);
        color: var(--text-muted);
        line-height: 1.5;
    }
}

/* ===== FINGERPRINT HASH ===== */
.fingerprint-hash-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-block: 10px;
}

.fingerprint-hash {
    font-size: clamp(var(--size-28), 4vw, 42px);
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 4px;
    color: var(--accent-color);
    word-break: break-all;
    display: block;
}

.fingerprint-hash-full {
    font-family: var(--font-mono);
    font-size: var(--size-14);
    line-height: 1.8;
    word-break: break-all;
    color: var(--text-main);
    background: var(--bg-data-box);
    border-radius: 8px;
    padding: 14px;
    margin: 0 0 20px 0;
}

.data-value.small {
    font-size: var(--size-11);
    font-weight: 400;
    line-height: 1.5;
}

@media (max-width: 600px) {
    /* Codec table: smaller, hide description col */
    .codec-table {
        font-size: var(--size-12);
    }

    .codec-table th,
    .codec-table td {
        padding: 6px 8px;
    }

    .codec-table th:nth-child(2),
    .codec-table td:nth-child(2) {
        display: none;
    }

    .platform-table {
        font-size: var(--size-12);
    }

    .platform-table th,
    .platform-table td {
        padding: 6px 8px;
    }
}


/* ===== BLACKLIST GAUGE LAYOUT (learn-more-security) ===== */
/* Obaly kolem gauge diagramů v IP blacklist sekci */
.blacklist-gauges-row {
    display: flex;
    gap: 32px;
    margin: 0;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.blacklist-gauge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blacklist-gauge-label {
    font-weight: 700;
    font-size: var(--size-13);
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-block-end: 4px;
}

.blacklist-gauge-status {
    margin-block-start: 6px;
    text-align: center;
}

.blacklist-intro-text {
    padding-block-start: 40px;
}

@media (max-width: 768px) {
    .blacklist-intro-row {
        flex-direction: column;
        align-items: stretch;
    }

    .blacklist-intro-text {
        padding-block-start: 0;
    }

    .blacklist-gauges-row {
        flex-wrap: nowrap;
        gap: 0;
        width: 100%;
        flex-shrink: 1;
    }

    .blacklist-gauge-item {
        flex: 1 1 0;
        min-width: 0;
    }

    .blacklist-gauge-item svg {
        width: 100%;
        height: auto;
    }
}


/* ===== SECURITY ROADMAP (learn-more-security) ===== */
/* Vizualizace kroků ochrany — karty s číslem (data-step) propojené svislou čarou */
.security-roadmap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-block: 30px;
}

.security-group {
    background: var(--bg-data-box);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.security-group::before {
    content: attr(data-step);
    display: inline-block;
    background: var(--accent-on-solid);
    color: var(--white);
    font-size: var(--size-11);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-block-end: 12px;
    letter-spacing: 0.04em;
}

.security-group-title {
    font-size: var(--size-16);
    font-weight: 700;
    color: var(--accent-color);
    margin-block-end: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.security-group-title a {
    color: inherit;
    text-decoration: none;
}

.security-group-title a::after {
    content: " →";
    opacity: 0.5;
    font-size: 0.85em;
}

.security-group-title a:hover {
    text-decoration: underline;
}

.security-group-title .icon {
    font-size: var(--size-20);
}

.security-group-desc {
    color: var(--text-muted);
    font-size: var(--size-14);
    margin-block-end: 12px;
}

.security-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.security-group-item {
    background: var(--bg-info-box);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: var(--size-13);
    font-weight: 500;
    color: var(--text-label);
}

.group-connector {
    display: flex;
    justify-content: center;
    margin: -10px 0;
}

.group-connector::before {
    content: '';
    width: 2px;
    height: 20px;
    background: var(--border-color);
}

@media (max-width: 600px) {
    .security-group {
        padding: 15px;
    }

    .security-group-items {
        flex-direction: column;
    }
}