/*
 Theme Name:   Het Ongebaande Pad Theme
 Theme URI:    https://elementor.com/hello-theme/
 Description:  Het Ongebaande Pad custom theme
 Author:       Vincent van den Brink
 Author URI:   https://pixelwrk.nl
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-child
*/

/*** GENERAL ***/
html {
	font-size: 1rem;
	scroll-behavior: smooth;
}

body * {
	outline: none;
	font-family: var(--e-global-typography-text-font-family);
}

h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Sharpen images in Chrome */
img {
	image-rendering: -webkit-optimize-contrast !important;
}

img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: auto !important;
}

/* Headings */
h1 { font-size: 2.5rem }
h2 { font-size: 2rem }
h3 { font-size: 1.66rem }
h4 { font-size: 1.33rem }
h5 { font-size: 1rem }
h6 { font-size: 0.9rem }

h1 b, h1 strong,
h2 b, h2 strong,
h3 b, h3 strong,
h4 b, h4 strong,
h5 b, h5 strong,
h6 b, h6 strong {
	font-weight: bold;
}

/* Paragraphs */
p {
	margin-top: 0;
}

/* List */
.elementor-widget-text-editor ul,
.elementor-widget-theme-post-content ul,
.elementor-widget-text-editor ol,
.elementor-widget-theme-post-content ol {
	margin: 0 0 24px 0;
}

.elementor-widget-text-editor :last-child,
.elementor-widget-theme-post-content :last-child {
	margin-bottom: 0;
}

/* Buttons */
a.elementor-button,
a:hover.elementor-button {
	font-size: var(--e-global-typography-accent-font-size) !important;
	font-weight: var(--e-global-typography-accent-font-weight) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
}

/* Hide inner shadow on inputs */
input,
textarea {   
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	outline: none;
}




/*** POST ***/

/** Blog Overview **/
#blog-overview {
	min-height: 100vh;
}

#blog-overview::before {
	top: 0;
	bottom: 0;
	left: 50%;
  	width: 2px;
	background-color: var(--e-global-color-57eb96e);
	content: '';
	transform: translateX(-50%);
	position: absolute;
	pointer-events: none;
}

#blog-overview .post {
	position: relative;
}

#blog-overview .post:nth-child(odd)  {
	margin-top: 240px;
}

#blog-overview .post-tile::before {
	top: 50%;
	right: -80px;
	left: auto;
	width: 80px;
	height: 2px;
	background: var(--e-global-color-57eb96e);
	transform: translateY(-50%);
	content: '';
	position: absolute;
	pointer-events: none;
	z-index: 0;
	transition: background .6s ease;
}

#blog-overview .post-tile::after {
	top: 50%;
	right: -88px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--e-global-color-57eb96e);
	transform: translateY(-50%);
	content: '';
	position: absolute;
	pointer-events: none;
	z-index: 0;
	transition: all .6s ease;
}

#blog-overview a:hover.post-tile::before, 
#blog-overview a:hover.post-tile::after {
	background: var(--e-global-color-primary);
}

#blog-overview a:hover.post-tile::after {
	right: -90px;
	width: 20px;
	height: 20px;
}

#blog-overview .post:nth-child(odd) .post-tile::before {
	right: auto;
	left: -80px;
}

#blog-overview .post:nth-child(odd) .post-tile::after {
	right: auto;
	left: -88px;
}

#blog-overview .post:nth-child(odd) a:hover.post-tile::after {
	right: auto;
	left: -90px;
}

/** Post tile **/
a.post-tile {
	position: relative;
}

.post-tile__featured-image {
	aspect-ratio: 3 / 2;
	position: relative;
	display: flex;
	overflow: hidden;
}

/* Overlay */
.post-tile__featured-image .post-tile__overlay {
	aspect-ratio: 3/2;
	transition: backdrop-filter .6s ease;
}

