/*
Theme Name: Cramdon
Theme URI: https://cramdon.nl/
Author: J Denissen Computer en Telecom
Author URI: https://jdenissen.nl/
Description: Maatwerk block-thema voor Cramdon B.V. (migratie van Joomla 3). Gutenberg / site-editor, geen page builder nodig.
Version: 1.3.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cramdon
*/

/* Kleine aanvullingen op theme.json */

html { scroll-behavior: smooth; }

/* Sticky, licht transparante header zoals het origineel */
.cramdon-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(6px);
	-webkit-backdrop-filter: saturate(140%) blur(6px);
}
.admin-bar .cramdon-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .cramdon-header { top: 0; } }

.cramdon-header .wp-block-navigation-item__content { text-transform: lowercase; letter-spacing: .02em; opacity: .8; transition: opacity .15s; }
.cramdon-header .wp-block-navigation-item__content:hover,
.cramdon-header .current-menu-item > .wp-block-navigation-item__content { opacity: 1; }
.cramdon-header .current-menu-item > .wp-block-navigation-item__content { box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent); }
.cramdon-header .wp-block-site-logo img { height: auto; }

/* Hero: featured image als banner */
.cramdon-hero { min-height: clamp(220px, 34vw, 520px) !important; }
.cramdon-hero.is-small { min-height: clamp(180px, 22vw, 340px) !important; }

/* "V"-pijl voor de vier fasen (Verkennen, Verruimen, Verbinden, Verwezenlijken) */
.is-style-fase {
	display: flex;
	align-items: center;
	gap: .6em;
}
.is-style-fase::before {
	content: "";
	flex: 0 0 auto;
	width: .9em;
	height: .9em;
	background: var(--wp--preset--color--accent);
	clip-path: polygon(50% 0, 100% 55%, 100% 100%, 50% 45%, 0 100%, 0 55%);
}

/* Projectkaarten */
.cramdon-card {
	height: 100%;
	border-top: 3px solid var(--wp--preset--color--accent);
	transition: transform .15s ease, box-shadow .15s ease;
}
.cramdon-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -16px rgba(40, 36, 96, .35); }
.cramdon-card .wp-block-post-title a { text-decoration: none; }
.cramdon-cards > li { display: flex; }
.cramdon-cards > li > * { flex: 1; }

/* Review: één per pagina, horizontaal (foto links, tekst rechts), gecentreerd */
.cramdon-quote {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	max-width: 760px;
	margin: 0 auto;
}
.cramdon-quote img { flex: 0 0 auto; width: 140px; height: 140px; object-fit: cover; border-radius: 50%; }
.cramdon-quote__body { flex: 0 1 auto; }
.cramdon-quote blockquote { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-style: italic; line-height: 1.45; }
.cramdon-quote blockquote p { margin: 0; }
.cramdon-quote cite { display: block; margin-top: .9rem; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-style: normal; color: var(--wp--preset--color--accent); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 600px) {
	.cramdon-quote { flex-direction: column; text-align: center; gap: 1.25rem; }
	.cramdon-quote img { width: 110px; height: 110px; }
}

/* Footer contactregels */
.cramdon-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.cramdon-contact li { display: flex; align-items: center; gap: .75rem; }
.cramdon-contact svg { flex: 0 0 auto; width: 30px; height: 30px; padding: 6px; border-radius: 4px; background: var(--wp--preset--color--accent); fill: #fff; }
.cramdon-contact a { color: inherit; text-decoration: none; }
.cramdon-contact a:hover { color: var(--wp--preset--color--accent); }

/* Toegankelijkheid: duidelijke focus */
:where(a, button, input, .wp-element-button):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }