/*
Theme Name: Vioolles
Description: Child theme voor Hestia met roterende header foto's
Template: hestia
Version: 1.0.0
*/

/* Verwijder donkere overlay op header foto's */
.page-header .header-filter::before,
.single-post .page-header .header-filter::before {
	background-color: transparent !important;
}

/* Basis styling voor header */
.page-header,
.single-post .page-header {
	position: relative;
	overflow: hidden;
}

/* Zorg dat header-filter volledige hoogte heeft en foto bijgesneden wordt zonder vervorming */
/* Gebruik background-size met alleen width om verhouding te behouden */
/* Overschrijf Hestia's cover waarde */
.page-header .header-filter,
body.single-post .page-header .header-filter,
body.single .page-header .header-filter {
	height: 100% !important;
	background-size: cover !important;
	background-position: center 40% !important;
	background-repeat: no-repeat !important;
}

/* Extra specifieke regels om ervoor te zorgen dat de verhouding behouden blijft */
.page-header.header-small .header-filter,
body.single-post .page-header.header-small .header-filter,
body.single .page-header.header-small .header-filter {
	background-size: cover !important;
	background-position: center 40% !important;
}

/* Desktop: minimale hoogte om te voorkomen dat hoofden wegvallen */
@media (min-width: 769px) {
	.page-header.header-small,
	.single-post .page-header.header-small {
		min-height: 500px !important;
		height: auto !important;
	}
}

/* Zeer brede schermen: iets hogere minimale hoogte */
@media (min-width: 1200px) {
	.page-header.header-small,
	.single-post .page-header.header-small {
		min-height: 600px !important;
	}
}

/* Tablets: iets kleinere minimale hoogte maar nog steeds ruim */
@media (max-width: 768px) and (min-width: 481px) {
	.page-header.header-small,
	.single-post .page-header.header-small {
		min-height: 400px !important;
		height: auto !important;
	}
}

/* Mobile: kleinere hoogte maar nog steeds goed zichtbaar */
@media (max-width: 480px) {
	.page-header.header-small,
	.single-post .page-header.header-small {
		min-height: 300px !important;
		height: auto !important;
	}
}

/* Verberg categorie links op blog loop */
.entry-meta > a[href*="/category/"],
article > div > a[href*="/category/"],
a[href*="/category/geen-categorie"],
a[href*="/category/no-category"],
[class*="entry"] a[href*="/category/"],
[class*="post"] a[href*="/category/"] {
	display: none !important;
}

/* Extra sterke selector */
a[href*="category/geen-categorie"],
a[href*="category/no-category"] {
	visibility: hidden !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
}

/* Verberg de hele category span en verwijder alle ruimte */
.content > span.category,
.card .content > span.category {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
}

/* Verwijder spacing tussen category en titel - titel moet direct na category komen */
.content > span.category + .card-title,
.content > span.category + h4.card-title,
.content > span.category + h2.card-title,
.card .content > span.category + .card-title {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Schuif titel omhoog nu category verborgen is */
.content > .card-title:first-of-type,
.content > h4.card-title:first-of-type,
.card .content > .card-title:first-of-type {
	margin-top: -1.5em !important;
}

/* Lettertype hoofdpagina iets groter */
body.home .hentry,
body.home .entry-content,
body.home .card-description,
body.home .hestia-title {
	font-size: 1.1em !important;
	line-height: 1.6 !important;
}

/* Grote titel op hoofdpagina */
body.home .hestia-title,
body.home h1.hestia-title,
body.home .page-header h1,
body.home .page-header .title {
	font-size: 3.5rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

@media (max-width: 768px) {
	body.home .hestia-title,
	body.home h1.hestia-title,
	body.home .page-header h1,
	body.home .page-header .title {
		font-size: 2.5rem !important;
	}
}

@media (max-width: 480px) {
	body.home .hestia-title,
	body.home h1.hestia-title,
	body.home .page-header h1,
	body.home .page-header .title {
		font-size: 1.8rem !important;
	}
}

/* Lettertype blogpagina's hetzelfde als hoofdpagina */
body.single-post .hentry,
body.single-post .entry-content,
body.single-post .card-description,
body.archive .hentry,
body.archive .entry-content,
body.archive .card-description {
	font-size: 1.1em !important;
	line-height: 1.6 !important;
}

/* Links blauw op blogpagina's */
body.single-post a,
body.archive a,
body.single-post .entry-content a,
body.archive .entry-content a {
	color: #0073aa !important;
}

body.single-post a:hover,
body.archive a:hover,
body.single-post .entry-content a:hover,
body.archive .entry-content a:hover {
	color: #005177 !important;
}

/* Buttons blauw met lichtblauwe hover */
.btn,
.button,
.btn-primary,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	background-color: #0073aa !important;
	color: #ffffff !important;
	border-color: #0073aa !important;
}

.btn:hover,
.button:hover,
.btn-primary:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
	background-color: #66b3d9 !important;
	color: #ffffff !important;
	border-color: #66b3d9 !important;
}

.btn:focus,
.button:focus,
.btn-primary:focus,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
.wp-block-button__link:focus {
	background-color: #66b3d9 !important;
	color: #ffffff !important;
	border-color: #66b3d9 !important;
}

/* Blog afbeeldingen op voorpagina 40px omlaag - verschuif het hele element */
body.home .card-image,
body.home .card .card-image,
body.home article .card-image {
	margin-top: 40px !important;
}