/*
Theme Name: CaliforniaHotel
Author: Krzysztof Król
Version: 1.0
Description: Theme for camper rental website
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
html {
	font-size: 10px;
	scroll-behavior: smooth;
}
*{
box-sizing:border-box;
}
body{
	  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    margin:0;
    background:#fafbf9;
	color: #2b2b2b;
		font-size: 1.6rem;
}

.container{
    max-width:120rem;
    margin:auto;
    padding:0;
}

header{
background:#fff;
color:#2b2b2b;
height:10rem;
position:fixed;
top:0;
left:0;
right:0;
width:100%;
z-index:100;
}

header a{
color: #000;
  text-decoration: none;
  margin-left: 2.7rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.4rem;
  text-transform: uppercase;
}


/* Można też dodać efekt hover dla aktywnej strony */
.menu .current_page_item > a:hover {
    color: #d9b46f;
}
.menu > a:hover {
    color: #d9b46f;
}


.menu .current_page_item > a {
    position: relative; /* konieczne, żeby ::after było względem linku */
    color: #2f5d3a;
  font-weight: 600;
}

.menu .current_page_item > a::after {
content: '';
  position: absolute;
  left: 50%;
  bottom: -1rem;
  transform: translateX(-50%);
  width: 50%;
  height: 0.2rem;
  background-color: #d9b46f;
}
.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0 0 0 14rem;
  padding: 0;
}
.menu li {
  margin: 0 0;
  display: inline-flex;
  padding: 0 0;
  position: relative;
  height: auto;
}
.menuleft {
width: 24rem;
  float: left;
  padding: 2.4rem 0 0 0;
}
.menuleft a {
  margin: 0;
}
.menuleft img {
  width: 23.3rem;
  height: auto;
}
.menuright {
  width: calc(100% - 24rem);
  float: left;
}
.menuright .menu-menu-1-container {
  float: right;
}
.menuright ul {
width: 100%;
  margin: 0;
  padding: 4.1rem 0 0 0;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(28rem,1fr));
    gap:3rem;
}

.card{
    background:white;
    border-radius:1.2rem;
    overflow:hidden;
    box-shadow:0 1rem 2.5rem rgba(0,0,0,0.08);
}

.card img{
    width:100%;
    height:22rem;
    object-fit:cover;
}

.card h3{
    padding:2rem;
}

.sidebar{
    margin-top:4rem;
}

.widget{
    background:white;
    padding:2rem;
    margin-bottom:2rem;
    border-radius:1rem;
}
.hero{
margin: 10rem auto 10rem auto;
  text-align: center;
  background-image: url("images/top.jpg");
  background-repeat: no-repeat;
  background-size: 192rem;
  background-position: center bottom;
  height: 54.4rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;
  max-width: 192rem;
}
.nasze-kampery .hero{
  background-image: url("images/top-kampery.jpg");
}
.galeria .hero {
  background-image: url("images/top-galeria.jpg");
}
.dostepnosc-i-rezerwacja .hero {
  background-image: url("images/top-dostepnosc-i-rezerwacja.jpg");
}
.akcesoria .hero {
  background-image: url("images/top-akcesoria.jpg");
}
.video .hero {
  background-image: url("images/top-video.jpg");
}
.kontakt .hero {
  background-image: url("images/top-kontakt.jpg");
}
.hero .container {
max-width: 120rem;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 0 3rem;
  box-sizing: border-box;
}
.hero-widget {
  background-color: rgba(255, 255, 255, 0.88);
  padding: 6rem;
  margin: 0;
  border-radius: 2.8rem;
  width: 42rem;
  box-shadow: 0 1.4rem 3.6rem rgba(0, 0, 0, 0.06);
}
.hero-widget p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #2b2b2b;
  font-size: 1.4rem;
  line-height: 3.6rem;
  text-align: left;
}
.hero-widget p strong {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color: #2f5d3a;
}

.full {
  width: 100%;
  display: flex;
}
.full .left {
width: 50%;
  display: inline-block;
  padding: 0 3rem;
}
.full .right {
width: 50%;
  display: inline-block;
  padding: 0 3rem;
}
.full h2 {
font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-size: 3.6rem;
  text-align: center;
  margin: 6rem auto 6rem auto;
  color: #2f5d3a;
  letter-spacing: -0.2rem;
  line-height: 3.6rem;
}
.full h3 {
font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color: #2f5d3a;
  font-size: 1.7rem;
  line-height: 3rem;
  margin: 0;
  padding: 0;
}
.full p {
	font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #2b2b2b;
  font-size: 1.6rem;
  line-height: 2.4rem;
}
.full p strong {
  font-weight: 600;
}
.full h1 {
font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-size: 7.2rem;
  text-align: center;
  margin: 6rem auto 6rem auto;
  color: #2f5d3a;
  letter-spacing: -0.2rem;
}
.zero h1 {
  margin: 0 auto 6rem auto;
}
.gold {
	color: #d9b46f;
}
.full img {
  height: auto;
  max-width: 100%;
  border-radius: 2.8rem;
}

