/*
Theme Name: My Informative Theme
Theme URI: http://example.com/my-informative-theme/
Author: Your Name
Author URI: http://example.com
Description: A custom WordPress theme based on an informative website template.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-informative-theme
*/

body {
    background-color: #333; /* Sötétszürke háttér */
    color: #f4f4f4;         /* Világos (majdnem fehér) szövegszín a kontraszt miatt */
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* --- Kétoszlopos Elrendezés --- */
.site-container {
    display: flex;
}

.sidebar {
    width: 250px; /* Az oldalsó menü szélessége */
    height: 100vh; /* Teljes magasság */
    flex-shrink: 0; /* Ne zsugorodjon */
}

.sidebar iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.page-content-wrapper {
    flex-grow: 1; /* Kitölti a maradék helyet */
    height: 100vh;
    overflow-y: auto; /* Csak ez a rész görgethető, ha kell */
}

/* --- Főoldal Gomb Stílus --- */
.fooldal-gomb {
    position: fixed;
    top: 1rem;
    right: 1rem; /* Jobbra igazítva */
    padding: 0.5rem 1rem;
    background-color: #b8860b; /* Sötét arany, mint a menü */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    z-index: 1000; /* Biztosan felül legyen */
    transition: background-color 0.3s;
    border: 1px solid steelblue; /* Metálkék keret */
}

.fooldal-gomb:hover {
    background-color: #daa520; /* Világosabb arany */
}

/* --- Fejléc Stílusok --- */
header {
    background-color: transparent;
    padding: 2rem 1rem 2rem 80px; /* Hely a logónak bal oldalon */
    text-align: center;
    position: relative; /* A logó abszolút pozicionálásához */
}

.header-logo {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%); /* Vertikális középre igazítás */
    height: 60px; /* Logó mérete */
    width: auto;
    z-index: 1;
}

header h1 {
    text-align: center;
    color: #fff;
    margin: 0;
}

/* --- Felső Navigációs Menü Stílusok --- */
.main-nav {
    background-color: #2b2b2b;
    padding: 1rem 0;
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-nav li {
    margin: 0.5rem;
}

.main-nav a {
    display: block;
    padding: 0.75rem 1.5rem;
    background-color: #b8860b;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.2s;
    border: 1px solid steelblue; /* Metálkék keret */
}

.main-nav a:hover {
    background-color: #daa520;
    transform: translateY(-2px);
}

/* --- Fő tartalom --- */
main {
    padding: 2rem;
}

/* --- Google Kereső Stílusok --- */
.search-container {
    text-align: center;
    margin-top: 3rem; /* Ízléses távolság a menü alatt */
    padding-bottom: 2rem; /* Távolság a következő tartalomtól */
}

.google-search-input {
    padding: 0.8rem;
    width: 300px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #444;
    color: #f4f4f4;
    font-size: 1rem;
}

.google-search-button {
    padding: 0.8rem 1.5rem;
    background-color: #4285F4; /* Google kék */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 0.5rem;
    transition: background-color 0.3s;
}

.google-search-button:hover {
    background-color: #357ae8;
}

/* --- Yandex Kereső Stílusok --- */
.yandex-search-container {
    margin-top: 1.5rem; /* Távolság a Google keresőtől */
}

.yandex-search-input {
    padding: 0.8rem;
    width: 300px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #444;
    color: #f4f4f4;
    font-size: 1rem;
}

.yandex-search-button {
    padding: 0.8rem 1.5rem;
    background-color: #FC3F1D; /* Yandex piros */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 0.5rem;
    transition: background-color 0.3s;
}

.yandex-search-button:hover {
    background-color: #e0381a;
}

/* --- DuckDuckGo Kereső Stílusok --- */
.duckduckgo-search-container {
    margin-top: 1.5rem; /* Távolság a Yandex keresőtől */
}

.duckduckgo-search-input {
    padding: 0.8rem;
    width: 300px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #444;
    color: #f4f4f4;
    font-size: 1rem;
}

.duckduckgo-search-button {
    padding: 0.8rem 1.5rem;
    background-color: #DA552F; /* DuckDuckGo narancs */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 0.5rem;
    transition: background-color 0.3s;
}

.duckduckgo-search-button:hover {
    background-color: #c74c2a;
}

.fixed-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #333; /* A sötétebb háttér a láblécnek */
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /* Egy kis árnyék a tetején */
    z-index: 1000; /* Biztosítja, hogy a lábléc felül legyen */
}

