/*
Theme Name:  KCES
Theme URI:   https://kces.nl/
Description: Child theme van Blocksy voor Vereniging KCES. Tokens, block styles en patterns; de rest komt uit Blocksy en de core-blokken.
Author:      MR10
Author URI:  https://mr10.nl/
Template:    blocksy
Version:     0.2.0
Text Domain: kces
*/

/* =========================================================
   1. Tokens
   Palette 1–8 live in Blocksy (setup/design.php). Colours Blocksy
   does not know are defined here. All text pairs measured AA.
   ========================================================= */
:root {
	--kces-navy: var(--theme-palette-color-1, #15357A);
	--kces-blue: var(--theme-palette-color-2, #1D5FC4);
	--kces-ink: var(--theme-palette-color-3, #2B3445);
	--kces-line: var(--theme-palette-color-5, #D5DEEA);
	--kces-sky: var(--theme-palette-color-6, #EAF2FC);
	--kces-page: var(--theme-palette-color-7, #F8FAFD);
	--kces-white: var(--theme-palette-color-8, #FFFFFF);
	--kces-sun-bg: #FFF3D6;  /* zonlicht: warm section */
	--kces-sun: #F6B21B;     /* zongeel: decorative only, never as text colour */
	--kces-orange: #B4510B;  /* labels (5.5:1 on white) */
	--kces-muted: #4A5568;   /* secondary text (7.4:1 on white) */
	--kces-field: #5F6E84;   /* field borders (≥ 3:1) */
	--kces-error: #B42318;

	--kces-font-head: "Lora", Georgia, serif;
	--kces-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Web Agency influence: softer, larger radii and more air than the one-pager. */
	--kces-radius-lg: 20px;   /* cards, photos, hero */
	--kces-radius: 12px;      /* small cards, info blocks */
	--kces-radius-sm: 8px;    /* buttons, fields */
	--kces-shadow: 0 1px 2px rgba(21, 53, 122, .04), 0 16px 40px -12px rgba(21, 53, 122, .16);
	--kces-gutter: clamp(16px, 4vw, 48px);
	--kces-section-y: clamp(64px, 9vw, 128px);
	--kces-stack: clamp(32px, 4vw, 56px); /* space between section head and content */
}

/* =========================================================
   2. Base
   ========================================================= */
body {
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.wp-block-heading:is(h1, h2, h3) {
	text-wrap: balance;
}

p { text-wrap: pretty; }

a { text-underline-offset: 3px; }

:where(.entry-content) a:not(.wp-block-button__link) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* Visible focus on every background: 3px nachtblauw (stylebook). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--kces-navy);
	outline-offset: 3px;
	border-radius: 4px;
}

/* =========================================================
   3. Text styles (block styles)
   ========================================================= */
.is-style-kces-eyebrow {
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kces-orange);
	margin-bottom: .75rem !important;
}
.is-style-kces-eyebrow + :is(h1, h2, h3) { margin-top: 0; }

.is-style-kces-lead {
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.55;
	color: var(--kces-ink);
}

.has-kces-gedempt-color { color: var(--kces-muted); }

/* =========================================================
   4. Buttons
   ========================================================= */
.wp-block-button__link,
.ct-button,
.wp-element-button {
	font-weight: 500;
	padding: .75em 1.4em;
	border: 2px solid transparent;
	transition: background-color .15s, color .15s, border-color .15s;
}

/* Secondary = core "Outline": white with nachtblauw border (stylebook). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--kces-white);
	color: var(--kces-navy);
	border: 2px solid var(--kces-navy);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--kces-sky);
	color: var(--kces-navy);
}

/* Accent: zongeel background with nachtblauw text (6.4:1). Use sparingly. */
.wp-block-button.is-style-kces-accent > .wp-block-button__link {
	background: var(--kces-sun);
	color: var(--kces-navy);
	border-color: var(--kces-sun);
}
.wp-block-button.is-style-kces-accent > .wp-block-button__link:hover {
	background: #FFC94D;
	border-color: #FFC94D;
	color: var(--kces-navy);
}

/* Text link with arrow ("Leer KCES kennen →"). */
.kces-text-link a {
	font-weight: 600;
	color: var(--kces-navy);
}
.kces-text-link a::after { content: " →"; }
.kces-text-link a:hover { color: var(--kces-blue); }

/* =========================================================
   5. Sections
   A section is a full-width group (alignfull) with a 1200 px
   inner container. Two coloured sections never sit next to
   each other (wireframes).
   ========================================================= */
.entry-content > .is-style-kces-section,
.entry-content > .is-style-kces-sky,
.entry-content > .is-style-kces-sun {
	position: relative;
	padding-block: var(--kces-section-y);
	padding-inline: 0; /* side gutter comes from Blocksy (88vw on small screens), same as header/footer */
	margin-block: 0;
	isolation: isolate;
}
.entry-content > .is-style-kces-sky { background: var(--kces-sky); }
.entry-content > .is-style-kces-sun { background: var(--kces-sun-bg); }

/* Decorative diagonal shape (Web Agency touch) on coloured sections. */
.entry-content > .is-style-kces-sky::before,
.entry-content > .is-style-kces-sun::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 0 0 auto;
	width: min(48%, 640px);
	background: rgba(255, 255, 255, .55);
	clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}

/* Section head: eyebrow + H2 (+ intro), optionally centred. */
.kces-section-head { margin-bottom: var(--kces-stack); max-width: 760px; }
.kces-section-head.is-center { margin-inline: auto; text-align: center; }
.kces-section-head p:not(.is-style-kces-eyebrow) { color: var(--kces-muted); font-size: 1.0625rem; }

/* =========================================================
   6. Cards
   ========================================================= */
.is-style-kces-card {
	background: var(--kces-white);
	border-radius: var(--kces-radius-lg);
	box-shadow: var(--kces-shadow);
	padding: clamp(24px, 2.5vw, 36px);
	height: 100%;
}
.is-style-kces-card > :first-child { margin-top: 0; }
.is-style-kces-card h3 { margin-bottom: .4em; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.is-style-kces-card p { color: var(--kces-muted); font-size: 1rem; }

/* Icon on a sunlit circle, offset (Web Agency touch). Decorative: alt="". */
.kces-card-icon {
	position: relative;
	width: 64px;
	margin: 0 0 20px !important;
}
.kces-card-icon::after {
	content: "";
	position: absolute;
	z-index: 0;
	width: 44px;
	height: 44px;
	right: -10px;
	bottom: -8px;
	border-radius: 50%;
	background: var(--kces-sun-bg);
}
.kces-card-icon img { position: relative; z-index: 1; width: 64px; height: auto; } /* icons are not quite square */

/* =========================================================
   7. Photos
   ========================================================= */
.entry-content .wp-block-image img { border-radius: var(--kces-radius-lg); }
.entry-content .wp-block-image.kces-no-radius img { border-radius: 0; }

/* =========================================================
   8. Header
   ========================================================= */
/* Tagline next to the woordmerk, separated by a thin line. */
.kces-tagline {
	margin: 0;
	padding-left: 14px;
	border-left: 1px solid var(--kces-line);
	white-space: nowrap;
}
[data-id="logo"] + [data-id="text"] { margin-left: 14px; }

/* Active menu item: nachtblauw, semibold, yellow underline (not colour alone). */
.ct-header [data-id="menu"] > ul > li > a.ct-menu-link {
	position: relative;
}
.ct-header [data-id="menu"] > ul > li > a.ct-menu-link::after {
	content: "";
	position: absolute;
	left: calc(var(--menu-items-spacing, 28px) / 2);
	right: calc(var(--menu-items-spacing, 28px) / 2);
	bottom: calc(50% - 1.1em);
	height: 3px;
	border-radius: 2px;
	background: transparent;
	opacity: 1 !important; /* Blocksy hides its own ::after indicator */
	transition: background-color .15s;
}
.ct-header [data-id="menu"] > ul > li > a.ct-menu-link:hover::after { background: var(--kces-line); }
.ct-header [data-id="menu"] > ul > li:is(.current-menu-item, .current_page_item) > a.ct-menu-link {
	color: var(--kces-navy);
	font-weight: 600;
}
.ct-header [data-id="menu"] > ul > li:is(.current-menu-item, .current_page_item) > a.ct-menu-link::after {
	background: var(--kces-sun);
}
/* Space between menu and contact button. */
.ct-header [data-id="menu"] + [data-id="button"] { margin-left: 12px; }

/* Header "Menu" trigger: 44 px target, label in normal case (stylebook). */
.ct-header-trigger { min-height: 44px; }
.ct-header-trigger .ct-label { text-transform: none; font-size: .9375rem; font-weight: 500; letter-spacing: 0; }

/* Off-canvas menu items: 48 px rows separated by lines. */
#offcanvas .mobile-menu > ul > li > a,
#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > a {
	padding-block: 14px;
	border-bottom: 1px solid var(--kces-line);
}
#offcanvas .mobile-menu > ul { border-top: 1px solid var(--kces-line); }

/* Off-canvas menu: active item with a yellow bar, full-width contact button. */
#offcanvas .mobile-menu li:is(.current-menu-item, .current_page_item) > .ct-sub-menu-parent > a,
#offcanvas .mobile-menu li:is(.current-menu-item, .current_page_item) > a {
	color: var(--kces-navy);
	font-weight: 600;
	box-shadow: inset 4px 0 0 var(--kces-sun);
	padding-left: 14px;
}
#offcanvas [data-id="button"] { width: 100%; margin-top: 16px; }
#offcanvas [data-id="button"] .ct-button { width: 100%; min-height: 48px; }

/* =========================================================
   9. Footer
   ========================================================= */
.ct-footer { border-top: 6px solid var(--kces-sun); font-size: .9375rem; }
.ct-footer .kces-footer-logo { margin-bottom: 14px; }
.ct-footer .kces-footer-logo img { width: 120px; height: auto; }
.ct-footer a { text-underline-offset: 3px; }
.ct-footer .widget_block p a { text-decoration: underline; }
.ct-footer .widget_block .kces-footer-logo { margin-top: 0; }
.ct-footer .widget_block + .widget_block { margin-top: 0; }
.ct-footer .widget_nav_menu ul { display: grid; gap: 6px; }
.ct-footer .widget_nav_menu a { text-decoration: none; }
.ct-footer .widget_nav_menu a:hover { text-decoration: underline; }
.ct-footer :where(a, button):focus-visible { outline-color: currentColor; }
.ct-footer [data-row="bottom"] { font-size: .875rem; }

/* =========================================================
   10. Components (patterns)
   ========================================================= */

/* Columns: Blocksy/core gap is tight for our sections. */
.entry-content .wp-block-columns { gap: clamp(24px, 4vw, 64px); margin-bottom: 0; }
.entry-content .wp-block-columns.kces-split { align-items: flex-start; }
@media (min-width: 782px) {
	.kces-split > .wp-block-column:last-child { padding-top: .5rem; }
}
.kces-split p:not(.is-style-kces-eyebrow), .kces-media-text p:not(.is-style-kces-eyebrow) { max-width: 62ch; }

/* Grids for cards: 4 → 2 → 1 and 3 → 1 (core columns are 4-up too early). */
.kces-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; }
@media (min-width: 600px) { .kces-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kces-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 782px) { .kces-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kces-grid > * { margin: 0 !important; }

/* Home hero: rounded "card" with a text panel and a logo panel (Web Agency touch). */
.entry-content > .kces-hero {
	max-width: min(1200px, 100%) !important; /* same edges as the 1200 px sections */
	margin-top: clamp(16px, 3vw, 32px);
	margin-bottom: 0;
}
.kces-hero__cols { gap: 0 !important; align-items: stretch !important; }
.kces-hero__cols > .wp-block-column { display: flex; }
.kces-hero__text, .kces-hero__logo { width: 100%; }
.kces-hero__text {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--kces-sky);
	padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 64px);
	border-radius: var(--kces-radius-lg) var(--kces-radius-lg) 0 0;
}
.kces-hero__text::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto -10% -30% auto;
	width: 70%;
	height: 70%;
	background: rgba(255, 255, 255, .5);
	clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}
