/* style.css - FINÁLNA VERZIA */



:root {

    --bg-color: #050a14; /* Veľmi tmavá modrá, takmer čierna */

    --text-color: #b0c4de; /* Jemná sivo-modrá pre bežný text */

    --accent-color: #00d4ff; /* Neónová svetlomodrá (cyan) */

    --secondary-accent: #ff00ff; /* Jemná ružová pre kontrast */

    --font-main: 'Courier New', Courier, monospace;

}



body {

    background-color: var(--bg-color);

    color: var(--text-color);

    font-family: var(--font-main);

    margin: 0;

    padding: 0;

    line-height: 1.6;

    display: flex;

    flex-direction: column;

    align-items: center;

    min-height: 100vh;

}



/* ---- Navigácia (pre podstránky) ---- */

nav {

    width: 100%;

    background: rgba(0, 20, 40, 0.8);

    padding: 20px 0;

    text-align: center;

    border-bottom: 1px solid var(--accent-color);

    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);

}



nav a {

    color: var(--text-color);

    text-decoration: none;

    margin: 0 15px;

    font-size: 1.1em;

    font-weight: bold;

    transition: color 0.3s, text-shadow 0.3s;

}



nav a:hover {

    color: var(--accent-color);

    text-shadow: 0 0 8px var(--accent-color);

}



/* ---- Hlavný kontajner ---- */

.container {

    max-width: 1200px;

    padding: 40px 20px;

    text-align: center;

    width: 100%;

    box-sizing: border-box;

}



/* ---- Nadpisy ---- */

h1 {

    font-size: 3em;

    color: var(--accent-color);

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-bottom: 0.2em;

    text-shadow: 0 0 10px var(--accent-color), 0 0 20px rgba(0, 212, 255, 0.5);

    animation: flicker 3s infinite alternate;

}



@keyframes flicker {

    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; text-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color); }

    20%, 24%, 55% { opacity: 0.8; text-shadow: none; }

}



h2 {

    font-size: 1.5em;

    color: #ffffff;

    margin-bottom: 2em;

    border-bottom: 2px solid var(--secondary-accent);

    display: inline-block;

    padding-bottom: 5px;

}



/* ---- Regionálne tlačidlá (na indexe) ---- */

.region-buttons {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 40px;

}



.region-btn {

    background: transparent;

    border: 2px solid var(--text-color);

    color: var(--text-color);

    padding: 15px 30px;

    font-family: var(--font-main);

    font-size: 1.2em;

    cursor: pointer;

    transition: all 0.3s;

    text-transform: uppercase;

    border-radius: 8px;

}



.region-btn:hover, .region-btn.active {

    border-color: var(--accent-color);

    color: var(--accent-color);

    box-shadow: 0 0 10px var(--accent-color);

    background: rgba(0, 212, 255, 0.1);

}



.hidden {

    display: none !important;

}



/* ---- Karty jazykov (Grid) ---- */

.lang-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

    width: 100%;

}



.lang-card {

    background: rgba(255, 255, 255, 0.05);

    border: 2px solid var(--text-color);

    padding: 30px 20px;

    border-radius: 12px;

    text-decoration: none;

    transition: all 0.3s ease;

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    overflow: hidden;

}



.lang-card:hover {

    border-color: var(--accent-color);

    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);

    transform: translateY(-5px);

    background: rgba(0, 212, 255, 0.1);

}



.flag {

    font-size: 3em;

    margin-bottom: 15px;

    filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));

}



/* ZMENA: Biela farba pre lepšiu čitateľnosť (bez žiarenia v základe) */

.lang-title {

    color: #ffffff; 

    font-size: 1.2em;

    font-weight: bold;

    margin-bottom: 10px;

    text-transform: uppercase;

    text-shadow: none; 

    transition: color 0.3s, text-shadow 0.3s;

}



/* ZMENA: Modrá + žiarenie len pri HOVER (nabehnutí myšou) */

.lang-card:hover .lang-title {

    color: var(--accent-color);

    text-shadow: 0 0 10px var(--accent-color);

}



.native-name {

    color: var(--text-color);

    font-size: 0.9em;

    opacity: 0.8;

}



/* Skratka jazyka (napr. SK, US) - Biela farba */

