/*!
Theme Name: LARP Platform
Theme URI: https://www.larp-platform.nl
Author: Yvon Vuijk
Version: 1.1
Text Domain: larp-platform
*/

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap");

/*--------- Variables ---------*/
:root,
[data-bs-theme=light] {    
    --white:    #fff;
    --gray-50: #FCFCFC;
    --gray-100: #F3F6F9;
    --gray-200: #E8EDF2;
    --gray-300: #DCDDE3;
    --gray-400: #C4C4C8;
    --gray-500: #A4A5AA;
    --gray-600: #7B7E8F;
    --gray-700: #60626D;
    --gray-800: #393C43;
    --gray-900: #1C1D26;
    --black:    #000;
    
    --primary: #AF281D;
    --primary-dark: #8f1b11;

    --bs-primary: #AF281D;
    --bs-link-color: #AF281D;

    --green: #198754;
    --yellow: #ffc107;
    --info-blue: #0dcaf0;

    --shadow-color: rgba(133, 145, 154, 0.3);
    --header-shadow-color: rgba(112, 112, 112, 0.1);

    --bs-border-radius: 12px;

    --component_padding_desktop: 40px;
    --component_padding_mobile: 20px;

    --spacer: 1rem;

    --font-family-sans-serif: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-weight-bolder: 700;
    --font-size-base: 17px;
    --font-size-small: 15px;
    --line-height-base: 1.7;
    --body-color: var(--gray-800);

    --headings-color: var(--gray-900);
    --headings-font-weight: 700;
    --headings-line-height: 1.4;
    --headings-margin-bottom: 12px;

    --h1-font-size: 34px;
    --h2-font-size: 24px;
    --h3-font-size: 20px;
    --h4-font-size: var(--font-size-base);
    --h5-font-size: var(--font-size-base);
    --h6-font-size: var(--font-size-base);

    --link-color: var(--primary);
    --link-hover-color: var(--primary-dark);
    --link-decoration: none;
    --link-hover-decoration: underline;

    --list-group-border-color: var(--gray-300);
    --list-group-border-radius: 0;

    /* Only used as reference */
    --media-breakpoint-xs: 0;
    --media-breakpoint-sm: 576px;
    --media-breakpoint-md: 768px;
    --media-breakpoint-lg: 992px;
    --media-breakpoint-xl: 1200px;
    --media-breakpoint-xxl: 1400px;
}
/*--------- END Variables ---------*/

body {
	background-color: var(--gray-50);
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-base);
  color: var(--body-color);
  line-height: var(--line-height-base);
}

.font-italic {
  font-style: italic;
}

.container {
	max-width: 1250px;
}

.rounded {
  border-radius: var(--bs-border-radius);
}

.bg-gray-100 {
  background-color: var(--gray-100);
}

.bg-white {
  background-color: var(--white);
}

strong, b {
  font-weight: var(--font-weight-bolder);
}

.tags span {
	  color: var(--gray-700);
    font-size: var(--font-size-small);
    line-height: 160%;
}


/*--------- Headers ---------*/
h1, .h1 {
    font-size: var(--h1-font-size);
}
h2, .h2 {
    font-size: var(--h2-font-size);
}
h3, .h3 {
    font-size: var(--h3-font-size);
}
h4, .h4 {
    font-size: var(--h4-font-size);
}
h5, .h5 {
    font-size: var(--h5-font-size);
}
h6, .h6 {
    font-size: var(--font-size-base);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--headings-color);
    font-weight: var(--headings-font-weight);
    line-height: var(--headings-line-height);
    margin-bottom: var(--headings-margin-bottom);
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a,
.h1 > a, .h2 > a, .h3 > a, .h4 > a, .h5 > a, .h6 > a {
  color: var(--headings-color);
  text-decoration: none;

  &:hover, &:active, &:focus {
    text-decoration: underline;
    color: var(--primary-dark);
  }
}
/*--------- End - Headers ---------*/

