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


/*********************************
           General
*********************************/

::selection{
	color: var(--wp--preset--color--light-100);
	background: var(--wp--preset--color--dark-100);
}

html{
    background: var(--wp--preset--color--light-100);	
}

html:has(body.page-template-wp-custom-template-custom-t){
    background: var(--wp--preset--color--secondary-100) !important;
}

html:has(body.page-template-wp-custom-template-custom-ts){
    background: var(--wp--preset--color--primary-100) !important;
}

@media (max-width: 781px){
	.wp-block-columns.reverse-mobile .wp-block-column:first-child{
		order: 2;
	}
}

figure.mix-multiply img{
	mix-blend-mode: multiply;
}

/*********************************
            Text general
*********************************/

/* Letter spacing */
h1, h2:not(.normal-letter-spacing), h3:not(.normal-letter-spacing), p.small-letter-spacing{
  letter-spacing: -0.03em !important;
}

p.home-heading{
   letter-spacing: -0.05em !important;
}

/* Underline links */
p.has-link a{
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
}

a:where(:not(.wp-element-button)){
	text-decoration-thickness: 1px !important;
	text-underline-offset: 3px !important; 
	text-decoration-color: transparent !important;
}

a:where(:not(.wp-element-button)):hover{
  	text-decoration-color: var(--wp--preset--color--dark-300) !important;
}


/*********************************
            Navbar
*********************************/
#navbar{
  transition: background-color .2s ease;
}

body.page-template-wp-custom-template-custom-t.scroll #navbar{
  	background-color: var(--wp--preset--color--secondary-300);
  	transition: background-color .2s ease;
}
body.page-template-wp-custom-template-custom-ts.scroll #navbar{
	background-color: var(--wp--preset--color--primary-300);
  	transition: background-color .2s ease;
}
body.scroll #navbar{
  	background-color: var(--wp--preset--color--light-300);
  	transition: background-color .2s ease;
}

body.single #navbar{
	background-color: var(--wp--preset--color--light-300);
  	transition: background-color .2s ease;
}

div.navbar li a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 2px !important;
    text-underline-offset: 5px !important;
}

/* Active item */
	div.navbar li.current-menu-item a:where(:not(.wp-element-button)) {
    	text-decoration-color: var(--wp--preset--color--dark-300) !important;
}

/* Search field */

div.navbar .wp-block-search{
	max-width: 80%;
}
div.navbar input.wp-block-search__input{
	font-weight: normal;
  	padding: 8px 11px;
  	background: var(--wp--preset--color--light-200);
  	border-radius: 5px 0px 0px 5px;
  	color: var(--wp--preset--color--dark-300);
}

div.navbar input.wp-block-search__input::placeholder{
	color: var(--wp--preset--color--dark-200);
}

div.navbar button.wp-block-search__button {
	background: var(--wp--preset--color--light-200);
  	border: none;
  	padding: 0 10px;
  	margin: 0;
	border-radius: 0px 5px 5px 0px;
}

div.navbar button.wp-block-search__button svg {
	fill: var(--wp--preset--color--dark-200);
}


:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
    background-color: unset !important;
}

/* Search field colors */

body.page-template-wp-custom-template-custom-t div.navbar input.wp-block-search__input{
  	background: var(--wp--preset--color--secondary-200);
} 

body.page-template-wp-custom-template-custom-t div.navbar button.wp-block-search__button{
  	background: var(--wp--preset--color--secondary-200);
}

body.page-template-wp-custom-template-custom-ts div.navbar input.wp-block-search__input{
  	background: var(--wp--preset--color--primary-200);
} 

body.page-template-wp-custom-template-custom-ts div.navbar button.wp-block-search__button{
  	background: var(--wp--preset--color--primary-200);
}

/* Submenu */
.navbar .wp-block-navigation > li.wp-block-navigation-item{
	padding: 10px 0 !important;
}

.navbar .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    border-radius: 10px;
    border: none;
    background: white;
	padding: 10px;
	overflow: hidden;
	box-shadow: 0px 0px 30px var(--wp--preset--color--light-300);
}

.page-template-wp-custom-template-custom-t .navbar .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	box-shadow: 0px 0px 30px var(--wp--preset--color--secondary-200);
}
.page-template-wp-custom-template-custom-ts .navbar .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	box-shadow: 0px 0px 30px var(--wp--preset--color--primary-200);
}