a:hover.post-tile .post-tile__overlay {
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/* Featured image */
.post-tile__featured-image img {
	transition: transform .6s ease;
}

a:hover.post-tile .post-tile__featured-image img {
	transform: scale(1.33) rotate(2deg);
}

/* Blog post meta */
.blog-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.blog-post-meta .meta-item {
	margin-right: 8px;
	display: flex;
	gap: 6px;	
}

.blog-post-meta .meta-item .meta-icon,
.blog-post-meta .meta-item .meta-icon svg {
  width: 24px;
  height: 24px;
}

.blog-post-meta .meta-item .meta-value  {
	line-height: 24px;
	font-family: var(--e-global-typography-text-font-family);
	font-size: var(--e-global-typography-text-font-size);
}

/* Blog overview styling */
.post-tile__featured-image .blog-post-meta .meta-item .meta-icon svg path,
.post-tile__featured-image .blog-post-meta .meta-item .meta-value {
  color: var(--e-global-color-3bd2cc8);
}



/*** BLOG POST ***/

/** Feature image **/

/* Overlay */
.blog-post .blog-post__hero__overlay {
  isolation: isolate;
}

.blog-post .blog-post__hero__overlay::after {
	left: 0;
	right: 0;
	bottom: -1px;
	content: '';
	position: absolute;
	height: 40%;
	background: color-mix(in srgb, var(--e-global-color-text) 33%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

/* Top buttons (back & comment button) */
a.back-button,
a.icon-button {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--e-global-color-3bd2cc8) 50%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	display: flex;
	flex-shrink: 0;
	transition: background-color 0.3s ease;
}

a:hover.back-button,
a:hover.icon-button {
	background-color: var(--e-global-color-3bd2cc8);
}

a.back-button svg,
a.icon-button svg {
	width: 24px;
	height: 24px;
	color: var(--e-global-color-text);
}

/* Add a comment button */
.blog-post__hero .top a.add-comment-button svg {
	width: 28px;
	height: 28px;
}

/* Post meta data (in hero)*/
.blog-post__hero .blog-post-meta * {
	color: var(--e-global-color-3bd2cc8);
}

/** Blog content */

/* Post meta data (in content) */
.blog-post__content .blog-post-meta {
	display: flex;
	justify-content: space-between;
}

.blog-post__content .blog-post-meta .meta-item {
	margin: 0;
}

.blog-post__content .blog-post-meta svg {
	color: var(--e-global-color-primary);
}


/** Other blog posts **/
/* Slider pagination dots */
.blog-post__other-posts .swiper-pagination {
	justify-content: center;
	display: flex;
	gap: 8px;
}

.blog-post__other-posts .swiper-pagination .swiper-pagination-bullet {
	width: 24px;
	height: 6px;
	border-radius: 3px;
	transition-duration: .6s;
}

.blog-post__other-posts .swiper-pagination .swiper-pagination-bullet-active {
	width: 48px;
}

.blog-post__other-posts .swiper-pagination .swiper-pagination-bullet:hover {
	background-color: var(--e-global-color-secondary);
}


/** Bottom bar **/
.blog-post__bottom-bar * {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease;
}

.blog-post__bottom-bar.is-visible * {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}










/*** PHOTOS ***/
/* Wrapper */
.album-filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2rem;
}

/* Label wrapper */
.album-filters label {
  position: relative;
  display: inline-block;
}

/* Select base */
.album-filters select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  min-width: 220px;
  padding: 0.6rem 2.2rem 0.6rem 0.75rem;

  font-size: 0.95rem;
  line-height: 1.3;
  color: #222;

  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;

  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover / focus */
.album-filters select:hover {
  border-color: #999;
}

.album-filters select:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

/* Custom arrow */
.album-filters label::after {
  content: "⌄";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1.5rem;
  color: #666;
}

/* Disabled option (Alle landen placeholder) */
.album-filters option[value=""] {
  color: #666;
}


.album-photo__img {
	border-radius: 16px !important;
}

/** Lightbox **/

/* Elementor lightbox = dialog wrapper */
.dialog-lightbox-widget .swiper-lazy-preloader {
  width: 48px;
  height: 48px;
  border-width: 4px;
  border-color: rgba(255,255,255,.25) !important;
  border-top-color: rgba(255,255,255,1) !important;
}

/* Elementor lightbox: verberg img zolang hij nog geen echte src heeft */
.dialog-lightbox-widget img[src=""],
.dialog-lightbox-widget img:not([src]) {
  display: none !important;
}




@media only screen and (max-width: 1024px) {
	

	
}

@media only screen and (max-width: 767px) {

	/* HEADINGS */
	h1 { font-size: 2.25rem }
	h2 { font-size: 1.75rem }
	h3 { font-size: 1.5rem }
	h4 { font-size: 1.25rem }
	
}