/* =============================================================
   1. A MENÜ FORMÁZÁSA (Javított, videóbiztos verzió)
============================================================= */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 9999; /* 👈 Megemeltük a menü gyűjtődobozának alap rétegét */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10000; /* 👈 Az 1-es értéket átírtuk 10000-re, így minden videó elé ugrik */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}



/* =============================================================
   2. AZ ÚJ, TÁRHELYRE FELTÖLTÖTT ÁLLÓ VIDEÓK (Laptopos nézet)
============================================================= */
.video-fix-box {
    display: block !important;
    width: 360px !important;        /* Fix szélesség kényszerítése laptopon */
    max-width: 100% !important;
    margin: 25px 0 !important;      /* Csak alsó és felső margó */
    float: left !important;         /* Kivesszük a középre igazított folyamból és balra toljuk */
    background-color: #000000;
    border-radius: 6px;
    height: auto !important;
    overflow: visible !important;
}

.video-fix-box video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    position: relative;
    z-index: 999;
}

/* Kényszerített vezérlősávok a Chrome és Safari böngészőkhöz */
.video-fix-box video::-webkit-media-controls,
.video-fix-box video::-webkit-media-controls-panel {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Biztosítjuk, hogy az egymás után jövő videók és szövegek ne csússzanak egymás mellé a float miatt */
p, hr, h2, h3, div:not(.video-fix-box) {
    clear: both !important;
}



/* =============================================================
   3. A RÉGI, GOOGLE DRIVE-OS VIDEÓK (Átmeneti mentés)
============================================================= */
#video-container {
    max-width: 560px;
    margin: 20px auto;
}

.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    background-color: #000000;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* =============================================================
   4. HANGFELVÉTELEK OPTIMALIZÁLÁSA (Csak csúszka megjelenítése)
============================================================= */

.audio-fix-box {
    display: block !important;
    width: 100%;
    max-width: 360px;          /* Szép kompakt szélesség a lejátszónak */
    margin: 20px 0 !important; /* Fent/lent távolság, bal oldala nullázva */
    float: left !important;    /* Bal szélre igazítás kikényszerítése */
}

.audio-fix-box audio {
    width: 100% !important;    /* A csúszka kitölti a 360px-es keretet */
    display: block !important;
}


/* =============================================================
   5. TRANSZFORMÁTOR KÉPEK OPTIMALIZÁLÁSA (Végleges, biztonságos)
============================================================= */

/* A külső tároló doboz laptopos mérete */


/* 1. A kép körüli doboz mérete (asztalin fix, mobilra szűkülő) */
.kep-fix-box {
  width: 500px;        /* Asztali gépen ekkora (500px) méretben fognak megjelenni a képek */
  max-width: 100%;     /* Mobil kijelzőn automatikusan lecsökken a képernyő szélességére */
  margin: 15px auto;   /* Középre igazítja a képeket és tesz alájuk/föléjük egy kis térközt */
  display: block;
}

/* 2. A kép kényszerítése, hogy pontosan kövesse a fenti doboz méretét */
.kep-fix-box img {
  width: 100%;         /* Teljesen kitölti a doboz aktuális szélességét */
  height: auto;        /* Megtartja az eredeti méretarányt, nem torzítja el a képet */
  display: block;      /* Eltünteti a kép alatti felesleges minimális üres sávot */
}




/* =============================================================
   6. 📱 SZIGORÍTOTT MOBIL OPTIMALIZÁLÁS (A FÁJL LEGVÉGÉN)
============================================================= */
@media screen and (max-width: 480px) {
    /* 1. KÉNYSZERÍTJÜK A SZÖVEGEKET A JÓL OLVASHATÓ MOBIL MÉRETRE */
    body, p, td, span, div:not(.video-fix-box) {
        font-size: 16px !important; /* A mobil szabvány kényelmes méret */
        line-height: 1.5 !important;
        -webkit-text-size-adjust: 100% !important; /* Megakadályozza, hogy a Chrome önkényesen kicsinyítsen */
        text-size-adjust: 100% !important;
    }

    /* 2. A ZÖLD HÁZIKÓS MENÜ GOMB MOBIL MÉRETE */
    .dropbtn {
        padding: 12px 14px !important;
        font-size: 15px !important;
    }

    /* 3. A VIDEÓ DOBOZA FINOMAN IGAZODIK A MEGNÖVELT SZÖVEGHEZ */
    .video-fix-box {
        width: 65% !important; 
        max-width: 250px !important; 
        margin: 20px auto !important;
    }
    
    .video-fix-box video {
        width: 100% !important;
        height: auto !important;
    }
}