.lang-code {

    position: absolute;

    top: 10px;

    right: 15px;

    font-family: 'Courier New', monospace;

    font-weight: bold;

    font-size: 1.2em;

    color: #ffffff !important;

    opacity: 0.7;

    text-shadow: none;

}



.lang-card:hover .lang-code {

    opacity: 1;

}



/* ---- Ostatné prvky (Pre podstránky) ---- */

.intro-text {

    font-size: 1.2em;

    margin-bottom: 40px;

    border-left: 4px solid var(--accent-color);

    padding-left: 20px;

    text-align: left;

    background: rgba(0, 212, 255, 0.05);

}



/* Karty pre Prvú pomoc */

.help-cards {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

    margin-top: 30px;

}



.card {

    border: 1px solid var(--text-color);

    padding: 20px;

    width: 200px;

    border-radius: 8px;

    transition: transform 0.3s, box-shadow 0.3s;

    background: rgba(255, 255, 255, 0.05);

}



.card:hover {

    transform: translateY(-5px);

    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);

    border-color: var(--accent-color);

}



.card h3 {

    color: var(--secondary-accent);

}



/* Tlačidlo Neon */

.button-neon {

    display: inline-block;

    padding: 15px 30px;

    background-color: var(--bg-color);

    border: 2px solid var(--secondary-accent); 

    color: var(--secondary-accent); 

    text-transform: uppercase;

    font-size: 1.1em;

    letter-spacing: 0.1em;

    text-decoration: none;

    box-shadow: 0 0 5px var(--secondary-accent), 0 0 15px var(--secondary-accent);

    transition: all 0.3s;

    margin-top: 20px;

}



.button-neon:hover {

    background-color: var(--secondary-accent);

    color: var(--bg-color);

    box-shadow: 0 0 10px var(--secondary-accent), 0 0 40px var(--secondary-accent);

}



/* Pätička */

footer {

    margin-top: auto;

    padding: 20px;

    font-size: 0.8em;

    opacity: 0.7;

    text-align: center;

}



/* RTL podpora */

.rtl {

    direction: rtl;

}



/* --- OPRAVA FARIEB PRE KARTY --- */



/* 1. Zabezpečí, že všetky texty v karte sú biele (nie modré ako link) */

a.lang-card {

    color: #ffffff !important; 

}



/* 2. Špeciálna oprava pre Vlajky (písmená GB, SK, DE na Windowse) */

.flag {

    font-size: 3em;

    margin-bottom: 15px;

    color: #ffffff !important; /* Toto zmení tmavomodrú na bielu */

    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); /* Jemná biela žiara */

    text-decoration: none !important;

}



/* 3. Zabezpečenie, aby sa to nemenilo ani pri hoveri na škaredú modrú */

a.lang-card:hover .flag {

    color: #ffffff !important;

    filter: drop-shadow(0 0 15px var(--accent-color)); /* Pri nabehnutí sa rozžiari modro/kyanovo */

}



/* =========================================

   RESPONZÍVNY DIZAJN (PRE MOBILY)

   ========================================= */



@media (max-width: 768px) {

    

    /* 1. Menší nadpis na mobile */

    h1 {

        font-size: 1.8em; /* Zmenšené z 3em */

        margin-bottom: 0.5em;

    }



    h2 {

        font-size: 1.1em; /* Tiež zmenšený podnadpis */

    }



    /* 2. Skrytie nápovedy CTRL+F (na mobile to nedáva zmysel) */

    .search-hint {

        display: none !important;

    }



    /* 3. Úprava mriežky (Grid) na celú šírku */

    .lang-grid {

        grid-template-columns: 1fr; /* Jedna karta na riadok */

        gap: 15px; /* Menšie medzery */

    }



    /* 4. Úprava tlačidiel regiónov (aby boli pod sebou alebo menšie) */

    .region-buttons {

        gap: 10px;

    }

    

    .region-btn {

        padding: 10px 15px; /* Menšie tlačidlá */

        font-size: 1em;

        width: 100%; /* Na mobile roztiahnuté na celú šírku pre ľahšie klikanie */

    }



    .container {

        padding: 20px 15px; /* Menšie okraje po bokoch */

    }

}