/*--------- Href ---------*/
a {
  color: var(--link-color);
  
  &:hover, &:focus, &:active {
    color: var(--link-hover-color);
  }
}

/*--------- Blockquote ---------*/
blockquote {
	background: var(--gray-100);
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--gray-200);
	padding: 24px;
	margin: 24px 0;

  p {
    font-size: var(--h4-font-size);
    margin-bottom: 0;
    color: var(--gray-900);
    font-style: italic;
  }
  cite {
    font-size: var(--font-size-base);
    color: var(--gray-700);
  }
}
/*--------- End -- Blockquote ---------*/


/*--------- Horizontal ruler ---------*/
hr {
	height: 1px;
	width: 100%;
	background: var(--gray-300);
	border: none;
}
/*--------- END -- Horizontal ruler ---------*/

/*--------- Display mobile / desktop ---------*/
.desktop-only {
	display:none;
}

@media only screen and (min-width: 576px) {
	.mobile-only {
		display:none !important;
	}
	.desktop-only {
		display:block !important;
	}
}
/*--------- END -- Display mobile / desktop ---------*/


/*--------- Small paragraph ---------*/
small, .small {
  color: var(--gray-800);
  font-size: var(--font-size-small);

  i {
      display: inline-block;
      width: 18px;
      text-align: center;
      color: var(--gray-800);
  }
}


/*--------- Content blocks filled by Wordpress Gutenberg ---------*/
.content {
	margin-bottom:50px;

    a:not(.btn) {
        text-decoration: underline;
    }
    > ul {
        margin-bottom: 24px;
        list-style: none;
        padding-left: 12px;
    }
    > ul > li {
        position:relative;
        margin-left: 23px;
        margin-bottom: 4px;
    }
    > ul > li:before {
        content: "\2022";
        color: var(--primary-dark);
        font-size: 22px;
        display: inline-block;
        margin-left: -20px;
        position: absolute;
        top: -5px;
    }
    h1, .h1 { 
        margin-bottom: 24px;
    }
    h2, h2 {
        margin-top: 32px;
    }
    h3, .h3, h4, .h4,
    h5, h5, h6, .h6 {
        margin-top: 22px;
    }
}
/*--------- END Content blocks filled by Wordpress Gutenberg ---------*/

/*--------- Images ---------*/
.wp-block-image {
	margin: 0;
}

.blocks-gallery-item {
	margin-bottom: 6px;
}

iframe {
	display: block;
	margin:12px auto 8px auto;
	border:1px solid var(--gray-200);
}

/* Restrain images to max-width that does not exceed their limits */
img {
	max-width:100%;
	height:auto;
}

.image {
	background-size:cover;
	max-width:100% !important;
	height:auto !important;
}

/* Image with a subwriting */
figure {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	text-align:center;

    figcaption {
        color:var(--gray-700);
        font-size:var(--font-size-small);
        line-height:160%;
        margin-bottom:16px;
        margin-top:4px;
    }
    figcaption a {
        font-weight:400;
    }
}

figure.wp-block-table {
  text-align:inherit;
}

body .is-layout-flex {
	flex-wrap:inherit !important;
}

/* Aligning images through the Gutenberg editor */
.aligncenter, 
.size-full {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top:16px;
	max-width:100% !important;
	height:auto !important;
}
.alignleft, 
.float-left {
	float:left !important;
	margin-right:16px;
	margin-bottom:8px;
	max-width:55%;
}
.alignright, 
.float-right {
	float:right !important;
	margin-left:16px;
	margin-bottom:8px;
	max-width:55%;
}

/* Responsive video iFrame */
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;

    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* Gallery */
.wp-block-gallery .blocks-gallery-item {
	padding: 0 !important;
	margin-left:0 !important;

    &:before {
      display:none !important;
  }
}

a:not([href]):hover {
	text-decoration: none;
}

