/* ===== Dark Navbar alap ===== */
body.dark-navbar .navbar {
    background: rgba(0, 0, 0, 1);
    box-shadow: none;
    transition: all 0.3s ease;
}

body.dark-navbar .navbar.shrink {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    transition: all 0.3s ease;
}

/* ===== Logók ===== */
body.dark-navbar .brand-logo {
    background: transparent;
    transition: all 0.3s ease;
}

body.dark-navbar .brand-logo-white {
    display: none;
}

body.dark-navbar .brand-logo-black {
    display: inline-block;
}

/* ===== Menü ikon + linkek ===== */
body.dark-navbar .menu-toggle .menu-icon,
body.dark-navbar .menu-icon span,
body.dark-navbar .navbar a {
    color: #fff;
    fill: #fff;
}

/* ===== Fekete overlay (projektek + topbar) ===== */
body.dark-navbar #topbarMenu,
body.dark-navbar #projectsOverlay {
    background-color: rgba(0, 0, 0, 0.96);
    color: #fff;
}

/* szövegek / linkek az overlayben */
body.dark-navbar #topbarMenu a,
body.dark-navbar #projectsOverlay a {
    color: #fff;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 400;
    transition: color 0.3s ease;
}

body.dark-navbar #topbarMenu a:hover,
body.dark-navbar #projectsOverlay a:hover {
    color: #fff;
    opacity: 0.9;
}

/* bezáró X ikon fehér */
body.dark-navbar #closeTopbar,
body.dark-navbar #closeProjects {
    color: #fff;
}

/* hamburger csíkok maradjanak fehérek hover/focus alatt is */
body.dark-navbar .menu-toggle .menu-icon span {
    background: #fff;
}

body.dark-navbar .menu-toggle:hover .menu-icon span,
body.dark-navbar .menu-toggle:focus .menu-icon span {
    background: #fff;
}

/* ===== Overlay linkek fixen fehérek minden állapotban ===== */
body.dark-navbar .overlay-nav a,
body.dark-navbar #topbarMenu a,
body.dark-navbar #projectsOverlay a {
    color: #fff;
    text-decoration: none;
}

body.dark-navbar .overlay-nav a:hover,
body.dark-navbar .overlay-nav a:focus,
body.dark-navbar .overlay-nav a:active,
body.dark-navbar .overlay-nav a:visited,
body.dark-navbar #topbarMenu a:hover,
body.dark-navbar #projectsOverlay a:hover,
body.dark-navbar #topbarMenu a:focus,
body.dark-navbar #projectsOverlay a:focus,
body.dark-navbar #topbarMenu a:active,
body.dark-navbar #projectsOverlay a:active,
body.dark-navbar #topbarMenu a:visited,
body.dark-navbar #projectsOverlay a:visited {
    color: #fff;
    opacity: 0.9;
}

/* A navbar színe scrollnál SE váltson */
body.dark-navbar .navbar,
body.dark-navbar .navbar.scrolled {
    background: rgba(0, 0, 0, 1);
}

/* ===== Dark mód: overlay + hamburger fix ===== */

/* Fekete overlay háttér a dark-navbar oldalakhoz */
body.dark-navbar .topbar-overlay {
    background: rgba(0, 0, 0, 0.97);
    color: #fff;
    backdrop-filter: blur(6px);
}

body.dark-navbar .topbar-overlay.open {
    background: rgba(0, 0, 0, 0.97);
}

/* A benne levő linkek mindig fehérek */
body.dark-navbar .topbar-overlay nav a {
    color: #fff;
    border: none;
    border-radius: 0;
    background: transparent;
}

body.dark-navbar .topbar-overlay nav a:hover {
    color: #ddd;
    background: transparent;
}

/* Bezáró X ikon is fehér */
body.dark-navbar .close-topbar {
    color: #fff;
    font-size: calc(var(--nav-height, 100px) * 0.40) !important;
    width: calc(var(--nav-height, 100px) * 0.40) !important;
    height: calc(var(--nav-height, 100px) * 0.40) !important;
    line-height: 1 !important;
}

/* Hamburger vonalak is mindig fehérek */
body.dark-navbar .menu-toggle .menu-icon {
    background: #fff;
}

/* Ne váltson színt scrollra */
body.dark-navbar .navbar.scrolled .menu-toggle .menu-icon {
    background: #fff;

}


/* ==== DARK NAV: biztos felülírások (style.css után töltődik) ==== */

/* Navbar: fix fekete, a logó fekete verziója látszódjon */
body.dark-navbar .navbar,
body.dark-navbar .navbar.scrolled {
    background: rgba(0, 0, 0, 1);
}

body.dark-navbar .brand-logo-white {
    opacity: 0;
}

body.dark-navbar .brand-logo-black {
    opacity: 1;
}

/* Hamburger csíkok legyenek mindig fehérek (scrollnál is) */
body.dark-navbar .menu-toggle .menu-icon,
body.dark-navbar .menu-toggle .menu-icon span {
    background: #fff;
}

body.dark-navbar .navbar.scrolled .menu-toggle .menu-icon,
body.dark-navbar .navbar.scrolled .menu-toggle .menu-icon span {
    background: #fff;
}

/* --- Topbar overlay: fekete háttér --- */
body.dark-navbar .topbar-overlay {
    background: rgba(0, 0, 0, 0.97);
    color: #fff;
    backdrop-filter: blur(6px);
}

body.dark-navbar .topbar-overlay.open {
    background: rgba(0, 0, 0, 0.97);
}

/* !!! A BENNE LÉVŐ NAV NE LEGYEN FEHÉR !!! */
body.dark-navbar .topbar-overlay nav {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--nav-gap);
    height: 100%;
    margin: 0;
    padding: 0 clamp(48px, 6vw, 72px) 0 0;
    height: var(--nav-height, 100px);
    width: 100%;
    background: transparent;
}

/* Linkek az overlayben: mindig fehér */
body.dark-navbar .topbar-overlay nav a {
    color: #fff;
}

body.dark-navbar .topbar-overlay nav a:hover,
body.dark-navbar .topbar-overlay nav a:focus,
body.dark-navbar .topbar-overlay nav a:active {
    color: #fff;
    opacity: .9;
}

/* Bezáró X is fehér */
body.dark-navbar .close-topbar {
    color: #fff;
}


/* ===== Overlay linkek (dark verzió finomhangolás) ===== */
body.dark-navbar .overlay-nav a,
body.dark-navbar #topbarMenu a,
body.dark-navbar #projectsOverlay a {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease;
}

/* Hover effekt — finom fehér maradjon, kis mozgással */
body.dark-navbar .overlay-nav a:hover,
body.dark-navbar #topbarMenu a:hover,
body.dark-navbar #projectsOverlay a:hover {
    color: #d4af37;
    /* aranyos árnyalat */
    transform: translateY(-2px);
}

/* Aktív vagy fókuszban lévő link */
body.dark-navbar .overlay-nav a:focus,
body.dark-navbar .overlay-nav a:active {
    color: #f1c40f;
    /* világosabb arany */
}

/* Ensure transform does not shift logo on dark navbar */
body.dark-navbar .brand-logo-black { transform: none; }
body.dark-navbar .navbar.overlay-open .brand-logo-white { display: inline-block; opacity: 1; z-index: 6001; }
body.dark-navbar .navbar.overlay-open .brand-logo-black { opacity: 0; }

/* Keep black logo visible even when navbar has .scrolled */
body.dark-navbar .navbar.scrolled .brand-logo-black { opacity: 1; }
body.dark-navbar .navbar.scrolled .brand-logo-white { opacity: 0; }