/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/*---------------------------------------------------------------------------------------------------
	# Allgemein
---------------------------------------------------------------------------------------------------*/
/* X-Small devices (portrait phones, less than 576px) */
/* No media query */
html {
  font-size: 14px;
  text-underline-offset: 5px;
}
body {
 hyphens: auto;
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	html {
		font-size: 16px;
	}	
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	html {
		font-size: 18px;
	}
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	html {
		font-size: 20px;
	}
}
figure img{
	border-radius: 10px;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption, .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
   border-radius: 0px 0px 10px 10px;
}
.entry-content p {
	margin-bottom: 1rem;
}
.eotw-social a{
	margin: 10px;
}
button {
text-transform: uppercase!important;
}
/*------------------------------------
	## Helpers
------------------------------------*/
.text-center {
	text-align: center;
}
.mt {
	margin-top: 1rem;
}
.mb {
	margin-bottom: 1rem;
}
.block {
	display: block;
}
.webo-bs {
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}
.webo-hover-bs:hover {
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);
}
.bg-cover {
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
}
/*`https://bryanlrobinson.com/blog/how-to-css-after-elements-for-background-overlays/*/
.bg-overlay::after {
	content: ""; 
	border-radius: 10px 10px 0 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     background-color: var(--theme-palette-color-1);
    opacity: .2;
}
.bg-overlay::after {
    z-index: 1;
}
.bg-overlay > * {
	position:relative;
    z-index: 10;
}
.webo-card .webo-meta a{
	border-radius: 5px;
	background: var(--theme-button-background-initial-color);
  	color: #ffff;
	padding: 0px 4px;
	margin-right: 5px;
}
/* https://9elements.github.io/fancy-border-radius/#48.22.38.41--466.466*/
.gb-container.webo-wave-img img {
	border: 1px red;
	border-radius: 45% 55% 57% 43% / 48% 56% 44% 52% ;
}
.webo-btn {
    padding: var(--theme-button-padding)!important;
	border-radius: var(--theme-button-border-radius)!important; 
	text-transform: uppercase;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.webo-btn:after, .webo-btn:before  {
    font-family: 'Font Awesome 5 Free';    
    font-style: normal;
    font-weight: normal;
    font-weight: 900;
}
.webo-btn:after {    
	margin-left: 5px;
}
.webo-btn:before  {    
	margin-right: 5px;
}
.btn-primary{
	border: 1px solid var(--theme-palette-color-1)!important;
    background-color: var(--theme-palette-color-1)!important;
    color: var(--theme-palette-color-8)!important;
}
.btn-inverse{
	border: 1px solid var(--theme-palette-color-1)!important;
    background-color: var(--theme-palette-color-8)!important;
    color: var(--theme-palette-color-1)!important;
}
.webo-btn.btn-primary:hover {
    background-color: var(--theme-palette-color-8)!important;
    border: 1px solid var(--theme-palette-color-1)!important;
    color: var(--theme-palette-color-1)!important;
}
.webo-btn.btn-inverse:hover {
    background-color: var(--theme-palette-color-1)!important;
    border: 1px solid var(--theme-palette-color-8)!important;
    color: var(--theme-palette-color-8)!important;
}
.webo-internal-link:after {   
    content: "\f30b";
}
.webo-external-link:after {    
    content: "\f35d";    
}
.webo-download-link:after {   
    content: "\f019";   
}
.webo-back-link:before {   
    content: "\f30a";
}
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0,0,0,0);
}
/*------------------------------------
	## Animationen
------------------------------------*/
/* Fade In Animations (Uku Neo, Standard) */
.fadein {
	opacity: 0;
	transform: translateZ(0px);
	transition: opacity 0.7s ease-in-out 0s;
}
.fadein {
    opacity: 0;
    transform: translateY(30px);
}
.fadein {
    opacity: 0;
    transform: translateY(30px);
}
.fadein.inview {
    opacity: 1;
    transform: translateY(0px);
    transition: transform 1s ease 0s, opacity 1.5s ease 0s;
}
/*------------------------------------
	## Footer - Waves
------------------------------------*/
/* Quelle: https://codepen.io/uchardon/pen/bxbqoG/ */
#wavyfooter {
  width:100vw;
  position:relative;
  bottom:-10px;
}
#wavyfooter div {
  background-color:#4478e3;
  margin: -5px 0px 0px 0px;
  padding:0px;
  color: #fff;
  text-align:center;
}
svg {
  width:100%;
}
.arrow {
  stroke-width: .3px;
  stroke:yellow;
}
.topball {
  animation: ball 1.5s ease-in-out;
  animation-iteration-count:infinite;
  animation-direction: alternate;
  animation-delay: 0.3s;
  cursor:pointer;
}