/*********************************
        Filter toggle
*********************************/

.navbar #toggleFilterButton{
  background: var(--wp--preset--color--dark-100);
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 35px !important;
}

footer #toggleFilterButtonFooter{
  background: var(--wp--preset--color--dark-100);
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 45px !important;
}


.navbar #toggleFilterButton i,
.navbar #toggleFilterButton :hover i,
footer #toggleFilterButtonFooter i,
footer #toggleFilterButtonFooter :hover i {
    margin-left: unset;
    margin-right: unset;
    transition: unset;
}

.navbar #toggleFilterButton,
footer #toggleFilterButtonFooter{
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar #toggleFilterButton:hover,
footer #toggleFilterButtonFooter:hover{
    cursor: pointer;
}

.navbar #toggleFilterButton i,
footer #toggleFilterButtonFooter i {
    color: var(--wp--preset--color--light-100);
}

footer #toggleFilterButtonFooter i {
    font-size: 20px;
}

#toggleFilterButtonFooter{
	position: fixed;
	right: 20px;
	bottom: 20px; 
	z-index:1000;
	background: var(--wp--preset--color--dark-100);
}

@media (min-width: 900px){
	#toggleFilterButtonFooter{
		display: none !important;
	}
}

body.nofilter #toggleFilterButton,
body.nofilter #toggleFilterButtonFooter{
  opacity: .5;
}




/*********************************
        Mobile Navbar
*********************************/
@media (max-width: 899px){
	div.navbar{
		padding: 10px 20px;
	}
	div.navbar div.wp-block-column.mobile-hidden{
	  display: none;
	}
	div.navbar div.wp-block-column p{
	 	text-align: left;
	}
	div.navbar div.wp-block-column nav{
	  justify-content: end;
	}
	div.navbar div.wp-block-columns{
	  justify-content: space-between;
	}
	div.navbar div.wp-block-columns div.wp-block-column{
		flex-basis: 50% !important;
	}
	div.navbar .wp-block-site-title{
		font-size: 30px !important;
	}
}

/* Mobile BG */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{
    background-color: var(--wp--preset--color--light-300);
    color: var(--wp--preset--color--dark-200) !important;
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open a{
    color: var(--wp--preset--color--dark-200) !important;
}

@media only screen and (max-width: 900px) {
 	.is-menu-open.has-modal-open a.wp-block-navigation-item__content {
		width: 100%;
		justify-content: center;
		padding: 5px !important;
		font-size: var(--wp--preset--font-size--xlarge);
		font-weight: var(--wp--custom--font-weight--semibold);
	}
	
	.is-menu-open.has-modal-open ul.wp-block-navigation-submenu{
		padding: 0 !important;
 	}
	
	.is-menu-open.has-modal-open ul.wp-block-navigation-submenu a{
		font-weight: var(--wp--custom--font-weight--regular) !important;
		font-size: var(--wp--preset--font-size--xlarge);
  	}
}

li.wp-block-navigation-item.has-child > a:where(:not(.wp-element-button)):hover{
	text-decoration-color: transparent !important; 
}

li.wp-block-navigation-item.has-child.current-menu-ancestor > a{
	text-decoration-color: var(--wp--preset--color--dark-300) !important; 
}

li.wp-block-navigation-item.has-child > a:where(:not(.wp-element-button)):hover{
	cursor: default;
}


/*********************************
            Home menu
*********************************/
div.home-menu-item{
	position: relative;
	transition: all .2s ease;
}

div.home-menu-item .wp-block-cover svg{
	opacity: 0;
	transform: translateX(-10px);
	transition: all .2s ease;
}

div.home-menu-item .wp-block-cover img{
	transform: perspective(0px) scale3d(1, 1, 1);
	transition: transform .25s ease !important;
}

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

@media(hover:hover){
	div.home-menu-item:hover {
 		transform: scale(1.02);
		transition: transform .2s ease;
	}
	div.home-menu-item:hover .wp-block-cover svg {
		opacity: 1;
		transform: translateX(0px);
		transition: all .2s ease;
	}
		div.home-menu-item:hover .wp-block-cover img {
		transform: perspective(1px) scale3d(1.04, 1.04, 1.04);
		transition: transform .25s ease !important;
	}
	div.home-menu-item a:hover{
		text-decoration: underline;
		text-decoration-thickness: 3px !important;
		transition: .2s ease;
	}
}

.home-post-link h2::after{
    content: '\f061';
    font: var(--fa-font-sharp-regular);
    margin-left: 5px;
    opacity: 0;
    transition: all .2s ease;
}

.home-post-link h2 a:hover{
  text-decoration: underline;
}

.home-post-link h2:hover::after{
  opacity: 1;
  margin-left: 10px;
  transition: all .2s ease;
}

.home-menu-item p:first-child {
   letter-spacing: -0.02em !important;
}

div.home-post-link{
  position: relative;
}

div.home-post-link h2 a::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*********************************
            Home Header
*********************************/
@media(min-width: 782px){
	.header-image img{
		max-width: 139%;
		float: right;
		margin-right: 0px;
	}
}
@media(min-width: 1030px){
	.header-image img{
		max-width: 135%;
		float: right;
		margin-right: -100px;
	}
}
@media(min-width: 1200px){
	.header-image img{
		max-width: 123%;
		float: right;
		margin-right: -10px;
	}
}
@media(min-width: 1450px){
	.header-image img{
		max-width: 138%;
		float: right;
		margin-right: -100px;
	}
}

.home-header{
	overflow-x: clip;
}


/*********************************
        Footer 
*********************************/

/* Mobile footer nav */
@media(max-width: 781px) {
	div.footer-navigation * {
		text-align: left;
		align-items: start;
	}
}
@media(min-width: 782px){
	div.footer-navigation .wp-block-navigation .wp-block-navigation-item {
    	text-align: right;
	}
}

/* Footer margin fix */
:where(.wp-site-blocks) > * {
  	margin-block-start: 0 !important;
}


/*********************************
            Timeline
*********************************/

div.wp-block-column.timeline > div.wp-block-query li.wp-block-post,
div.wp-block-group.timeline > div.wp-block-query li.wp-block-post{
  	position: relative;
}

@media(max-width: 782px){
	div.wp-block-group.timeline-page{
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

div.wp-block-column.timeline > div.wp-block-query li.wp-block-post::before,
div.wp-block-group.timeline > div.wp-block-query li.wp-block-post::before{
	content: '';
	position: absolute;
	width: 9px;
	height: 9px;
	background-color: black;
	border-radius: 10px;
	left: -5px;
	top: 33px;
	transform: translateY(-50%);
}

div.wp-block-column.timeline > div.wp-block-query li.wp-block-post:first-child::before,
div.wp-block-group.timeline > div.wp-block-query li.wp-block-post:first-child::before{
	width: 13px;
    height: 13px;
    border-radius: 13px;
    left: -7px;
    top: 32px;
}

div.wp-block-column.timeline > div.wp-block-query li.wp-block-post::after,
div.wp-block-group.timeline > div.wp-block-query li.wp-block-post::after{
  content: '';
  position: absolute;
  width: 25px;
  height: 1px;
  background: none;
  border-top: 1px solid rgba(0,0,0,0.25);
  left: 0px;
  top: 33px;
  transform: translateY(-50%);
}

@media(max-width: 680px){
	div.wp-block-column.timeline > div.wp-block-query li.wp-block-post::after,
	div.wp-block-group.timeline > div.wp-block-query li.wp-block-post::after{
		width: 20px;
    }
}

.value::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-sharp-regular);
    content: '\f0c1';
    padding-right: 4px;
}


/*********************************
            Comments
*********************************/

:where(.wp-block-post-comments-form) input:not([type=submit]), 
:where(.wp-block-post-comments-form) textarea {
    border: none;
    background: var(--wp--preset--color--light-100);
}
.wp-block-post-comments-form :where(input[type=submit]) {
    border: none !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: black !important;
    background-color: var(--wp--preset--color--light-100) !important;
}
.wp-block-post-comments-form :where(input[type=submit]):hover {
    background-color: var(--wp--preset--color--light-200) !important;
}

/* Logged in as - Comment form */
p.logged-in-as a {
    color: inherit;
    text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
}
p.logged-in-as > span {
    display: block;
}

p.comment-notes{
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.6;
    margin-top: 5px;
}

h3#reply-title{
	display: none;
}

div.comment-respond textarea,
div.comment-respond input{
	margin-top: 10px;
}

.wp-block-comment-content > p{
	margin-top: 0px;
}


/*********************************
            Post grid
*********************************/
div.post-grid-item {
    position: relative;
}

div.post-grid-item a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

div.post-grid-item a{
	text-decoration: underline;
	text-decoration-thickness: 2px !important;
	text-decoration-color: transparent;
	transition: all .4s ease;
}

div.post-grid-item:hover a{
	text-decoration: underline;
	text-decoration-thickness: 2px !important;
	text-decoration-color: black;
	transition: all .2s ease;
}

div.placeholder{
	width: 100%; 
	height: 100%; 
	background: rgba(0,0,0,0.02); 
	border-radius: 10px; 
	display: flex; 
	justify-content: center; 
	align-items: center;
}

div.post-grid-item img,
div.post-grid-item div.placeholder,
div.post-grid-item figure::before{
	transform: translateY(0px);
	transition: transform .3s ease;
}

div.post-grid-item:hover img,
div.post-grid-item:hover div.placeholder,
div.post-grid-item:hover figure::before{
	transform: translateY(-5px);
	transition: transform .2s ease;
}


/*********************************
          Zeit-o-Matic
*********************************/

div.zeit{
	display: flex;
    float: right;
    background: url(https://goggo.sydyh.nl/wp-content/themes/goggo-go/assets/img/stroke.png);
    width: 150px;
    height: 100px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: var(--wp--preset--color--light-300);
    align-items: center;
    justify-content: center;
}

div.zeit p{
	display: inline-block;
}


/*********************************
          Pagination
*********************************/
div.pagination-container:has(nav) {
    background: var(--wp--preset--color--light-300);
    padding-top: var(--wp--preset--spacing--xsmall) !important;
    padding-bottom: var(--wp--preset--spacing--xsmall) !important;
    padding-left: var(--wp--preset--spacing--xsmall) !important;
    padding-right: var(--wp--preset--spacing--xsmall) !important;
}

/* Arrows t-page */
body.page-template-wp-custom-template-custom-t .wp-block-s0117-slideshow .splide__arrow {
	background: var(--wp--preset--color--secondary-300);
}

/*********************************
          Column numbers
*********************************/
div.script-number{
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--wp--preset--color--dark-100);
  color: var(--wp--preset--color--light-200);
  width: 30px;
  height: 30px;
  border-radius: 30px;
}

/*********************************
         Gtranslate
*********************************/
a.glink{
    margin-right: 5px;
}

a.glink img{
    opacity: 1 !important;
    transition: opacity .2s ease;
}

a.glink:not(.gt-current-lang) img{
    opacity: .5 !important;
}

a.glink img:hover{
    opacity: 1 !important;
    transition: opacity .2s ease;
}

/*********************************
         Ninja forms
*********************************/
.nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content input:not([type=button]), .nf-form-content textarea {
    background: var(--wp--preset--color--light-300);
    border: none;
    border-radius: 3px;
    color: var(--wp--preset--color--dark-200);
    transition: all .2s ease;
}

.nf-form-content input[type="submit"]{
	padding: 15px 30px;
    height: unset;
	color: var(--wp--preset--color--dark-200);
    background: var(--wp--preset--color--light-300);
	transition: all .2s ease;
}
.nf-form-content input[type="submit"]:hover{
	color: var(--wp--preset--color--dark-200);
    background: var(--wp--preset--color--light-300);
	transition: all .2s ease;
}

.nf-form-content input[type="submit"]:enabled:hover{
	color: var(--wp--preset--color--dark-200);
    background: #e7dac1;
	transition: all .2s ease;
}



/*********************************
          Single post
*********************************/

div.single-post-header{
	overflow-x: clip;
	z-index: 1;
}

@media (max-width: 781px){
 	div.single-post-header{
    	padding: 0 !important;
  	}
	div.single-post-header-image {
		width: 100%;
	}
    div.single-post-header .wp-block-columns{
    	flex-direction: column-reverse;
    	margin: 0 !important;
		padding-top: 0 !important;
  	}
  	div.single-post-header .wp-block-columns .wp-block-column:first-child > .wp-block-group{
    	padding: 0px 20px;
  	}
	div.single-post-header-image img {
		border-radius: 0 !important;
	}
} 