.footer-button {
    display: inline-block;
    background-color: gold; /* Arany szín */
    color: black; /* Fekete szöveg az arany gombon */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.footer-button:hover {
    background-color: darkgoldenrod; /* Sötétebb arany, ha fölé viszik az egeret */
}

@media (max-width: 768px) {
    /* Kétoszlopos elrendezés mobilra */
    .site-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto; /* Automatikus magasság mobil nézetben */
        order: 2; /* A sidebar a tartalom alá kerül */
    }

    .sidebar iframe {
        height: 200px; /* Fix magasság az iframe-nek mobil nézetben */
    }

    .page-content-wrapper {
        height: auto; /* Automatikus magasság mobil nézetben */
        order: 1; /* A tartalom felülre kerül */
    }

    /* Fejléc igazítása */
    header {
        padding: 1rem;
        text-align: center;
    }

    .header-logo {
        position: static;
        transform: none;
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 1.8rem;
    }

    /* Navigációs menü mobilra */
    .main-nav ul {
        flex-direction: column;
        align-items: center;
    }

    .main-nav li {
        margin: 0.5rem 0;
    }

    .main-nav a {
        width: 80%;
        text-align: center;
    }

    /* Keresőmezők mobilra */
    .google-search-input,
    .yandex-search-input,
    .duckduckgo-search-input {
        width: 80%;
    }

    .google-search-button,
    .yandex-search-button,
    .duckduckgo-search-button {
        margin-left: 0;
        margin-top: 10px;
        width: 80%;
    }

    /* Főoldal gomb mobilra */
    .fooldal-gomb {
        position: static;
        margin: 1rem auto;
        display: block;
        width: fit-content;
    }

    /* Lábléc gomb mobilra */
    .fixed-footer {
        position: static;
        padding-bottom: 10px;
    }
}

/* --- Oldalsó Menü Stíluslap --- */

/* A fő menü konténer */
#side-menu {
    width: 250px; /* A menü szélessége */
}

#side-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#side-menu li {
    position: relative; /* Ez a kulcsa az almenük pozicionálásának */
    margin-bottom: 8px; /* Távolság a menüpontok között */
}

#side-menu a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    background-color: #b8860b; /* Sötét arany */
    border: 1px solid steelblue; /* Metálkék keret */
    border-radius: 5px; /* Lekerekített sarkok */
}

/* Hover effektus a menüpontokon */
#side-menu a:hover {
    background-color: #daa520; /* Világosabb arany */
}

/* Jelzés, hogy egy menüpontnak van almenüje */
#side-menu .has-submenu > a::after {
    content: '»'; /* Jobbra mutató nyíl */
    float: right;
    font-size: 1.2em;
    line-height: 1;
}


/* --- Almenü Logika --- */

/* Alapból minden almenü rejtett */
#side-menu .submenu {
    display: none;
    position: absolute;
    left: 100%; /* A szülő elem jobb szélétől indul */
    top: 0;      /* A szülő elem tetejéhez igazítva */
    width: 250px; /* Azonos szélesség */
    background-color: #444; /* Eltérő háttér az almenüknek */
}

/* Megjelenítés, ha a szülő LI fölé visszük az egeret, VAGY ha aktív (kattintva) */
#side-menu li:hover > .submenu,
#side-menu li.submenu-active > .submenu {
    display: block;
}