/*
Theme Name: Graaf Jan uit Ulft
Description: Block theme for the Jotihunt team Graaf Jan uit Ulft (Dodostam, Scouting Jan van Riebeeck and Scouting Ulft). Jotihunt 2026 theme: BRAVE.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: graaf-jan-uit-ulft
*/

/* ---------- Page frame ---------- */

/* Header, main and footer sit flush; sections bring their own spacing. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Keep the footer at the bottom on short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Buttons on dark sections: the default hover colour is the section colour itself. */
.has-highland-background-color .wp-element-button:hover {
	background-color: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--ink);
}

.has-highland-background-color .is-style-outline .wp-element-button:hover {
	border-color: var(--wp--preset--color--ember);
}

/* ---------- Tartan band ---------- */

.gju-tartan {
	height: 12px;
	background-color: var(--wp--preset--color--highland);
	background-image:
		repeating-linear-gradient(90deg,
			transparent 0 14px,
			color-mix(in srgb, var(--wp--preset--color--copper) 85%, transparent) 14px 20px,
			transparent 20px 26px,
			color-mix(in srgb, var(--wp--preset--color--ember) 90%, transparent) 26px 28px,
			transparent 28px 44px,
			color-mix(in srgb, var(--wp--preset--color--petrol) 90%, transparent) 44px 56px),
		repeating-linear-gradient(0deg,
			transparent 0 3px,
			color-mix(in srgb, var(--wp--preset--color--petrol) 60%, transparent) 3px 6px,
			transparent 6px 8px,
			color-mix(in srgb, var(--wp--preset--color--copper) 45%, transparent) 8px 10px,
			transparent 10px 12px);
}

.gju-tartan.is-thick {
	height: 20px;
}

/* ---------- Celtic knot band ---------- */

.gju-knot {
	height: 28px;
	background: url("assets/images/knot-light.svg") repeat-x center / auto 100%;
}

.gju-knot.is-dark {
	background-image: url("assets/images/knot-dark.svg");
}

.gju-knot.is-short {
	max-width: 240px;
	margin-inline: auto;
}

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

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

.gju-header .wp-block-navigation a:hover,
.gju-header .wp-block-navigation .current-menu-item > a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--ember);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* ---------- Hero ---------- */

.gju-hero {
	position: relative;
	overflow: hidden;
	padding-bottom: clamp(7rem, 14vw, 11rem) !important;
}

.gju-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: clamp(5rem, 12vw, 9rem);
	background: url("assets/images/highlands.svg") no-repeat bottom center / 100% 100%;
	pointer-events: none;
}

.gju-hero > * {
	position: relative;
	z-index: 1;
}

.gju-eyebrow {
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gju-tagline {
	font-family: var(--wp--preset--font-family--cinzel);
}

/* ---------- Group cards ---------- */

.gju-card {
	height: 100%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--highland) 22%, transparent);
	border-radius: 4px;
	box-shadow: inset 0 4px 0 var(--wp--preset--color--copper);
}

.gju-logo-tile {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	width: 100%;
	max-width: 220px;
	margin-inline: auto;
	align-self: center;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--highland) 15%, transparent);
	border-radius: 4px;
}

.gju-logo-tile.is-small {
	max-width: 160px;
}

.gju-logo-tile .wp-block-image {
	width: 100%;
	height: 100%;
	margin: 0;
}

.gju-logo-tile img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gju-card .gju-card-link {
	margin-top: auto;
}

/* Make the card columns stretch so cards line up. */
.gju-groups .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* ---------- Group profile (Over ons) ---------- */

.gju-profile {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--highland) 18%, transparent);
}

.gju-facts {
	padding-left: 0;
	list-style: none;
}

.gju-facts li {
	position: relative;
	padding-left: 1.5rem;
}

.gju-facts li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.6em;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--wp--preset--color--copper);
	transform: rotate(45deg);
}

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

.gju-footer a {
	color: inherit;
}

.gju-footer a:hover {
	color: var(--wp--preset--color--ember);
}

/* ---------- Focus ---------- */

:where(a, button, input, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--copper);
	outline-offset: 2px;
}

.has-highland-background-color :where(a, button, input, .wp-element-button):focus-visible {
	outline-color: var(--wp--preset--color--ember);
}