/* =============================================================
   COMPLAINTS PAGE — page-specific styles
   ============================================================= */

/* HOW-TO 4-STEP GRID */
.how {
	background: var(--wba-cream);
	padding: 120px 0;
}
.how__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter-d);
}
.how__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--wba-border);
	border: 1px solid var(--wba-border);
}
.how-step {
	background: var(--wba-white);
	padding: 36px 32px 40px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 280px;
	transition: background 0.25s ease;
}
.how-step:hover { background: var(--wba-cream); }
.how-step__num {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	color: var(--wba-red);
	font-style: italic;
	margin: 0;
}
.how-step__title {
	font-size: 1.18rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	text-transform: lowercase;
	margin: 4px 0 8px;
	line-height: 1.2;
	color: var(--wba-dark);
}
.how-step__title em { font-style: italic; font-weight: 300; }
.how-step__desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--wba-muted);
	margin: 0;
}
.how-step__desc em { color: var(--wba-dark); font-style: italic; }
.how-step__inline {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: lowercase;
	color: var(--wba-red);
	margin-top: auto;
	padding-top: 8px;
}
.how-step__inline a {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
	transition: color 0.2s;
}
.how-step__inline a:hover { color: var(--wba-dark); }

/* LODGE FORM */
.lodge {
	background: var(--wba-white);
	padding: 120px 0;
}
.lodge__inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 var(--gutter-d);
}
.lodge__head {
	text-align: center;
	margin-bottom: 56px;
}
.lodge__motto { margin-bottom: 12px; display: inline-block; }
.lodge__heading {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0 0 18px;
}
.lodge__lede {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wba-muted);
	margin: 0;
}
.lodge__lede em { color: var(--wba-dark); font-style: italic; }
.cf {
	background: var(--wba-white);
	border: 1px solid var(--wba-border);
	border-top: 3px solid var(--wba-red);
	padding: 48px 48px 40px;
}
.cf__group { margin-bottom: 28px; }
.cf__group--row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.cf__field { display: flex; flex-direction: column; gap: 8px; }
.cf__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wba-dark);
	font-style: italic;
}
.cf__label .req { color: var(--wba-red); margin-left: 2px; }
.cf__hint {
	font-size: 0.78rem;
	color: var(--wba-muted);
	font-style: italic;
	margin: 0;
}
.cf__input,
.cf__select,
.cf__textarea {
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wba-dark);
	background: var(--wba-white);
	border: 1px solid var(--wba-border);
	padding: 14px 16px;
	border-radius: 0;
	width: 100%;
	transition: border-color 0.2s, background 0.2s;
}
.cf__input:focus,
.cf__select:focus,
.cf__textarea:focus {
	outline: none;
	border-color: var(--wba-dark);
	background: var(--wba-cream);
}
.cf__textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.5;
	font-family: inherit;
}
.cf__select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--wba-dark) 50%), linear-gradient(135deg, var(--wba-dark) 50%, transparent 50%);
	background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
	cursor: pointer;
}
.cf__sep-label {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: lowercase;
	color: var(--wba-red);
	font-style: italic;
	margin: 32px 0 16px;
}
.cf__check {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 14px;
	align-items: start;
	padding: 18px 0;
	border-top: 1px solid var(--wba-border);
}
.cf__check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 4px;
	accent-color: var(--wba-red);
	cursor: pointer;
}
.cf__check label {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--wba-dark);
	cursor: pointer;
}
.cf__check label em { color: var(--wba-red); font-style: italic; font-weight: 600; }
.cf__submit {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 2px solid var(--wba-dark);
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}
.cf__submit-note {
	font-size: 0.85rem;
	color: var(--wba-muted);
	font-style: italic;
	margin: 0;
	line-height: 1.55;
}
.cf__submit-note em { color: var(--wba-dark); font-style: italic; }

/* =============================================================
   FORMSPREE STATE — success, error, validation, submitting
   ============================================================= */

/* Success block — hidden by default; Formspree shows it on success.
   The library toggles visibility via inline style or display switching;
   we keep the styles ready so it just looks right when revealed. */
.cf-success {
	display: none;
	background: var(--wba-cream);
	border: 1px solid var(--wba-border);
	border-top: 3px solid var(--wba-red);
	padding: 48px 48px 40px;
	margin-bottom: 24px;
}
.cf-success[style*="display"][style*="block"],
.cf-success.is-visible {
	display: block;
}
.cf-success__motto {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	font-style: italic;
	color: var(--wba-red);
	margin: 0 0 12px;
	text-transform: lowercase;
}
.cf-success__heading {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	margin: 0 0 14px;
	line-height: 1.15;
	color: var(--wba-dark);
}
.cf-success__heading em { font-style: italic; font-weight: 300; }
.cf-success__body {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wba-dark);
	margin: 0;
	max-width: 56ch;
}
.cf-success__body em { color: var(--wba-red); font-style: italic; }

/* Form-level error band — only renders content when populated by Formspree */
.cf-error {
	margin: 0 0 16px;
	color: var(--wba-red);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.5;
}
.cf-error:not(:empty) {
	padding: 14px 18px;
	background: rgba(193, 39, 45, 0.06);
	border-left: 3px solid var(--wba-red);
}

/* Inline field-level error — empty by default, visible only when populated */
.cf__field-error {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wba-red);
	font-style: italic;
	min-height: 0;
	transition: min-height 0.15s ease;
}
.cf__field-error:not(:empty) {
	margin-top: 6px;
	min-height: 1.4em;
}

/* aria-invalid is added by Formspree to fields that failed validation */
.cf__input[aria-invalid="true"],
.cf__select[aria-invalid="true"],
.cf__textarea[aria-invalid="true"] {
	border-color: var(--wba-red);
	background: rgba(193, 39, 45, 0.03);
}

/* While the form is submitting, the submit button is disabled by the library;
   this just adds a visual "in flight" feel. */
.cf .btn[disabled],
.cf .btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* CATEGORIES */
.categories {
	background: var(--wba-cream);
	padding: 120px 0;
}
.categories__inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 0 var(--gutter-d);
}
.cat-warning {
	margin: 0 0 48px;
	padding: 28px 36px;
	background: var(--wba-white);
	border: 1px solid var(--wba-border);
	border-left: 4px solid var(--wba-red);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 28px;
	align-items: center;
}
.cat-warning__pill {
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: lowercase;
	padding: 8px 14px;
	background: var(--wba-red);
	color: var(--wba-white);
	font-style: italic;
	white-space: nowrap;
}
.cat-warning__pill::before { content: "[ "; opacity: 0.55; font-weight: 400; }
.cat-warning__pill::after  { content: " ]"; opacity: 0.55; font-weight: 400; }
.cat-warning__text {
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--wba-dark);
	margin: 0;
}
.cat-warning__text strong { font-weight: 700; }
.cat-warning__text em { color: var(--wba-red); font-style: italic; font-weight: 600; }
.cat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--wba-border);
	border: 1px solid var(--wba-border);
}
.cat {
	background: var(--wba-white);
	padding: 32px 32px 36px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: background 0.25s ease;
}
.cat:hover { background: var(--wba-cream); }
.cat--priority { background: var(--wba-cream); border-left: 3px solid var(--wba-red); }
.cat--priority:hover { background: var(--wba-white); }
.cat__label {
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: lowercase;
	color: var(--wba-red);
	font-style: italic;
	margin: 0;
}
.cat__title {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	text-transform: lowercase;
	margin: 0;
	line-height: 1.2;
	color: var(--wba-dark);
}
.cat__title em { font-style: italic; font-weight: 300; }
.cat__desc {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--wba-muted);
	margin: 0;
	flex: 1;
}
.cat__owner {
	margin-top: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--wba-border);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cat__owner-label {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wba-muted);
	font-style: italic;
}
.cat__owner-name {
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: -0.005em;
	color: var(--wba-dark);
	text-transform: lowercase;
}
.cat__owner-name em { font-style: italic; font-weight: 300; }

