/* ZAWARTOŚĆ PLIKU /assets/css/styles.css */

@charset "UTF-8";


a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* ------------------------------------------
  BASE DEMO STYLES
--------------------------------------------- */

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  
}


  



/* ------------------------------------------
  NAVIGATION STYLES
  (+ responsive-nav.css file is loaded in the <head>)
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

.nav-collapse,
.nav-collapse * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  align: right;
}

.nav-collapse{
  list-style: none;
  width: 80%;
  float: right;
}
.nav-collapse ul {
	
  list-style: none;
  width: 100%;
  float: right;
   padding-top:0.5rem;
   margin-right:0px;
}

.nav-collapse li {
  float: left;
padding-left:20px;

  
}

@media screen and (min-width: 767px) {
  .nav-collapse li {
	width: auto;
	max-width:20%;
    *width: 24.9%; /* IE7 Hack */
    _width: 19%; /* IE6 Hack */
  }
}

.nav-collapse a {
  color: #fff;
  text-decoration: none;
  width: 100%;
  float: left;
    font-size: 1rem;
}

@media screen and (min-width: 767px) {
  .nav-collapse a {
  
    float: left;
    text-align: center;
        
  }
}

.nav-collapse ul ul a {
  
}

@media screen and (min-width: 767px) {
  .nav-collapse ul ul a {
    display: none;
  }
}


/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- 

@font-face {
  font-family: "responsivenav";
  src:url("../icons/responsivenav.eot");
  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.nav-toggle {
  position: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  text-indent: -999px;
  position: relative;
  overflow: hidden;
  width: 70px;
  height: 255px;
  float: right;
}

.nav-toggle:before {
  color: #f4421a; /* Edit this to change the icon color */
  font-family: "responsivenav", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 28px;
  text-transform: none;
  position: absolute;
  content: "≡";
  text-indent: 0;
  text-align: center;
  line-height: 255px;
  speak: none;
  width: 100%;
  top: 0;
  left: 0;
}

.nav-toggle.active::before {
  font-size: 24px;
  content:"x";
}

 ======================================================================================================================================================================================================================================================== */

/* ------------------------------------------
  NAV TOGGLE STYLES - ZMODYFIKOWANE
--------------------------------------------- */

@font-face {
  font-family: "responsivenav";
  src:url("../icons/responsivenav.eot");
  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Przycisk .nav-toggle generowany przez JS */
/* Zakładamy, że jest on wewnątrz header#header div#topm */
header#header div#topm a.nav-toggle { /* Dodana specyficzność dla kontekstu */
    display: none; /* Domyślnie ukryty - pokażemy go tylko na mobilnych przez @media */
    
    /* === KLUCZOWE ZMIANY === */
    width: 40px;        /* Bardziej standardowy rozmiar */
    height: 40px;       /* Bardziej standardowy rozmiar */
    line-height: 40px;  /* Aby wyśrodkować ikonę w pionie (jeśli :before nie jest flex) */
    background-color: #003f7b; /* Dodaj tło, aby był widoczny (kolor Twojego nagłówka) */
    color: white;       /* Kolor dla ikony (dziedziczony przez :before) */
    /* ======================= */

    float: right; /* Ustaw go po prawej stronie w #topm */
    margin-top: calc((3.5rem - 40px) / 2); /* Wyśrodkowanie w pionie względem nagłówka 3.5rem */
                                       /* Jeśli wysokość #header zmienia się na mobilnych, to trzeba dostosować */
    margin-right: 10px; /* Odstęp od prawej krawędzi */
    
    position: relative; /* Zachowujemy relative */
    overflow: hidden;   /* Można zostawić, ale zwykle niepotrzebne przy dobrych wymiarach */
    text-decoration: none;
    text-indent: -999px; /* Ukrywa tekst "Menu" */
    border-radius: 4px;
    cursor: pointer;
    z-index: 10002; /* Wyżej niż rozwijane menu */

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    user-select: none;
}

header#header div#topm a.nav-toggle:before {
    font-family: "responsivenav", sans-serif !important; 
    content: "≡"; 
    font-size: 24px; /* Dopasuj rozmiar ikony */
    color: inherit;  /* Dziedziczy 'color: white' z a.nav-toggle */
    
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Lepsze centrowanie ikony */
    align-items: center;
    justify-content: center;
    text-indent: 0; /* Pokaż ikonę */
    line-height: 1; /* Nie jest już potrzebne przy flex centrowaniu */
    speak: none; /* Zachowane z oryginału */
}

/* Stan aktywny przycisku (gdy menu otwarte, responsive-nav.js powinien dodać klasę .active) */
header#header div#topm a.nav-toggle.active::before {
  content: "x";
  font-size: 20px; /* Mniejszy rozmiar dla 'x' */
}








