/**
 * Kutri Newsletter - Frontend Forms CSS
 *
 * Responsiivinen lomaketyylitys Kutri-brändiväreillä.
 *
 * @package Kutri_Newsletter
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
	--kn-petrooli: #094f7c;
	--kn-turkoosi: #02C4E4;
	--kn-oranssi: #FF8A00;
	--kn-text: var(--color-laivasto, #002136);
	--kn-text-light: var(--color-laivasto, #002136);
	--kn-border: #ddd;
	--kn-bg: #f9f9f9;
	--kn-success: #28a745;
	--kn-error: #dc3545;
	--kn-radius: 4px;
}

/* ==========================================================================
   Form Container
   ========================================================================== */

.kn-form {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--kn-text);
}

.kn-form * {
	box-sizing: border-box;
}

/* ==========================================================================
   Form Fields
   ========================================================================== */

.kn-form-field {
	margin-bottom: 16px;
}

.kn-label {
	display: block;
	font-weight: 500;
	margin-bottom: 6px;
	color: var(--kn-text);
}

.kn-required {
	color: var(--kn-error);
}

.kn-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--kn-border);
	border-radius: var(--kn-radius);
	font-size: 16px;
	transition: border-color 0.2s, box-shadow 0.2s;
	background: #fff;
}

.kn-input:focus {
	outline: none;
	border-color: var(--kn-petrooli);
	box-shadow: 0 0 0 3px rgba(9, 79, 124, 0.1);
}

.kn-input:invalid:not(:placeholder-shown) {
	border-color: var(--kn-error);
}

/* ==========================================================================
   Inline Form
   ========================================================================== */

.kn-form-inline .kn-form-row {
	display: flex;
	gap: 8px;
}

.kn-form-inline .kn-input-email {
	flex: 1;
	min-width: 0;
}

