/* ═══════════════════════════════════════════════════════════
   MLV-multi Lingua Voice - Nyelvtanuló Program
   style.css - Teljes stíluslap
   Verzió: 4.0.0
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   CSS VÁLTOZÓK - SZÍNEK (szöveges leírás alapján)
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Alapszínek */
    --bg-main: #F6F7F9;              /* Oldal háttér (törtfehér) */
    --text-main: #1F2937;            /* Szöveg szín (sötét grafitszürke) */
    --text-light: #374151;           /* Világosabb szöveg */
    --text-medium: #4B5563;          /* Közép szöveg */
    
    /* Gomb színek - Lila (Akadálymentesség) */
    --btn-lila-bg: #6D28D9;          /* Mély lila */
    --btn-lila-border: #4C1D95;      /* Sötét lila keret */
    --btn-lila-text: #F3F4F6;        /* Törtfehér szöveg */
    
    /* Gomb színek - Kék (F1-F6) */
    --btn-kek-bg: #2563EB;           /* Elegáns kék */
    --btn-kek-border: #1D4ED8;       /* Sötétebb kék keret */
    --btn-kek-text: #F3F4F6;         /* Törtfehér szöveg */
    
    /* Gomb színek - Szürke (Alsó sáv) */
    --btn-szurke-bg: #374151;        /* Sötétszürke */
    --btn-szurke-border: #111827;    /* Nagyon sötét szürke keret */
    --btn-szurke-text: #F3F4F6;      /* Törtfehér szöveg */
    
    /* Fejléc/lábléc */
    --header-bg: #FFFFFF;            /* Fehér */
    --header-border: #CBD5E1;        /* Világos szürkés-kék */
    --footer-bg: #FFFFFF;            /* Fehér */
    --footer-border: #CBD5E1;        /* Világos szürkés-kék */
    
    /* Méretek */
    --header-height: 20mm;
    --footer-height: 20mm;
    --btn-height: 15mm;
    --btn-max-width: 120mm;
    --btn-border-radius: 4mm;
    --btn-border-width: 2mm;
    --btn-gap: 6mm;
}

/* ═══════════════════════════════════════════════════════════
   ALAP RESET
   ═══════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════
   FELSŐ SÁV (20mm)
   ═══════════════════════════════════════════════════════════ */

.top-bar {
    height: var(--header-height);
    background: var(--header-bg);
    border-bottom: 2px solid var(--header-border);
    display: flex;
    align-items: center;
    padding: 0 8mm;
}

.top-bar-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left {
    display: flex;
    flex-direction: column;
    gap: 1mm;
}

.program-name {
    font-size: 8mm;
    font-weight: bold;
    color: var(--text-main);
    line-height: 1;
}

.program-subtitle {
    font-size: 6mm;
    font-weight: 600;
    color: var(--text-light);
    line-height: 1;
}

.top-bar-right {
    display: flex;
    align-items: center;
}

.version {
    font-size: 6mm;
    color: var(--text-medium);
}

/* ═══════════════════════════════════════════════════════════
   KÖZÉPSŐ TARTALOM (170mm)
   ═══════════════════════════════════════════════════════════ */

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8mm;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════
   ALSÓ SÁV (20mm)
   ═══════════════════════════════════════════════════════════ */