@media (min-width: 782px){
	div.single-post-header-image {
		width: calc(100vw/2 - 68px);
	}

	div.single-post-header-image figure {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 4/3 !important;
	}

	div.single-post-header-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		box-shadow: 50px 20px 50px rgb(49 39 19 / 25%);
	}
}

@media (min-width: 1200px){
	div.single-post-header{
		background: linear-gradient(180deg, #f3ede1 80%, #f6f2ea 80%) !important;
	}
	div.single-post-header .wp-block-columns .wp-block-column:first-child{
		margin-top: -10%;
	}
}

body.single .single-post-header .taxonomy-category::before{
    content: '\f07b';
    font: var(--fa-font-sharp-regular);
    margin-right: 5px;
}

body.single .single-post-header .taxonomy-post_tag::before{
    content: '\f02b';
    font: var(--fa-font-sharp-regular);
    margin-right: 5px;
    transform: scaleX(-1);
}

body.single .single-post-header .wp-block-post-date::before{
    content: '\f133';
    font: var(--fa-font-sharp-regular);
    margin-right: 5px;
}


/*********************************
          Figcaption
*********************************/
	
.wp-block-image figcaption {
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--regular);
}

.wp-block-image :where(figcaption)::before {
   content: '— ';
}
	
figure figcaption{
	position: absolute;
}

	
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::before {
	content: unset;
}


/*********************************
          Slideshow
*********************************/
.wp-block-s0117-slide img {
    aspect-ratio: 4 / 3;
}


/*********************************
          Image filters
*********************************/

figure.wp-block-image,
figure.wp-block-post-featured-image,
li.splide__slide {
  position: relative;
}
	
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    height: 100%;
    -webkit-mask-image: none !important;
    mask-image: none !important;
	max-height: 100%;
}

figure.wp-block-image::before,
figure.wp-block-post-featured-image::before,
li.splide__slide::before,
div.home-menu-item .wp-block-cover::before,
div.wp-block-cover::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://goggo.sydyh.nl/noise.svg), #b3a1829e;
    background-repeat: repeat;
    z-index: 2;
    box-shadow: 0 0 100px rgba(0, 0, 0, .4) inset;
    opacity: .4;
    border-radius: 5px;
    pointer-events: none;
}
	


div.single-post-header figure.wp-block-image::before,
div.single-post-header figure.wp-block-post-featured-image::before {
    border-radius: 10px;
}
	
figure.wp-block-image img,
figure.wp-block-post-featured-image img,
li.splide__slide img,
div.home-menu-item .wp-block-cover img,
div.wp-block-cover img{
     filter: blur(0.02em) saturate(110%) contrast(1.5) brightness(1.02);
}

figure.nofilter::before,
figure.wp-block-gallery.nofilter figure::before,
body.nofilter figure::before,
body.nofilter div.home-menu-item .wp-block-cover::before,
body.nofilter li.splide__slide::before,
body.nofilter div.wp-block-cover::before,
figure.neverfilter::before {
	display: none;
	width: 0;
	height: 0;
}

figure.nofilter img,
figure.wp-block-gallery.nofilter figure img,
body.nofilter figure img,
body.nofilter div.home-menu-item .wp-block-cover img,
body.nofilter li.splide__slide img,
body.nofilter div.wp-block-cover img,
figure.neverfilter img{
     filter: none;
}


/*********************************
      Protected post form
*********************************/

form.post-password-form{
padding: 40px;
  text-align: left;
}

form.post-password-form h2{
  font-family: var(--wp--preset--font-family--futura-pt-bold) !important;
  margin: 0px 0px 20px;
}

div.input{
  display:  flex;
}

form.post-password-form input{
  background: white;
  padding: 10px 10px;
  border-radius: 5px 0px 0px 5px;
  border: none;
  font-size: var(--wp--preset--font-size--small);
}

form.post-password-form button{
  width: 100px;
  background: var(--wp--preset--color--dark-100);
  color: var(--wp--preset--color--light-100);
  border: 0;
  outline: 0;
  padding: 10px 20px;
  font-size: var(--wp--preset--font-size--small);
  border-radius: 0px 5px 5px 0px;
}