html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
	
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

 
  a:link {COLOR: inherit; TEXT-DECORATION: none;}
  a:visited {COLOR: inherit; TEXT-DECORATION: none;}
  a:active {COLOR: inherit; TEXT-DECORATION: none;}
  a:hover {COLOR: inherit; TEXT-DECORATION: none;}


button { color: #1b1b1b; }



body {
	color: #402B26;
	font-size: 22px;
	line-height: 1.4; 
	font-weight: 400;
  font-family: "neue-haas-grotesk-text", sans-serif;
  min-height: 100vh;
  overflow: visible;
  background: #DCD5B9;


}


html{margin-top: 0px !important;}
em { font-style: italic; }

ul{ margin: 15px 0 25px; list-style: none; margin-left: 30px }
ul li{ margin-left: 0px; padding-left: 25px; margin-bottom: 10px; position: relative; }
strong { font-weight: 600 }
p a { text-decoration: underline !important}

html.js [class*="anim-"] {
  opacity: 0;
  will-change: transform, opacity;
}

.anim-scale, .anim-scale-max, .anim-zoom, .anim-zoom2 {
  transform: scale(0.8);
}

.anim-left, .anim-left2 { transform: translateX(-30px); }
.anim-right, .anim-right2 { transform: translateX(30px); }
.anim-top, .anim-top2 { transform: translateY(-30px); }
.anim-bottom, .anim-bottom2 { transform: translateY(30px); }

[class*="anim-"] {
  opacity: 0;
}


:root {
  --edge-height: 4vw; 
}


html {
  scroll-behavior: smooth;
}


#wpadminbar { display: none; }
.all { overflow: hidden; }

/* menu */



.navbar { position: fixed; top: 0; left: 0; width: 100%;  z-index: 1000; }
.navbar-wrapper { display: flex; align-items: center; justify-content: space-between; max-width: 1600px; margin: 0 auto; padding: 0 20px;}
.nav-logo { flex-shrink: 0; z-index: 1001; }
.nav-links { display: flex; flex: 1; gap: 30px;  justify-content: space-between;}
.left-links { padding-right: 120px; }
.right-links { padding-left: 120px; }
.nav-links a { text-decoration: none; transition: color 0.3s ease; color: #DCD5B9; font-size: 20px; text-transform: uppercase; font-weight: 500}
.menu-social a { transition: transform 0.2s ease}
.menu-social a:hover { transform: scale(1.2); }
.hamburger { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; }
.hamburger span { width: 100%; height: 3px; background-color: #DCD5B9; border-radius: 5px; transition: all 0.3s ease;}

/* Animacja hamburgera w krzyżyk (klasa dodawana przez JS) */
.hamburger.is-active span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}

/* POPRAWKA DLA MOBILNEGO CHROME: */
.hamburger.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0); /* Zmusza GPU do pracy i kurczy linię do zera */
}

.hamburger.is-active span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}

.mobile-menu { display: none;flex-direction: column;
  background-color: #DCD5B9;
  width: 90%;
  position: absolute;
  top: 120px;
  left: 5%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 36px;
  min-height: 60vh;
  padding: 40px;

}
.mobile-menu a { padding: 20px; text-align: center; text-decoration: none; font-weight: 500; text-transform: uppercase;}
.mobile-menu.active { display: flex; }
.menu-social .social-link svg {  fill: #DCD5B9; }
.menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(64, 43, 38, 0.4); /* Półprzezroczysty brąz dopasowany do Twojego koloru tekstu */
        backdrop-filter: blur(8px); /* Magia rozmycia */
        -webkit-backdrop-filter: blur(8px); /* Wsparcie dla Safari */
        z-index: 999; /* Pod menu, ale nad resztą strony */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    /* Klasa aktywująca aplę */
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Zabezpieczenie z-indexów, żeby menu było nad aplą */
    .mobile-menu {
        z-index: 1000;
    }
    
    .navbar-wrapper {
        position: relative;
        z-index: 1001; /* Żeby logo i hamburger były zawsze klikalne nad aplą */
    }

.navbar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%;  
    z-index: 1000;
    padding-bottom: 60px; /* Wysokość dopasowana pod teksty i miękkie wygaszenie */
    
    --nav-bg-opacity: 0; 
}

/* WARSTWA 1: Mocniejsze rozmycie i kolor u samej góry, szybko wygaszane */
.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    pointer-events: none;
    
    background: linear-gradient(
        to bottom, 
        rgba(64, 43, 38, 0.95) 0%, 
        rgba(64, 43, 38, 0.4) 45%, 
        rgba(64, 43, 38, 0) 85%
    );
    
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 65%);
    mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 65%);
    
    opacity: var(--nav-bg-opacity);
}

/* WARSTWA 2: Słabsze rozmycie (uzupełniające), ale ciągnące się niżej, 
   żeby "rozpędzić" krawędź i zlikwidować odcięcie */