.kces-hero__text h1 { margin-top: 0; }
.kces-hero__text p:not(.is-style-kces-eyebrow):not(.is-style-kces-lead) { color: var(--kces-muted); max-width: 46ch; }
.kces-hero__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kces-white);
	padding: clamp(24px, 4vw, 48px);
	border-radius: 0 0 var(--kces-radius-lg) var(--kces-radius-lg);
	box-shadow: var(--kces-shadow);
}
.kces-hero__logo .wp-block-image { margin: 0; }
.kces-hero__logo img { width: 100%; max-width: 520px; height: auto; border-radius: 0 !important; }
@media (max-width: 781px) {
	.kces-hero__logo img { max-width: 340px; } /* stacked: keep the logo from dominating the first screens */
}
@media (min-width: 782px) {
	.kces-hero__text { border-radius: var(--kces-radius-lg) 0 0 var(--kces-radius-lg); }
	.kces-hero__logo { border-radius: 0 var(--kces-radius-lg) var(--kces-radius-lg) 0; }
}

/* Page header (subpages). */
.entry-content > .kces-page-header { padding-block: clamp(56px, 8vw, 104px); }
.kces-page-header h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); max-width: 20ch; margin-top: 0; }
.kces-page-header .is-style-kces-lead { color: var(--kces-muted); font-weight: 400; font-size: 1.125rem; max-width: 60ch; }
/* Constrained layout centres children that have a max-width: keep these left-aligned. */
.kces-page-header > :is(h1, p),
.entry-content .kces-section-head:not(.is-center) { margin-left: calc((100% - min(1200px, var(--theme-block-width, 100%))) / 2) !important; }

/* Wide photo block: directly below hero/header, less top padding. */
.entry-content > .kces-section--photo { padding-top: clamp(24px, 4vw, 48px); padding-bottom: 0; }
.entry-content .wp-block-image.is-style-kces-photo-wide img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 40%;
}
@media (min-width: 700px) {
	.entry-content .wp-block-image.is-style-kces-photo-wide img { aspect-ratio: 2 / 1; }
}

/* Photo 4:3 (media + text). Works for portrait sources too. */
.entry-content .wp-block-image.is-style-kces-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 60%;
}

/* Mobile: photo above text in every photo + text block (wireframes). */
@media (max-width: 781px) {
	.kces-media-text > .wp-block-column:has(> .wp-block-image) { order: -1; }
}

/* Line list. */
.is-style-kces-line-list { list-style: none; margin: 0; padding: 0 !important; border-top: 1px solid var(--kces-line); }
.is-style-kces-line-list li { position: relative; padding: 14px 0 14px 28px; margin: 0; border-bottom: 1px solid var(--kces-line); }
.is-style-kces-line-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 1.4em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--kces-blue);
}

/* Info card (bus information). */
.is-style-kces-info-card {
	background: var(--kces-white);
	border-radius: var(--kces-radius-lg);
	box-shadow: var(--kces-shadow);
	padding: 8px clamp(24px, 3vw, 36px);
}
.kces-info-card__item { padding-block: 18px; border-bottom: 1px solid var(--kces-line); margin: 0 !important; }
.kces-info-card__item:last-child { border-bottom: 0; }
.kces-info-card__item h3 { font-family: var(--kces-font-body); font-size: 1.0625rem; font-weight: 600; margin: 0 0 .25em; }
.kces-info-card__item p { color: var(--kces-muted); margin: 0; }

