/*
 Theme Name:   GeneratePress Pieter Raaijmakers
 Theme URI:    https://generatepress.com
 Description:  Child theme voor GeneratePress
 Author:       Pieter Raaijmakers
 Template:     generatepress
 Version:      1.0.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Reset
# Elements
# Forms
# Links
# Alignments
# Accessibility
# Navigation
    # Dropdown Menus
    # Sidebar Navigation
# Post Navigation
# Header
# Post Content
# Widgets
# Content Layout
# Sidebars
# Footer
# Featured Images
# Icons
# Compatibility
# Mobile
--------------------------------------------------------------*/

/* lexend-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/lexend-v26-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lexend-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/lexend-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/crimson-pro-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  src: url('assets/fonts/crimson-pro-v28-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/crimson-pro-v28-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
h1 {
	font-size: 35px;
	margin-bottom: 17px;
	font-weight: 700;
}

h2 {
	font-weight: 700;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
/* 1. Verwijder de dikke zwarte focusrand */
input:focus {
  outline: none;
  /* Optioneel: pas je eigen styling toe voor als de input actief is */
  /* border: 1px solid #ccc; */
}

/* 2. Verwijder het standaard kruisje (wisknopje) in Chrome, Safari en Edge */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.wp-block-image {
	margin-bottom: 10px;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.main-navigation .main-nav ul li a {
	padding-left: 15px;
	padding-right: 15px;
}

/*--------------------------------------------------------------
## Dropdown Menus
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Sidebar Navigation
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Post Navigation
--------------------------------------------------------------*/
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 2em 0 2em;
}

.site-main .post-navigation {
	display: flex;
}
.prev, .next {
	font-size: 100%;
	font-weight: 700;
}
.site-main .post-navigation a {
	text-decoration: none;
}
.nav-previous, .nav-next {
	flex: 0 0 50%;
}
.nav-title, .nav-title-right {
	display: block;
}
.nav-next, .nav-title-right {
	text-align: right;
}
.nav-next:only-child {
	flex-basis: 100%;
	text-align: right;
}
.nav-links a {
	text-decoration: none;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Post Content
--------------------------------------------------------------*/
.page-content:not(:first-child),
.entry-content:not(:first-child),
.entry-summary:not(:first-child) {
	margin-top: 1em;
}
.entry-summary p {
	-webkit-line-clamp: 3;
	line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-title {
	text-transform: uppercase;
	font-weight: 300;
}
.entry-meta {
	font-size: 78%;
	margin-top: 1.2em;
	line-height: 1.5;
	text-transform: uppercase;
}

.home .entry-meta,
.archive .entry-meta,
.search .entry-meta {
    display: block;
}

.home .entry-meta .cat-links,
.archive .entry-meta .cat-links,
.search .entry-meta .cat-links {
    display: inline-block;
    margin-right: 15px;}

.home .entry-meta .posted-on,
.archive .entry-meta .posted-on,
.search .entry-meta .posted-on {
    display: inline-block;
}

.cat-links,
.tags-links,
.comments-link {
	text-transform: uppercase;
}
.cat-links a,
.tags-links a,
home .cat-links {
	text-decoration: none;
	font-weight: 700;
}

/* Maak van het artikel de relatieve container */
.inside-article {
    position: relative;
}

/* Laat de link in de titel de hele kaart bedekken */
.inside-article .entry-title a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/* Optioneel: Hover-effect op de hele kaart */
home .inside-article:hover {
    cursor: pointer;
}

/* special categories */

/*.post.category-victor,
article.category-victor .entry-content,
body.single-victor .entry-content,
.post.category-victor .cat-links {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.35rem);
    line-height: 1.5;
}
.post.category-victor .cat-links {
    text-transform: none;
    margin-bottom: 1em;
}
.post.category-victor .cat-links a {
    font-weight: 300;
}

body.category-victor {
    background-color: #f4efe6;
}

.category-victor .inside-article {
    background-color: #faf6f0;
}

.category-victor .entry-title a {
    color: #8b0000;
}

article.category-victor {
    background-color: #faf6f0;
}
.home article.category-victor,
.archive article.category-victor,
.search article.category-victor {
    padding: 1em;
}

article.category-victor .entry-title,
article.category-victor .entry-title a {
    color: #8b0000;
}

article.category-victor .read-more {
    background-color: #8b0000;
    color: #ffffff;
}

body.single-victor, body.single-victor .container {
    background-color: #faf6f0;
}

body.single-victor .entry-title {
    color: #8b0000;
}

.single-victor #primary
.category-victor .content-area,
.category-victor main
{
    float: none !important;
    margin: 0 auto !important;
    max-width: 680px;
    width: 100% !important;
}

.single-victor .entry-content {
    font-size: 1.15rem;
    line-height: 1.8;
    text-align: justify;
}
*/

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Post Loop Block
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget-area .widget {
	padding: 20px;
}

.widget-title {
	margin-bottom: .5em;
	line-height: 1.2;
	font-weight: 700;
}

/* .wp-block-search__button {
    margin-left: 0;
} */

#block-18 {
    display: none !important;
}

body.home #block-18,
body.page #block-18 {
    display: block !important;
}