/* PROCESS TIMELINE */
.process {
	background: var(--wba-white);
	padding: 120px 0;
}
.process__inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 0 var(--gutter-d);
}
.process-list { border-top: 1px solid var(--wba-border); }
.process-step {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 40px;
	padding: 32px 0;
	border-bottom: 1px solid var(--wba-border);
}
.process-step__num {
	font-size: clamp(2rem, 3vw, 2.6rem);
	font-weight: 900;
	font-style: italic;
	color: var(--wba-red);
	letter-spacing: -0.04em;
	line-height: 0.95;
	margin: 0;
}
.process-step__title {
	font-size: 1.18rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	text-transform: lowercase;
	margin: 0 0 8px;
	line-height: 1.2;
	color: var(--wba-dark);
}
.process-step__title em { font-style: italic; font-weight: 300; }
.process-step__text {
	font-size: 0.96rem;
	line-height: 1.65;
	color: var(--wba-muted);
	margin: 0;
}
.process-step__text strong { color: var(--wba-dark); font-weight: 700; }
.process-step__text em { color: var(--wba-red); font-style: italic; font-weight: 500; }

/* BV TRIBUNALS DARK BAND */
.tribunals {
	background: var(--wba-dark);
	color: var(--wba-white);
	padding: 100px 0;
}
.tribunals__inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 0 var(--gutter-d);
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 64px;
	align-items: start;
}
.tribunals__motto {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: lowercase;
	color: var(--wba-orange);
	font-style: italic;
	margin: 0 0 14px;
}
.tribunals__heading {
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	line-height: 1.1;
	color: var(--wba-white);
	margin: 0;
}
.tribunals__heading em { font-style: italic; font-weight: 300; color: var(--wba-orange); }
.tribunals__body {
	font-size: 1.04rem;
	line-height: 1.7;
	color: rgba(255,255,255,0.78);
	margin: 0 0 18px;
}
.tribunals__body strong { color: var(--wba-white); font-weight: 700; }
.tribunals__body em { color: var(--wba-orange); font-style: italic; }

/* IMPORTANT NOTES */
.notes {
	background: var(--wba-cream);
	padding: 100px 0;
}
.notes__inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 0 var(--gutter-d);
}
.notes__panel {
	background: var(--wba-white);
	border: 1px solid var(--wba-border);
	padding: 48px 48px 40px;
}
.notes__motto { margin-bottom: 12px; display: inline-block; }
.notes__heading {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0 0 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	line-height: 1.1;
	color: var(--wba-dark);
}
.notes__heading em { font-style: italic; font-weight: 300; }
.notes__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wba-border);
}
.notes__list li {
	padding: 18px 0 18px 24px;
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--wba-dark);
	border-bottom: 1px solid var(--wba-border);
	position: relative;
}
.notes__list li::before {
	content: "—";
	position: absolute;
	left: 0;
	top: 18px;
	color: var(--wba-red);
	font-weight: 700;
}
.notes__list li strong { font-weight: 700; }
.notes__list li em { font-style: italic; color: var(--wba-red); font-weight: 500; }

/* RESOURCES (downloads on complaints page) */
.complaints-docs {
	background: var(--wba-white);
	padding: 120px 0;
}
.complaints-docs__inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 0 var(--gutter-d);
}

@media (max-width: 1100px) {
	.how__grid { grid-template-columns: 1fr 1fr; }
	.cat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
	.how { padding: 80px 0; }
	.how__inner { padding: 0 var(--gutter-m); }
	.how__grid { grid-template-columns: 1fr; }
	.lodge { padding: 80px 0; }
	.lodge__inner { padding: 0 var(--gutter-m); }
	.cf { padding: 32px 24px 28px; }
	.cf__group--row { grid-template-columns: 1fr; }
	.categories { padding: 80px 0; }
	.categories__inner { padding: 0 var(--gutter-m); }
	.cat-warning { grid-template-columns: 1fr; gap: 14px; padding: 22px 24px; }
	.process { padding: 80px 0; }
	.process__inner { padding: 0 var(--gutter-m); }
	.process-step { grid-template-columns: 60px 1fr; gap: 20px; padding: 28px 0; }
	.tribunals { padding: 64px 0; }
	.tribunals__inner { grid-template-columns: 1fr; padding: 0 var(--gutter-m); gap: 24px; }
	.notes { padding: 64px 0; }
	.notes__inner { padding: 0 var(--gutter-m); }
	.notes__panel { padding: 32px 28px; }
	.complaints-docs { padding: 80px 0; }
	.complaints-docs__inner { padding: 0 var(--gutter-m); }
}