/* Team cards: initials in a circle until there are real photos. */
.kces-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin: 0 0 16px !important;
	border-radius: 50%;
	background: var(--kces-sky);
	box-shadow: inset 0 0 0 4px var(--kces-white), 0 0 0 2px var(--kces-sun-bg);
	color: var(--kces-navy);
	font: 500 1.75rem/1 var(--kces-font-head);
}
/* Real team photo (replaces the initials): round, same size. */
.entry-content .wp-block-image.is-style-kces-team-photo { margin: 0 0 16px; }
.entry-content .wp-block-image.is-style-kces-team-photo img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--kces-white), 0 0 0 6px var(--kces-sun-bg);
}
.kces-team-role {
	color: var(--kces-orange) !important;
	font-size: .8125rem !important;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: .5em;
}
.kces-team-card h3 { margin-bottom: .2em; }
.kces-team-cards + .wp-block-buttons, .kces-grid + .wp-block-buttons { margin-top: var(--kces-stack); }

/* CTA band. */
.kces-cta > .wp-block-column:last-child .wp-block-buttons { justify-content: flex-start; }
@media (min-width: 782px) {
	.kces-cta > .wp-block-column:last-child .wp-block-buttons { justify-content: flex-end; }
}
.kces-cta p:not(.is-style-kces-eyebrow) { max-width: 64ch; }