/* Basic */
.nav-collapse ul {  margin: 0;  padding: 0;  width: 100%;  display: block;  } /* To powoduje, że UL jest zawsze widoczny */
.nav-collapse li {  width: 100%;  display: block;}
.js .nav-collapse {clip: rect(0 0 0 0); position:relative;  display: block;  float:left;  overflow: hidden;  zoom: 1;} /* `float:left` i `clip` mogą być problematyczne */
.nav-collapse.opened {  max-height: 9999px;}
.nav-toggle { /* Style dla przycisku generowanego przez JS */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  user-select: none;
}
@media screen and (min-width: 767px) { 
    .js .nav-collapse {position: relative;}
    .js .nav-collapse.closed {max-height: none;} /* Używane do ukrywania na desktopie? Raczej nie. */
    .nav-toggle {display: none;} /* Ukryj toggle na desktopie - DOBRZE */
}

/* ======================================================================================================================================================================================================================================================== */


/* ================================================= */
/* === POPRAWKI DLA RESPONSIVE-NAV.JS MENU v8 - MINIMALNE === */
/* ================================================= */

/* --- Upewnij się, że #header i #topm mają kontekst pozycjonowania --- */
header#header {
    position: fixed; /* Z Twoich stylów */
    z-index: 10001;
    width: 100%;
    /* ... inne Twoje style dla #header ... */
}
header#header div#topm {
    position: relative; /* Ważne dla pozycjonowania absolutnego .nav-collapse */
    /* ... inne Twoje style dla #topm ... */
}


/* --- Style dla MOBILNYCH (max-width: 766px - breakpoint tuż przed desktopem) --- */
@media screen and (max-width: 766px) {

    /* 1. POKAŻ PRZYCISK HAMBURGERA (.nav-toggle) */
    header#header div#topm a.nav-toggle {
        display: block !important; /* Wymuś pokazanie - 'block' lub 'inline-block' */
        float: right; /* Ustaw po prawej */
        /* Możesz dodać tu podstawowe style dla przycisku, jeśli ich brakuje */
        padding: 0.5em;
        background-color: #003f7b; /* Przykładowe tło */
        margin: 0.5em 10px 0.5em 0; /* Odstęp od krawędzi */
        z-index: 10002; /* Na wierzchu */
    }
    header#header div#topm a.nav-toggle:before { /* Ikona */
        font-family: "FontAwesome" !important; 
        content: "\f0c9" !important;        
        font-size: 1.6rem !important;         
        color: white !important;              
        display: block !important;            
        line-height: 1 !important;
    }

    /* 2. UKRYJ DOMYŚLNIE KONTENER .nav-collapse */
    /* responsive-nav.js kontroluje otwieranie przez klasę .opened lub style inline max-height */
    header#header div#topm nav.nav-collapse {
        clear: both; /* Jeśli logo lub przycisk są floatowane */
        width: 100% !important;
        position: absolute !important; /* Aby rozwinęło się pod nagłówkiem */
        top: 100%; /* Pod #topm */
        left: 0;
        background-color: #0e4168; /* Tło dla otwartego menu */
        z-index: 10000;
        
        /* Domyślne ukrywanie - responsive-nav.js powinien to nadpisać przy otwieraniu */
        max-height: 0 !important;
        overflow: hidden !important; 
        transition: max-height 0.35s ease-out; /* Animacja */
        /* Usuń clip i float z oryginalnych stylów .js .nav-collapse, jeśli nadal tam są */
        clip: auto !important;
        float: none !important;
    }

    /* 3. STYL OTWARTEGO MENU (gdy .nav-collapse ma klasę .opened) */
    header#header div#topm nav.nav-collapse.opened {
        max-height: 80vh !important; /* Wystarczająca wysokość, aby pomieścić menu, np. 80% wysokości ekranu */
        overflow-y: auto !important; /* Scroll, jeśli menu jest dłuższe */
        border-top: 1px solid rgba(255,255,255,0.2); /* Dodaj border, gdy otwarte */
    }

    /* Style dla UL, LI, A wewnątrz OTWARTEGO menu (tak jak wcześniej) */
    header#header div#topm nav.nav-collapse.opened ul {
        display: block !important; width: 100% !important; margin: 0 !important; padding: 10px 0 !important; list-style: none !important;
    }
    header#header div#topm nav.nav-collapse.opened li {
        display: block !important; width: 100% !important; text-align: left !important;
    }
    header#header div#topm nav.nav-collapse.opened li a {
        display: block !important; padding: 12px 15px !important; color: #ffffff !important; text-decoration: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important; line-height: normal !important;
    }
    header#header div#topm nav.nav-collapse.opened li:last-child a {
        border-bottom: none !important;
    }
    header#header div#topm nav.nav-collapse.opened li a:hover {
        background-color: rgba(255,255,255,0.1) !important; color: #ce1b28 !important;
    }
}