.bottom-bar {
    /* Rugalmas: ha hosszú feliratú gombok vannak, a sáv nőhessen */
    height: auto;
    min-height: var(--footer-height);
    background: var(--footer-bg);
    border-top: 2px solid var(--footer-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-bar-content {
    display: flex;
    gap: var(--btn-gap);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   STANDARD GOMB (minden gombnál azonos)
   ═══════════════════════════════════════════════════════════ */

.btn {
    /* Rugalmas magasság: hosszú feliratok / emoji + szöveg esetén ne lógjon ki */
    height: auto;
    min-height: var(--btn-height);
    max-width: var(--btn-max-width);
    padding: 3mm 8mm;
    font-size: 8mm;
    font-weight: 600;
    border-radius: var(--btn-border-radius);
    border-width: var(--btn-border-width);
    border-style: solid;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2mm 4mm rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    /* Ha hosszú a szöveg, inkább törjön, mint hogy kilógjon */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Hover állapot */
.btn:hover {
    transform: scale(1.10);
    box-shadow: 0 4mm 8mm rgba(0, 0, 0, 0.2);
}

/* Active állapot */
.btn:active {
    transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════
   GOMB SZÍNEK
   ═══════════════════════════════════════════════════════════ */

/* Lila - Akadálymentesség */
.btn-akadalymentesseg {
    background: var(--btn-lila-bg);
    border-color: var(--btn-lila-border);
    color: var(--btn-lila-text);
}

/* Kék - Főgombok F1-F6 */
.btn-main {
    background: var(--btn-kek-bg);
    border-color: var(--btn-kek-border);
    color: var(--btn-kek-text);
}

/* Szürke - Alsó sáv gombok */
.btn-bottom {
    background: var(--btn-szurke-bg);
    border-color: var(--btn-szurke-border);
    color: var(--btn-szurke-text);
}

/* ═══════════════════════════════════════════════════════════
   FŐOLDAL GOMB ELRENDEZÉS
   ═══════════════════════════════════════════════════════════ */

.fooldal-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 10mm;
}

.fooldal-gombok {
    display: flex;
    flex-direction: column;
    gap: var(--btn-gap);
    width: 100%;
    max-width: var(--btn-max-width);
}

.fooldal-gombok .btn {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   TÉMAKÖR LISTA (F2/F3)
   ═══════════════════════════════════════════════════════════ */

.temakor-container {
    width: 100%;
    max-width: 240mm;
    margin: 0 auto;
}

.temakor-header {
    display: flex;
    justify-content: center;
    gap: var(--btn-gap);
    margin-bottom: 8mm;
}

.temakor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--btn-gap);
    margin-bottom: 8mm;
}

.temakor-grid .btn {
    width: 100%;
    min-height: var(--btn-height);
    height: auto;
}

/* ═══════════════════════════════════════════════════════════
   UNIVERZÁLIS FELÜLET
   ═══════════════════════════════════════════════════════════ */

.univerzalis-container {
    width: 100%;
    max-width: 240mm;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8mm;
}

.univerzalis-header {
    height: 16mm;
    background: var(--header-bg);
    border-bottom: 2px solid var(--header-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8mm;
    font-weight: 600;
    padding: 0 8mm;
}

.kategoria-gombok {
    display: flex;
    gap: var(--btn-gap);
    justify-content: center;
    flex-wrap: wrap;
}

.kategoria-gombok .btn {
    /* A feliratok hossza változó, ne legyen fix szélesség */
    width: auto;
    min-width: 60mm;
    flex: 1 1 60mm;
}

/* F4 módválasztó gombok (Standard / Párbeszéd) – emoji + szöveg miatt legyen stabilabb */
.mod-btn {
    min-height: calc(var(--btn-height) + 5mm);
}

/* Hosszú funkciógomb a gyakorló felületen */
#teljes-btn {
    min-height: calc(var(--btn-height) + 7mm);
}

.szovegmezo-container {
    display: flex;
    gap: var(--btn-gap);
}

.szovegmezo-bal, .szovegmezo-jobb {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4mm;
}

.szovegmezo {
    min-height: 16mm;
    padding: 4mm;
    background: white;
    border: 2px solid var(--header-border);
    border-radius: 4mm;
    font-size: 8mm;
    line-height: 1.4;
}

.gombok-also {
    display: flex;
    gap: var(--btn-gap);
    justify-content: space-between;
}

.gombok-also-bal, .gombok-also-jobb {
    display: flex;
    flex-direction: column;
    gap: var(--btn-gap);
}

/* ═══════════════════════════════════════════════════════════
   REJTETT ELEMEK (funkciónként)
   ═══════════════════════════════════════════════════════════ */

.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   AKADÁLYMENTESSÉG - VIZUÁLIS ELEMEK
   ═══════════════════════════════════════════════════════════ */

/* EMOJI-K: JavaScript kezeli a szövegből való eltávolítást */

/* ZÁSZLÓK REJTÉSE ÉS SZÖVEGRE CSERÉLÉSE */
body.flags-hidden .zaszlo {
    font-size: 0 !important;
    display: inline-block;
}

body.flags-hidden .zaszlo::after {
    font-size: 7mm !important;
    font-weight: bold;
    display: inline-block;
}

body.flags-hidden .szovegmezo-bal .zaszlo::after {
    content: 'Angol' !important;
}

body.flags-hidden .szovegmezo-jobb .zaszlo::after {
    content: 'Magyar' !important;
}