/*
 Theme Name:   Bogranito Pa Boneiru
 Theme URI:    https://zaca.nl
 Description:  Bogranito Pa Boneiru wordpress thema
 Author:       zaca
 Author URI:   https://zaca.nl
 Template:     generatepress
 Version:      1.0
*/



/* Default cursor */
.category-afgerond:hover
body,
body * {
  cursor: url("https://bogranito.com/wp-content/uploads/2025/11/cursorbgpb.svg") 2 0, auto!important;
}



/* Hover cursor */
body a,
body a *,
body a p,
body button,
.gb-accordion__item:hover,
.gb-accordion__item strong:hover,
.gb-accordion__item svg:hover,
.gb-accordion__item [role="button"]:hover,
body button *,
body input[type="submit"],
body input[type="submit"] *,
body input[type="button"],
body input[type="button"] *,
body [data-hover],
body [data-hover] *,
body [data-gsap-slider-list-status] [data-hover]:hover,
body [data-gsap-slider-list-status] [data-hover]:hover * {
  cursor: url("https://bogranito.com/wp-content/uploads/2025/11/linkcursor-bgpb.svg") 12 0, pointer!important;
}


@font-face {
  font-family: 'SuperNormal';
  src: url('https://bogranito.com/wp-content/themes/BogranitoPaBoneiru/fonts/SuperNormal-xRoj5.ttf') format('truetype');
	  font-style: normal;
  font-weight: 600;
	  font-display: swap;
}

.breadcrumb a{
	text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--basisblauw)
}
.breadcrumb a:hover{
    text-decoration:none;
}

.nomargin {
	margin-bottom:0;
}

.nolink, .nolink a{
	text-decoration:none!important;
}

.nolink:hover, .nolink a:hover{
	text-decoration:underline;
}

.afkorting {
	font-size:20px;
	color:var(--wit);
	vertical-align:text-top;
	line-height:1;

}

@media (max-width: 768px) {
	.page-id-392 .afkorting {
			font-size:14px;
	display:block;
}
}

.felblauw {
	color:var(--felblauw);
}
.opbreeklijn {
	margin-left:-2em!important;
	margin-right:-2em!important;
    border-style:dotted !important;
   color: var(--donkerblauw)!important;
}

/* LAYOUT */


.inside-top-bar {
    padding: 10px 0!important;
}

.inside-header {
	padding:20px 10px;
}

.main-navigation.has-branding .inside-navigation.grid-container {
	padding: 10px 10px!important;
}

.one-container .site-content {
    padding: 0px 0;
}

.single-post .site-content {
	 padding: 10px;
}

@media (max-width: 768px) {
	.main-navigation.has-branding .inside-navigation.grid-container {
	padding: 0 10px 0 0!important;
}
	
.one-container .site-content {
    padding: 100px 0 0 0;
	background:var(--basisblauw);
}

.single-post .site-content {
	 padding: 50px 10px;
}
}
.rij-cta {
	align-items:baseline;
}

.site-content img, .wp-block-post-featured-image img {
	border-radius:25px;
}

/* LOGO */

/* logo animatie */
.site-logo {
    position: absolute;

    -webkit-transition: .15s ease-in-out;
    -o-transition: .15s ease-in-out;
    transition: .15s ease-in-out;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    display: block;
    z-index: 2
}

.site-logo a img {
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
}

.site-logo:focus,.site-logo:hover {
    background-color: transparent
}

.site-logo a img:focus, .site-logo a img:hover {
   -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}




/* logo sticky */
.navigation-branding img, .site-logo.mobile-header-logo img {
    height: 150px!important;
    width: auto;
	margin-top:50px;
}

.sticky-enabled .main-navigation.is_stuck {
	box-shadow:none;
}

/* MENU */
.slideout-toggle, .menu-toggle {
	border:3px solid var(--rood)!important;
	background:white!important;
	border-bottom-left-radius:40%;
	margin-top:15px;

}

.slideout-toggle:hover, .menu-toggle:hover {
	border:3px solid var(--wit)!important;
			background:var(--rood)!important;
}

button.menu-toggle:hover, button.menu-toggle:focus {
	color:var(--wit);
}