.kn-form-inline .kn-button {
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.kn-form-inline .kn-form-row {
		flex-direction: column;
	}

	.kn-form-inline .kn-button {
		width: 100%;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.kn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: none;
	border-radius: var(--kn-radius);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
	min-height: 48px;
}

.kn-button:hover {
	transform: translateY(-1px);
}

.kn-button:active {
	transform: translateY(0);
}

.kn-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

/* Button Colors */
.kn-button-oranssi {
	background-color: var(--kn-oranssi);
	color: #fff;
}

.kn-button-oranssi:hover {
	background-color: #e67a00;
}

.kn-button-turkoosi {
	background-color: var(--kn-turkoosi);
	color: #fff;
}

.kn-button-turkoosi:hover {
	background-color: #02b0cc;
}

.kn-button-petrooli {
	background-color: var(--kn-petrooli);
	color: #fff;
}

.kn-button-petrooli:hover {
	background-color: #073d5f;
}

/* Full Width Button */
.kn-button-full {
	width: 100%;
}

/* Button Loading State */
.kn-button-loading {
	display: none;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: kn-spin 0.8s linear infinite;
	margin-left: 8px;
}

.kn-form.is-loading .kn-button-text {
	opacity: 0.7;
}

.kn-form.is-loading .kn-button-loading {
	display: block;
}

@keyframes kn-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Checkboxes & Fieldsets
   ========================================================================== */

.kn-form-fieldset {
	border: none;
	padding: 0;
	margin: 0 0 20px;
}

.kn-legend {
	font-weight: 600;
	margin-bottom: 12px;
	padding: 0;
	color: var(--kn-text);
}

/* Topic options: stacked on mobile, side by side on wide screens.
   No grey background — the gap provides separation (Katri 2026-06-22). */
.kn-checkbox-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 640px) {
	.kn-checkbox-grid {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* Equal-width columns so the topics fill the row evenly. */
	.kn-checkbox-grid .kn-checkbox-wrapper {
		flex: 1 1 0;
	}
}

.kn-checkbox-wrapper {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.kn-checkbox {
	width: 20px;
	height: 20px;
	margin: 0 12px 0 0;
	flex-shrink: 0;
	accent-color: var(--kn-petrooli);
	cursor: pointer;
}

.kn-checkbox-label {
	flex: 1;
	cursor: pointer;
}

.kn-checkbox-name {
	display: block;
	font-weight: 500;
}

.kn-checkbox-desc,
.kn-checkbox-schedule {
	display: block;
	font-size: 14px;
	color: var(--kn-text-light);
	margin-top: 2px;
}

/* Tracking-consent checkbox: align box with its (possibly wrapping) label
   the same way as the topic checkboxes (Katri 2026-06-22). */
.kn-form-checkbox label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.kn-form-checkbox input {
	margin: 0;
	flex-shrink: 0;
}

/* ==========================================================================
   Messages
   ========================================================================== */

.kn-form-message {
	margin-top: 12px;
	padding: 12px;
	border-radius: var(--kn-radius);
	font-size: 14px;
	display: none;
}

.kn-form-message.is-visible {
	display: block;
}

.kn-form-message.is-success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.kn-form-message.is-error {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

/* ==========================================================================
   Privacy Text
   ========================================================================== */

.kn-form-privacy {
	font-size: 13px;
	color: var(--kn-text-light);
	margin-top: 12px;
}

.kn-form-privacy a {
	color: var(--kn-petrooli);
}

/* ==========================================================================
   Honeypot (Hidden)
   ========================================================================== */

.kn-hp {
	position: absolute !important;
	left: -9999px !important;
	visibility: hidden !important;
}

/* Dark Mode block removed 2026-06-23 (Katri): the form is ALWAYS light + laivasto, never gray.
   Brand rule: page background always white, text never gray. */

/* ==========================================================================
   Accessibility
   ========================================================================== */

.kn-input:focus-visible,
.kn-button:focus-visible,
.kn-checkbox:focus-visible {
	outline: 2px solid var(--kn-petrooli);
	outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.kn-button,
	.kn-input,
	.kn-checkbox-wrapper {
		transition: none;
	}

	.kn-button-loading {
		animation: none;
	}
}

/* ==========================================================================
   Banner Form (.kn-form-banner)
   Etusivun banneri: keltainen (vaihdettava) paneeli, laivastonsininen teksti
   ja painike, Lexend (peritty teemasta) + itsehostattu Phosphor.
   Portattu plans/2026-06-22-uutiskirje-banner-LOPULLINEN.html -mockupista,
   kovakoodatut hexit korvattu design-tokeneilla + standalone-fallbackeilla.
   HUOM: mockupin #12143E on vanhentunut laivastonsininen — käytä tokenia
   var(--color-laivasto,#002136), EI #12143E.
   ========================================================================== */

/* Self-hosted Phosphor for the banner icons (banner-scoped, namespaced "kn-bi"
   so it can't collide with the theme's .kc-ic-* or the guides' Phosphor).
   CANONICAL FONT HOME = the active theme's fonts dir (kutri-tt25). Do NOT point
   at /wp-content/oppaat/_shared/fonts/ — that prefix is behind an nginx
   `deny all` wall (deployed 2026-07-04) and returns 403, which rendered these
   icons as tofu on the front page (fixed 2026-07-08). The theme hosts the full
   family (Phosphor.woff2 + Phosphor-Bold.woff2), same-origin + HTTP-cached, and
   the woff2 only downloads where .kn-bi renders (the banner).
   Codepoints: envelope-simple \e218, arrow-right \e06c. */
@font-face {
	font-family: "KN-Phosphor";
	src: url("https://kutri.net/wp-content/themes/kutri-tt25/assets/fonts/Phosphor.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "KN-Phosphor-Bold";
	src: url("https://kutri.net/wp-content/themes/kutri-tt25/assets/fonts/Phosphor-Bold.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.kn-bi {
	font-family: "KN-Phosphor";
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	display: inline-block;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.kn-bi-bold {
	font-family: "KN-Phosphor-Bold";
}
.kn-bi-envelope::before {
	content: "\e218";
}
.kn-bi-arrow::before {
	content: "\e06c";
}

/* Container — overrides .kn-form's system font so Lexend inherits from theme. */
.kn-form-banner {
	font-family: inherit;
	color: var(--color-laivasto, #002136);
	background: var(--kn-banner-bg, var(--color-keltaoranssi, #FFCC00));
	border-radius: var(--radius, 6px);
	padding: 36px 40px;
	max-width: 1080px;
	margin: 0 auto;
}

.kn-banner-inner {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* Header: icon + title/subline, top-aligned. */
.kn-banner-head {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.kn-banner-icon {
	font-size: clamp(23px, 2.7vw, 31px);
	line-height: 1;
	color: var(--color-laivasto, #002136);
	display: flex;
	flex-shrink: 0;
	margin-top: 1px;
}

.kn-banner-title {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	color: var(--color-laivasto, #002136);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
}

.kn-banner-subline {
	font-size: 17px;
	color: var(--color-laivasto, #002136);
	opacity: 0.85;
	font-weight: 500;
	margin: 8px 0 0;
}

/* Topics: override the fieldset chrome, lay options out in a wrapping row.
   Keeps .kn-form-fieldset (admin live-toggle JS targets it). */
.kn-banner-opts {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
}

.kn-banner-opt {
	flex: 1 1 200px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

.kn-banner-optlabel {
	display: block;
}

.kn-banner-optname {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-laivasto, #002136);
	line-height: 1.2;
}

.kn-banner-optday {
	display: block;
	font-size: 13.5px;
	color: var(--color-laivasto, #002136);
	opacity: 0.7;
	margin-top: 2px;
}

/* Custom checkbox (a11y: native unchecked gray border fails the brief's ≥3:1;
   navy 2px border passes). Checked = navy fill + white tick, matches the mockup.
   Top-aligned to line up with the option name. */
.kn-banner-check {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	margin-top: 2px;
	flex-shrink: 0;
	border: 2px solid var(--color-laivasto, #002136);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	position: relative;
}

.kn-banner-check:checked {
	background: var(--color-laivasto, #002136);
}

.kn-banner-check:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Subscribe row: email + button on one line, wraps on narrow widths. */
.kn-banner-subscribe {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.kn-banner-email {
	flex: 1 1 300px;
	padding: 14px 16px;
	border: 2px solid var(--color-laivasto, #002136);
	border-radius: var(--radius, 6px);
	font-size: 16px;
	font-family: inherit;
	background: #fff;
	color: var(--color-laivasto, #002136);
}

.kn-banner-email::placeholder {
	color: var(--color-laivasto, #002136);
	opacity: 0.6;
}

.kn-banner-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--color-laivasto, #002136);
	color: #fff;
	border: 2px solid var(--color-laivasto, #002136);
	border-radius: var(--radius, 6px);
	padding: 14px 26px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	min-height: 52px;
	white-space: nowrap;
	cursor: pointer;
}

.kn-banner-btn .kn-bi {
	font-size: 18px;
}

/* Tracking consent + privacy rows. */
.kn-banner-tracking {
	font-size: 14px;
	color: var(--color-laivasto, #002136);
}

.kn-banner-privacy {
	font-size: 13px;
	color: var(--color-laivasto, #002136);
	opacity: 0.75;
	margin: 0;
}

.kn-banner-privacy a {
	color: var(--color-laivasto, #002136);
	text-decoration: underline;
}

/* Switchable background modifiers (default = yellow; text/border stay navy). */
.kn-form-banner.kn-bg-keltainen {
	/* Intentionally EMPTY — load-bearing, do NOT add a background here.
	   The bgColor block attribute defaults to "keltainen", so EVERY banner
	   instance renders this class. If a page also has a hand-typed color class
	   (e.g. someone put "kn-bg-pinkki" in the block's Additional CSS classes),
	   both classes apply; because this rule sets no --kn-banner-bg, the other
	   class's value wins and the banner stays pink. Adding a yellow declaration
	   here would silently override those hand-typed colors. (v1.19.6) */
}
.kn-form-banner.kn-bg-vaaleansininen {
	--kn-banner-bg: var(--color-vaaleaturkoosi, #b0f4ff);
}
.kn-form-banner.kn-bg-pinkki {
	/* Soft light pink chosen by Katri 2026-06-22 (navy text 13.3:1, AAA).
	   Now brand-backed: --color-bg-pinkki (#ffdeeb). The fallback covers the
	   plugin until the theme's kutri-tokens.css sets the token live. */
	--kn-banner-bg: var(--color-bg-pinkki, #ffdeeb);
}
.kn-form-banner.kn-bg-sininen {
	--kn-banner-bg: var(--color-bg-sininen, #ebfcff);
}

/* Focus-visible for keyboard users. */
.kn-banner-email:focus-visible,
.kn-banner-btn:focus-visible,
.kn-banner-check:focus-visible {
	outline: 2px solid var(--color-laivasto, #002136);
	outline-offset: 2px;
}

/* Mobile: stack the subscribe row (button full width), options full width. */
@media (max-width: 720px) {
	.kn-form-banner {
		padding: 28px 22px;
	}
	.kn-banner-opt {
		flex: 1 1 100%;
	}
	.kn-banner-email {
		flex: 1 1 100%;
	}
	.kn-banner-btn {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* (Dark-mode guard removed 2026-06-23: no @media prefers-color-scheme:dark block remains;
   the form and banner are always light + laivasto.) */