/*!
 * kutri-footer.css — footer link columns, social icons, contact modal
 * (+ inline fallback) and the landing content↔footer gap fix.
 * Enqueued SITE-WIDE (dep: kutri-components) — the footer part is on every
 * template except the minimalist one. RUCSS NOTE: keep the 'kutri-footer'
 * handle in WP Rocket's remove_unused_css_safelist — the dialog is built by
 * JS at runtime, so its selectors never appear in the static HTML.
 * No open/close transitions are used, so there is nothing to guard behind
 * prefers-reduced-motion.
 */

/* Landing pages: kill the root block-gap between main and footer.
   Specificity (0,2,2) beats the :where() block-gap rule. */
.wp-site-blocks:has(> main.kutri-landing-main) > footer {
	margin-block-start: 0;
}

/* --- Link columns --- */
.kutri-footer__h {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-bottom: 0.75rem;
}
.kutri-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kutri-footer__links li {
	margin: 0 0 0.5rem;
}
/* SC 1.4.1: links on petrooli are white (≥4.5:1) AND underlined. */
.kutri-footer a {
	color: var(--color-valkoinen, #fff);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.kutri-footer a:hover {
	text-decoration-thickness: 2px;
}
/* Focus ring on petrooli: keltaoranssi ≥3:1 against the dark background. */
.kutri-footer :focus-visible {
	outline: 2px solid var(--color-keltaoranssi, #ffcc00);
	outline-offset: 2px;
}
.kutri-footer__company {
	line-height: 1.6;
}

/* --- Social icons — 44px hit targets, no underline (icon links) --- */
.kutri-footer__some {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 1rem 0 0;
	padding: 0;
}
.kutri-footer__some a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 1.5rem;
	text-decoration: none;
}

/* --- Contact trigger (keltaoranssi fill ⇒ laivasto text, F4) --- */
.kutri-contact {
	margin: 1rem 0 0;
}
.kutri-contact__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.875rem 1.5rem;
	border: 2px solid var(--color-keltaoranssi, #ffcc00);
	border-radius: 6px;
	background: var(--color-keltaoranssi, #ffcc00);
	color: var(--color-laivasto, #002136);
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}
.kutri-contact__trigger:hover {
	background: #e6b800;
	border-color: #e6b800;
}

/* --- Contact panel ---
   Default-VISIBLE white card inline in the footer (E2): if the modal JS
   fails or <dialog> is unsupported, the form stays usable here. The modal
   JS moves this node into the dialog, which hides it until opened. */
.kutri-contact__panel {
	background: #fff;
	color: var(--color-laivasto, #002136);
	border-radius: 6px;
	padding: 1rem clamp(1.25rem, 3vw, 2rem) 0.25rem;
	margin-top: var(--wp--preset--spacing--6, 2rem);
}
.kutri-contact__panel a {
	color: var(--color-petrooli, #094f7c);
}

/* --- Compact field layout in the contact form (Katri 2026-08-07):
   title, subtitle and control sit tight with no blank line between them;
   field→next-title gap 25% under the kf-forms.css default (1.5rem). --- */
.kutri-contact__panel .kf-field {
	margin-bottom: 1.125rem;
}
.kutri-contact__panel .kf-field label {
	margin-bottom: 0;
}
/* KF renders empty spacer <p>s and wraps the control in a <p>; the theme's
   default paragraph margin (18px) between title/subtitle/control comes from
   those. Zero them all inside the field. */
.kutri-contact__panel .kf-field p {
	margin-block: 0;
}
.kutri-contact__panel .kf-field input[type="text"],
.kutri-contact__panel .kf-field input[type="email"],
.kutri-contact__panel .kf-field textarea {
	margin-top: 0.125rem;
}

/* Round 3 (Katri 2026-08-07): tight head and foot, no asterisk convention.
   The required-note and label stars are replaced by a small unbolded
   "(pakollinen)" after the label text; inputs keep their required attribute
   so screen readers still announce the state. */
.kutri-contact__panel .kf-required-note {
	display: none;
}
.kutri-contact__panel .kf-field label .kf-required {
	display: none;
}
.kutri-contact__panel .kf-field label:has(.kf-required)::after {
	content: " (pakollinen)";
	font-weight: 400;
	font-size: 0.875rem;
}
.kutri-contact__panel .kf-title {
	margin-top: 0;
	margin-bottom: 0.5rem;
}
.kutri-contact__panel .kf-wrap {
	margin-bottom: 0;
}
/* The empty status region below the submit button reserves 1.5rem — drop it
   until a confirmation actually fills it. */
.kutri-contact__panel .kf-status:empty {
	margin-top: 0;
}
/* wpautop wraps the hidden inputs (with an injected <br>) and the kf-def JSON
   script in bare form-level <p>s that render as 31px empty lines above and
   below the submit button. Flatten them — the inputs and script still work. */
.kutri-contact__panel .kf-form > p:not([class]) {
	margin-block: 0;
	line-height: 0;
}
.kutri-contact__panel .kf-form > p:not([class]) > br {
	display: none;
}
.kutri-contact__panel .kf-status {
	border-radius: 6px;
}
/* kf-forms.css gives the submit a 999px pill — brand boxes are 6px. */
.kutri-contact__panel .kf-submit {
	border-radius: 6px;
}

/* --- Modal --- */
.kutri-contact__dialog {
	border: none;
	border-radius: 6px;
	padding: 0;
	width: min(560px, calc(100vw - 2rem));
	max-height: min(90vh, 100%);
	overflow: hidden; /* keep the 6px corners; the panel scrolls instead */
}
.kutri-contact__dialog .kutri-contact__panel {
	overflow-y: auto;
	max-height: 90vh;
}
/* Room for the close button so the form title never sits under it. */
.kutri-contact__dialog .kf-title {
	padding-right: 3rem;
}
.kutri-contact__dialog::backdrop {
	background: rgba(0, 33, 54, 0.6);
}
.kutri-contact__dialog .kutri-contact__panel {
	margin-top: 0;
}
/* Focus ring inside the white dialog: petrooli ≥3:1 against white. */
.kutri-contact__dialog :focus-visible {
	outline: 2px solid var(--color-petrooli, #094f7c);
	outline-offset: 2px;
}
.kutri-contact__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 1; /* the panel is appended after the button and would paint over it */
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--color-laivasto, #002136);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}
.kutri-contact__close:hover {
	background: var(--color-bg-keltainen, #fff0b3);
}

/* --- Bottom bar --- */
.kutri-footer__bottom {
	margin-top: var(--wp--preset--spacing--6, 2rem);
}
.kutri-footer__copyright {
	margin: 0;
}