/* OFF CANVAS */
.slideout-navigation.do-overlay .inside-navigation {
    display: flex;
    flex-direction: column;
    padding: 10% 10px 0!important;
    max-width: 1024px!important;
}

@media (max-width: 768px) {
.slideout-navigation .main-nav {
    margin-bottom: 40px;
	margin-top:40px;
}
	
#generate-slideout-menu.do-overlay .slideout-menu li, .slideout-navigation.do-overlay .inside-navigation {
    text-align: left!important;
    margin-bottom: 30px;
}
	.main-navigation .main-nav ul li a {
    padding-left: 0;
    padding-right: 0;
    line-height: 60px;
}
}

/* TOPBAR */
.typewriter h2 {
  color: var(--roze);
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid var(--geel); /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

/* BEFORE FOOTER ANDERE ACTIVITEITEN */
.activiteiten:has(.activiteit:hover) .activiteit:not(:hover) {
 opacity: 0.25;
filter: blur(3px);
	transition:0.75s;
}
.activiteit  {
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	border-radius:25px;
}

.activiteit:hover  {
box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px;
	border-radius:25px;
}


/* FOOTER MENU */
.footermenu a {
text-decoration:none;
	margin-right:10px;
color: var(--basisblauw);
}

.footermenu a::before {
margin-right:5px;
  display: inline-block;
 background-image: url('https://bogranito.com/wp-content/uploads/2025/06/target.png');
    background-size: 20px 20px;
    width: 20px; 
    height: 20px;
    content:"";
}

.footermenu a:hover{
	text-decoration:underline;
}



 /* HOME */
:root{
--card-w: min(86vw,680px);
--card-h: calc(var(--card-w) * 0.66);
--gap: 18px;
--duration: 900ms;
--easing: cubic-bezier(.2,.9,.2,1);
}

/* container that keeps the photos perfectly stacked initially */
.stack{
width:var(--card-w);
height:var(--card-h);
position:relative;
perspective:1200px; /* nicer 3D feeling */
}
/* each photo is absolutely centered and stacked on top of each other */
.photo{
position:absolute;
left:50%;
top:50%;
width:100%;
height:100%;
transform-origin:50% 50%;
transform:translate(-50%,-50%);
border-radius:14px!important;
box-shadow:0 6px 20px rgba(20,30,60,0.12);
overflow:hidden;
backface-visibility:hidden;
border:2px solid var(--basisblauw);
background-size:cover;
background-position:center;
/* start fully stacked and slightly scaled down */
scale:0.98;
opacity:0.0;
/* animation runs once on load */
animation-name:unstack;
animation-duration:var(--duration);
animation-timing-function:var(--easing);
animation-fill-mode:forwards;
}

.site-content .stack img {
	border-radius:14px!important;
}


/* small offset to create a natural layered look once animation finished */
.photo--1{ z-index:3; animation-delay:0ms; max-height:500px; object-fit:cover; }
.photo--2{ z-index:2; animation-delay:120ms; }
.photo--3{ z-index:1; animation-delay:240ms; }


/* final visual layout for each photo (staggered translate + rotate) */
@keyframes unstack{
0%{
transform:translate(-50%,-50%) rotate(0deg) scale(.98) translateZ(0);
opacity:0;
filter:grayscale(8%);
}
60%{
opacity:1;
transform:translate(-50%,-50%) rotate(var(--r)) scale(1.02) translateZ(24px);
filter:grayscale(0%);
}
100%{
transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--r)) scale(1) translateZ(0);
opacity:1;
filter:grayscale(0%);
}
}


/* different custom properties per photo to control final position and rotation */
.photo--1{ --tx: -1px; --ty: -2px; --r: -1.5deg; }
.photo--2{ --tx: 14px; --ty: 14px; --r: 3.2deg; }
.photo--3{ --tx: -18px; --ty: 22px; --r: -6.6deg; }

/* ---- hover: nu zal transition werken soepel zowel op enter als leave ---- */
.stack:hover .photo--1{
  transform: scale(1.5);
}



/* accessible reduced motion preference */
@media (prefers-reduced-motion: reduce){
.photo{ animation:none; opacity:1; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--r)) scale(1); }
}