.wave {
  animation: wave 3s linear;
  animation-iteration-count:infinite;
  fill: #0E3B75;
}
.drop {
  fill: transparent;
  animation: drop 5s ease infinite normal;
  stroke: #4478e3;
  stroke-width:0.5;
  opacity:.6; 
  transform: translateY(80%);
}
.drop1 {
  transform-origin: 20px 3px;
}
.drop2 {
  animation-delay: 3s;
  animation-duration:3s;
  transform-origin: 25px 3px;
}
.drop3 {
  animation-delay: -2s;
  animation-duration:3.4s;
  transform-origin: 16px 3px;
}
.gooeff {
  	filter: url(#goo);
}
#wave2 {
  animation-duration:5s;
  animation-direction: reverse;
  opacity: .6
}
#wave3 {
  animation-duration: 7s;
  opacity:.3;
}
@keyframes drop {
  0% {
    transform: translateY(80%); 
    opacity:.6; 
  }
  80% {
    transform: translateY(80%); 
    opacity:.6; 
  }
  90% { 
    transform: translateY(10%) ; 
    opacity:.6; 
  }
  100% { 
    transform: translateY(0%) scale(1.5);  
    stroke-width:0.2;
    opacity:0; 
  }
}
@keyframes wave {
  to {transform: translateX(-100%);}
}
@keyframes ball {
  to {transform: translateY(20%);}
}
/*---------------------------------------------------------------------------------------------------
	# Plugins & Dienste
---------------------------------------------------------------------------------------------------*/
/*------------------------------------
	## GenerateBlocks-Plugin
------------------------------------*/
@media screen and (max-width: 1160px) { 	
	#main .entry-content > .gb-container{
		padding-left: 15px!important;
		padding-right: 15px!important;
	} 
} 
/*------------------------------------
	## Visual Portfolio
------------------------------------*/
figure.vp-portfolio__item {
	border-radius: 10px;
}
/*------------------------------------
	## JetEngine-Plugin
------------------------------------*/
.jet-listing-grid__slider-icon.slick-arrow { 
    color: var(--theme-palette-color-8);
    background-color: var(--theme-palette-color-1);
	z-index: 40;
}
/*------------------------------------
	## YOAST - FAQ - Accordion
------------------------------------*/
.schema-faq-section {
	border: 1px solid var(--theme-palette-color-6)!important;
    margin-bottom: 20px;
    background-color: #ffffff!important;
}
.schema-faq .schema-faq-question:after {
	font-size: 28px!important;
}
.schema-faq-question {
	font-family: var(--theme-font-family)!important;
    font-size: var(--theme-font-size)!important;
    font-weight: bold;
}
.schema-faq p.schema-faq-answer {
    font-size: 21px!important;
    line-height: 1.4;
    border-bottom: none!important;
}
/*------------------------------------
	## Usercentrics
------------------------------------*/

/*------------------------------------
	## Jivochat
------------------------------------*/

@media screen and (max-width: 689px) { 	
	#jvLabelWrap {
		display: none!important;
	} 
}
/*---------------------------------------------------------------------------------------------------
	# Seiten
---------------------------------------------------------------------------------------------------*/
/* Schiffsuebersicht */
.page-id-520 table tr td{
	vertical-align: top;
}
/* Crew */
.single-crew .post-navigation span.item-label span {
	display: none;
}

