/*
Theme Name: Totelos
Theme URI: https://totelos.nl
Description: Huisstijl van E.S.Z.V.V. Totelos (rood, wit, zwart), gebouwd als child theme op Twenty Twenty-Five.
Author: E.S.Z.V.V. Totelos
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: totelos
*/

/* Header: red top bar, thin grey line underneath. */
.totelos-header {
	border-top: 6px solid var(--wp--preset--color--accent-1);
	border-bottom: 1px solid #e6e6e6;
}

.totelos-header__inner {
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.totelos-header .wp-block-site-title {
	font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
	line-height: 1;
}

.totelos-header .wp-block-site-title a {
	text-decoration: none;
}

.totelos-header .wp-block-navigation a {
	text-decoration: none;
}

.totelos-header .wp-block-navigation .current-menu-item > a,
.totelos-header .wp-block-navigation .current-menu-ancestor > a {
	color: var(--wp--preset--color--accent-1);
}

.totelos-header .wp-block-navigation__submenu-container {
	border: 0 !important;
	border-top: 3px solid var(--wp--preset--color--accent-1) !important;
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
	min-width: 220px !important;
}

.totelos-header__cta .wp-block-button__link {
	padding: 0.6em 1.1em;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

/* On medium screens the logo alone identifies the site; the menu needs the room. */
@media (max-width: 1100px) {
	.totelos-header .wp-block-site-title {
		display: none;
	}
}

/* Hero: full-width red band with subtle stripes. */
.totelos-hero {
	padding-top: clamp(4rem, 9vw, 8rem);
	padding-bottom: clamp(4rem, 9vw, 8rem);
	background-image: repeating-linear-gradient(
		135deg,
		rgb(255 255 255 / 6%) 0 2px,
		transparent 2px 24px
	);
}

.totelos-hero h1 {
	font-size: clamp(2.4rem, 1.4rem + 4.5vw, 5.2rem);
	line-height: 1;
	max-width: 14ch;
}

.totelos-hero p {
	max-width: 42rem;
}

.totelos-hero .is-style-outline .wp-block-button__link {
	border-color: currentColor;
}

/* Sections on the front page and in patterns. */
.totelos-section {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.totelos-intro {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--50);
}

.totelos-intro .wp-block-buttons {
	justify-content: center;
}

/* Cards: light grey boxes with a red top edge. */
.totelos-cards > .wp-block-column {
	background: var(--wp--preset--color--accent-5);
	border-top: 4px solid var(--wp--preset--color--accent-1);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
}

.totelos-cards h3 {
	margin-top: 0;
}

/* News grid. */
.totelos-news .wp-block-post-featured-image img {
	border-radius: 6px;
}

.totelos-news .wp-block-post-title a {
	text-decoration: none;
}

/* News overview and single news posts. */
.totelos-news-index,
.totelos-single {
	padding-top: var(--wp--preset--spacing--60);
}

.totelos-news .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--hk-grotesk);
	font-weight: 600;
}

.totelos-single .wp-block-post-date {
	margin-bottom: 0.5rem;
}

.totelos-single__image img {
	width: auto;
	max-width: 100%;
	max-height: 75vh;
	margin-inline: auto;
	border-radius: 6px;
}

.totelos-single .wp-block-post-content img {
	border-radius: 6px;
}

.totelos-single__nav {
	border-top: 1px solid #e6e6e6;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}

/* Call to action band. */
.totelos-cta {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* Footer: navy with red top bar. */
.totelos-footer {
	border-top: 6px solid var(--wp--preset--color--accent-1);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--70);
}

.totelos-footer a {
	color: inherit;
}

.totelos-footer a:hover,
.totelos-footer a:focus {
	color: var(--wp--preset--color--accent-3);
}

.totelos-footer__title {
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-bottom: 0.4em;
	border-bottom: 3px solid var(--wp--preset--color--accent-1);
	display: inline-block;
}

.totelos-footer__bottom {
	border-top: 1px solid rgb(255 255 255 / 15%);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	opacity: 0.8;
}

/* The front page hero sits directly under the header. */
.totelos-front > .wp-block-post-content > .totelos-hero:first-child {
	margin-top: 0;
}