/*
Theme Name: Fotowerkplaats II - Lightbox
Theme URI: https://www.fotowerkplaats.nl
Author: P.Remmelts
Author URI: https://www.paulremmelts.nl
Description: Wordpress portfolio blog block theme with build-in masonry
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fotowerkplaats-ii
Tags: Eén kolom, custom-menu, Editor stijl, Uitgelichte afbeeldingen, rtl-language-support, Sticky berichten, translation-ready, Brede blokken, Stijlen van de blok-editor, Blog, Portfolio, photography, masonry

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

/*achtergrond popup lightbox */
.wp-lightbox-overlay .scrim {
    background-color: #fff;
    opacity:1!important; 
}

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}


/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/* geen ronde knoppen*/
:root :where(.is-style-post-terms-1--3 a:where(:not(.wp-element-button))) {
    border-radius: 0px!important;
}

.wp-block-image figcaption {
    background: none!important;
    box-sizing: border-box;
    font-size: 15px;
    overflow: auto;
    text-align: left!important;
    will-change:transform;
    font-family: var(--wp--preset--font-family--berlin-type-office) !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
    -webkit-backdrop-filter: none!important;
    backdrop-filter: none!important;
    content: "";
    height: 100%;
    mask-image: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0));
    max-height: 0%;
    font-family: var(--wp--preset--font-family--berlin-type-office) !important;
}


/* Blog top */
.wp-block-group {
	padding-top: var(--wp--preset--spacing--0)!important;
}

/* geen ronde knoppen*/
:root :where(.is-style-post-terms-1--3 a:where(:not(.wp-element-button))) {
    border-radius: 0px!important;
}


/* menu */
/* geen onderlijntjes in menu */
a {
    text-decoration: none!important;
}

/* menu hover kleurtje */
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
color: rgba(20, 215, 211, 1)!important;
/*background: rgba(128, 128, 128, 0.2);*/
text-decoration: none;
}

/* menu keuze kleurtje */
li.current-menu-item a {
 /*border-bottom: 0.5px solid rgba(20, 215, 211, 1)!important;*/
 color: rgba(210, 215, 211, 1)!important;
}


/* masonry gallery P.Remmelts */

.wp-block-gallery img{ 
	padding: 0.3em!important; /* padding rondom foto's in masonry */ 
}


/* ---------------------------- Lightbox ---------------------------- */

/*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */

html.swipebox-html.swipebox-touch {
    overflow: hidden !important;
}

#swipebox-overlay img {
    border: none !important;
}

#swipebox-overlay {
    width: 100%;
    height: 100vh !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999 !important;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#swipebox-container {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#swipebox-slider {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    height: 100%; 
    left: 0;
    top: 0;
    width: 100%;
    white-space: nowrap;
    position: absolute;
    display: none;
    cursor: default;
}

#swipebox-slider .slide {
    height: 80%; /* size of images */
    width: 100%;
    line-height: 1px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

#swipebox-slider .slide:before {
    content: "";
    display: inline-block;
    height: 50%;
    width: 1px;
    margin-right: -1px;
}

#swipebox-slider .slide img,
#swipebox-slider .slide .swipebox-video-container,
#swipebox-slider .slide .swipebox-inline-container {
    display: inline-block;
    max-height: 80%; /* hoogte van foto's */ /* paulus */
    max-width: 100%;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    vertical-align: middle;
}

