/* Base font size */
html { font-size: 18px; }

/* Variable Font Imports */
@font-face {
  font-family: 'Inter Italic';
  src: url('../font/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../font/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Variable Font Imports */
@font-face {
  font-family: 'PlayFair Italic';
  src: url('../font/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PlayFair';
  src: url('../font/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* CSS Variables */
:root {
  --color-text: #F1F1F0;
  --bg-color: #000;
  --transition-fast: 0.3s;
  --transition-menu: 0.6s ease;
  --basic-color: #888;
  --radius: 25px;

}

/* Reset & Base Styles */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--bg-color);
  font-weight: 300;
  font-family: 'Inter';
  line-height: 240%;
  font-size: 0.722rem;
}
img { max-width: 100%; height: auto; }
img.radius { border-radius: var(--radius) }

/* Focus & Selection */
:focus { outline: none; }
::selection, ::-moz-selection { color: #fff; background-color:  #888; }

a{
  color: var(--color-text);
  transition: .3s ease;
}
a:hover { color:  #888; transition: .3s ease; }

/* Inputs & Buttons */
input, button, select, textarea { outline: none; }

/* Headings Grouped */
h1, h2, h3, h4 {
  color: var(--color-text);
  font-family: "PlayFair";
  font-style: normal;
}
h1 { font-size: 3.333rem; line-height: normal; font-weight: 400;}
h2 { font-size: 2.222rem; line-height: normal; font-weight: 400;}
h3{ font-size: 1.667rem; line-height: normal; font-weight: 400; }
h4{ font-size: 0.778rem; line-height: normal; font-weight: 400; }

.border-bottom{
  border-bottom: 1px solid #F3F3F3;
}
.menu-item a{
  text-decoration: none;
}


.menu-list{
  list-style-type: none;
}

 #menu-menu-gorne .menu-item{
  font-size: 0.772rem;
  font-style: normal;
  font-weight: 400;
  margin-right: 0rem;

}

a img:hover{
  opacity:1;
  transition: var(--transition-fast);
}
a img{
  opacity:1;
  transition: var(--transition-fast);
}


.disclaimer {
  color: #f1f1f06b !important;
  font-family: "Inter";
  font-size: 0.71rem;
  line-height: 1.33rem;
}

.disclaimer a{
    color: #f1f1f06b !important;
}


.current_page_item a,
.current-page-ancestor a{
  color:var(--basic-color);
  padding-bottom: 14px;
}

#menu-menu-dolne .current_page_item a,
#menu-menu-dolne .current-page-ancestor a{
  color: inherit;
  padding-bottom: 0;
  border-bottom: none
}

.overlay-content ul{
  list-style-type: none;
  padding-left: 0;
}

/* Navigation */
.nav > li > a:hover, .nav > li > a:focus {
  background: none;
}

/* Overlay – tylko tło i filtr, reszta bez zmian */
.overlay {
  padding-top: 1vh;
  position: fixed;
  top: 0; right: 0;
  width: 0; height: 100%;
  /* półprzezroczysta przyciemniająca tła (jak w Twoim przykładzie) */
  background: rgba(0,0,0, 1);
  /* KLUCZ: dokładnie ten sam efekt co w przykładzie */
  backdrop-filter: url(#frosted);
  -webkit-backdrop-filter: url(#frosted);

  overflow-x: hidden;
  transition: width 0.5s;      /* doprecyzowane — tylko szerokość */
  z-index: 93;
  isolation: isolate;          /* poprawny backdrop */
  will-change: backdrop-filter; /* płynniejsza animacja skali */
  background-clip: padding-box; /* Safari – uniknięcie artefaktów krawędzi */
}

/* Bez zmian w .overlay-content */
.overlay-content {
  margin-top: 3vh;
  position: relative;
  width: 100%;
  text-align: center;
}

.mod-two_col_intro_cta__topdesc{
	letter-spacing: 0.3px;
}


.overlay a {
  display: block;
  font-family: 'PlayFair';
  padding: 0;
  font-size: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color:var( --color-text);
  transition:var(--transition-fast);
  line-height: normal;
  text-decoration: none;
  text-align: center;
}

.overlay-button a{
  padding: 0.8rem 2.4rem;
  color: #fff;
  background-color:var( --color-text);
  border: 1px solid #000;
  justify-content: center;
  display: flex;
  white-space: nowrap;
  width: 100%;
}

.nav {
  list-style-type: none;
  padding-left: 0;
}
.overlay .closebtn {
  position: absolute;
  top: 20px; right: 1.25rem;
  font-size: 60px;
}

.menu-bar input{
  display: none !important;
}


p{
	    
	letter-spacing: 0.3px;
}

#menu-menu-gorne {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  margin-top: auto;
  margin-bottom: auto;
}

#menu-menu-dolne li{
  color:var(--color-text);
  font-size: 0.722rem;
  font-style: normal;
  font-weight: 400;
  line-height: 300%; /* 35px */
}

#menu-menu-dolne{
  padding-left: 0;
  list-style: none;
}

/* Hamburger Menu */
.menu-bar {
  position: fixed;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px; height: 18px;
  cursor: pointer;
      transform: translateX(-30px);
}

.bar input{
  display: none !important;
}

.bar {
  width: 100%;
  height: 2px;
  background-color:var(--color-text);
  transition: transform var(--transition-fast) ease-in-out;
}
.menu-open .bar:first-child {
  transform: translateY(7px) rotate(45deg) !important;
  background-color:var(--color-text) !important;
}
.menu-open .bar:nth-child(2) {
display: none !important;
}
.menu-open .bar:last-child {
  transform: translateY(-9px) rotate(-45deg) !important;
  background-color:var(--color-text) !important;
}
.menu-bar.menu-open::before,
header.menu-open p,
header.menu-open .underline {
  color: #fff;
  transition: color var(--transition-menu);
}

.menu ul{
  display: flex;
  flex-direction: row;


}
/* gładka animacja logo w nagłówku */
header .logo-top{
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
}

/* ===== Moduł: heading_wysiwyg_narrow (BEM, lokalny scope) ===== */
.mod-heading_wysiwyg_narrow__content :where(p){
  margin-bottom: 2rem;
}
.mod-heading_wysiwyg_narrow__content :where(ul,ol){
  padding-left: 1.25rem;
  margin-bottom: 2rem;
}
.mod-heading_wysiwyg_narrow__content a{
  text-decoration: underline;
}
/* delikatny odstęp pod przyciskiem jeśli istnieje */
.mod-heading_wysiwyg_narrow__cta { margin-top: .25rem; }


/* ===== Moduł: two_images ===== */
.mod-two_images__figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0 !important;
}

.mod-two_images__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  
  transition: transform .6s ease; /* płynne przejście */
}