/* responsive tweak: on very small screens reduce the offsets */
@media (max-width:420px){
.photo--2{ --tx:10px; --ty:10px; }
.photo--3{ --tx:-10px; --ty:14px; }
}
@media (min-width: 1024px) {

	.meedoen:hover h2 {
transform:translate3d(-200px,-50px,0px) rotate(-10deg);
	transition:0.75s;
}
}

	.bedrijven:hover img {
border-bottom-left-radius:40%;
	transition:0.5s;
}

/* WAT IS */
.danser {
	  width: 125px;
  height: 125px;
  position: relative;
  top: 50%;
  left: 50%;
 transform: translate(-50%, -50%);
}



/* ACTIVITEITEN */
.category-afgerond {
	opacity:0.25;
}

.category-afgerond .has-container-link:hover{
	border-color:var(--wit)!important;
	
}

.category-afgerond .nolink {
	display:none!important;
}

.category-afgerond:hover {
	opacity:0.5;
	filter:grayscale(1);
}

.category-afgerond .has-container-link{
 pointer-events:none;
}

@media (max-width: 768px) {
    .page-id-397 .wp-block-group__inner-container {
        padding: 10px;
    }
	
	.page-id-397 .wp-block-group{
		padding: 10px!important;
	}
}


/* ACTIVITEIT SINGLE */
.single-post {
	background-color:var(--geel);
}

.single-post .site-content {
		background-color:var(--geel);
}

.dynamic-entry-content h1 {
	display:none;
}

.dynamic-content-template img {
	margin-bottom:20px;
}


.single-post .gb-text-10da39fc {
	background-color:white;
}

.with_frm_style .frm_form_fields > fieldset {
	padding:2em 40px;
}


@media (max-width: 768px) {
	.with_frm_style .frm_form_fields > fieldset {
	padding:2em 20px;
}
}


@media (max-width: 768px) {
	.with_frm_style .frm_form_fields > fieldset {
	padding:2em 10px;
}
}

.taxonomy-post_tag a, .wp-block-post-terms a {
	text-decoration:none;
}




/* ANIMATIES */
.flicker-in-1{-webkit-animation:flicker-in-1 2s linear both;animation:flicker-in-1 2s linear both}
@-webkit-keyframes flicker-in-1{0%{opacity:0}10%{opacity:0}10.1%{opacity:1}10.2%{opacity:0}20%{opacity:0}20.1%{opacity:1}20.6%{opacity:0}30%{opacity:0}30.1%{opacity:1}30.5%{opacity:1}30.6%{opacity:0}45%{opacity:0}45.1%{opacity:1}50%{opacity:1}55%{opacity:1}55.1%{opacity:0}57%{opacity:0}57.1%{opacity:1}60%{opacity:1}60.1%{opacity:0}65%{opacity:0}65.1%{opacity:1}75%{opacity:1}75.1%{opacity:0}77%{opacity:0}77.1%{opacity:1}85%{opacity:1}85.1%{opacity:0}86%{opacity:0}86.1%{opacity:1}100%{opacity:1}}@keyframes flicker-in-1{0%{opacity:0}10%{opacity:0}10.1%{opacity:1}10.2%{opacity:0}20%{opacity:0}20.1%{opacity:1}20.6%{opacity:0}30%{opacity:0}30.1%{opacity:1}30.5%{opacity:1}30.6%{opacity:0}45%{opacity:0}45.1%{opacity:1}50%{opacity:1}55%{opacity:1}55.1%{opacity:0}57%{opacity:0}57.1%{opacity:1}60%{opacity:1}60.1%{opacity:0}65%{opacity:0}65.1%{opacity:1}75%{opacity:1}75.1%{opacity:0}77%{opacity:0}77.1%{opacity:1}85%{opacity:1}85.1%{opacity:0}86%{opacity:0}86.1%{opacity:1}100%{opacity:1}}

.scrolling-text {
  overflow: hidden;
  display: flex;
  align-items: center;
}
.scrolling-text .rail {
  display: flex;
}
.scrolling-text .rail h2 {
  white-space: nowrap;
	font-size:2.75vw;
  padding-right:10%;
  margin: 0;
  color: var(--color-surface-white);
}

@media (max-width: 1280px) {
	.scrolling-text .rail h2 {
	font-size:40px;
		padding-right:50px;
}
}