/* 
 * Tábor Vlna - Barvy & Vizuální styly
 * Verze: 3.0 - Optimalizovaná
 * Vytvořeno: 2026-01-30
 * Hlavní barvy: Modrá #0637fe, Zelená #27ed00
 */

/* ═══════════════════════════════════════════════════════════════════════
   CSS PROMĚNNÉ - BAREVNÁ PALETA
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────────────────────────────
       PRIMÁRNÍ BARVY (Akční prvky)
       ───────────────────────────────────────────────────────────────── */
    --color-primary: #0637fe;              /* Modrá - CTA tlačítka */
    --color-primary-dark: #0429c9;         /* Tmavší modrá - hover */
    --color-primary-light: #4d6dff;        /* Světlejší modrá */
    
    /* ─────────────────────────────────────────────────────────────────
       SEKUNDÁRNÍ BARVY (Countdown, info sekce)
       ───────────────────────────────────────────────────────────────── */
    --color-secondary: #27ed00;            /* Zelená - countdown, akcenty */
    --color-secondary-dark: #1fbd00;       /* Tmavší zelená */
    --color-secondary-light: #5fff3d;      /* Světlejší zelená */
    
    /* ─────────────────────────────────────────────────────────────────
       AKCENTY (Label-vlna, dekorace)
       ───────────────────────────────────────────────────────────────── */
    --color-accent: #0637fe;               /* Modrá - label-vlna */
    --color-accent-light: #4d6dff;
    
    /* ─────────────────────────────────────────────────────────────────
       NEUTRÁLNÍ BARVY (Texty)
       ───────────────────────────────────────────────────────────────── */
    --color-dark: #1a2332;                 /* Tmavá - hlavní text, patička */
    --color-medium: #4a5568;               /* Střední - běžný text */
    --color-light: #718096;                /* Světlá - menu neaktivní */
    --color-muted: #a0aec0;                /* Tlumená - patička texty */
    
    /* ─────────────────────────────────────────────────────────────────
       POZADÍ
       ───────────────────────────────────────────────────────────────── */
    --color-bg-white: #ffffff;
    --color-bg-cream: #f8fafc;             /* Velmi světlé šedé */
    --color-bg-light: #edf2f7;             /* Světlé šedé */
    
    /* ─────────────────────────────────────────────────────────────────
       SPECIÁLNÍ SEKCE
       ───────────────────────────────────────────────────────────────── */
    --color-slovo-bg: #0637fe;             /* Slovo vedoucího - pozadí */
    --color-slovo-light: #4d6dff;
    
    --color-cta-bg: #0637fe;               /* Call to action - pozadí */
    
    --color-countdown-bg: #27ed00;         /* Countdown - pozadí */
    --color-countdown-item: #1fbd00;       /* Countdown - položky */
    
    --color-info-bg: #27ed00;              /* Info sekce - pozadí */
    
    /* ─────────────────────────────────────────────────────────────────
       STÍNY
       ───────────────────────────────────────────────────────────────── */
    --shadow-soft: 0 4px 15px rgba(26, 35, 50, 0.06);
    --shadow-medium: 0 8px 30px rgba(26, 35, 50, 0.10);
    --shadow-strong: 0 15px 50px rgba(26, 35, 50, 0.14);
    --shadow-primary: 0 8px 25px rgba(6, 55, 254, 0.25);
    --shadow-secondary: 0 8px 25px rgba(39, 237, 0, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════
   ZÁKLADNÍ BARVY
   ═══════════════════════════════════════════════════════════════════════ */

body {
    background-color: var(--color-bg-white);
    color: var(--color-medium);
}

a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
   CHYBOVÉ BOXY
   ═══════════════════════════════════════════════════════════════════════ */

div.error_box {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

div.success_box {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

div.info_box {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

div.warning_box {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ═══════════════════════════════════════════════════════════════════════
   ZÁHLAVÍ
   ═══════════════════════════════════════════════════════════════════════ */

#header_zahlavi {
    background-color: var(--color-bg-white);
}

#zahlavi .logo a {
    color: var(--color-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
   MENU - DESKTOP
   ═══════════════════════════════════════════════════════════════════════ */

#menu ul li a {
    color: var(--color-light);
}

#menu ul li a:hover {
    color: var(--color-dark);
    text-decoration: none;
}

#menu ul li.active a {
    color: var(--color-dark);
    border-bottom-color: var(--color-primary);
}

#menu ul li.special.call-to-action a {
    background-color: var(--color-primary);
    color: white;
}

#menu ul li.special.call-to-action a:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   MENU - BURGER (MOBIL)
   ═══════════════════════════════════════════════════════════════════════ */

.nav_toggle_bar {
    background-color: var(--color-dark);
}

.nav_drawer {
    background: rgba(26, 35, 50, 0.5);
    backdrop-filter: blur(5px);
}

.nav_drawer_inner {
    background-color: var(--color-bg-white);
}

.nav_close {
    background-color: var(--color-bg-light);
    color: var(--color-dark);
}

.nav_close:hover {
    background-color: var(--color-primary);
    color: white;
}

.menu_all li {
    border-bottom: 1px solid var(--color-bg-light);
}

.menu_all li a {
    color: var(--color-dark);
}

.menu_all li a:hover {
    background-color: var(--color-bg-cream);
    color: var(--color-primary);
}

.menu_all li.active a {
    background-color: rgba(6, 55, 254, 0.08);
    color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   LABEL VLNA - SPOLEČNÝ STYL
   ═══════════════════════════════════════════════════════════════════════ */

.label-vlna {
    color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   HP INTRO
   ═══════════════════════════════════════════════════════════════════════ */

#hp_intro {
    background-color: var(--color-bg-white);
}

#hp_intro .col-left h2 {
    color: var(--color-dark);
}

#hp_intro .col-left p {
    color: var(--color-medium);
}