.mod-two_images__figure:hover .mod-two_images__img {
  transform: scale(1.05); /* delikatny zoom in */
}

/* ===== Moduł: image_single_center ===== */
.mod-image_single_center__figure{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.mod-image_single_center__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease; /* płynny efekt przy hoverze */
}

.mod-image_single_center__figure:hover .mod-image_single_center__img{
  transform: scale(1.05); /* delikatny zoom in */
}

/* >= sm: pełna szerokość, naturalne proporcje */
@media (min-width: 576px){
  .mod-image_single_center__figure{
    aspect-ratio: auto;
  }
  .mod-image_single_center__img{
    position: static;
    height: auto;
    transition: transform .6s ease;
  }
  .mod-image_single_center__figure:hover .mod-image_single_center__img{
    transform: scale(1.05);
  }
}

/* Od ≥576px: naturalna proporcja obrazka */
@media (min-width: 576px){
  .mod-two_images__figure { aspect-ratio: auto; }
  .mod-two_images__img { position: static; height: auto; transition: transform .6s ease; max-height: 600px; }
  .mod-two_images__figure:hover .mod-two_images__img { transform: scale(1.05); }
}

/* poniżej 768 px: podczas otwartego menu (header.menu-open) ukryj logo z delikatnym ruchem */
@media (max-width: 767.98px){
  header.menu-open .logo-top{
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
  }
}

.button-a{
  font-family: 'PlayFair';
  font-size: 0.778rem;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  /* gradient zamiast background-color */
  background: #fff;
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  transition: all .3s ease;
}

.button-a:hover{
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  color: #000;
}


/* .button-a::before {
  content: "";
  display: inline-block;
  width: 20px;           
  height: 1px;           
  margin-right: 10px;     
  vertical-align: middle;
  transition: width 0.3s ease;
  background-color: var(--color-text);
}

.button-a:hover::before {
  width: 30px;
}
.button-a:hover{
  color: var(--color-text);
} */


/* Underline Utility */
.underline {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

/* Gallery */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.gallery-item {
  width: 100%;
  margin-bottom: 1rem;
}


  /* Ustawiamy linki menu jako flex, tekst do lewej, ikonki do prawej */
  #myNav .overlay-content .nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }


  .faq-item {
    border-bottom: 1px solid #ddd;
    padding: 1rem 0;
  }

  .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    
  }
  .faq-question h3 {
    margin: 0;
    font-size: 0.778rem;
    font-weight: normal;
    line-height: 3rem;
  }
  .faq-toggle {
    font-size: 1.5rem;
    line-height: 1;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    transition: transform 0.3s ease;
  }
  /* UKRYWAMY przez max-height i opacity, a nie display */
  .faq-answer {
    font-size: 0.778rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0.5rem;
    line-height: 1.4;
    color: #555;
    transition: max-height 0.4s ease, opacity 0.4s ease;
  }
  /* Gdy aktywne – tekst stanie się widoczny */
  .faq-item.active .faq-answer {
    opacity: 1;
  }
  /* Obrót ikonki przy otwarciu */
  .faq-item.active .faq-toggle {
    transform: rotate(180deg); /* plus → „×” */
  }


.fancybox__toolbar__column button{
  display: none;
}
.fancybox__toolbar__column button:last-child{
  display: flex !important;
}



/* 1) Kontener overlay musi być relative, żeby pseudo-elementy mogły się pozycjonować względem niego */
.overlay-content {
  position: relative;
}