/*---------------------------------------------------------------------------------------------------
	# Woocommerce / Produkte / Segeltörns
---------------------------------------------------------------------------------------------------*/
/*------------------------------------
	## Allgemein
------------------------------------*/
a.added_to_cart {
text-transform: uppercase!important;
}
/*------------------------------------
	## Cart & Checkout
------------------------------------*/
.wc-block-cart__submit-container a {
text-transform: uppercase!important;
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon:before {   
    display: none!important;    
}
.wc-block-components-product-metadata__description {
	display:none;
}
.wc-gzd-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
    min-width: auto!important;
}
.wc-block-components-checkout-return-to-cart-button {
	display:none;
}
/*------------------------------------
	## Single-Produkte
------------------------------------*/
/*
.eotw-kostenloses-produkt .price, .eotw-kostenloses-produkt .legal-price-info{
	display:none;
}
*/
.woocommerce-page .wc-block-components-notice-banner svg {
   display:none;
}
.single-product.eotw-segeltoern .single_add_to_cart_button {
	font-size: 20px;
}
.wc-gzd-additional-info, form.variations_form table.variations label, form.variations_form table.variations select, form.variations_form table.variations option {
	font-size: 1rem;
	font-weight: 400;
}
.ct-quick-view-card .product_meta>span, .product[class*=gallery] .product_meta>span  {
    font-size: 1rem!important;
    font-weight: 400!important;
}
/*------------------------------------
	## Segeltörn-Listings (Cards)
------------------------------------*/
/* https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe*/
.eotw-sailing-trip-listing-wrapper {

} 
.eotw-sailing-trip-listing {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.sailing-trip-card {	
	color: var(--theme-text-color);
	border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 10px;
}
.sailing-trip-card .card-header{
	border-radius: 10px 10px 0 0;
	text-align: center;
	position: relative;
	padding: 2rem 1rem;	
}
.sailing-trip-card .card-header .badge-wrapper {	
	min-height: 100px;
}
.sailing-trip-card .card-header .product-badge {	
	border-radius: 5px;
	color: var(--theme-palette-color-8);
	display: inline-block;	
	font-size: 15px;
	margin-bottom: 15px;	
	padding: 2px 10px;
}
.eotw-featured-product-badge {
	background-color: var(--theme-palette-color-1);	
}
.eotw-out-of-stock-badge {
	background-color: #D00920;	
}
.eotw-nearly-out-of-stock-badge {
	background-color: #ffa500;	
}
.sailing-trip-card .card-header h3{
	color: var(--theme-palette-color-8);
	font-size:1.1rem;
	min-height: 100px;
}
.sailing-trip-card .trip-date {
	margin: 1rem 0;
}
.sailing-trip-card .trip-date span{
	background-color: var(--theme-palette-color-6);
	border-radius: 20px;
	font-size: 16px;	
	padding: 0.2rem 0.4rem;
}
.sailing-trip-card .card-body {
	font-size: 16px;	
	padding: 1rem;	
	min-height: 230px;
}
.sailing-meta i, .card-sailing-meta i {
	width: 25px;
}
.sailing-trip-card .card-footer .webo-btn{	
	margin: 0.5rem;
}
.sailing-trip-card .card-footer .read-more:hover{	
	 background-color: var(--theme-palette-color-5);
	 border: 1px solid var(--theme-palette-color-1);
	 color: var(--theme-palette-color-1);
}
/*------------------------------------
	## Segeltörn-Filter
------------------------------------*/
button.jet-remove-all-filters__button {
	background-color: var(--theme-palette-color-1);
	border-radius: 8px;
	color: #fff;
	padding: 15px 20px;
}
.jet-active-filters__list {
	margin-top: 20px;
}
.jet-active-filters__title {
	font-weight: bold;
}
.jet-active-filter .jet-active-filter__val {
	border-radius: 15px;
    background-color: #ccc;
    padding: 2px 10px;
	margin: 5px;
}
.jet-active-filter__remove {
	color:red;
}
.jet-remove-all-filters .jet-remove-all-filters__button {
    align-self: stretch!important;
}
/*------------------------------------
	## Segeltörn-Single
------------------------------------*/
/* Workaround, da ich an den Code nicht komme, um gezielt den Wishlist-Button auszuspielen, dieser wird mit Hook "woocommerce_single_product_summary" ausgespielt; */
.sailing-meta-overview .summary.entry-summary {
	margin-inline-start: 0px;
	width: 100%;
}
.single-product.eotw-segeltoern .product_title.entry-title, .single-product.eotw-segeltoern p.price, 
.single-product.eotw-segeltoern .legal-price-info, .single-product.eotw-segeltoern .ct-product-add-to-cart,
.single-product.eotw-segeltoern .product_meta  {
	display:none;
}
.single-product.eotw-segeltoern .ct-product-additional-actions[data-type=button] a {
	width: 100%;
	height:auto;
    padding: var(--theme-button-padding)!important;
}
.single-product.eotw-segeltoern .ct-product-additional-actions .ct-icon-container svg {
	width: 25px;
	height: 25px;
}
.single-product.eotw-segeltoern .ct-product-additional-actions .ct-label {
	font-size: 20px;
}
.single-product.eotw-segeltoern .ct-product-waitlist {
	margin-top: 20px;
}
.sailing-meta-overview {
    display: grid;
    grid-template-columns: 1fr;
	gap: 15px;
}
.sailing-meta-overview h2.trip-title{
  font-size: 1.5rem;
  margin-bottom: 0px;
}
.sailing-meta-overview h3.trip-subtitle{
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.eotw-sailing-trip-section.sailing-meta-overview {
	margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
	.sailing-meta-overview {		
		grid-template-columns: 4fr 2fr;		 
	}
}
.triptype-badge {	
	border: 1px solid var(--theme-palette-color-5);
	background-color: var(--theme-palette-color-6);
	border-radius: 5px;		
	padding: 2px 10px;
}
.trip-pdf {	
	border: 1px solid var(--theme-palette-color-5);
	background-color: var(--theme-palette-color-6);
	border-radius: 5px;	
	display: inline-block;	
	margin-top: 2rem;	
	padding: 2px 10px;
}
.responsive-gmaps {
    position: relative;
    padding-bottom: 69%;
    height: 0;
    overflow: hidden;
    margin-bottom: 3rem;
}
.single-product .sailing-meta.meta-right .ct-wishlist-button-single, .single-product .sailing-meta.meta-right .single_add_to_cart_button.button.alt {
	width: 100%;
	min-height: 65px;
	padding: var(--theme-button-padding) !important;
    border-radius: var(--theme-button-border-radius) !important;
}
.single-product .sailing-meta, .sailing-info {
	border: 1px solid #e1e8ed;
	border-radius: 10px;
	padding: 1rem;
}
.eotw-sailing-trip-section {
	padding: 2rem 0;
}
.eotw-section-heading{
	border-bottom: 1px solid #e1e8ed;
	margin-bottom: 2.5rem;
}
.eotw-section-heading span {
	border-bottom: 2px solid var(--theme-palette-color-1);
	padding-bottom: 2px;
}
.additional-sailing-infos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 15px;
	text-align: center;
}

@media (min-width: 768px) {
	.additional-sailing-infos {		
		grid-template-columns: repeat(4, 1fr);
	}
}
.additional-sailing-infos .sailing-info {	
	 background-color: var(--theme-palette-color-6);
}
.additional-sailing-infos .sailing-info h3 {	
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	min-height: 90px;
}
.sailing-info .sailing-info-description {
	min-height: 150px;
}

.hafen-info {
	display: grid;	
	grid-template-columns: 1fr;
	gap: 25px;	
}

@media (min-width: 768px) {
	.hafen-info {		
		grid-template-columns: 2fr 4fr;			 
	}
}
.segeltoernbilder .swiper-slide {
	min-height: 350px;	
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	border-radius: 10px;
}
.slider-kundenmeinungen .swiper-slide {	
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;    
    border-radius: 10px;
    border: 1px solid var(--theme-palette-color-5);
    background-color: var(--theme-palette-color-8);
	min-height: 300px;
}
.swiper-slide-content-wrapper {
	text-align: center;
	max-width:800px;
}
.slider-kundenmeinungen .swiper-slide .kundenmeinung {	
	font-weight: 600;
	margin-top:40px;
}
.slider-kundenmeinungen .swiper-slide .kundenbechreibung {	
	font-size:14px;
}
.swiper-button-next, .swiper-button-prev {
	background-color: var(--theme-palette-color-1);
	color: var(--theme-palette-color-8);
	padding: 25px 25px;
}
.swiper-button-next:after, .swiper-button-prev:after {   
    font-size: 25px!important;   
}
/*---------------------------------------------------------------------------------------------------
	# TEST - LIsting (Shortcode)
---------------------------------------------------------------------------------------------------*/
.grid-container {
	display: grid;
	grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 20px;		
	margin: 0 auto;		
}
.card {
	background-color: #ffffff;
	padding: 40px;
	border-radius: 10px;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
	position:relative;
	min-height: 300px;
	text-align:center;
}	
.card .content-overlay {
  background: rgba(19, 68, 132, 0.7);
  border-radius: 10px;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  margin:0;
  padding:0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.card:hover .content-overlay{
  opacity: 1;
}	

.title {
	background-color: rgba(255, 255, 255, .5);
	color: var(--theme-palette-color-1);	
}
.title h2 { 
  font-weight: 100;
  margin-bottom: 0.5rem; 
}

.card:hover .title, .card:hover .title h2{		  
  opacity: 0;
}

.content-details {
  position: absolute;
  text-align: center;
  padding: 0 1rem;
  width: 100%;
  top: 40%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.card:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}	

.content-details p{
  color: #F4FAFF;
  font-size: 1rem;
}

.fadeIn-bottom{
  top: 80%;
}		
		
@media screen and (max-width: 768px) {
	.grid-container {
		grid-template-columns:
		repeat(auto-fit, minmax(250px, 1fr));
	}

	.card {
		padding: 30px;
	}
}

@media screen and (max-width: 576px) {
	.grid-container {
		grid-template-columns: 
		repeat(auto-fit, minmax(200px, 1fr));
	}

	.card {
		padding: 20px;
	}
}