#hp_intro .btn {
    background-color: var(--color-primary);
    color: white;
}

#hp_intro .btn:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   HP COUNTDOWN
   ═══════════════════════════════════════════════════════════════════════ */

#hp_countdown_wrapper {
    background-color: var(--color-countdown-bg);
}

#hp_countdown {
    background-color: var(--color-countdown-bg);
}

.count-left .count-label-small {
    color: var(--color-secondary-dark);
}

.count-left .count-title {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.count-item {
    background-color: var(--color-countdown-item);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.count-item .count-number {
    color: white;
}

.count-item .count-label {
    color: rgba(255, 255, 255, 0.85);
}

/* ═══════════════════════════════════════════════════════════════════════
   KDO JSME
   ═══════════════════════════════════════════════════════════════════════ */

#kdo_jsme_wrapper {
    background-color: var(--color-bg-white);
}

#kdo_jsme .col-left h2 {
    color: var(--color-dark);
}

#kdo_jsme .col-left p {
    color: var(--color-medium);
}

#kdo_jsme .btn {
    background-color: var(--color-primary);
    color: white;
}

#kdo_jsme .btn:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-primary);
}

#kdo_jsme .box {
    background-color: var(--color-bg-cream);
    box-shadow: var(--shadow-soft);
}

#kdo_jsme .box:hover {
    box-shadow: var(--shadow-medium);
}

#kdo_jsme .box .icon {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
}

#kdo_jsme .box h3 {
    color: var(--color-dark);
}

#kdo_jsme .box p {
    color: var(--color-medium);
}

/* ═══════════════════════════════════════════════════════════════════════
   HP SLOVO VEDOUCÍHO
   ═══════════════════════════════════════════════════════════════════════ */

#hp_slovo_wrapper {
    background-color: var(--color-slovo-bg);
}

#hp_slovo {
    background-color: var(--color-slovo-bg);
}

#hp_slovo .col-right p {
    color: white;
}