/* 2) Spraw, by linki miały pełną szerokość i padding tylko z lewej */
.overlay-content .menu-menu-gorne-container ul.menu li.menu-item > a {
  display: block;
  width: 100%;
  position: relative;
  text-align: center;
}



.overlay-content .menu-menu-gorne-container ul.menu li.menu-item.current_page_item a{
  font-weight: 700;
}

/* Header na hero (nad zdjęciem) */
.site-header.header-absolute {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: transparent; /* tło przezroczyste na zdjęciu */
}

/* Opcjonalnie: wyższy z-index dla overlay menu */
#myNav.overlay {
  z-index: 995;
}

/* Zapewnienie, że wewnętrzny układ Flex działa jak dotąd (masz już justify-content-between) */
.site-header .container .d-flex {
  width: 100%;
}

/* (Opcjonalnie) jeśli na mniejszych ekranach treść hero „wchodzi” pod header,
   dodaj górny padding do pierwszej sekcji z tłem/zdjęciem */
.hero, .first-section-with-photo {
  padding-top: clamp(72px, 8vw, 120px);
}



.mod-two_col_intro_cta__topdesc{
  font-size: 0.778rem;
  color: var(--basic-color);
  font-family: 'PlayFair';
}


footer a{
  text-decoration: none;
}


.header-relative h1{
  font-size: 2.222rem;
}

.contactButton{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.contactButton a{
  font-size: 1rem;
  text-decoration: none;
}

.contact p{
  line-height: 1.4rem;
}

.contactButton svg{
  margin-right: 1rem;
}

.contact a{
  text-underline-offset: 3px;
}

.wpcf7 label, .wpcf7 input, .wpcf7 textarea{
  width: 100%;
  background-color: transparent;
  color: var(--color-text);
  border: none;
  outline: none;
  font-size: 0.778rem !important;
}
.wpcf7 input, .wpcf7 textarea{
  padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.20);
position: relative;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: var(--color-text);
  opacity: 1; /* zapewnia pełną widoczność koloru */
   transition: opacity .3s ease;
}
.wpcf7 input:focus::placeholder {
 opacity: 0;
 transition: opacity .3s ease;
}

.button-b{
  width: auto !important;
  border-bottom: 1px solid var(--color-text) !important;
  display: inline-flex !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-text) !important;
  border-radius: 50px !important;
  padding: 8px 43px !important;
  margin-top: 20px;
  transition: .3s ease;
}

.button-b:hover{
background-color: #888;
transition: .3s ease;
border-color: #888 !important;
}

input[type="checkbox"] {
    transition: background-color 0.15s 
ease, border-color 0.15s 
ease;
}
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #8A8A8A;
    background-color: transparent;
    cursor: pointer;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
}
.wpcf7-acceptance input {
    width: 10px;
    padding: 0.4em;
    margin-right: 20px;
    margin-bottom: auto;
    margin-top: 4px;
}

input[type="checkbox"]:checked {
    background-color: #888;
}

.wpcf7-acceptance span{
  font-size: 0.667rem !important;
}




.wpcf7-response-output{
  display: none !important;
}

@media (min-width: 768px) {
  .gallery-item {
    flex: 0 0 calc((100% - 2rem) / 3);
  }
}
@media (max-width: 768px) {
  h1{
    font-size: 2.5rem;
  }
}
@media (max-width: 361px) {
  h1{
    font-size: 2rem;
  }
  .logo-top{
    max-width: 150px !important;
  }
  h2{
    font-size: 1.8rem;
  }

}

/* Container */
.container {
  padding: 0 1.5rem;
  /* jeśli potrzebujesz centrowania: margin: 0 auto; */
}

/* Duże monitory (1441px i więcej) */
@media (min-width: 1441px) {
  .container {
    max-width: 84rem;
  }
}

/* Ekrany od 1366px do 1440px – kontener zawsze 1240px */
@media (min-width: 1366px) and (max-width: 1440px) {
  .container {
    max-width: 1240px;
  }
}

/* Laptopy i mniejsze monitory (do 1365px) */
@media (max-width: 1365px) {
  .logo-top {
    max-width: 330px;
  }
  .container {
    max-width: 77.5rem;
    padding: 0 2rem;
  }
}

/* Typowe laptopy (do 1366px) */
@media (max-width: 1366px) {
  html {
    font-size: 18px;
  }
}

/* Tablety oraz małe laptopy i urządzenia w poziomie (do 1024px) */
@media (max-width: 1024px) {
  html {
    font-size: 15px;
  }
}

/* Tablety oraz małe laptopy w pionie (do 992px) */
@media (max-width: 992px) {
  .container {
    max-width: 66.68rem;
    padding: 0 1.5rem;
  }
}

/* Smartfony i małe urządzenia (do 576px) */
@media (max-width: 576px) {

  html {
    font-size: 14px;
  }
  .container {
    max-width: 42.54rem;
    padding: 0 1rem;
  }


}

/* Bardzo wąskie (do 360px) */
@media (max-width: 360px) {

}