.is-layout-flex {
	display:flex;
}

.box {
	width:100%;
	height:100%;
	display:flex;
	align-items:stretch;
}

.position-relative {
	position:relative;
}

#page {
	padding-top:120px;
}
@media only screen and (max-width: 576px) {
    #page {
        padding-top:100px;
    }
}

p:empty { display: none; } 

.featured-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
  border: none;
  border-radius: var(--bs-border-radius);
  position:relative;
}

a .featured-image:hover, 
a .featured-image:hover {
    transition: all 0.3s ease-in-out;
    -webkit-box-shadow: 0 0 15px 0 var(--shadow-color);
    box-shadow: 0 0 15px 0 var(--shadow-color);
    opacity: 0.9;
}

/* Images on desktop, use height in px (*/
@media only screen and (min-width: 576px) {
  .featured-image-liggend {
    height: 230px;
  }
  .featured-image-vierkant,
  .featured-image-staand {
    height: 350px;
  }
}

/* Images on desktop, use height in px (*/
@media only screen and (min-width: 576px) {
  .featured-image-liggend {
    height: 230px;
  }
  .featured-image-vierkant,
  .featured-image-staand {
    height: 350px;
  }
}

.no-wrap {
	white-space: nowrap;
}

.divider {
	margin: 0 2px;
	color: var(--gray-400);
}

.size-80 {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}

.border-grey {
	border: 1px solid var(--gray-200);
}

video, iframe {
  max-width: 100%;
}

/*--------- END Images ---------*/

/*--------- Cookie ---------*/
@media only screen and (min-width: 576px) {
	#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
		padding: 10px 0 !important;
	}
}

.moove-gdpr-infobar-allow-all,
.moove-gdpr-modal-allow-all {
	background: green!important;

	&:hover, &:focus, &:active {
		color: white !important;
	}
}
.moove-gdpr-infobar-reject-btn,
.moove-gdpr-infobar-reject-btn:hover {
  color: white !important;
  background: none !important;
  text-decoration: underline !important;
}
.moove-gdpr-company-logo-holder,
.moove-gdpr-branding-cnt {
	display: none !important;
}
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme {
	background:rgba(20, 20, 20, 0.9) !important;
}
/*--------- END Cookie ---------*/



/*--------- Badge ---------*/
.badge {
  --bs-badge-padding-x: 6px;
  --bs-badge-padding-y: 8px;
  --bs-badge-font-size: var(--font-size-small);
  --bs-badge-font-weight: 600;
  --bs-badge-color: var(--gray-900);
  --bs-badge-border-radius: 0;

  background-color: var(--gray-100);
  border: none;
  text-decoration: none;
}
a.badge:hover {
  background-color: var(--primary-dark);
  color: var(--white);
}
.badge:empty {
  display: inline-block;
}
.badge-in-image {
  position: absolute;
  top: 12px;
  left: 12px;
}
/*--------- END Badge ---------*/

/*--------- Buttons ---------*/

/* Primary button */
.btn {
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-font-size: var(--font-size-small);
  --bs-btn-font-weight: 600;
}

.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color:  var(--primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color:  var(--primary-dark);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  --bs-btn-disabled-color: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}

/* Buttons from other packages like woocommerce */
.wp-block-buttons {
  margin-top: 16px;
  margin-bottom: 16px;
}

.wp-element-button,
.button,
.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt {
  font-weight: 600;
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border: none;
  padding: 0.375rem 0.75rem;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  border-radius: var(--bs-border-radius);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-decoration: none !important;

  &:hover, &:focus, &:active {
    background-color: var(--primary-dark) !important;
    color: var(--white);
    border: none;
  }
}

/* Disabled woocommerce button */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled]:hover {
  background-color: #D15348;
}

/*--------- END Buttons ---------*/