#hp_slovo .col-right p::before {
    color: rgba(255, 255, 255, 0.4);
}

#hp_slovo .col-right > div:first-of-type {
    color: white;
}

#hp_slovo .col-right > div:last-of-type {
    color: var(--color-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   HP GALERIE
   ═══════════════════════════════════════════════════════════════════════ */

#hp_galerie {
    background-color: var(--color-bg-white);
}

#hp_galerie h2 {
    color: var(--color-dark);
}

.galerie-grid img {
    box-shadow: var(--shadow-soft);
}

.galerie-grid a:hover img {
    box-shadow: var(--shadow-medium);
}

.galerie-btn a:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-primary);
}

.galerie-btn a { 
    background-color: var(--color-primary);
    color: white;
    }
.galerie-btn a:hover{ color: white; }

/* ═══════════════════════════════════════════════════════════════════════
   HP INFO
   ═══════════════════════════════════════════════════════════════════════ */

#hp_info_wrapper {
    background-color: var(--color-info-bg);
}

#hp_info {
    background-color: var(--color-info-bg);
}

.info-left .label-vlna {
    color: var(--color-secondary-dark);
}

.info-left h2 {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.info-right .btn {
    background-color: white;
    color: var(--color-dark);
}

.info-right .btn:hover {
    background-color: var(--color-bg-cream);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════
   HP CALL TO ACTION
   ═══════════════════════════════════════════════════════════════════════ */

#hp_call_to_action_wrapper {
    background-color: var(--color-cta-bg);
}

#hp_call_to_action {
    background-color: var(--color-cta-bg);
}

#hp_call_to_action > div:first-child {
    color: var(--color-secondary);
}

#hp_call_to_action > div:nth-child(2) {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

#hp_call_to_action .btn {
    background-color: white;
    color: var(--color-dark);
}

#hp_call_to_action .btn:hover {
    background-color: var(--color-bg-cream);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════
   TLAČÍTKA - BTN - OBECNÉ
   ═══════════════════════════════════════════════════════════════════════ */

.btn {
    background-color: var(--color-primary);
    color: white;
}

.btn:hover {
    box-shadow: var(--shadow-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   PATIČKA
   ═══════════════════════════════════════════════════════════════════════ */

footer {
    background-color: var(--color-dark);
}

#paticka .column h4 {
    color: white;
}

#paticka .column h4::after {
    background-color: var(--color-secondary);
}

#paticka .column p {
    color: var(--color-muted);
}

#paticka .column ul li {
    color: var(--color-muted);
}

#paticka .column ul li a {
    color: var(--color-muted);
}

#paticka .column ul li a:hover {
    color: white;
}

/* Social link */
.social-link {
    color: var(--color-muted);
}

.social-link:hover {
    color: var(--color-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   COPYRIGHT
   ═══════════════════════════════════════════════════════════════════════ */

#copyright {
    background-color: var(--color-dark);
    color: var(--color-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#copyright span {
    color: var(--color-muted);
}

#copyright a {
    color: var(--color-muted);
}

#copyright a:hover {
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════════
   STRÁNKY - STRUKTURA
   ═══════════════════════════════════════════════════════════════════════ */

#content_obsah.struktura {
    background-color: var(--color-bg-white);
}

