/*
Theme Name:     Camping Wulpen
Theme URI:      
Description:    Make-some-waves child theme.
Author:         0117 Web Wizards
Author URI:     https://www.0117.nl
Template:       make-some-waves
Version:        0.1.0
*/

html{
	background-color: var(--wp--preset--color--primary-300);
}

body{
	overflow-x: hidden;
}

p.home-header-tag{
	opacity: 1;
	transition: opacity .2s ease;
}

body.scroll p.home-header-tag{
	opacity: 0;
	transition: opacity .2s ease;
}

/* Sticky header */
@media(max-width: 781px){
	.no-sticky-boi{
    	display: none;
  	}
}
@media(min-width: 782px){
	header{
		--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
		position: sticky;
		top: calc(-50px + var(--wp-admin--admin-bar--position-offset, 0px));
		z-index: 10;
	}
	.no-sticky-boi{
  		height: 50px;
	}
}

/* Home big image */
@media(min-width: 782px){
	figure.home-overflow-image img{
		max-width: 130%;
	}
}
@media(min-width: 1300px){
	figure.home-overflow-image img{
		max-width: 180%;
	}
}

/* Anchor offsets */
html{
  scroll-padding-top: 20px; 
} 

@media(min-width: 782px){
html{
  scroll-padding-top: 110px; 
} 
}




/* Homepage booking bar */
.home-booking-bar {
    margin-top: -50px !important;
}

/* Page Menu bar */

.page-menu-bar {
	margin-top: -30px !important;
}
.page-menu-bar a{
	text-decoration: none;
}
.page-menu-bar a:hover{
	text-decoration: underline;
}

/* Homepage navigation cards */
.home-hover-card{
    position: relative;
    transition: all .4s ease;
}

.home-hover-card a{
    text-decoration: none;
}

.home-hover-card a:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.home-hover-card .wp-block-font-awesome-icon{
    opacity: 0;
    transform: translateX(-20px);
    transition: all .4s ease;
}

@media (hover: hover){
    .home-hover-card:hover{
        background-color: var(--wp--preset--color--secondary-200) !important;
        transition: all .2s ease;
    }
    .home-hover-card:hover .wp-block-font-awesome-icon{
        opacity: 1;
        transform: translateX(0px);
        transition: all .2s ease;
    }
}

/* Recranet search bar */
.recranet-element{
	width: 100%;
}
recranet-search-bar.recranet-element {
    background: none;
}

/* Recranet elements */
.rn-accommodation-list-item{
	border-radius: 5px !important;
}
.rn-btn.rn-btn-default {
	font-weight: normal !important;
	background-color: var(--wp--preset--color--primary-200) !important;
	border: none !important;
	border-radius: 5px !important;
}
.rn-btn.rn-btn-default:hover {
	background-color: var(--wp--preset--color--primary-300) !important;
}



/* Mapbox Marker */
    .marker {
    background-image: url('https://www.campingwulpen.nl/wp-content/uploads/camping-wulpen-logo-white.svg');
    background-color: #485b4e;
    background-size: cover;
    width: 30px;
    height: 30px;
	border: 5px solid #485b4e;
    border-radius: 30px;
    cursor: pointer;
}

/* Ninja */
.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {
	color: white;
    background: var(--wp--preset--color--primary-200);
    border-radius: 5px;
    padding: 10px 20px;
    font-family: var(--wp--preset--font-family-poppins);
    transition: background .2s;
}

.nf-form-content button:hover, .nf-form-content input[type=button]:hover, .nf-form-content input[type=submit]:hover {
    color: white;
	background: var(--wp--preset--color--primary-300);
    transition: background .2s;
}



/* Language switcher */

.pll-switcher-select{
    background: var(--wp--preset--color--light-300);
    border: none;
    padding: 10px 30px 10px 10px;
    font-family: var(--wp--preset--font-family--poppins);
    font-size: var(--wp--preset--font-size--xsmall);
    text-align: left;
    border-radius: 5px;
}

.pll-switcher-select:active,
.pll-switcher-select:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

.pll-switcher-select:hover{
	cursor: pointer;
}

.wp-block-polylang-language-switcher select{
	appearance: none;
}

.wp-block-polylang-language-switcher{
	position: relative;
}

.wp-block-polylang-language-switcher::after {
	position: absolute;
	content: "\f078";
  font-family: FontAwesome;
	color: var(--wp--preset--color--dark-200);
	font-size: .8rem;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}