/*--------------------------------------------------------------
# Content Layout
--------------------------------------------------------------*/
.sidebar .widget {
	background-color: transparent !important;
}

.page-header {
	margin-bottom: 4em;
	background: var(--base-2);
	padding: 2em;
}

/*--------------------------------------------------------------
## One Container
--------------------------------------------------------------*/
.one-container.archive .post:not(:last-child):not(.is-loop-template-item),
.one-container.blog .post:not(:last-child):not(.is-loop-template-item) {
	padding-bottom: 20px;
}

/*--------------------------------------------------------------
## Separate Containers
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Full Width Content
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Contained Content
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Sidebars
--------------------------------------------------------------*/
.is-right-sidebar {
	background: var(--base-2);
	/* border: 1px solid #DDD; */
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Featured Images
--------------------------------------------------------------*/
.post-image:not(:first-child) {
	margin-top: 1em;
}

/*--------------------------------------------------------------
# Icons
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Compatibility
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Mobile Menu
--------------------------------------------------------------*/

/* Additions Child GeneratePress Pieter Raaijmakers */

@media (min-width: 769px) {
    .custom-flex-loop {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }

    .custom-flex-loop .loop-column-image {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .custom-flex-loop .loop-column-content {
        flex: 0 0 calc(66.666% - 20px);
        max-width: calc(66.666% - 20px);
    }
    
    .custom-flex-loop .loop-column-image img {
        width: 100%;
        height: auto;
        display: block;
    }
}

@media (max-width: 768px) {
    .custom-flex-loop .loop-column-image {
        margin-bottom: 20px;
    }
}

.inside-article.custom-flex-loop {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.custom-flex-loop .loop-column-image {
    display: flex;
    flex-direction: column;
}

.custom-flex-loop .loop-column-image .post-image,
.custom-flex-loop .loop-column-image .post-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.custom-flex-loop .loop-column-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.custom-flex-loop .loop-column-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.font-200 {
	font-weight: 200;
}

.wp-block-social-link {
    border-radius: 3px;
}

/*--------------------------------------------------------------
## Breakpoint (768px)
--------------------------------------------------------------*/
@media (max-width: 768px) {
	/*--------------------------------------------------------------
	## Links
	--------------------------------------------------------------*/
	/*--------------------------------------------------------------
	## Header
	--------------------------------------------------------------*/
	/*--------------------------------------------------------------
	## Content Area
	--------------------------------------------------------------*/
	.comment .children {
		padding-left: 10px;
		margin-left: 0;
	}
	/* .entry-meta {
		font-size: inherit;
	} */
	.entry-meta a {
		line-height: 1.5em;
	}
	.page-header {
		padding: 1em;
	}
	.site-main .post-navigation {
		flex-direction: column;
	}
	.nav-next {
		margin-top: 1em;	
	}
	.widget-area .widget {
		padding: 0 !important;
	}
	.is-right-sidebar.sidebar {
		margin-top: 23px;
		border: none;
        border-top: 4px solid var(--base);
        padding-top: 30px;
        background: var(--base-3);
    }
}

	h1, h2 {
		font-size: 28px;
	}
	.mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus, .has-inline-mobile-toggle #site-navigation.toggled {
    background-color: rgba(255, 255, 255, 1) !important;
	}
	.sidebar .widget {
		margin-bottom: 60px;
	}