/* --- Style dla DESKTOPU (min-width: 767px) --- */
/* Te style powinny być podobne do tych, które działały dla Ciebie na desktopie */
@media screen and (min-width: 767px) {
    header#header div#topm nav.nav-collapse {
        position: static !important; /* Zresetuj pozycjonowanie z mobilnego */
        float: right !important; 
        width: auto !important; 
        max-height: none !important; 
        overflow: visible !important;
        background-color: transparent !important;
        border-top: none !important;
        display: block !important; /* Upewnij się, że kontener jest widoczny */
    }

    header#header div#topm nav.nav-collapse ul {
        display: flex !important; 
        margin: 0; padding: 0; list-style: none;
        height: 3.5rem; /* Z Twoich stylów nagłówka */
        line-height: 3.5rem; /* Z Twoich stylów nagłówka */
        background-color: transparent !important;
        border: none !important;
        position: static !important;
        width: auto !important;
    }

    header#header div#topm nav.nav-collapse li {
        display: inline-block !important; 
        margin-left: 0.75em !important;
        width: auto !important; 
        background: none !important; border: none !important;
    }

    header#header div#topm nav.nav-collapse li a {
        display: block !important; 
        padding: 0 0.5em !important; 
        color: #ffffff !important;
        text-decoration: none !important;
        line-height: inherit !important; 
        background: none !important; border: none !important;
    }

    header#header div#topm nav.nav-collapse li a:hover {
        color: #ce1b28 !important; 
        background: none !important;
    }

    header#header div#topm a.nav-toggle {
        display: none !important; /* Ukryj przycisk na desktopie */
    }
}

/* ======================================================================================================================================================================================================================================================== 



/* W pliku /assets/css/styles.css */
@media screen and (max-width: 766px) {
    /* POKAŻ .nav-toggle */
    header#header div#topm a.nav-toggle {
        display: flex !important; /* Użyj flex do wyśrodkowania ikony wewnątrz przycisku */
        align-items: center;
        justify-content: center;
    }

    /* KONTENER .nav-collapse na mobilnych */
    /* Domyślnie ukryty przez max-height:0 z bloku "Basic" .js .nav-collapse */
    /* responsive-nav.js dodaje .opened lub manipuluje max-height */
    header#header div#topm nav.nav-collapse {
        clear: both; 
        width: 100% !important;
        position: absolute !important; 
        top: 100%; /* Pod #topm (zakładając, że #header/#topm ma zdefiniowaną wysokość) */
        left: 0;
        background-color: #0e4168; /* Tło dla CAŁEGO bloku menu */
        z-index: 10000;
        transition: max-height 0.35s ease-out; 
        border-top: 1px solid transparent; /* Border pojawi się gdy otwarte */
        /* Upewnij się, że nadpisujemy style z "Basic" .js .nav-collapse */
        clip: auto !important;
        float: none !important;
        /* max-height: 0; jest już w .js .nav-collapse */
        /* overflow: hidden; jest już w .js .nav-collapse */
    }

    /* Stan OTWARTY menu */
    header#header div#topm nav.nav-collapse.opened { /* .opened jest dodawane przez responsive-nav.js */
        max-height: calc(100vh - 3.5rem) !important; /* Wysokość ekranu minus nagłówek */
        overflow-y: auto !important; 
        border-top-color: rgba(255,255,255,0.2) !important;
    }

    /* Style dla UL, LI, A wewnątrz OTWARTEGO menu */
    header#header div#topm nav.nav-collapse.opened ul {
        display: block !important; width: 100% !important; margin: 0 !important; padding: 10px 0 !important; list-style: none !important;
        float: none !important; /* Nadpisz float z oryginalnych */
    }
    header#header div#topm nav.nav-collapse.opened li {
        display: block !important; width: 100% !important; text-align: left !important;
        float: none !important; padding-left: 0 !important; /* Nadpisz float i padding */
    }
    header#header div#topm nav.nav-collapse.opened li a {
        display: block !important; padding: 12px 15px !important; color: #ffffff !important; text-decoration: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important; line-height: normal !important;
        width: 100% !important; text-align: left !important; float: none !important; /* Nadpisz float i text-align */
    }
    header#header div#topm nav.nav-collapse.opened li:last-child a {
        border-bottom: none !important;
    }
    header#header div#topm nav.nav-collapse.opened li a:hover {
        background-color: rgba(255,255,255,0.1) !important; color: #ce1b28 !important;
    }
}