/*--------- Formulieren ---------*/
.payment_box select, 
.single-product .thwepo-extra-options .value select, 
.single-product .variations .value select {
    padding-right: 3em;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat;
    background-size: 16px;
    -webkit-background-size: 16px;
    background-position: calc(100% - 12px) 50%;
    -webkit-background-position: calc(100% - 12px) 50%;
}
/*--------- END Formulieren ---------**/


/*--------- Footer ---------*/
.footer {
  background-color: var(--white);
  padding: 32px 0;
}
#menu-footer {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 16px;
}
#menu-footer li {
    display: inline-block;
    margin: 0 12px;
}
#menu-footer li a {
    font-size: var(--font-size-base);
    color: var(--gray-800);
    font-weight: 600;
    text-decoration: none;
}
#menu-footer li a:hover {
    text-decoration: underline;
    color: var(--primary);
}
.copyright-info {
    display: block;
    margin-top: 12px;
    font-size: var(--font-size-small);
    color: var(--gray-700);
}
/*--------- END Footer ---------*/


/*--------- Header ---------*/
.header {
	background:var(--white);
	border-bottom:1px solid var(--gray-200);
	transition: all 0.3s ease-in-out;
}

.navbar-brand { /* logo */
    position:relative;

    img {
        height:60px;
        width:auto;
        max-width:inherit !important;
    }
}

@media only screen and (min-width: 992px) {
    .navbar-brand img {
        position: absolute;
        top: -14px;
        height: 65px;
        width: auto;
    }
}

@media only screen and (min-width: 992px) {
	.navbar {
		padding: 0;
	}

	/* Main single item */
	.navbar-expand-lg .navbar-nav .nav-link {
		font-size: var(--font-size-small);
		padding: 12px 20px;
		color: var(--gray-800);

		&:hover, &:active, &:focus {
			background-color: var(--gray-200);
			color:var(--gray-900);
			text-decoration: none;
		}
	}

	/* Active */
	.navbar-nav .nav-link.active, 
	.navbar-nav .show > .nav-link {
		background: var(--gray-200);
		font-weight: 600;
		color: var(--gray-900);
	}

	.navbar .dropdown-toggle .dropdown-menu {
		display: none;
		margin-top: 0;
		padding: 0;
	}

	.navbar .nav-item .dropdown-item {
		font-size: var(--font-size-small);
		padding: 6px 20px;
		color: var(--gray-800);

		&:hover, &:active, &:focus {
			text-decoration: none;
      background: var(--gray-200);
		}
	}
	.dropdown-item.active, 
	.dropdown-item:active {
		font-weight: var(--font-weight-bolder);
		color: var(--gray-900);
		background: var(--gray-200);
	}

  /* Allows toggling the submenu */
  .navbar .nav-item:hover .dropdown-menu,
  .navbar .dropdown-toggle[aria-expanded="true"] .dropdown-menu { 
    display: block !important;
  }

	.dropdown-toggle:after {
		border: 0;
		vertical-align: inherit;
		color: var(--gray-700);
		margin-left: 8px;
		font-family: "Font Awesome 5 Free";
		font-weight: 700;
		content: "\f107";
	}

	/* WooCommerce cart icon */
	.wpmenucart-contents {
		display: block;
    height:100%;
		padding: 10px 14px;
		font-size: 17px;
		color: var(--gray-700);
    text-decoration: none;

		&:hover, &:focus, &:active {
			text-decoration: none;
		}
	}
	li.wpmenucartli a.wpmenucart-contents span {
	  display: none!important;
	}
}

/* Remove border from mobile toggler */
.navbar-toggler {
	border: none !important;
}

