/* STP&I whistleblowing page — scoped under .stpi-wb.
 * No font-family here: the Seed Fonts plugin forces Kanit site-wide.
 * Brand red #ee1c24 is ~3.9:1 on white and fails WCAG AA for small text, so controls, links and
 * small accents use #cd2122 (~4.6:1); #ee1c24 is reserved for the large h1. */

.stpi-wb {
	--wb-red: #cd2122;
	--wb-red-heading: #ee1c24;
	--wb-red-dark: #a51a1c;
	--wb-navy: #32327f;
	--wb-text: #222222;
	--wb-muted: #5f5f5f;
	--wb-border: #d7d7d7;
	--wb-bg: #f5f6f8;
	--wb-error: #b3261e;
	--wb-error-bg: #fdecea;
	--wb-ok: #1e8e3e;
	--wb-ok-bg: #eaf6ee;
	--wb-warn-bg: #fff7e6;
	--wb-warn-border: #e0a100;
	--wb-radius: 4px;
	--wb-focus: 0 0 0 3px rgba(50, 50, 127, 0.45);

	color: var(--wb-text);
	line-height: 1.6;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 16px 64px;
	box-sizing: border-box;
}
.stpi-wb *,
.stpi-wb *::before,
.stpi-wb *::after { box-sizing: inherit; }

.stpi-wb h1, .stpi-wb h2, .stpi-wb h3, .stpi-wb legend { text-transform: none; letter-spacing: 0; }
.stpi-wb-section { margin: 0 0 48px; }
.stpi-wb-h2 { font-size: 24px; line-height: 1.3; margin: 0 0 16px; color: var(--wb-text); }
.stpi-wb-muted { color: var(--wb-muted); }

/* Hero */
.stpi-wb-hero { padding: 32px 0 8px; margin-bottom: 24px; border-bottom: 1px solid var(--wb-border); }
.stpi-wb-title { font-size: 36px; line-height: 1.25; margin: 0 0 8px; color: var(--wb-red-heading); }
.stpi-wb-tagline { font-size: 18px; margin: 0; color: var(--wb-muted); }

/* Intro */
.stpi-wb-intro p { font-size: 17px; margin: 0 0 16px; }
.stpi-wb-confidential { color: var(--wb-navy); }

/* Callout */
.stpi-wb-callout {
	background: var(--wb-warn-bg);
	border-left: 4px solid var(--wb-warn-border);
	border-radius: var(--wb-radius);
	padding: 16px 20px;
	margin: 0 0 48px;
}
.stpi-wb-callout-title { font-size: 18px; margin: 0 0 8px; }
.stpi-wb-callout-title::before { content: "\26A0\FE0E"; margin-right: 8px; color: var(--wb-warn-border); }
.stpi-wb-callout ul { margin: 0; padding-left: 20px; }
.stpi-wb-callout li { margin: 4px 0; }

/* Contact cards */
.stpi-wb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stpi-wb-card {
	background: var(--wb-bg);
	border: 1px solid var(--wb-border);
	border-radius: var(--wb-radius);
	padding: 20px;
}
.stpi-wb-card-title { font-size: 16px; margin: 0 0 8px; color: var(--wb-navy); }
.stpi-wb-card p { margin: 0; font-size: 15px; word-break: break-word; }
.stpi-wb-card a { color: var(--wb-red); text-decoration: underline; }

/* Form */
.stpi-wb-formwrap { background: var(--wb-bg); border-radius: var(--wb-radius); padding: 24px; max-width: 760px; }
.stpi-wb-required-note { color: var(--wb-muted); font-size: 14px; margin: 0 0 16px; }
.stpi-wb-req { color: var(--wb-red); }
.stpi-wb-fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.stpi-wb-fieldset > legend { font-size: 18px; font-weight: 600; padding: 0; margin: 0 0 12px; color: var(--wb-navy); }
.stpi-wb-field { margin: 0 0 24px; }
.stpi-wb-field > label,
.stpi-wb-radios > legend { display: block; font-weight: 600; margin: 0 0 6px; }
.stpi-wb-hint { color: var(--wb-muted); font-size: 14px; margin: 6px 0 0; }

.stpi-wb .stpi-wb-input {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wb-text);
	background: #fff;
	border: 1px solid #8a8a8a;
	border-radius: var(--wb-radius);
	margin: 0;
	box-shadow: none;
}
.stpi-wb .stpi-wb-textarea { min-height: 180px; resize: vertical; }
.stpi-wb .stpi-wb-input:focus,
.stpi-wb .stpi-wb-input:focus-visible,
.stpi-wb .stpi-wb-file:focus-visible,
.stpi-wb input[type="radio"]:focus-visible,
.stpi-wb input[type="checkbox"]:focus-visible,
.stpi-wb .stpi-wb-btn:focus-visible,
.stpi-wb a:focus-visible {
	outline: 2px solid var(--wb-navy);
	outline-offset: 2px;
	box-shadow: var(--wb-focus);
}
.stpi-wb .stpi-wb-input:disabled { background: #eee; color: var(--wb-muted); }
.stpi-wb-field--error .stpi-wb-input { border-color: var(--wb-error); }
.stpi-wb-error { color: var(--wb-error); font-size: 14px; margin: 6px 0 0; font-weight: 600; }

/* Radios / checkbox */
.stpi-wb-radios { border: 0; padding: 0; margin: 0; }
.stpi-wb-radio,
.stpi-wb-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	min-height: 44px;
	background: #fff;
	border: 1px solid var(--wb-border);
	border-radius: var(--wb-radius);
	margin: 0 0 8px;
	cursor: pointer;
	font-weight: 400;
}
.stpi-wb-radio input,
.stpi-wb-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--wb-red); }
.stpi-wb-anon-notice { background: #fff; border: 1px dashed var(--wb-border); border-radius: var(--wb-radius); padding: 10px 12px; }
.stpi-wb-identity { padding-left: 0; }
.stpi-wb-consent { margin-top: 8px; }
.stpi-wb-consent a { color: var(--wb-red); text-decoration: underline; }

/* Files */
.stpi-wb .stpi-wb-file { display: block; width: 100%; font-size: 16px; padding: 8px 0; }
.stpi-wb-files-msg { color: var(--wb-error); font-weight: 600; font-size: 14px; margin: 6px 0 0; }
.stpi-wb-files-msg:empty { display: none; }
.stpi-wb-files-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.stpi-wb-files-list:empty { display: none; }
.stpi-wb-files-list li { padding: 6px 10px; background: #fff; border: 1px solid var(--wb-border); border-radius: var(--wb-radius); margin: 0 0 4px; }

/* Honeypot: off-screen, not display:none */
.stpi-wb-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* Buttons */
.stpi-wb-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.stpi-wb .stpi-wb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 10px 24px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--wb-radius);
	border: 2px solid var(--wb-red);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s, color .15s;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	box-shadow: none;
}
.stpi-wb .stpi-wb-btn--primary { background: var(--wb-red); color: #fff; }
.stpi-wb .stpi-wb-btn--primary:hover { background: var(--wb-red-dark); border-color: var(--wb-red-dark); color: #fff; }
.stpi-wb .stpi-wb-btn--primary:disabled { opacity: .7; cursor: progress; }
.stpi-wb .stpi-wb-btn--outline { background: #fff; color: var(--wb-red); }
.stpi-wb .stpi-wb-btn--outline:hover { background: var(--wb-red); color: #fff; }

/* Error summary / fallback / confirmation panels */
.stpi-wb-errors,
.stpi-wb-panel {
	border-radius: var(--wb-radius);
	padding: 16px 20px;
	margin: 0 0 24px;
	border-left: 4px solid;
}
.stpi-wb-errors { background: var(--wb-error-bg); border-color: var(--wb-error); }
.stpi-wb-errors-title { font-weight: 600; margin: 0 0 8px; color: var(--wb-error); }
.stpi-wb-errors ul { margin: 0; padding-left: 20px; }
.stpi-wb-errors a { color: var(--wb-error); text-decoration: underline; }
.stpi-wb-panel--fallback { background: var(--wb-warn-bg); border-color: var(--wb-warn-border); }

.stpi-wb-confirm {
	background: var(--wb-ok-bg);
	border: 1px solid var(--wb-ok);
	border-radius: var(--wb-radius);
	padding: 32px 24px;
	text-align: center;
	max-width: 760px;
	margin: 0 0 48px;
}
.stpi-wb-confirm-icon {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--wb-ok); color: #fff; font-size: 32px; line-height: 56px;
	margin: 0 auto 16px;
}
.stpi-wb-confirm p { margin: 0 0 10px; }
.stpi-wb-ticket-label { color: var(--wb-muted); font-size: 14px; margin-bottom: 0 !important; }
.stpi-wb-ticket { font-size: 28px; font-weight: 700; letter-spacing: 1px; color: var(--wb-navy); margin: 0 0 16px !important; user-select: all; }

/* Related documents */
.stpi-wb-doclist { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.stpi-wb-doclist a { color: var(--wb-red); text-decoration: underline; }
.stpi-wb-doclist a::before { content: "\1F4C4\FE0E"; margin-right: 6px; }
.stpi-wb-protection { color: var(--wb-navy); font-weight: 600; }

/* Responsive */
@media (max-width: 767px) {
	.stpi-wb-title { font-size: 28px; }
	.stpi-wb-cards { grid-template-columns: 1fr; }
	.stpi-wb-formwrap { padding: 16px; }
	.stpi-wb-actions .stpi-wb-btn { width: 100%; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.stpi-wb-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.stpi-wb .stpi-wb-btn { transition: none; }
}
@media print {
	.stpi-wb-form, .stpi-wb-channels, .stpi-wb-related { display: none; }
}