/*
Theme Name: Saját Tehenes Sablon
Author: Dozsa Zrt.
Version: 1.0
*/

/* --- 1. GLOBÁLIS ALAPOK --- */
        *, *::before, *::after { box-sizing: border-box; }
        body, html { margin: 0; padding: 0; font-family: sans-serif; background-color: #f4f7f2; }
        
        /* Fejléc konténer */
        .header-row { 
            display: flex; 
            align-items: stretch; 
            background: white; 
            width: 100%;
            height: 180px; 
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* Logó sáv - Pontosan 25% széles */
        .logo-side { 
            width: 25%; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            padding: 10px; 
        }
            
        .logo-side img { 
            max-width: 85%;
            max-height: 80%; 
            width: auto;
            height: auto; 
        }
            
        /* Banner sáv - Pontosan 75% széles */
        .banner-side { 
            width: 75%; 
            height: 100%;
        }
            
        .banner-side img { 
            width: 100%; 
            height: 100%; 
            display: block;
            object-fit: cover; 
            object-position: 50% 20%; 
        }

        /* --- 2. MENÜ (ZÖLD SÁV) --- */
        .green-bar { 
            background-color: #7ab543; 
            padding: 0; 
            width: 100%;
        }

        /* Flex konténer a spacer + menü elrendezéshez */
        .green-bar-inner {
            display: flex;
            width: 100%;
        }

        /* Üres spacer — pontosan 25% széles, megegyezik a .logo-side szélességével,
           így a "Rólunk" gomb bal széle egybeesik a logó és a banner illesztésvonalával */
        .menu-spacer {
            min-width: 25%;
            flex-shrink: 0;
        }
        
        .green-bar ul { 
            list-style: none; 
            margin: 0; 
            padding: 0;
            display: flex; 
            justify-content: flex-start; 
        }
        
        .green-bar li { display: flex; }

        .green-bar a { 
            color: white; 
            text-decoration: none; 
            font-weight: bold; 
            text-transform: uppercase; 
            font-size: 14px; 
            display: block; 
            padding: 15px 30px;
            border-right: 1px solid rgba(255, 255, 255, 0.3);
            white-space: nowrap;
            transition: background 0.3s ease; 
        }

        /* Bal oldali elválasztó vonal az első gombhoz */
        .green-bar li:first-child a { 
            border-left: 1px solid rgba(255, 255, 255, 0.3); 
        }

        .green-bar a:hover { background-color: #6a9e3a; }

        /* --- 3. RESZPONZÍV JAVÍTÁSOK (MOBILRA) --- */
        
        @media (max-width: 768px) {
            /* A fejléc elemei egymás alá kerülnek */
            .header-row {
                flex-direction: column;
                height: auto;
            }

            .logo-side, .banner-side {
                width: 100%;
            }

            .banner-side img {
                height: 150px;
            }

            /* A MENÜ MOBILON: a flex-direction column lesz, spacer eltűnik */
            .green-bar-inner {
                flex-direction: column;
            }

            .menu-spacer {
                display: none;
            }

            .green-bar ul {
                flex-direction: column;
            }

            .green-bar a {
                width: 100%;
                text-align: center;
                border-right: none;
                border-left: none !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
        }

        /* Tartalom kártya modernizálása minden oldalon */
        .content-card {
            max-width: 950px;
            margin: 30px auto;
            background: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.06);
        }
        @media (max-width: 768px) {
            .content-card { margin: 15px; padding: 20px; }
        }