/* Mobile menu adjustments */
@media only screen and (max-width: 992px) {
	.navbar-light .navbar-nav .nav-link,
	.dropdown-item {
		color: var(--gray-700);
	}

	.navbar-light .navbar-nav .nav-link.active, 
	.navbar-light .navbar-nav .show > .nav-link {
		font-weight: var(--font-weight-bolder);
		color: var(--gray-900);
	}

	.menu-item.wpmenucartli {
		border-top: 1px solid var(--gray-200);
		padding: 12px 0;
		margin-top: 12px;
	}

	.dropdown-menu {
		border: none;
		padding: 0;
		border-radius: 0;
	}
    .dropdown-menu .dropdown-item {
        padding-left: 0;
        padding-right: 0;

        &:before {
            display: inline-block;
            padding: 0 12px;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f105";
            color: var(--gray-200);
        }
    }
}

.admin-bar .header {
  top: 30px;
}
/*--------- END Header ---------*/


/*--------- Sidebar ---------*/
.sidebar {
  padding-bottom: 32px;

  .widget {
    margin-bottom: 40px;
  }

  .sidebar-title {
    padding-bottom: 12px;
    margin-bottom: 30px;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      z-index: -1;
      width: calc(100% - 40px);
      height: 1px;
      bottom: 0;
      left: 0;
      background: var(--gray-300);
    }

    &:after {
      content: '';
      position: absolute;
      z-index: -1;
      width: 30px;
      height: 1px;
      bottom: 0;
      right: 0;
      background: var(--primary);
    }
  }
}

@media only screen and (max-width: 576px) {
  .sidebar {
      padding-top: 60px;
  }
}

@media only screen and (min-width: 576px) {
    .item-sidebar-single .featured-image {
        height: 100px;
    }
}

.bloggers-wanted {
    position: relative;
    margin-top: 100px;
    background-color: var(--gray-900);
    padding: 25px;
    padding-top: 50px;
    color: var(--white);

    h3, .small {
        color: var(--white);
    }

    .bloggers-icon {
        position:absolute;
        top:-60px;
        left:5px;
    }
}
/*--------- END Sidebar ---------*/


/*--------- Components ---------*/
.component {
	margin-top: var(--component_padding_desktop);
	margin-bottom: var(--component_padding_desktop);

	&.background {
		padding-top: var(--component_padding_desktop);
		padding-bottom: var(--component_padding_desktop);
	}
}

@media only screen and (max-width: 576px) {
  .component {
    margin-top: var(--component_padding_mobile);
    margin-bottom:var(--component_padding_mobile);

    &.background {
      padding-top:var(--component_padding_mobile);
      padding-bottom:var(--component_padding_mobile);
    }
  }
} */

/* Single blog or video item */
.item-single {
  display: block;
  margin-bottom: 16px;
}

.video-label {
  color: var(--white);
  font-size: 36px;
  font-weight: 300;
  position: absolute;
  bottom: 12px;
  right: 12px;
}

/* Images with aspect ratio */
.blog-image, 
.video-image {
  aspect-ratio: 16 / 9;
}

@media not (aspect-ratio: auto) {
  .blog-image, 
  .event-image {
    height: 210px;
  }
  .video-image {
    height: 170px;
  }
  .sidebar-image {
    height: 120px;
  }
}

/* Blog header info */
.blog-header {
	font-weight: 400;
	font-size: var(--font-size-small);
	padding: 10px 0;
	border-top: 1px solid var(--gray-300);
	border-bottom: 1px solid var(--gray-300);
}


/* Footer navigation for older blog posts */
.nav-links {
  padding-top: 40px;
  display: flex;

  div {
    width: 50%;
  }
  .nav-next {
    text-align: right;
  }
}
/*--------- END Components ---------*/



/*--------- Events ---------*/
.event-card {
  background-color: none;
  border:none;

  h3 a {
    text-decoration: none;

    &:hover, &:focus, &:active {
        text-decoration: underline;
    }
  }

  .event-image {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-position: center center !important;
  }

  .event-logo {
      background: var(--white);

      img {
          object-fit: contain;
          border: none;
      }
  }

  .event-name-logo {
    background: var(--gray-200);
  }
}

