/*
Theme Name: Společně pro Přišimasy
Author: Rostislav Chalupský
Description: One-page šablona pro politické sdružení
Version: 1.0
*/

:root {
    --primary-teal: #008080;
    --primary-dark: #005b5b;
    --accent-blue: #006699;
    --bg-light: #f4f8f8;
    --text-color: #2c3e50;
}

html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body {
    background-color: #ffffff; color: var(--text-color);
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
        .navbar {
            position: sticky; top: 0; z-index: 1000;
            background: linear-gradient(135deg, var(--primary-teal), var(--accent-blue));
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        }
        .navbar-container { max-width: 1300px; margin: 0 auto; display: flex; justify-content: center; align-items: center;padding: 0 10px; }
        /*.navbar nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: stretch; padding: 5px 0; }*/
.navbar nav ul.nav-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    padding: 5px 0;
    margin: 0;
    list-style: none; /* Skryje odrážky */
}

.navbar nav ul.nav-list li {
    margin: 0;
    padding: 0;
    display: flex;
}
        .navbar a {
            color: #ffffff; text-decoration: none; padding: 10px 15px;
            font-weight: 600; font-size: 15px; transition: background 0.2s; display: flex; text-align: center; align-items: center; justify-content: center; 
        }
        .navbar a:hover { background-color: rgba(255, 255, 255, 0.15); }

        .container { max-width: 1300px; margin: 0 auto; padding: 20px; }
        section { padding: 40px 0; border-bottom: 1px solid #e0ecec; }
        section:last-of-type { border-bottom: none; }
        h2 { text-align: center; color: var(--primary-dark); font-size: 28px; margin-top: 0; margin-bottom: 30px; }
        h2::after { content: ''; display: block; width: 50px; height: 3px; background: var(--primary-teal); margin: 8px auto 0; border-radius: 2px; }
        h3 { color: var(--primary-teal); margin-top: 30px; }

        /* Galerie */
        .gallery { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
        .gallery a { display: block; width: 100%; max-width: 600px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden;}
        .gallery img { width: 100%; height: auto; display: block; transition: transform 0.2s; }
        .gallery a:hover img { transform: scale(1.07); }

        /* Formulář */
        .form-card { max-width: 600px; margin: 0 auto; background: var(--bg-light); padding: 30px; border-radius: 10px; border: 1px solid #d8ecec; }
        .form-group { margin-bottom: 18px; }
        .form-group label { display: block; margin-bottom: 6px; font-weight: bold; color: var(--primary-dark); }
        .form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #b8d8d8; border-radius: 6px; box-sizing: border-box; }
        .form-group textarea { resize: vertical; min-height: 120px; }
        .btn-submit { background: linear-gradient(135deg, var(--primary-teal), var(--accent-blue)); color: white; border: none; padding: 14px 20px; font-weight: bold; border-radius: 6px; cursor: pointer; width: 100%; transition: opacity 0.2s;}
        .btn-submit:hover { opacity: 0.8; }
        .info-box { background-color: var(--bg-light); padding: 25px; border-radius: 8px; border-left: 5px solid var(--primary-teal); line-height: 1.6; max-width: 1000px; margin: 0 auto; text-align: center; }
        .alert { padding: 12px; border-radius: 6px; margin-bottom: 20px; text-align: center; }
        .alert.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .alert.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

        /* --- PRAVIDLA A OMYLY --- */
        .voting-rules { line-height: 1.7; margin-bottom: 30px; font-size: 15px; }
        .voting-rules li { margin-bottom: 12px; }
        .voting-rules.mistakes li { color: #a72828; }
        .voting-rules.mistakes strong { color: #dc3545; }

        /* --- SIMULÁTOR VOLEB --- */
        .sim-wrap { margin-top: 40px; }
        .sim-grid { display: flex; gap: 15px; margin-top: 20px; }
        @media (max-width: 768px) { .sim-grid { flex-direction: column; } }
        
        .party-col { flex: 1; border: 1px solid #b8d8d8; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .party-header { background: var(--bg-light); padding: 15px 12px; font-weight: bold; border-bottom: 3px solid var(--primary-teal); display: flex; align-items: center; gap: 12px; }
	/*.party-header input { width: 22px; height: 22px; cursor: pointer; } */
	.party-header input[type="checkbox"],
        
        .candidate-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px; transition: background 0.3s; }
	/*.candidate-row input { width: 18px; height: 18px; cursor: pointer; }*/
        .candidate-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid #b8d8d8;
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.2s;
}
/* Velikosti políček */
.party-header input[type="checkbox"] { width: 24px; height: 24px; }
.candidate-row input[type="checkbox"] { width: 20px; height: 20px; }

/* Zvýraznění okraje při najetí myší */
.party-header input[type="checkbox"]:hover,
.candidate-row input[type="checkbox"]:hover {
    border-color: var(--primary-teal);
}

/* Vykreslení černého křížku při zaškrtnutí */
.party-header input[type="checkbox"]:checked,
.candidate-row input[type="checkbox"]:checked {
    border-color: var(--primary-dark);
    /* Vložíme jednoduché vektorové SVG křížku přímo do CSS */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232c3e50" stroke-width="4" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
}
.big-cross,
.small-cross {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid #b8d8d8;
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.2s;
    /* Flexbox zajišťuje, aby se křížek vždy bezpečně vycentroval */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Velikosti políček */
.big-cross { width: 26px; height: 26px; } /* Trochu větší pro strany */
.small-cross { width: 20px; height: 20px; } /* Menší pro kandidáty */

/* Zvýraznění okraje při najetí myší */
.big-cross:hover,
.small-cross:hover {
    border-color: var(--primary-teal);
}

/* Vykreslení černého křížku při zaškrtnutí */
.big-cross:checked,
.small-cross:checked {
    border-color: var(--primary-dark);
    /* Vložíme jednoduché vektorové SVG křížku přímo do CSS */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232c3e50" stroke-width="4" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
}
        /* Barvy pro výsledky simulátoru */
        .candidate-row.gets-vote { background-color: #d4edda; border-left: 4px solid #28a745; }
        .candidate-row.wasted-cross:not(.gets-vote) { background-color: #fff3cd; border-left: 4px solid #ffc107; color: #856404; text-decoration: line-through;}
        .candidate-row.gets-vote.wasted-cross { background: repeating-linear-gradient(45deg, #d4edda, #d4edda 10px, #e8f5e9 10px, #e8f5e9 20px); border-left: 4px solid #28a745; }

        .sim-result { margin-top: 25px; padding: 20px; border-radius: 8px; text-align: center; border: 2px solid #ccc; background: #f9f9f9; }
        .sim-result.valid { border-color: #28a745; background: #e8f5e9; }
        .sim-result.invalid { border-color: #dc3545; background: #fbeee8; }
        .sim-result.neutral { border-color: var(--primary-teal); background: var(--bg-light); }
        #sim-status { font-weight: bold; font-size: 22px; margin-bottom: 8px; }
        #sim-text { font-size: 15px; line-height: 1.5; }
        
        .legend { display: flex; gap: 15px; margin-top: 15px; font-size: 13px; justify-content: center; flex-wrap: wrap; }
        .legend-item { display: flex; align-items: center; gap: 6px; }
        .legend-box { width: 16px; height: 16px; border-radius: 3px; }
        .lb-green { background: #d4edda; border: 1px solid #28a745; }
        .lb-yellow { background: #fff3cd; border: 1px solid #ffc107; }
	.lb-striped { background: repeating-linear-gradient(45deg, #d4edda, #d4edda 5px, #e8f5e9 5px, #e8f5e9 10px); border: 1px solid #28a745; }

	/* Styly pro ručně vypsané kandidáty a jejich role */
	.cand-details {
	    display: flex;
	    flex-direction: column;
	    cursor: pointer;
	    line-height: 1.3;
	}
	.cand-name {
	    font-weight: 600;
	    font-size: 15px;
	    color: var(--primary-dark);
	}
	.cand-role {
	    font-size: 13px;
	    color: #666;
	    margin-top: 2px;
	}
	.candidate-row label {
	    flex-grow: 1; 
	}
.program-block {
    margin-bottom: 25px;
}
.program-block h4 {
    margin: 0 0 10px 0;
    color: var(--primary-dark);
    font-size: 18px;
}
.program-block ul {
    margin: 0;
    padding-left: 20px;
    text-align: left;
    line-height: 1.6;
}
.program-block li {
    margin-bottom: 8px;
}
.qa-block {
    margin-bottom: 30px;
}
.qa-block h4 {
    margin: 0 0 10px 0;
    color: var(--accent-blue);
    font-size: 18px;
}
.qa-block p {
    margin-bottom: 10px;
    line-height: 1.6;
}