/* ================================================================
   vpn.css — Sdílené styly pro VPN stránky
   Načítáno na: protection-vpn, vpn-comparison, hide-my-ip
   ================================================================ */


/* =================================================================
   SEKCE 1 — PAGE-SPECIFIC: pouze protection-vpn
   ================================================================= */

/* Lokální proměnné pro enc-diagram */
:root {
    --enc-plain-color:  light-dark(#856404, #e0b840);
    --enc-plain-bg:     light-dark(#fff8dc, rgba(240, 192, 64, 0.08));
    --enc-plain-border: light-dark(#f0c040, #b8962a);
    --enc-code-plain:   light-dark(#856404, #e0b840);
    --enc-code-enc:     light-dark(#155724, #82c99a);
}

/* Encryption diagram — tři vnořené vrstvy encapsulace: plain → safe → info.
   Použití: sekce "The Encryption Process" pouze na protection-vpn */

.enc-diagram { margin-block: 20px; }

.enc-step-label {
    font-size: var(--size-12);
    font-weight: 700;
    color: var(--text-main);
    margin-block: 14px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.enc-step-label:first-child { margin-block-start: 0; }

.enc-badge {
    font-size: var(--size-11);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.enc-badge-plain { color: var(--enc-plain-color); background: color-mix(in srgb, var(--enc-plain-color) 12%, transparent); }
.enc-badge-safe  { color: var(--color-green);     background: color-mix(in srgb, var(--color-green)     12%, transparent); }
.enc-badge-info  { color: var(--accent-color);    background: color-mix(in srgb, var(--accent-color)    10%, transparent); }

.enc-box {
    border-radius: 8px;
    padding: 10px 14px;
}
.enc-box-plain {
    background: var(--enc-plain-bg);
    border: 1.5px solid var(--enc-plain-border);
}
.enc-box-safe {
    background: color-mix(in srgb, var(--color-green) 7%, var(--bg-data-box));
    border: 2px solid var(--color-green);
}
.enc-box-info {
    background: var(--bg-info-box);
    border: 2px solid var(--accent-color);
}

.enc-box-label {
    font-size: var(--size-11);
    font-weight: 700;
    margin-block-end: 6px;
}
.enc-box-safe .enc-box-label { color: var(--color-green); }
.enc-box-info .enc-box-label { color: var(--accent-color); }

.enc-box code {
    font-size: var(--size-12);
    font-family: var(--font-mono);
    color: var(--enc-code-plain);
    word-break: break-all;
}
.enc-box-safe code,
.enc-box-info code { color: var(--enc-code-enc); font-size: var(--size-11); }

.enc-inner { margin-block-start: 6px; }

/* Šipky uvnitř enc-diagramu potřebují větší vertikální mezery než standardní step-arrow-conn */
.enc-diagram .step-arrow-conn { padding-block: 6px; }



/* =================================================================
   SEKCE 2 — SDÍLENÉ: protection-vpn, vpn-comparison, hide-my-ip
   ================================================================= */


/* ===== 1. VPN TABLE ===== */
/* Srovnávací tabulka poskytovatelů VPN.
   Použití: protection-vpn, vpn-comparison, hide-my-ip */

.vpn-table-wrapper { margin-block: 25px; overflow-x: auto; max-width: 100%; }
.vpn-table { width: 100%; border-collapse: collapse; font-size: var(--size-14); }
.vpn-table th,
.vpn-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); }
.vpn-table th { background: var(--bg-data-box); font-weight: 700; color: var(--text-main); font-size: var(--size-12); text-transform: uppercase; letter-spacing: 0.5px; }
.vpn-table tr:hover { background: var(--bg-info-box); }
.vpn-table th:first-child,
.vpn-table td:first-child { text-align: center; }
.vpn-table td:first-child { font-weight: 700; white-space: nowrap; }
.vpn-table .price { color: var(--accent-color); font-weight: 600; }

.vpn-logo { display: block; margin-inline: auto; margin-block-end: 6px; width: 40px; height: 40px; object-fit: contain; }

@media (max-width: 600px) {
    /* Tabulka se musí vejít celá (od 360 px) — jinak jsou tlačítka Get … oříznutá */
    .vpn-table-wrapper { margin-block: 15px; }
    .vpn-table { font-size: var(--size-13); }
    .vpn-table th, .vpn-table td { padding-block: 10px; padding-inline: 5px; }
    .vpn-table td:first-child,
    .vpn-table .best-for-badge { white-space: normal; }
    .vpn-table th:nth-child(3), .vpn-table td:nth-child(3),
    .vpn-table th:nth-child(4), .vpn-table td:nth-child(4) { display: none; }
}


/* ===== 2. BEST-FOR BADGE ===== */
/* Štítky pod názvem VPN poskytovatele (Best Budget Pick, Editor's Choice…).
   Barevné varianty přes .badge-gold/green/blue z components.css.
   Použití: protection-vpn, vpn-comparison, hide-my-ip */

.best-for-badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: var(--size-11); font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; }
.card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 12px; }

/* Badge uvnitř <th> záhlaví srovnávací tabulky — pouze vpn-comparison.php */
.th-badge { display: block; margin-block-start: 6px; }


/* ===== 3. VPN GET BUTTON ===== */
/* Modrý tlačítkový odkaz "Get NordVPN" v tabulce a kartách.
   Použití: protection-vpn, vpn-comparison, hide-my-ip */

.vpn-get-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 120px; padding-block: 8px; padding-inline: 10px;
    background: var(--accent-on-solid); color: var(--white);
    border-radius: 6px; font-size: var(--size-13); font-weight: 600;
    text-decoration: none; transition: opacity 0.2s; text-align: center;
    line-height: 1.3; box-sizing: border-box;
}
.vpn-get-btn:hover,
.vpn-get-btn:focus-visible { opacity: 0.85; text-decoration: none; color: var(--white); }
.vpn-get-btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.vpn-get-btn .btn-label { font-size: var(--size-11); font-weight: 400; }
.vpn-get-btn .btn-name  { font-size: var(--size-13); font-weight: 700; }

@media (max-width: 600px) {
    .vpn-get-btn { width: 80px; padding-block: 6px; padding-inline: 6px; }
    .vpn-get-btn .btn-name,
    .vpn-get-btn .btn-label { font-size: var(--size-11); }
}


/* ===== 4. VPN COMPARE BUTTON ===== */
/* Velký modrý CTA button "Compare VPN Providers in Detail →".
   Použití: protection-vpn, hide-my-ip */

.vpn-compare-wrapper { text-align: center; margin-block: 30px; }
.vpn-compare-btn {
    display: inline-block; padding-block: 14px; padding-inline: 32px;
    background: var(--accent-on-solid); color: var(--white);
    border-radius: 10px; font-size: var(--size-15); font-weight: 700;
    text-decoration: none; transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 25%, transparent);
}
.vpn-compare-btn:hover,
.vpn-compare-btn:focus-visible { opacity: 0.9; transform: translateY(-1px); text-decoration: none; color: var(--white); }
.vpn-compare-btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }


/* ===== 5. VPN CARD ===== */
/* Velká karta poskytovatele s pros/cons a metadaty.
   Použití: vpn-comparison, hide-my-ip */

.vpn-card .card-logo { display: block; width: 48px; height: 48px; object-fit: contain; margin-block-end: 10px; }

.vpn-card { background: var(--bg-data-box); border: 1px solid var(--border-color); border-radius: 12px; padding-block: 25px; padding-inline: 30px; margin-block: 25px; }
.vpn-card h3 { margin-block-start: 0; font-size: var(--size-20); color: var(--accent-color); }
.vpn-card > h2:first-child { margin-block-start: 0; margin-block-end: 10px; font-size: var(--size-20); }
.vpn-card .vpn-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-block: 15px; font-size: var(--size-13); color: var(--text-muted); }
.vpn-card .vpn-meta span { display: flex; align-items: center; gap: 5px; }
.vpn-card .vpn-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-block-start: 15px; }
.vpn-card .pros h3, .vpn-card .pros h4 { color: var(--color-green); margin-block: 0 8px; font-size: var(--size-14); }
.vpn-card .cons h3, .vpn-card .cons h4 { color: var(--color-red);   margin-block: 0 8px; font-size: var(--size-14); }
.vpn-card ul { padding-inline-start: 18px; margin-block: 0; }
.vpn-card li { font-size: var(--size-13); margin-block-end: 6px; }
.vpn-card.featured { border: 2px solid var(--badge-gold-text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge-gold-text) 15%, transparent), 0 4px 16px color-mix(in srgb, var(--badge-gold-text) 10%, transparent); }

@media (max-width: 600px) {
    .vpn-card { padding-inline: 18px; }
    .vpn-card .vpn-pros-cons { grid-template-columns: 1fr; }
}


/* =================================================================
   SEKCE 4 — PAGE-SPECIFIC: pouze vpn-comparison
   ================================================================= */

/* Užší první sloupec u velké srovnávací matice (5 VPN = 6 sloupců) —
   stejný zásah jako .table-compare th:first-child v protection-browsers.css */
.table-compare th:first-child,
.table-compare td:first-child { min-width: 115px; }