/* Event detail page */
.event-sidebar {
  background-color: var(--white);
  padding: 24px;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--gray-300);
  font-size: var(--font-size-small);
}
.event-sidebar-icon i {
  font-size: 24px;
}

.playstyle-balk span,
.playstyle-balk i {
  font-weight:700;
  margin:0 4px;
}
/*--------- END Events ---------*/


/*--------- Organisatie ---------*/
.orga-logo {
  width: 100%;
  margin-bottom: 24px;
}
@media only screen and (min-width: 576px) {
  .orga-logo {
    float: right;
    width: 30%;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 24px;
  }
}
/*--------- END Organisatie ---------*/


/*--------- Kalender ---------*/
#kalender {
    a {
        color: var(--gray-900);
        text-decoration: none;
    }
    .fc-list-event-time,
    .fc-list-event-dot {
        display:none !important;
    }
}

@media only screen and (min-width: 576px) {
    #kalender .fc-event {
        background: var(--primary);
        border:none !important;
        margin-bottom:2px !important;

        &:hover, &:focus, &:active {
            background-color: var(--gray-800);
        }
    }
    #kalender .fc-daygrid-day.fc-day-sat, 
    #kalender .fc-daygrid-day.fc-day-sun {
        background: var(--gray-100);
    }
    #kalender .fc-daygrid-day.fc-day-today {
        background:var(--yellow) !important;
    }

    #kalender .fc-event-past {
        opacity:0.7 !important;
    }

    #kalender .fc-event-title {
        padding: 4px 6px !important;
        white-space: normal;
        font-size:13px;
        line-height:18px;
    }

    #kalender .fc .fc-scroller-liquid-absolute {
        position: inherit;
    }
}
/*--------- END Kalender ---------*/



/*--------- Frontpage ---------*/
#frontpage {
  margin-bottom:60px;

  @media only screen and (min-width: 576px) {
    .box {
      background: var(--gray-100);
    }
  }

  .caption {
    width: 100%;
    color: var(--white);
    font-size: 13px;
    padding: 6px 12px;
    background: var(--black);  
    margin-top:8px;

    @media only screen and (min-width: 576px) {
      position:absolute;
      bottom: 0;
      background:rgba(0, 0, 0, 0.6);
      border-bottom-left-radius: var(--bs-border-radius);
      border-bottom-right-radius: var(--bs-border-radius);
    }

    a {
      color: var(--white);
      text-decoration:none;
    }
    a:hover, a:active, a:focus {
      text-decoration:underline;
    }
  }
  
  /* Mobile, use aspect ratio or fallback to px height */
  @media only screen and (max-width: 576px) {
    .featured-image-liggend {
      aspect-ratio: 16 / 9;

      @media not (aspect-ratio: auto) {
        height: 140px;
      }
    }
    
    .featured-image-vierkant {
      aspect-ratio: 1 / 1;

      @media not (aspect-ratio: auto) {
        height: 260px;
      }
    }
  }
}

.frontpage-content .row {
  padding: 25px;
  padding-right: 0;
  padding-top: 0;
}

@media only screen and (min-width: 576px) {
  .frontpage-content {
    padding-left: 24px;
    background: inherit;
  }
  .frontpage-content .row {
    padding: 65px;
    padding-bottom: 0;
  }
}

/* H1 on frontpage */
.frontpage-header {
	font-size: var(--h1-font-size);
	line-height: 1em;
  margin-bottom: 18px;

	span {
		display: block;
		font-size: var(--h2-font-size);
		color: var(--gray-600);
		font-weight: 600;
    margin-bottom: 2px;
	}
}
/*--------- END Frontpage ---------*/


/* Hidden, used to jump directly to content with tab-index */
.screen-reader-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ahref with no underline */
.no-underline {
  text-decoration: none;
    
  h2:hover, h2:focus, h2:active,
  h3:hover, h3:focus, h3:active {
    color: var(--link-hover-color) !important;
    text-decoration: underline;
  }
}