/* ==========================================================================
   Wolters Kassenbouw — components
   Hover darkens, press drops 1px, focus is always blue. Never opacity fades.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icon. Outline only, 2px stroke, inherits the text colour.
   -------------------------------------------------------------------------- */
.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	height: 44px;
	padding: 0 var(--space-8);
	font: var(--weight-semibold) var(--text-base)/1 var(--font-sans);
	letter-spacing: var(--tracking-wide);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid var(--color-brand);
	border-radius: var(--radius-control);
	background: var(--color-brand);
	color: var(--text-inverse);
	cursor: pointer;
	transition: var(--transition-control), transform var(--duration-instant) var(--ease-standard);
}
.button:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); color: var(--text-inverse); }
.button:active { transform: translateY(1px); }
.button:focus-visible { border-color: var(--border-focus); box-shadow: var(--focus-ring); outline: none; }
.button[disabled], .button.is_disabled { opacity: .45; cursor: not-allowed; }

.button_sm { height: 34px; padding: 0 var(--space-6); font-size: var(--text-sm); gap: var(--space-3); }
.button_lg { height: 54px; padding: 0 var(--space-9); font-size: var(--text-md); }
.button_block { display: flex; width: 100%; }

/* Blue is the Kasschade / glass action, red is damage and urgency. */
.button_glass { background: var(--color-glass); border-color: var(--color-glass); }
.button_glass:hover { background: var(--color-glass-hover); border-color: var(--color-glass-hover); }
.button_signal { background: var(--color-signal); border-color: var(--color-signal); }
.button_signal:hover { background: var(--color-signal-hover); border-color: var(--color-signal-hover); }

.button_secondary { background: var(--surface-card); border-color: var(--border-strong); color: var(--text-strong); }
.button_secondary:hover { background: var(--surface-inset); border-color: var(--border-strong); color: var(--text-strong); }

.button_ghost { background: transparent; border-color: transparent; color: var(--text-brand); }
.button_ghost:hover { background: var(--color-brand-soft); border-color: transparent; color: var(--text-brand); }

/* Over photography only. */
.button_inverse { background: var(--surface-card); border-color: var(--surface-card); color: var(--text-strong); }
.button_inverse:hover { background: var(--wk-neutral-50); border-color: var(--wk-neutral-50); color: var(--text-strong); }

/* --------------------------------------------------------------------------
   Icon button. Every tap target is at least 44px on phones.
   -------------------------------------------------------------------------- */
.icon_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-control);
	background: var(--surface-card);
	color: var(--text-body);
	cursor: pointer;
	transition: var(--transition-control);
}
.icon_button:hover { background: var(--surface-inset); color: var(--text-body); }
.icon_button:focus-visible { border-color: var(--border-focus); box-shadow: var(--focus-ring); outline: none; }
.icon_button_sm { width: 32px; height: 32px; }
.icon_button_lg { width: 48px; height: 48px; }
.icon_button_ghost { background: transparent; border-color: transparent; }
.icon_button_ghost:hover { background: var(--surface-inset); }
.icon_button_inverse { background: rgba(255, 255, 255, .12); border-color: var(--border-inverse); color: var(--text-inverse); }
.icon_button_inverse:hover { background: rgba(255, 255, 255, .22); color: var(--text-inverse); }

/* --------------------------------------------------------------------------
   Card. Defined by a hairline border and --shadow-xs, not by shadow.
   Colour accents sit on the TOP edge; a left border is reserved for Alert.
   -------------------------------------------------------------------------- */
.card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-xs);
	transition: var(--transition-lift);
}
.card_body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--space-5);
	padding: var(--pad-card);
}
.card_accent_brand { border-top: 4px solid var(--color-brand); }
.card_accent_glass { border-top: 4px solid var(--color-glass); }
.card_accent_signal { border-top: 4px solid var(--color-signal); }

a.card { color: inherit; }
.card_interactive { cursor: pointer; }
.card_interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card_interactive:focus-within { box-shadow: var(--shadow-md); }

.card_icon { display: flex; }
.card_icon_brand { color: var(--color-brand); }
.card_icon_glass { color: var(--color-glass); }
.card_icon_signal { color: var(--color-signal); }

.card_link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-4);
	font: var(--type-label);
	color: var(--text-brand);
}

/* --------------------------------------------------------------------------
   Badge and Tag
   -------------------------------------------------------------------------- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: 3px var(--space-4);
	font: var(--weight-semibold) var(--text-xs)/1.4 var(--font-sans);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-xs);
	background: var(--surface-inset);
	color: var(--text-body);
}
.badge_brand { background: var(--color-brand-soft); color: var(--status-success-text); border-color: var(--wk-green-100); }
.badge_info { background: var(--status-info-soft); color: var(--status-info-text); border-color: var(--wk-blue-100); }
.badge_danger { background: var(--status-danger-soft); color: var(--status-danger-text); border-color: var(--wk-red-100); }
.badge_warning { background: var(--status-warning-soft); color: var(--status-warning-text); border-color: var(--wk-amber-100); }

/* Fully round, because its meaning depends on it. */
.tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	height: 30px;
	padding: 0 var(--space-5);
	font: var(--type-small);
	color: var(--text-body);
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-pill);
	transition: var(--transition-control);
}
.tag_selected { background: var(--color-brand); border-color: var(--color-brand); color: var(--text-inverse); }

/* Tags double as links to subpages, so they take the bordered-control hover. */
a.tag { color: var(--text-body); }
a.tag:hover { background: var(--surface-inset); border-color: var(--border-strong); color: var(--text-strong); }

.tag_list { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* --------------------------------------------------------------------------
   Alert. The one place a coloured LEFT border is allowed — it reads as a
   signal bar.
   -------------------------------------------------------------------------- */
.alert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	padding: var(--space-6);
	background: var(--status-info-soft);
	border: 1px solid var(--status-info);
	border-left: 4px solid var(--status-info);
	border-radius: var(--radius-control);
}
.alert_icon { display: flex; margin-top: 1px; color: var(--status-info); }
.alert_body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.alert_title { font: var(--type-label); color: var(--status-info-text); }
.alert_text { font: var(--type-small); color: var(--text-body); }

.alert_success { background: var(--status-success-soft); border-color: var(--status-success); }
.alert_success .alert_icon { color: var(--status-success); }
.alert_success .alert_title { color: var(--status-success-text); }

.alert_warning { background: var(--status-warning-soft); border-color: var(--status-warning); }
.alert_warning .alert_icon { color: var(--status-warning); }
.alert_warning .alert_title { color: var(--status-warning-text); }

.alert_danger { background: var(--status-danger-soft); border-color: var(--status-danger); }
.alert_danger .alert_icon { color: var(--status-danger); }
.alert_danger .alert_title { color: var(--status-danger-text); }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	font: var(--type-small);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-brand); }
.breadcrumb_separator { display: flex; color: var(--text-faint); }
.breadcrumb_current { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-4); }
.field_label { font: var(--type-label); color: var(--text-strong); }
.field_required { color: var(--color-signal); margin-left: 4px; }
.field_hint { font: var(--type-small); color: var(--text-muted); }
.field_error { font: var(--type-small); color: var(--status-danger-text); }

.input, .textarea, .select {
	width: 100%;
	font: var(--type-body);
	color: var(--text-strong);
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-control);
	outline: none;
	transition: var(--transition-control);
}
.input, .select { height: 44px; padding: 0 var(--space-6); }
.textarea { min-height: 132px; padding: var(--space-5) var(--space-6); resize: vertical; }

.input:focus, .textarea:focus, .select:focus {
	border-color: var(--border-focus);
	box-shadow: var(--focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input[disabled], .textarea[disabled], .select[disabled] { background: var(--surface-inset); opacity: .45; cursor: not-allowed; }

.is_invalid .input, .is_invalid .textarea, .is_invalid .select,
.input.is_invalid, .textarea.is_invalid, .select.is_invalid { border-color: var(--status-danger); }

.select_wrap { position: relative; display: flex; align-items: center; }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select_arrow { position: absolute; right: var(--space-5); display: flex; color: var(--text-muted); pointer-events: none; }

.checkbox { display: flex; align-items: flex-start; gap: var(--space-5); cursor: pointer; }
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox_box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-xs);
	color: var(--text-inverse);
	transition: var(--transition-control);
}
.checkbox_box .icon { opacity: 0; }
.checkbox input:checked + .checkbox_box { background: var(--color-brand); border-color: var(--color-brand); }
.checkbox input:checked + .checkbox_box .icon { opacity: 1; }
.checkbox input:focus-visible + .checkbox_box { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.checkbox_text { display: flex; flex-direction: column; gap: 2px; }
.checkbox_label { font: var(--type-body); color: var(--text-strong); }
.checkbox_description { font: var(--type-small); color: var(--text-muted); }

/* Honeypot — never shown, never announced. */
.field_trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }