/* BASE STYLES */
body h1,
body h2,
body h3 {
    font-size: 60px;

    background: var(--sx-color-gold);
    background: var(--sx-gradient-gold);
    -webkit-background-clip: text; /* Webkit böngészőknek (Chrome, Safari) */
    background-clip: text; /* Standard tulajdonság */
    color: transparent !important; /* A szöveg színe átlátszó, hogy a háttér gradient látszódjon */
}
body h1 { font-size: 60px; }
body h2 { font-size: 40px; margin-bottom: 10px; }
body h3 { font-size: 30px; line-height: 48px; }

body h4 {
    font-size: 20px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--sx-color-antracid);
}

li::marker { color: var(--sx-color-rose); }

body #page-container .et_pb_section a.et_pb_button.sx-button {
    background: var(--sx-gradient-gold);
    color: white;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 17px;
    font-weight: 300;
    padding: 8px 24px !important;
    border: 1px solid var(--sx-color-gold) !important;
    border-radius: 0px !important;
    height: 48px;
    min-width: 200px;
    text-align: center;
}
body #page-container .et_pb_section a.et_pb_button.sx-button:hover {
    border: 1px solid var(--sx-color-gold) !important;
    background: white;
    color: var(--sx-color-rose);
}

/* =============== HEADER =============== */
header {
    position: absolute;
    top: 0px;
    padding-top: 25px;
    z-index: 1000;
    width: 100%;
    background: transparent;
}

#top-menu-area .et_pb_row {
    width: 90%;
    max-width:90%;
}
#menu-top-menu li {
    margin-left:12px;
    position: relative;
    letter-spacing: 1px;
}
#menu-top-menu li a:hover {
    opacity: 1 !important;
}

#menu-top-menu li.current-menu-item a::after,
#menu-top-menu li a::after {
    content: unset;
    position: absolute;
    height: 2px;
    width: 100%;
    left: 0;
    top: unset !important;
    bottom: 18px;
    background: var(--sx-color-gold);
    background: var(--sx-gradient-gold);
}

#menu-top-menu li.current-menu-item a::after,
#menu-top-menu li a:hover::after {
    content: "";
}

#menu-top-menu li.menu-kapcsolat.current-menu-item a::after,
#menu-top-menu li.menu-kapcsolat a:hover::after {
    content: unset;
}

#menu-top-menu li.menu-kapcsolat a {
    border: 1px solid var(--sx-color-gold);
    padding: 18px;
    height: 20px;
    margin-top: 20px;
    background-color: transparent;
}
#menu-top-menu li.menu-kapcsolat a:hover {
    color: var(--sx-color-antracid) !important;
    background: var(--sx-color-gold);
    background: var(--sx-gradient-gold);
}
#menu-top-menu li.menu-kapcsolat a:hover::after {
    content: unset;
}

/* ---------- Sticky header ---------- */
header {
    transition: all 0.3s ease-in-out;
}

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Fontos, hogy a menü más elemek fölött legyen */
    background: rgba(0, 0, 0, 0.5) ;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    height: 100px;
    opacity: 1;
    padding-top: 0;
    animation: darkenHeader 1s ease forwards; /* Alapértelmezett animáció */
}
.sticky-header:hover {
    animation: darkenHeaderHover 1s ease forwards; /* Hover animáció */
}
@keyframes darkenHeaderHover {
    0% { height: 100px; opacity: .75; }
    100% { height: 130px; opacity: 1; }
}

@keyframes darkenHeader {
    0% { height: 130px; opacity: 1; }
    100% { height: 100px; opacity: .75; }
}

/* Példa a linkek színének megváltoztatására a sticky headerben */
.sticky-header #top-menu a {
    color: #333;
}



/* ---------- Mobil menü ------------ */
header .et_mobile_nav_menu {
    /*background: rgba(0,0,0,.2);*/
    /*background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 13%, rgba(0, 0, 0, 0.2) 87%, rgba(0, 0, 0, 0) 100%);*/
}



    /* ---------- Fejléc sáv ------------ */
.page-header-section:after {
    content: "";
    position: absolute;
    display: block;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    top: 100%;
    width: 100%;
    height: 0;

    background-image: url("/wp-content/uploads/epulo-row-bg.jpg");
    padding-bottom: 24.125%; /* EZ a képmagasság aránya a szélességhez */
}
.page-header-titles:after {
/*    content: unset;
    position: absolute;
    display: block;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    top: 100%;
    width: 100%;
    height: 0;*/
    /*
    Ezeket kell betenni az egyes konkrét elemeknél:

    background-image: url("/wp-content/uploads/epulo-row-bg.jpg");
    padding-bottom: 24.125%; // EZ a magasság arány a szélességhez
    */
}
section.page-header-titles .header-content {
    display: flex;
    flex-direction: column-reverse;
}

section.page-header-titles .header-content h1 {
    margin-top: 14px;
}









/* =============== HAMBURGER MENU - ikon animáció=============== */
/* Alap stílus a konténernek */
.mobile_menu_bar {
    display: inline-block;
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
}

/* Középső vonal (a tényleges span elem) */
.mobile_menu_bar .line.middle {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px; /* Vonal vastagsága */
    background-color: #e2c69b;
    top: 11px;
    transform: translateY(-50%);
    opacity: 1; /* Alapból látható */
    /* Visszafelé animáció: a végén jelenjen meg (0.8s után indul) */
    transition: opacity 0.4s ease-in-out 0.8s;
}

