/**
 * Hengelder & Tatelaar, supplemental presentation styles.
 *
 * Author:  Qcast
 * Version: 1.0.0
 * Global palette, typography, and spacing are defined in theme.json. This file adds
 * layout details that block settings alone do not cover: the sticky header, the hero,
 * the circular speerpunt icons, rounded media, and the news cards.
 */

/* ------------------------------------------------------------------ Header */
.ht-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 rgba(16, 24, 40, 0.06);
}

.ht-logo a,
.ht-logo {
	text-decoration: none;
	line-height: 1.1;
}

.ht-nav a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.ht-nav a:hover {
	color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------- Hero */
.ht-hero {
	text-align: left;
}

.ht-hero .wp-block-cover__inner-container {
	width: 100%;
}

.ht-hero-title {
	margin: 0 0 1.25rem;
}

.ht-hero-intro {
	max-width: 44rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------- Sections */
.ht-section .wp-block-media-text__content {
	padding: 0 1rem;
}

.ht-eyebrow {
	margin-bottom: 0.5rem;
}

.ht-media.is-style-rounded .wp-block-media-text__media,
.ht-media.is-style-rounded .wp-block-media-text__media img {
	border-radius: 20px;
}

.ht-media .wp-block-media-text__media {
	min-height: 320px;
}

/* -------------------------------------------------------- Speerpunten band */
.ht-speerpunt-row {
	align-items: flex-start;
}

.ht-speerpunt {
	text-align: center;
}

.ht-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	margin: 0 auto 1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12);
}

.ht-icon-circle svg {
	width: 40px;
	height: 40px;
}

.ht-speerpunt-label {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	hyphens: manual;
}

/* -------------------------------------------------------------- News cards */
.ht-card {
	background: var(--wp--preset--color--base);
	border-radius: 20px;
	padding: 1rem 1rem 1.5rem;
}

.ht-card-image.is-style-rounded img,
.ht-card-image img {
	border-radius: 14px;
	width: 100%;
}

.ht-card-date {
	margin: 1rem 0 0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ht-readmore a {
	font-weight: 600;
	text-decoration: none;
}

.ht-readmore a::after {
	content: " \2192";
}

.ht-readmore a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ Footer */
.ht-footer a {
	color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 781px) {
	.ht-header-cta {
		display: none;
	}

	.ht-hero {
		text-align: center;
	}

	.ht-hero-intro {
		margin-left: auto;
		margin-right: auto;
	}

	.ht-media .wp-block-media-text__media {
		min-height: 240px;
	}
}