.obsah_uvod header h1 {
    color: var(--color-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
   UDÁLOSTI - VÝPIS
   ═══════════════════════════════════════════════════════════════════════ */

#content_obsah.udalosti {
    background-color: var(--color-bg-cream);
}

.udalosti_uvod header h1 {
    color: var(--color-dark);
}

.udalosti_vypis .udalost {
    background-color: white;
    box-shadow: var(--shadow-soft);
}

.udalosti_vypis .udalost::before {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.udalosti_vypis .udalost:hover {
    box-shadow: var(--shadow-medium);
}

.udalosti_vypis .udalost strong {
    color: var(--color-secondary-dark);
}

.udalosti_vypis .udalost > a {
    color: var(--color-dark);
}

.udalosti_vypis .udalost > a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.udalosti_vypis .udalost p {
    color: var(--color-medium);
}

/* ═══════════════════════════════════════════════════════════════════════
   DETAIL UDÁLOSTI
   ═══════════════════════════════════════════════════════════════════════ */

#content_obsah.udalost_detail {
    background-color: var(--color-bg-white);
}

.udalost_uvod header h1 {
    color: var(--color-dark);
}

.udalost_info_table {
    background-color: var(--color-bg-cream);
    border: 1px solid var(--color-bg-light);
}

.udalost_info_table th {
    color: var(--color-medium);
    background-color: rgba(0, 0, 0, 0.02);
}

.udalost_info_table td {
    color: var(--color-dark);
}

.udalost_info_table td strong {
    color: var(--color-primary);
}

.kapacita_volna {
    color: var(--color-secondary-dark);
}

.registrace_open {
    background-color: rgba(39, 237, 0, 0.12);
    color: var(--color-secondary-dark);
}

.registrace_closed {
    background-color: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

/* ═══════════════════════════════════════════════════════════════════════
   FORMULÁŘ REGISTRACE
   ═══════════════════════════════════════════════════════════════════════ */

.udalost_registrace_form {
    background-color: var(--color-bg-cream);
    border: 1px solid var(--color-bg-light);
}

.udalost_registrace_form h2 {
    color: var(--color-dark);
}

.form_section {
    border-bottom-color: var(--color-bg-light);
}

.form_section h3 {
    color: var(--color-dark);
}

.form_subsection h4 {
    color: var(--color-medium);
}

.form_line label {
    color: var(--color-dark);
}

.form_line input[type="text"],
.form_line input[type="email"],
.form_line input[type="tel"],
.form_line input[type="date"],
.form_line input[type="number"],
.form_line textarea {
    background-color: white;
    border-color: var(--color-bg-light);
    color: var(--color-dark);
}

.form_line input::placeholder,
.form_line textarea::placeholder {
    color: var(--color-muted);
}

.form_line input:focus,
.form_line textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(6, 55, 254, 0.1);
}

.platba_option {
    background-color: white;
    border: 2px solid var(--color-bg-light);
}

.platba_option:hover {
    border-color: var(--color-primary-light);
}

.platba_option:has(input:checked) {
    border-color: var(--color-primary);
    background-color: rgba(6, 55, 254, 0.04);
}

.platba_option label {
    color: var(--color-dark);
}

.platba_option label strong {
    color: var(--color-primary);
}

.priplatek_badge {
    background-color: var(--color-secondary);
    color: white;
}

.priplatek_zero {
    background-color: var(--color-bg-light);
    color: var(--color-medium);
}

.form_line_checkbox label {
    color: var(--color-medium);
}

.form_line_checkbox label a {
    color: var(--color-primary);
}

/* Souhrn ceny */
.cena_summary {
    background-color: white;
    border: 1px solid var(--color-bg-light);
}

.cena_row span {
    color: var(--color-medium);
}

.cena_row strong {
    color: var(--color-dark);
}

.cena_row_total strong {
    color: var(--color-primary);
    font-size: 1.2em;
}

.cena_highlight {
    color: var(--color-primary) !important;
}

.doplatek_warning {
    color: #dc2626 !important;
}

/* Submit */
.udalost_registrace_form button[type="submit"] {
    background-color: var(--color-primary);
    color: white;
}

.udalost_registrace_form button[type="submit"]:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-primary);
}

/* Tlačítko přidat další dítě */
.btn_secondary {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: transparent;
}

.btn_secondary:hover {
    background-color: rgba(6, 55, 254, 0.06);
    border-color: var(--color-primary-dark);
}