.navbar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Pod warstwą before */
    pointer-events: none;
    
    background: linear-gradient(
        to bottom, 
        rgba(64, 43, 38, 0.4) 0%, 
        rgba(64, 43, 38, 0.1) 40%, 
        rgba(64, 43, 38, 0) 90%
    );
    
    backdrop-filter: blur(6px); /* Słabszy blur, który miękko kończy przejście */
    -webkit-backdrop-filter: blur(6px);
    
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 95%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 95%);
    
    opacity: var(--nav-bg-opacity);
}
/* Klasa dodawana przez JS po scrollu strony */
.navbar.scrolled {
    /* Trzystopniowy gradient dla uzyskania maksymalnie miękkiego przejścia */
    background: linear-gradient(
        to bottom, 
        rgba(64, 43, 38, 0.9) 0%,    /* Ciemno u samej góry ekranu */
        rgba(64, 43, 38, 0.5) 60%,   /* Delikatny cień pod napisami */
        rgba(64, 43, 38, 0) 100%     /* Płynne wygaszenie do zera */
    );
    
    /* Opcjonalnie: możemy lekko zwiększyć dolny padding paska po scrollu, 
       żeby gradient "odjechał" niżej i dał napisom więcej oddechu */
    padding-bottom: 25px; 
}

.menu-social { display: flex; gap: 20px; justify-content: flex-end; align-content: center; }

.menu-item { position: relative; display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; font-weight: bold; padding-bottom: 20px; }
.underline-wrapper { position: absolute; bottom: -30px; width: 110px; display: flex; justify-content: center; pointer-events: none; }

.video-section { position: relative; width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center;  padding-top: 100px; padding-bottom: 20px;}
.bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(50, 50, 50, 0.4); z-index: -1;}
.video-content { z-index: 1; text-align: center; padding: 20px;}
.video-content .tytul { width: 1200px; }
.video-content .tytul svg { max-width: 100%; height: auto; max-height: 60vh; object-fit: contain;}

a.btn-zobacz { color: #DCD5B9; text-transform: uppercase; font-size: 22px; display: flex; flex-direction: column; width: 213px; margin: auto; margin-top: -35px; }

.container { width: 900px; margin: auto; }
.trasa { padding-top: 150px; position: relative; padding-bottom: 100px }
.trasa-naglowek { width: 610px; margin: auto; display: block; }
.trasa-ornament { width: 680px; margin: auto; margin-top: 20px; display: block; margin-bottom: 100px; }
.klucze { position: absolute; top: 400px; right: 80px; }
.paw {  position: absolute; bottom: 80px; left: 80px; }
.klucze img, .paw img { width: 100%; display: block; }
.koncerty-miesiac { padding-left: 220px; position: relative; margin-bottom: 100px; padding-right: 100px; }
.koncerty-flex { display: flex; align-items: center; font-weight: 500; margin-bottom: 20px; font-weight: 700 }
.koncerty-data { font-size: 18px; flex: 0 0 120px;  }
.koncerty-miejsce { text-transform: uppercase; }
.old .koncerty-data, .old .koncerty-miejsce { opacity: 0.4 }
.koncerty-czerwiec { position: absolute; left: 0; top: 0; width: 146px; }
.koncerty-lipiec { position: absolute; left: 45px; top: 0; width: 102px; }
.koncerty-sierpien { position: absolute; left: -9px; top: 0; width: 158px; }

.miesiac-ornament { content: ""; width: 122px; height: 46px; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); background: url(../img/miesiac-ornament.svg); background-size: cover; }
.koncerty-lipiec .miesiac-ornament  { bottom: 14px;  }
.koncerty-sierpien .miesiac-ornament  { bottom: 16px;  }


footer { font-size: 20px; text-align: center; padding-bottom: 50px; position: relative; }
footer .container { width: 500px; }
footer span { font-size: 16px; display: block; text-align: center; margin-top: 20px; }
footer span a { text-decoration: underline !important; }

/* Ukrycie popupu jako domyślny stan */
.video-popup-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(220,213,185,0.9); /* Ciemne, półprzezroczyste tło */
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Klasa dodawana przez JS, by pokazać popup */
.video-popup-overlay.active {
    display: flex;
}

/* Główny kontener wideo */
.video-popup-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    background: rgba(220,213,185,0.5);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Przycisk zamknięcia */
.video-popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #402B26; /* Dopasowałem do koloru Twojego buttona */
    font-size: 65px;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s;
}

.video-popup-close:hover {
    transform: scale(1.1);
}

/* Responsywne proporcje 16:9 */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Magiczna wartość dla 16:9 */
    height: 0;
    overflow: hidden;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.player1 { position: absolute;top: -10px; left: -17px; z-index: 1 }
.player2 { position: absolute; bottom: -100px; right: 50px; z-index: 1 }



.error404 { background: #402B26; color: #DCD5B9; width: 100%; min-height: 100vh }
.error404 .paw { display: none; }
.page_404 { min-height: 100vh; padding-top: 300px; text-align: center;  }
.page_404 .title { font-size: 120px;  }