/*
 Theme Name:   Sociëteit De Witte
 Theme URI:    https://societeitdewitte.nl
 Description:  Sociëteit De Witte WordPress Theme
 Author:       MuroMedia
 Author URI:   https://muromedia.nl
 Template:     generatepress
 Version:      1
*/

/* Reset WPML first-item offset */
.wpml-language-switcher-block [data-wpml="language-item"]:first-of-type,
.wpml-language-switcher-block [data-wpml="current-language-item"]:first-of-type {
    margin-top: 0 !important;
}

.wpml-language-switcher-block [data-wpml="current-language-item"] {
	font-weight: bold;
}

/* -- KNOP BLAUW ANIMATIE -- */
.knop_blauw {
    position: relative;
    z-index: 1;
    background-color: transparent !important; 
    background-image: linear-gradient(to right, var(--blue) 51%, transparent 49%) !important;
    background-size: 200% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 100% 0 !important;
    background-clip: padding-box !important;
    transition: background-position 0.3s ease-out, color 0.3s ease-out !important;
}

.knop_blauw:hover {
    background-position: 0 0 !important;
	color: var(--sand) !important;
}

.knop_licht {
    position: relative;
    z-index: 1;
    background-color: transparent !important; 
    background-image: linear-gradient(to right, var(--sand) 51%, transparent 49%) !important;
    background-size: 200% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 100% 0 !important;
    background-clip: padding-box !important;
    transition: background-position 0.3s ease-out, color 0.3s ease-out !important;
}

.knop_licht:hover {
    background-position: 0 0 !important;
	color: var(--blue) !important;
}

@media (max-width: 1024px) {
body.home header .knop_blauw:hover {
	color: var(--blue) !important;
	}}

body.home header, body.home .ingesloten, body.home .gb-element-fa4c24e3, body.home header .knop_blauw {
  border-color: var(--sand) !important;
}
body.home a.gb-menu-link, body.home a.gb-menu-link:hover, body.home a.gb-menu-link:focus, body.home a.gb-menu-link:active, body.home .gb-text-53dc7309 /* temp wpml */, body.home header a.knop_blauw, body.home header .wpml-language-switcher-block, body.home header .wpml-language-switcher-block a {
  color: var(--sand) !important;
}


body.home .home-search-button,
body.home .home-search-button .gb-shape,
body.home .home-search-button svg {
    color: var(--sand) !important;
    fill: var(--sand) !important;
}

body.home header a.gb-text.knop_blauw, a.gb-text-6dfef407 {
	background-image: linear-gradient(to right, var(--sand) 50%, transparent 50%) !important;
	color: var(--sand) !important;
	background-color: var(--sand);
}
body.home header a.gb-text.knop_blauw:hover, a.gb-text-6dfef407:hover {
	color: var(--blue) !important;
	background-position: 0px 0px !important;
}
body.home header a.gb-text.knop_blauw:focus, a.gb-text-6dfef407 {
	color: var(--blue);
}
body.home header a.gb-text.knop_blauw.gb-text-ca31b943:active, a.gb-text-6dfef407 {
	color: var(--blue);
}

@media (max-width: 1024px) {
  .gb-sub-menu {
    display: block !important;
    opacity: 100 !important;
  }

  .gb-submenu-toggle {
    display: none;
  }
}

@media (max-width: 1280px) {
	.gb-element-8c537b93 {
	display: none;
	visibility: hidden;
  }
}

/* Parent when child is active */
#menu-hoofdmenu > li.current-menu-ancestor > a.gb-menu-link,
#menu-hoofdmenu > li.current-menu-parent > a.gb-menu-link,
#menu-hoofdmenu > li.current-menu-item > a.gb-menu-link,

/* Active child */
#menu-hoofdmenu .sub-menu > li.current-menu-item > a.gb-menu-link {
  font-weight: 600;
}

/* Parent when child is active */
#menu-hoofdmenu-engels > li.current-menu-ancestor > a.gb-menu-link,
#menu-hoofdmenu-engels > li.current-menu-parent > a.gb-menu-link,
#menu-hoofdmenu-engels > li.current-menu-item > a.gb-menu-link,

/* Active child */
#menu-hoofdmenu-engels .sub-menu > li.current-menu-item > a.gb-menu-link {
  font-weight: 600;
}

.gb-menu--base > .gb-menu-item > .gb-menu-link:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
  .animate {
    opacity: 0;
    transform: translateY(-150px);
    transition: opacity 1s ease, transform 0.5s ease;
    will-change: opacity, transform;
  }

  .animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Disable animation in the editor preview */
  .editor-styles-wrapper .animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Ensures children elements stay inside the border sizing calculations dawawawdawdawdawd */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* -- SIBLING MENU NAV -- */
.sibling-nav {
	margin: 0 8vw;
	padding: 15px;
	border-left: 1px solid;
	border-right: 1px solid;
	border-color; var(--blue);
	font-size: 14px;
    font-family: "Source Sans 3";
}

.sibling-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sibling-nav ul li a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--blue);
    text-decoration: none;
    color: var(--blue);
    transition: all 0.2s ease;
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
}

.sibling-nav ul li a:hover {
    color: var(--red);
}

.sibling-nav ul li a.current-page {
    background: var(--red);
    border-color: var(--blue);
    color: #fff;
}


/* -- SIBLING NAVIGATION -- */
.sibling-navigation-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 84vw;
    padding: 50px 100px;
	margin: 0 8vw;
	font-size: 26px;
	border-left: 1px solid var(--blue);
	border-right: 1px solid var(--blue);
}

@media screen and (max-width: 1024px){
    .sibling-navigation-wrapper {
        padding: 50px 0; 
	}
}

/* Zorgt dat de volgende-knop rechts blijft staan als er geen vorige-knop is */
.sibling-navigation-wrapper .next {
    margin-left: auto;
    text-align: right;       /* ← align wrapped text to the right */
}

.sibling-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    max-width: 45%;          /* ← prevents each side from crowding the other */
}

.sibling-link:hover {
    text-decoration: underline;
}

/* De Bootstrap pijl groter dan de tekst */
.sibling-link .bi-arrow {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.sibling-link h3 {
    margin: 0;
}

/* Text Balance / Pretty */

:is(h1, h2, h3, h4, h5, h6), .balance {
	text-wrap: balance;
}

p, blockquote, li {
	text-wrap: pretty;
}

p:last-child:last-of-type {
	margin-bottom: 0px;
}