#swipebox-slider .slide .swipebox-video-container
{
background: none;
max-width: 1140px;
max-height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#swipebox-slider .slide .swipebox-video-container .swipebox-video
{
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
}

#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe
{
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0;
}

#swipebox-slider .slide-loading
{
background: url(lightbox/images/ajax-loader.gif) no-repeat center !important;
-webkit-animation: none !important;
-o-animation: none !important;
animation: none !important;
box-shadow: none !important;
}

#swipebox-title
{
display: block;
width: 100%;
text-align: center;
font-family: var(--wp--preset--font-family--berlin-type-office) !important;
}

.swipebox-no-close-button #swipebox-close
{
display: none;
}

#swipebox-prev.disabled,
#swipebox-next.disabled
{
opacity: 0.1;
}

.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider
{
-webkit-animation: rightSpring 0.3s;
animation: rightSpring 0.3s;
}

.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider
{
-webkit-animation: leftSpring 0.3s;
animation: leftSpring 0.3s;
}

.swipebox-touch #swipebox-container:before, .swipebox-touch #swipebox-container:after
{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .3s ease;
transition: all .3s ease;
content: ' ';
position: absolute;
z-index: 999999;
top: 0;
height: 100%;
width: 20px;
opacity: 0;
}

.swipebox-touch #swipebox-container:before
{
left: 0;
-webkit-box-shadow: inset 10px 0px 10px -8px #656565;
box-shadow: inset 10px 0px 10px -8px #656565;
}

.swipebox-touch #swipebox-container:after
{
right: 0;
-webkit-box-shadow: inset -10px 0px 10px -8px #656565;
box-shadow: inset -10px 0px 10px -8px #656565;
}

.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before
{
opacity: 1;
}

.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after
{
opacity: 1;
}

@-webkit-keyframes rightSpring
{
0%
{
  left: 0;
}

50%
{
  left: -30px;
}

100%
{
  left: 0;
}
}

@keyframes rightSpring
{
  0%
  {
    left: 0;
  }

  50%
  {
    left: -30px;
  }

  100%
  {
    left: 0;
  };
}

@-webkit-keyframes leftSpring
{
  0%
  {
    left: 0;
  }

  50%
  {
    left: 30px;
  }

  100%
  {
    left: 0;
  };
}

@keyframes leftSpring
{
  0%
  {
    left: 0;
  }

  50%
  {
    left: 30px;
  }

  100%
  {
    left: 0;
  };
}

@media screen and (min-width: 800px)
{
  #swipebox-close
  {
    right: 10px!important;
  };
}

#swipebox-overlay
{
  background: rgba(251, 251, 251,1);
  min-height: 120%;
/* Achtergrond */;
}

#swipebox-bottom-bar,
#swipebox-top-bar
{
  background: none !important;
  width: 100%;
  position: fixed;
  left: 0;
  display: block;
  text-align: center;
}

#swipebox-top-bar
{
  height: 83px;
  top: 0;
  bottom: auto;
  display: table;
}

#swipebox-title
{
  display: table-cell;
  vertical-align: bottom;
  text-align: center;
  padding-left: 0em;
  height: 100%;
  color: #000!important;
  font-size: 11px;
  line-height: 19px;
  padding-bottom: 7px;
  letter-spacing: 0.1em;
  color: rgba(0,0,0,.3)!important;
  font-family: var(--wp--preset--font-family--berlin-type-office) !important;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#swipebox-bottom-bar
{
  height: 117px;
  top: auto;
  bottom: 0;
  display: block !important;
}

#swipebox-container .slide.current img
{
  position: relative !important;
  z-index: 999993 !important;
  cursor: pointer;
    /* background: white; /* paulus 
    padding:54px 54px 54px 54px; /* paulus */;
}

#swipebox-top-bar
{
  position: fixed;
  left: 0;
  top: auto;
  bottom: 0;
  text-align: left;
}

#swipebox-top-bar #swipebox-title
{
  padding-bottom: 4%;
  font-family: var(--wp--preset--font-family--berlin-type-office) !important;
 /* afstand tot foto */;
}

#swipebox-prev,
#swipebox-next
{
  background: none, transparent url("lightbox/images/icons.svg") no-repeat;
  border: none!important;
  text-decoration: none!important;
  cursor: pointer;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 0;
}

#swipebox-close
{
  background: transparent url("lightbox/images/icons.svg") no-repeat;
  border: none!important;
  text-decoration: none!important;
  cursor: pointer;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 0;
}

#swipebox-prev
{
  left: 0px;
  top: 50%;
  width: 50vw;
  height: 100vh;
  transform: translateY(-60%);
  cursor: w-resize!important;
}

#swipebox-next
{
  right: 0px;
  top: 50%;
  width: 50vw;
  height: 100vh;
  transform: translateY(-60%);
  cursor: e-resize!important;
}

#swipebox-close
{
  right: 3px;
  top: 10px;
  background-position: 0 0;
}




/* hide some stuff */
wp-block-post-title {
display: none !important;
}