/* Tlačítko odebrat dítě */
.btn_remove_dite {
    background-color: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.btn_remove_dite:hover {
    background-color: #dc2626;
    color: white;
}

/* Další dítě - řádek */
.dalsi_dite_row {
    background-color: white;
    border: 1px solid var(--color-bg-light);

}

/* ═══════════════════════════════════════════════════════════════════════
   KONTAKTY
   ═══════════════════════════════════════════════════════════════════════ */

.tinymce table.kontakty.adresy th {
    color: var(--color-dark);
    background-color: var(--color-bg-cream);
    border-bottom: 2px solid var(--color-primary);
}

.tinymce table.kontakty.adresy td {
    color: var(--color-medium);
    background-color: white;
}

.tinymce table.kontakty.lide td {
    background-color: var(--color-bg-cream);
    border-bottom: 1px solid var(--color-bg-light);
}

.tinymce table.kontakty.lide td strong {
    color: var(--color-dark);
}

.tinymce table.kontakty.lide td em {
    color: var(--color-primary);
    font-style: normal;
}

.tinymce table.kontakty.lide td img {
    border: 4px solid white;
    box-shadow: var(--shadow-soft);
}

/* ═══════════════════════════════════════════════════════════════════════
   TINYMCE OBSAH
   ═══════════════════════════════════════════════════════════════════════ */

.tinymce {
    color: var(--color-medium);
}

.tinymce h2 {
    color: var(--color-dark);
}

.tinymce h3 {
    color: var(--color-dark);
}

.tinymce strong {
    color: var(--color-dark);
}

.tinymce a {
    color: var(--color-primary);
}

.tinymce a:hover {
    color: var(--color-primary-dark);
}

/* Zvýraznění seznam */
.tinymce ul.zvyrazneni li {
    background-color: var(--color-bg-cream);
    border-left-color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════════ */

.faq-item {
    background-color: var(--color-bg-cream);
    border: 1px solid var(--color-bg-light);
}

.faq-item summary {
    color: var(--color-dark);
    font-weight: 600;
}

.faq-item summary:hover {
    background-color: rgba(6, 55, 254, 0.04);
}

.faq-item[open] summary {
    border-bottom: 1px solid var(--color-bg-light);
}

.faq-content {
    color: var(--color-medium);
}

/* ═══════════════════════════════════════════════════════════════════════
   GALERIE MINI
   ═══════════════════════════════════════════════════════════════════════ */

.galerie_mini a {
    box-shadow: var(--shadow-soft);
}

.galerie_mini a:hover {
    box-shadow: var(--shadow-medium);
}

/* ═══════════════════════════════════════════════════════════════════════
   PEREX BOX
   ═══════════════════════════════════════════════════════════════════════ */

.vypis_box.perex {
    background-color: var(--color-bg-cream);
    border: 1px solid var(--color-bg-light);
}

.vypis_box.perex h2 a {
    color: var(--color-dark);
}

.vypis_box.perex h2 a:hover {
    color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   SUCCESS STRÁNKA
   ═══════════════════════════════════════════════════════════════════════ */

.success_message {
    background-color: rgba(39, 237, 0, 0.1);
    border: 1px solid var(--color-secondary);
}

.success_message p {
    color: var(--color-dark);
}

.registrace_summary {
    background-color: var(--color-bg-cream);
    border: 1px solid var(--color-bg-light);
}

.qr_platba {
    background-color: white;
    border: 1px solid var(--color-bg-light);
}

.important_notice {
    background-color: rgba(6, 55, 254, 0.06);
    border: 1px solid var(--color-primary-light);
}

.important_notice h3 {
    color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   VÝBĚR TEXTU
   ═══════════════════════════════════════════════════════════════════════ */

::selection {
    background-color: var(--color-primary);
    color: white;
}

::-moz-selection {
    background-color: var(--color-primary);
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-light);
}

::-webkit-scrollbar-thumb {
    background: var(--color-light);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   FOCUS STYLY (Přístupnost)
   ═══════════════════════════════════════════════════════════════════════ */

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}