/* Felső és alsó vonalak (pseudo-elemek) */
.mobile_menu_bar::before,
.mobile_menu_bar::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px; /* Vonal vastagsága */
    background-color: #e2c69b;
    transform-origin: center; /* Forgatás középpontja */
    /* Visszafelé animáció:
       - Először forduljon vissza (transform: 0.6s, 0s delay)
       - Utána csússzon szét (top/bottom: 0.4s, 0.6s delay)
    */
    transition: transform 0.6s ease-in-out 0s,
    top 0.4s ease-in-out 0.6s,
    bottom 0.4s ease-in-out 0.6s;
}

/* Felső vonal alaphelyzete */
.mobile_menu_bar::before {
    top: 0;
    transform: rotate(0deg) translateY(0%); /* Alap transform */
}

/* Alsó vonal alaphelyzete */
.mobile_menu_bar::after {
    bottom: 0;
    transform: rotate(0deg) translateY(0%); /* Alap transform */
}

/* --- Animáció az "opened" class hozzáadásakor --- */

/* Középső vonal eltűnése (0.4s után indul) */
header .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar .line.middle {
    opacity: 0;
    /* Felülírjuk a késleltetést az előre animációhoz */
    transition-delay: 0.4s;
}

/* Felső/alsó vonal célpozíciója és forgatása */
header .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
header .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::after {
    /* Előre animáció időzítéseinek felülírása:
       - Először csússzon középre (top/bottom: 0.4s, 0s delay)
       - Utána forogjon el (transform: 0.6s, 0.8s delay)
    */
    transition: top 0.4s ease-in-out 0s,
    bottom 0.4s ease-in-out 0s,
    transform 0.6s ease-in-out 0.8s;
}

/* Felső vonal célpozíciója és forgatása */
header .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

/* Alsó vonal célpozíciója és forgatása */
header .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::after {
    bottom: 50%;
    /* Itt is kell a translateY a helyes forgatáshoz bottom: 50% esetén */
    transform: translateY(50%) rotate(-45deg);
}

/* Villogás animáció definiálása (csak előre kell) */
@keyframes flashColor {
    0% { background-color: #e2c69b; }
    50% { background-color: white; }
    100% { background-color: #e2c69b; }
}

/* Villogás alkalmazása a felső és alsó vonalra (csak előre) */
header .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
header .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::after {
    /* Az animáció nem transition, ez csak az .opened állapotban fut le */
    animation: flashColor 0.4s ease-in-out 0.4s; /* name duration timing-function delay */
}










/* =============== FOOTER =============== */


/* =============== PAGE: HOMEPAGE =============== */
.metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a::after {
    background: var(--sx-gradient-gold-vertical) !important;
}
.metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a {
    width: 80px !important;
    height: 80px !important;
    border-radius: 0px !important;
}
.metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a {
    background: rgba(255,255,255,0.25) !important;
}
.metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a:hover {
    background: rgba(255,255,255,0.35) !important;
}
.metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a::after {
     mask-size: 40px auto !important;
}
.metaslider .flex-direction-nav .flex-prev::after {
    mask-image: url("../images/arrow-left-svg.svg") !important;
}
.metaslider .flex-direction-nav .flex-next::after {
    mask-image: url("../images/arrow-right-svg.svg") !important;
}


.elonyeink_section .et_pb_main_blurb_image {
    margin-bottom: 10px !important;
}

/* ------- Képgaléria --------- */
.sx-galery::after {
    content: "";
    width: 120%;
    height: 4px;
    left: -10%;
    top: 50%;
    background: var(--sx-gradient-gold);
    position: absolute;
    z-index: -1;
}

footer .et_pb_fullwidth_menu .et_pb_menu__menu>nav>ul>li:last-child a {
    border: 1px solid var(--sx-color-gold);
    padding: 17px 12px;
    height: 20px;
    margin-top: 20px;
    background-color: transparent;
}


/* =============== PAGE: PROJEKT ================ */
#project-animation {
    display: none;
}




/* =============== PAGE: PARTNEREINK ================ */
.partners-content table,
.partners-content table td {
    border-width: 0 !important;
}
.partners-content table { margin-top: 30px !important;}



/* =============== PAGE: ROLUNK =============== */
.image-team-member .et_pb_image_wrap::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(0px,25px);
    width: 2px;
    height: 50px;
    background: var(--sx-gradient-gold);
    z-index: 5;
}


/* Default Styles (for larger screens - 1921px and up) */
/*  Styles applied here will be the base styles for all devices,
    and will be overridden by the media queries below as needed. */


/*  1920px Breakpoint and Below */
@media (max-width: 1920px) {
    /* Styles for screens 1920px wide and smaller */
}
@media only screen and (max-width: 1919px) and (min-width: 1600px) {

}


/* 1600px Breakpoint and Below */
@media (max-width: 1600px) {
    /* Styles for screens 1600px wide and smaller */
}


/* 990px Breakpoint and Below */
@media (max-width: 990px) {
    /* Styles for screens 990px wide and smaller */
}


/* 768px Breakpoint and Below */
@media (max-width: 768px) {
    body h1 { font-size: 48px; }
    body h2 { font-size: 36px; margin-bottom: 10px; }
    body h3 { font-size: 26px; line-height: 40px; }
    body h4 { font-size: 18px; line-height: 26px; }

    .partners-content table td {
        padding: 6px !important;
    }

    body.home header::before {
        content: "";
        height: 200px;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        background: linear-gradient(180deg,rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
        display: block;
        position: absolute;
        top: -30px;
    }
    body.home header.sticky-header::before {
        content: unset;
    }

}