.fullkamperyone {
  width: 100%;
  display: flex;
  margin: 0;
}
.fullkamperyone div {
width: 100%;
  display: inline-block;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.fullkamperyone img {
  height: auto;
  max-width: 100%;
  border-radius: 2.8rem;
}
.fullkampery {
  width: 100%;
  display: flex;
  margin: 5rem 0 0 0;
}
.fullkampery div {
width: 50%;
  display: inline-block;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.fullkampery div div {
width: 100%;
  display: inline-block;
  padding: 0;
}
.fullkampery h3 {
font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color: #2f5d3a;
  font-size: 1.7rem;
  line-height: 3rem;
  margin: 0;
  padding: 0;
}
.fullkampery p {
	font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #2b2b2b;
  font-size: 1.6rem;
  line-height: 2.4rem;
}
.fullkampery p strong {
  font-weight: 600;
}
.fullkampery img {
  height: auto;
  max-width: 100%;
  border-radius: 2.8rem;
}


.fulldane {
  width: 100%;
  display: flex;
  margin: 5rem 0 0 0;
}
.fulldane .half {
width: 50%;
  display: inline-block;
  padding: 0 3rem;
}
.spec-card{
max-width: 100%;
  margin: auto;
  border-radius: 1.8rem;
  overflow: hidden;
  background: #fafbf9;
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.08);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #3a3a3a;
  font-size: 1.4rem;
  line-height: 2.4rem;
  height: 100%;
}

.spec-header{
background: #e6f4ea;
  text-align: center;
  padding: 4rem 0;
}

.spec-header h2{
margin: 1rem 0 0;
  color: #2f5d3a;
  font-size: 2.4rem;
}

.spec-grid{
padding: 3rem 0;
  position: relative;
}

/* linia środkowa */
.spec-grid:before{
    content:"";
    position:absolute;
    left:50%;
    top:3rem;
    bottom:3rem;
    width:0.2rem;
    background:#e39a3b;
}

.spec-row{
display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0;
}

.param{
text-align: center;
  padding-right: 2rem;
}
.param strong {
  font-weight: 600;
}
.value{
padding-left: 2rem;
  text-align: center;
}


.mySlider {
  padding: 4rem 0;
}

.box{
background: #dbe8df;
  padding: 4rem;
  border-radius: 2rem;
  text-align: center;
  min-height: 29rem;
}
.box img{
  margin: 0 auto 0 auto;
}
.box h3{
font-size: 2.4rem;
  color: #2f5d3a;
  margin: 0 auto 0 auto;
  line-height: 3rem;
  font-weight: 600;
}

.box p{
  font-size: 1.4rem;
  line-height: 2.4rem;
}
.spacer {
  margin: 10rem auto 10rem auto;
  text-align: center;
  background-image: url("https://californiahotel.pl/wp-content/uploads/2026/03/spacer.png");
  background-repeat: no-repeat;
  background-size: 4.8rem;
  background-position: center center;
  height: 0.2rem;
  padding: 0;
  width: 100%;
  max-width: 192rem;
}

.naglowek {
width: 100%;
  display: block;
}
.naglowek h2 {
font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-size: 3.6rem;
  text-align: center;
  margin: 6rem auto 1rem auto;
  color: #2f5d3a;
  letter-spacing: inherit;
  line-height: 3.6rem;
}
.naglowek h3{
font-size: 2.4rem;
  color: #2b2b2b;
  margin: 0 auto 5rem auto;
  line-height: 3rem;
  font-weight: 600;
  text-align: center;
}
.naglowek p {
font-size: 1.7rem;
  color: #2b2b2b;
  margin: 5rem auto 5rem auto;
  line-height: 3rem;
  font-weight: 400;
  text-align: left;
  width: 90rem;
}
.naglowek p strong {
  font-size: 1.7rem;
  font-weight: 600;

}

.kontakt .naglowek p {
  text-align: center;
}
:root {
  --swiper-theme-color: #2f5d3a !important;
}

footer{
background: #2f5d3a;
  color: white;
  padding: 4rem 0;
  margin-top: 6rem;
}

.footer-widgets{
display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
}
.footer-widgets .widget {
background: transparent;
  padding: 0;
  margin-bottom: 3rem;
  border-radius: 1rem;
}
footer .menu {
  display: inline-block;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
footer .menu li {
  margin: 0 0;
  display: block;
  padding: 0 0;
  position: relative;
  height: auto;
}
footer .menu li a {
color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 3rem;
  text-transform: uppercase;
}
footer .menu .current_page_item > a {
  color: #d9b46f;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 3rem;
}
footer .menu .current_page_item > a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1rem;
  transform: translateX(-50%);
  width: 50%;
  height: 0.2rem;
  background-color: #d9b46f;
  display: none;
}
footer .custom-html-widget img {
	width: 25.2rem;
  height: auto;
  aspect-ratio: auto 252 / 90;
}

.wp-block-gallery img{
transition:0.3s;
height: auto;
max-width: 100%;
border-radius: 1.8rem;
}

.wp-block-gallery img:hover{
transform:scale(1.03);
}
.wp-block-gallery.has-nested-images{
display:grid;
gap:0 4rem;
}

.wp-block-gallery.columns-2{
grid-template-columns:repeat(2,1fr);
}

.wp-block-gallery.columns-3{
grid-template-columns:repeat(3,1fr);
}

.wp-block-gallery.columns-4{
grid-template-columns:repeat(4,1fr);
}

.wp-block-gallery img{
width:100%;
height:22rem;
object-fit:cover;
}
.video-wrap {
max-width: 120rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 10rem 0;
}

.video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== HAMBURGER ===== */

.menu-toggle{
display: none;
  width: 4rem;
  height: 6rem;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1002;
  background: none;
  border: none;
}

.menu-toggle span{
display:block;
height:3px;
background:#000;
margin:5px 0;
transition:.3s;
}


/* ===== OVERLAY ===== */

.menu-overlay{
display:none;
}


.mySlider .swiper-wrapper {
    align-items: stretch;
}

.mySlider .swiper-slide {
    height: auto;
    display: flex;
}

.mySlider .box {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fa-brands, .fab {
padding: 0.3rem 0 0 0.5rem;
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url("https://californiahotel.pl/wp-content/themes/californiahotel-wordpress-theme/images/fb.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.kk-form label{
	font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #3a3a3a;
  font-size: 1.2rem;
  line-height: 2.4rem;
  margin: 0 0 1rem 0;
  text-align: justify;
}

@media (max-width: 1400px) {
  html {
    font-size: 0.622vw;
  }	
}

/* ========================= */
/* MOBILE FIX */
/* ========================= */

@media (max-width:768px){

/* reset desktop layout */

  html {
    font-size: 10px;
  }	

.container{
    max-width:120rem;
    margin:auto;
    padding:0 2rem;
}

.menuleft,
.menuright{
float:none;
width:100%;
}

.menuright{
position: fixed;
    top: 0;
    right: 0;
    width: calc(100% - 6rem);
    height: 100%;
    background: #111;
    transform: translateX(100%);
    transition: .3s;
    z-index: 1001;
    padding-top: 8rem;
}

.menuright.active{
transform:translateX(0);
}


/* overlay */

.menu-overlay{
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
opacity:0;
pointer-events:none;
transition:.3s;
z-index:1000;
}

.menu-overlay.active{
opacity:1;
pointer-events:auto;
}


/* hamburger */

.menu-toggle{
display: block;
    position: absolute;
    right: 2rem;
    top: 2rem;
    z-index: 1002;
}


/* reset menu desktop */

.menu{
display:block;
flex-direction:column;
margin:0;
padding:0;
}

.menu li{
display:block;
width:100%;
text-align:center;
}

.menu a{
display: block;
    padding: 2rem 0;
    color: #fff;
    font-size: 1.6rem;
    margin: 0 auto;
}
.menu .current_page_item > a {
  position: relative;
  color: #d9b46f;
  font-weight: 600;
}

/* usuń podkreślenie active */

.menu .current_page_item > a::after{
display:none;
}


/* usuń padding desktop */

.menuright ul{
padding:0;
}

.menuright .menu-menu-1-container{
float:none;
}
.hero {
margin: 10rem auto 0 auto;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 50rem;
    background-position: center bottom;
    height: 24.4rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    width: 100%;
    max-width: 192rem;
}
.full {
  width: 100%;
  display: block;
  width: 100%;
    display: flex;
    flex-direction: column;
}
.full .left {
width: 100%;
    display: inline-block;
    padding: 3rem 0 0;
    order: 2;
}
.full .right {
width: 100%;
    display: inline-block;
    padding: 3rem 0 0;
    order: 1;
}
.full h1 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-size: 3rem;
  text-align: center;
  margin: 6rem auto 6rem auto;
  color: #2f5d3a;
  letter-spacing: -0.2rem;
}
.full h3 {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color: #2f5d3a;
  font-size: 1.5rem;
  line-height: 2.5rem;
  margin: 0;
  padding: 0;
}
.full p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #2b2b2b;
  font-size: 1.4rem;
  line-height: 2.4rem;
}
.fulldane {
  width: 100%;
  display: block;
  margin: 0 0 0 0;
}

.fulldane .half {
  width: 100%;
  display: inline-block;
  padding: 2rem 0;

}
.fullkamperyone div {
  width: 100%;
  padding: 3rem 0;
  display: inline-block;
}
.fullkamperyone img {
max-width: 100%;
    border-radius: 1.8rem;
    width: 100%;
    height: 22rem;
    object-fit: cover;
}
.fullkampery {
flex-direction: column;
    margin: 0;
}

.tekst {
        order: 1;
    }

.obraz {
order: 2;
    text-align: center;
    margin: 1rem 0 4rem 0;
    }
.fullkampery div {
  width: 100%;
  display: inline-block;
  padding: 0;
}
.fullkampery h3 {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color: #2f5d3a;
  font-size: 1.4rem;
  line-height: 2rem;
  margin: 0;
  padding: 0;
}
.fullkampery p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #2b2b2b;
  font-size: 1.2rem;
  line-height: 2rem;
}
.fullkampery img {
  height: auto;
  max-width: 100%;
  border-radius: 1.8rem;
}
.naglowek h2 {
font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-size: 2rem;
    text-align: center;
    margin: 2rem auto 2rem auto;
    color: #2f5d3a;
    letter-spacing: inherit;
    line-height: 2.6rem;
}
.naglowek h3 {
  font-size: 1.6rem;
  color: #2b2b2b;
  margin: 0 auto 3rem auto;
  line-height: 2rem;
  font-weight: 600;
  text-align: center;
}
.spec-header h2 {
  margin: 0.5rem 0 0;
  color: #2f5d3a;
  font-size: 1.8rem;
}
.param {
  text-align: center;
  padding-right: 1rem;
}
.value {
  padding-left: 1rem;
  text-align: center;
}
.spec-card {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #3a3a3a;
  font-size: 1.2rem;
  line-height: 2.2rem;
}
.spec-icon img {
  width: 3rem;
  height: auto;
}
.naglowek p {
  font-size: 1.2rem;
  color: #2b2b2b;
  margin: 5rem auto 5rem auto;
  line-height: 3rem;
  font-weight: 400;
  text-align: left;
  width: 100%;
}
.naglowek p strong {
  font-size: 1.2rem;
  font-weight: 600;
}
.legend {
  display: inline-block;
  gap: 2rem;
  margin-bottom: 2rem;
}
.legend span {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem 2rem;
}
.box {
  background: #dbe8df;
  padding: 3rem 4rem;
  border-radius: 1.8rem;
  text-align: center;
  min-height: 27rem;
}
.box img {
  width: 3rem;
  height: auto;
}
.box h3 {
font-size: 1.6rem;
  color: #2f5d3a;
  margin: 0 auto 0 auto;
  line-height: 2.4rem;
  font-weight: 600;
}
.box p {
  font-size: 1.2rem;
  line-height: 2.4rem;
}
.kk-calendar h3 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-size: 2rem;
  text-align: center;
  margin: 3rem auto 2rem auto;
  color: #2f5d3a;
  letter-spacing: inherit;
  line-height: 3.6rem;
}
.wp-block-gallery.columns-3 {
  grid-template-columns: repeat(1,1fr);
}
.footer-widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
#menu-menu-2 {
  width: 100%;
}
footer {
  color: white;
  text-align: center;
}
footer .menu li a {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 3rem;
  text-transform: uppercase;
  padding: 0;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
  width: 100%;
}
.spacer {
  margin: 4rem auto 8rem auto;
}
.strona-glowna .hero{
  background-image: url("images/topm.jpg");
}
.nasze-kampery .hero{
  background-image: url("images/top-kamperym.jpg");
}
.galeria .hero {
  background-image: url("images/top-galeriam.jpg");
}
.dostepnosc-i-rezerwacja .hero {
  background-image: url("images/top-dostepnosc-i-rezerwacjam.jpg");
}
.akcesoria .hero {
  background-image: url("images/top-akcesoriam.jpg");
}
.video .hero {
  background-image: url("images/top-videom.jpg");
}
.kontakt .hero {
  background-image: url("images/top-kontaktm.jpg");
}
}