/* =========================================================
   11. Contact + form (Fluent Forms, stylebook "Formulier")
   ========================================================= */
.kces-contact { align-items: flex-start !important; }
.kces-contact-card { margin-top: 1.5rem; height: auto; }
.kces-contact-card h3 { margin-bottom: .35em; }
.kces-contact-card__mail { font-size: 1.1875rem !important; font-weight: 600; overflow-wrap: anywhere; }
.kces-contact-card__mail a { color: var(--kces-navy); }
.kces-form-card { height: auto; }
.kces-form-card > h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); margin-top: 0; }
.kces-help-note { margin-top: 1.25rem; }

.fluentform .ff-el-group { margin-bottom: 20px; }
.fluentform .ff-el-input--label { margin-bottom: 6px; }
.fluentform .ff-el-input--label label {
	font-weight: 600;
	color: var(--kces-navy);
	font-size: 1rem;
}
.fluentform .ff-el-form-control {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font: 400 1rem/1.5 var(--kces-font-body);
	color: var(--kces-ink);
	background: var(--kces-white);
	border: 1px solid var(--kces-field);
	border-radius: var(--kces-radius-sm);
	box-shadow: none;
}
.fluentform textarea.ff-el-form-control { min-height: 150px; resize: vertical; }
.fluentform .ff-el-form-control::placeholder { color: var(--kces-field); opacity: 1; }
.fluentform .ff-el-form-control:focus {
	outline: 3px solid var(--kces-navy);
	outline-offset: 1px;
	border-color: var(--kces-navy);
}
/* Errors: thicker red border + text with an icon (not colour alone). */
.fluentform .ff-el-is-error .ff-el-form-control { border: 2px solid var(--kces-error); }
.fluentform .ff-el-is-error .text-danger,
.fluentform .error.text-danger {
	display: flex;
	gap: 6px;
	margin-top: 6px;
	color: var(--kces-error);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.4;
}
.fluentform .ff-el-is-error .text-danger::before,
.fluentform .error.text-danger::before {
	content: "!";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--kces-error);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
}
.fluentform .kces-form-note { font-size: .9375rem; color: var(--kces-muted); margin: 0; }
.fluentform .ff-btn-submit,
.fluentform .ff_btn_style.ff-btn-submit {
	min-height: 48px;
	padding: .75em 1.4em;
	border: 2px solid var(--kces-navy) !important;
	border-radius: var(--kces-radius-sm);
	background: var(--kces-navy) !important;
	color: #fff !important;
	font: 500 1rem/1.2 var(--kces-font-body);
	opacity: 1;
}
.fluentform .ff-btn-submit:hover { background: var(--kces-blue) !important; border-color: var(--kces-blue) !important; }
.fluentform .ff-btn-submit:focus-visible { outline: 3px solid var(--kces-navy); outline-offset: 3px; }
/* Confirmation after sending (stylebook "notice-success"). */
.ff-message-success {
	background: #E7F4EA;
	border: 1px solid #2C7A2E !important;
	color: #1D5420;
	border-radius: var(--kces-radius-sm);
	padding: 14px 16px;
	font-weight: 500;
	box-shadow: none !important;
}
.ff-message-success p { margin: 0; }
.ff-message-success:focus-visible { outline: 3px solid var(--kces-navy); outline-offset: 3px; }

/* =========================================================
   12. Style test page (phase 1, removed later)
   ========================================================= */
.kces-swatch {
	border-radius: var(--kces-radius);
	min-height: 96px;
	padding: 14px;
	display: flex;
	align-items: flex-end;
	font-size: .8125rem;
	line-height: 1.35;
	box-shadow: inset 0 0 0 1px rgba(21, 53, 122, .08);
}