/*
 * Kaukajärviosuuskunta — projektin tyylit.
 *
 * Pääteema lataa tämän tiedoston pääbundlen jälkeen. Brändäys tehdään
 * määrittelemällä Louhosteeman design-tokenit uudelleen; sen jälkeen tulevat
 * leiskan omat komponentit (kjo-*), joita pääteemassa ei ole.
 *
 * Koko token-listan näkee pääteeman tiedostosta
 * assets/scss/abstracts/_tokens.scss.
 */

/* ==========================================================================
   1. Design-tokenit
   ========================================================================== */

:root {
	/* Brändivärit Figman muuttujista. */
	--louhos-primary: #004e83;
	--louhos-primary-rgb: 0, 78, 131;
	--louhos-primary-dark: #003152; /* hover, n. 18 % tummempi */
	--louhos-accent: #40dc87;

	/* Linkkiväri tekstissä: brändisininen läpäisee AA:n valkoisella (8,6:1). */
	--louhos-link-color: #004e83;

	/* Neutraalit. */
	--louhos-headings: #121212;
	--louhos-body-color: #333333;
	--louhos-grey: #f5f5f5;
	--louhos-border: #c5c5c5;
	--louhos-border-rgb: 197, 197, 197;

	/* Tummat pinnat. */
	--louhos-dark-1: #00111d;
	--louhos-dark-1-rgb: 0, 17, 29;
	--louhos-dark-2: #004e83;
	--louhos-dark-2-rgb: 0, 78, 131;

	/* Mitat. */
	--louhos-header-height: 157px;
	--louhos-radius: 10px;
	--louhos-radius-lg: 15px;

	/* Typografia. */
	--louhos-font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

	/* --- Projektin omat --------------------------------------------------- */

	/* Otsikkofontti. Trebuchet MS ei ole webfontti; pino on sen lähimmät
	   vastineet järjestelmästä riippuen. */
	--kjo-font-heading: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

	--kjo-navy: #004e83;
	--kjo-navy-deep: #00111d;
	--kjo-green: #40dc87;
	--kjo-grey-text: #7d7d7d;

	/* Sivun reunus: hero ja yläpalkki ovat 60 px reunasta 1920 px:n leiskassa,
	   sisältöosiot 310 px eli 1300 px leveä palsta. */
	--kjo-edge: clamp(10px, 3.125vw, 60px);
	--kjo-content: 1300px;

	/* Tytäryhtiökorttien limitys heron päälle. */
	--kjo-cards-overlap: 121px;
	--kjo-cards-gap-below: 111px;
}

/* ==========================================================================
   2. Perusasetukset
   ========================================================================== */

body {
	background: #fcffff;
	font-family: var(--louhos-font-family);
	font-size: 1.125rem; /* 18px */
	color: var(--louhos-body-color);
}

h1, h2, h3, h4, h5, h6,
.kjo-heading {
	font-family: var(--kjo-font-heading);
	font-weight: 700;
	color: var(--louhos-headings);
}

/* Apuluokka: leiskan 1300 px:n sisältöpalsta. */
.kjo-wrap {
	width: 100%;
	/* Reunus lasketaan mukaan, jotta sisältö on tasan 1300 px leiskan mukaan. */
	max-width: calc(var(--kjo-content) + 2 * var(--kjo-edge));
	margin-inline: auto;
	padding-inline: var(--kjo-edge);
}

/* Vihreä pystypalkki otsikon edessä — toistuu läpi leiskan. */
.kjo-bar::before {
	content: "";
	flex: 0 0 5px;
	width: 5px;
	height: 25px;
	background: var(--kjo-green);
}

/* ==========================================================================
   3. Painikkeet
   ========================================================================== */

.kjo-btn,
.louhos-buttons .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 23px;
	border: 1px solid var(--kjo-navy);
	border-radius: 10px;
	background: var(--kjo-navy);
	color: #fff;
	font-family: var(--kjo-font-heading);
	font-weight: 700;
	font-size: 1.125rem; /* 18px */
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.kjo-btn:hover,
.kjo-btn:focus-visible,
.louhos-buttons .btn:hover,
.louhos-buttons .btn:focus-visible {
	background: var(--louhos-primary-dark);
	border-color: var(--louhos-primary-dark);
	color: #fff;
}

/* Vihreä variantti (hero). Leiskan mukaan teksti on tumma, mikä myös
   läpäisee kontrastivaatimuksen vihreällä. */
.kjo-buttons--accent .btn,
.kjo-btn--accent {
	background: var(--kjo-green);
	border-color: var(--kjo-green);
	color: var(--louhos-headings);
}

.kjo-buttons--accent .btn:hover,
.kjo-buttons--accent .btn:focus-visible,
.kjo-btn--accent:hover,
.kjo-btn--accent:focus-visible {
	background: #2bc873;
	border-color: #2bc873;
	color: var(--louhos-headings);
}

/* Pieni vaalea variantti (uutiskortti). */
.kjo-btn--small {
	gap: 7px;
	padding: 10px 18px;
	font-size: .8125rem; /* 13px */
	background: #fff;
	border-color: var(--louhos-border);
	color: var(--louhos-headings);
}

.kjo-btn--small:hover,
.kjo-btn--small:focus-visible {
	background: var(--kjo-navy);
	border-color: var(--kjo-navy);
	color: #fff;
}

/* ==========================================================================
   4. Ylätunniste
   ========================================================================== */

.kjo-header {
	position: relative;
	z-index: 30;
	background: #fcffff;
}

/* --- Yläpalkki ------------------------------------------------------------ */

.kjo-topbar-row {
	padding-inline: var(--kjo-edge);
}

.kjo-topbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	min-height: 55px;
	padding: 3px 21px 0 28px;
	background: var(--kjo-navy);
	border: 4px solid #fff;
	border-top: 0;
	border-end-start-radius: 15px;
	border-end-end-radius: 15px;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .15));
	color: #fff;
	font-family: var(--kjo-font-heading);
	font-weight: 700;
	font-size: 1.0625rem; /* 17px */
}

.kjo-topbar a {
	color: inherit;
	text-decoration: none;
}

.kjo-topbar a:hover,
.kjo-topbar a:focus-visible {
	text-decoration: underline;
}

.kjo-topbar__contact,
.kjo-topbar__links {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kjo-topbar__item {
	display: flex;
	align-items: center;
	gap: 22px;
	white-space: nowrap;
}

.kjo-topbar__item a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Pystyviivat erottimina. Ne ovat koristeita, joten piilotetaan ruudunlukijalta. */
.kjo-topbar__rule {
	flex: 0 0 2px;
	width: 2px;
	height: 57px;
	background: #fff;
}

/* Vihreä nurkkalohko, jossa Ota yhteyttä -linkki istuu. */
.kjo-topbar__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	align-self: stretch;
	width: 172px;
	margin-inline-end: -21px;
	background: var(--kjo-green);
	border-end-end-radius: 11px;
	color: #fff;
	white-space: nowrap;
}

/* --- Logorivi ------------------------------------------------------------- */

.kjo-header__main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	min-height: 102px;
	padding-inline: var(--kjo-edge);
}

.kjo-brand {
	display: flex;
	align-items: center;
	padding-block: 20px;
	text-decoration: none;
}

.kjo-brand img {
	width: auto;
	height: 62px;
	max-width: 100%;
}

.kjo-brand__text {
	font-family: var(--kjo-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--kjo-navy);
}

/* --- Päävalikko ----------------------------------------------------------- */

.kjo-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kjo-nav__link,
.kjo-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	font-family: var(--kjo-font-heading);
	font-weight: 700;
	font-size: 1.25rem; /* 20px */
	line-height: 1.15;
	text-decoration: none;
	white-space: nowrap;
}

.kjo-nav__link:hover,
.kjo-nav__toggle:hover,
.kjo-nav__link:focus-visible,
.kjo-nav__toggle:focus-visible,
.kjo-nav__item.is-active > .kjo-nav__link,
.kjo-nav__item.is-active > .kjo-nav__toggle {
	color: var(--kjo-navy);
}

.kjo-nav__toggle i {
	font-size: .9375rem;
	transition: transform .15s ease;
}

.kjo-nav__toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.kjo-nav__submenu {
	min-width: 260px;
	padding: 8px;
	border: 0;
	border-radius: 10px;
	box-shadow: 4px 4px 45px rgba(0, 0, 0, .12);
}

.kjo-nav__submenu .dropdown-item {
	padding: 9px 14px;
	border-radius: 7px;
	font-family: var(--kjo-font-heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--louhos-headings);
	white-space: normal;
}

.kjo-nav__submenu .dropdown-item:hover,
.kjo-nav__submenu .dropdown-item:focus-visible {
	background: var(--louhos-grey);
	color: var(--kjo-navy);
}

/* --- Haku ----------------------------------------------------------------- */

.kjo-search {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 256px;
	height: 47px;
	padding: 7px 15px;
	margin-block: 40px 0;
	background: var(--louhos-grey);
	border: 1px solid #fff;
	border-radius: 7px 7px 15px 7px;
	filter: drop-shadow(5px 5px 7.5px rgba(0, 0, 0, .1));
}

.kjo-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font-family: var(--kjo-font-heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--louhos-headings);
}

.kjo-search input[type="search"]::placeholder {
	color: var(--kjo-grey-text);
	opacity: 1;
}

.kjo-search input[type="search"]:focus {
	outline: 2px solid var(--kjo-navy);
	outline-offset: 3px;
}

.kjo-search__submit {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kjo-navy);
	font-size: 1.25rem;
	line-height: 1;
}

/* --- Mobiili -------------------------------------------------------------- */

.kjo-header__toggle {
	align-self: center;
	padding: 8px 12px;
	border: 1px solid var(--louhos-border);
	border-radius: 10px;
	background: #fff;
	color: var(--kjo-navy);
	font-size: 1.5rem;
	line-height: 1;
}

@media (max-width: 1199.98px) {
	/* Leiskan mobiiliheader on yksirivinen: yläpalkki piilotetaan ja sen
	   sisältö siirtyy valikkoon (.kjo-mobile-extras). */
	.kjo-topbar-row {
		display: none;
	}

	.kjo-header__main {
		min-height: 101px;
		align-items: center;
	}

	.kjo-brand img {
		height: 48px;
	}

	.kjo-header__collapse {
		flex-basis: 100%;
		order: 3;
	}

	.kjo-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: 12px;
	}

	.kjo-nav__item {
		border-block-end: 1px solid rgba(var(--louhos-border-rgb), .6);
	}

	.kjo-nav__link,
	.kjo-nav__toggle {
		width: 100%;
		justify-content: space-between;
		padding: 14px 4px;
	}

	/* Alavalikko avautuu paikalleen listaksi, ei kelluvaksi paneeliksi. */
	.kjo-nav__submenu {
		position: static !important;
		width: 100%;
		margin: 0;
		padding: 0 0 12px;
		box-shadow: none;
		transform: none !important;
	}

	.kjo-nav__submenu .dropdown-item {
		padding-inline: 16px;
		font-weight: 400;
		font-family: var(--louhos-font-family);
	}

	.kjo-search {
		width: 100%;
		margin-block: 8px 20px;
	}

	.kjo-mobile-extras {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding-block-end: 16px;
		list-style: none;
		margin: 0;
	}

	.kjo-mobile-extras i {
		width: 20px;
		color: var(--kjo-navy);
	}

	.kjo-mobile-extras a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 4px;
		border-block-end: 1px solid rgba(var(--louhos-border-rgb), .6);
		color: var(--louhos-headings);
		font-family: var(--kjo-font-heading);
		font-weight: 700;
		text-decoration: none;
	}
}

@media (min-width: 1200px) {
	.kjo-header__toggle,
	.kjo-mobile-extras {
		display: none;
	}

	/* Valikko ja haku ovat aina auki työpöydällä. */
	.kjo-header__collapse {
		display: flex !important;
		align-items: flex-start;
		justify-content: space-between;
		flex: 1 1 auto;
		height: auto !important;
		gap: 24px;
	}

	.kjo-nav {
		padding-block-start: 67px;
	}

	.kjo-header__main {
		gap: 68px;
	}
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.kjo-hero {
	padding-inline: var(--kjo-edge);
}

.kjo-hero__card {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 821px;
	overflow: hidden;
	border-radius: 15px;
	isolation: isolate;
}

.kjo-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kjo-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(73.29deg, rgb(0, 78, 131) 19.7%, rgba(0, 78, 131, 0) 100%);
}

.kjo-hero__content {
	max-width: 687px; /* 147 px sisennys + 540 px tekstipalsta */
	padding: 60px 40px 60px 147px;
	color: #fff;
}

.kjo-hero__eyebrow {
	max-width: 477px;
	margin: 0 0 14px;
	font-family: var(--kjo-font-heading);
	font-weight: 700;
	font-style: italic;
	font-size: 1.1875rem; /* 19px */
	color: var(--kjo-green);
}

.kjo-hero__title {
	max-width: 477px;
	margin: 0 0 24px;
	font-size: clamp(2rem, 2.6vw, 3.125rem); /* → 50px */
	line-height: 1.15;
	color: #fff;
}

.kjo-hero__text {
	max-width: 421px;
	margin-block-end: 32px;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
}

.kjo-hero__text p:last-child {
	margin-bottom: 0;
}

/* Heron alareunaan jää tilaa tytäryhtiökorteille, jotka nousevat sen päälle. */
.kjo-hero--has-cards .kjo-hero__content {
	padding-block-end: 180px;
}

@media (max-width: 991.98px) {
	.kjo-hero__card {
		min-height: 419px;
	}

	.kjo-hero__content {
		max-width: none;
		padding: 110px 24px 24px;
	}

	.kjo-hero__title,
	.kjo-hero__text,
	.kjo-hero__eyebrow {
		max-width: none;
	}

	.kjo-hero--has-cards .kjo-hero__content {
		padding-block-end: 24px;
	}

	.kjo-hero__overlay {
		background: linear-gradient(0deg, rgba(0, 78, 131, .95) 25%, rgba(0, 78, 131, .55) 100%);
	}
}

/* ==========================================================================
   6. Tytäryhtiökortit
   ========================================================================== */

.kjo-yhtiot {
	position: relative;
	z-index: 2;
	padding-inline: var(--kjo-edge);
}

/* Kortit limittyvät heron alareunan päälle ja jättävät alleen leiskan välin. */
.kjo-yhtiot--overlap {
	margin-block-start: calc(var(--kjo-cards-overlap) * -1);
	margin-block-end: var(--kjo-cards-gap-below);
}

.kjo-yhtiot__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	max-width: 1362px;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.kjo-yhtio {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 167px;
	padding: 20px;
	overflow: hidden;
	border: 5px solid #fff;
	border-radius: 15px;
	box-shadow: 6px 6px 45px rgba(0, 0, 0, .1);
	background: var(--kjo-navy);
	text-align: center;
	text-decoration: none;
	isolation: isolate;
}

.kjo-yhtio__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kjo-yhtio::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, #004e83 0%, rgba(0, 78, 131, 0) 100%);
}

.kjo-yhtio__logo {
	width: auto;
	max-width: min(216px, 100%);
	height: auto;
	max-height: 60px;
}

.kjo-yhtio__title {
	margin: 0;
	font-family: var(--kjo-font-heading);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.6vw, 1.875rem); /* → 30px */
	color: #fff;
}

a.kjo-yhtio:hover,
a.kjo-yhtio:focus-visible {
	box-shadow: 6px 6px 45px rgba(0, 0, 0, .25);
}

a.kjo-yhtio:hover::after,
a.kjo-yhtio:focus-visible::after {
	background: linear-gradient(180deg, #004e83 30%, rgba(0, 78, 131, .2) 100%);
}

@media (max-width: 991.98px) {
	.kjo-yhtiot__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.kjo-yhtiot--overlap {
		margin-block-start: 24px;
		margin-block-end: 40px;
	}

	.kjo-yhtio {
		min-height: 90px;
		border-width: 3px;
		padding: 12px;
	}

	.kjo-yhtio__logo {
		max-height: 34px;
	}
}

/* ==========================================================================
   7. Sisältöblokki (teksti + kuva)
   ========================================================================== */

.kjo-ti {
	padding-block: 113px 0;
}

.kjo-ti__inner {
	display: flex;
	align-items: center;
	gap: 111px;
}

.kjo-ti--img-right .kjo-ti__inner {
	flex-direction: row-reverse;
}

.kjo-ti__media {
	flex: 0 0 650px;
	max-width: 650px;
}

.kjo-ti__media img {
	width: 100%;
	height: 557px;
	object-fit: cover;
	border-radius: 15px;
}

.kjo-ti__content {
	flex: 1 1 auto;
	min-width: 0;
}

.kjo-ti__title {
	margin: 0 0 30px;
	font-size: clamp(1.75rem, 2.1vw, 2.5rem); /* → 40px */
	line-height: 1.15;
}

.kjo-ti__body {
	margin-block-end: 29px;
	font-size: 1.125rem;
}

.kjo-ti__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1199.98px) {
	.kjo-ti {
		padding-block-start: 64px;
	}

	.kjo-ti__inner,
	.kjo-ti--img-right .kjo-ti__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.kjo-ti__media {
		flex: 0 0 auto;
		max-width: none;
	}

	.kjo-ti__media img {
		height: auto;
		aspect-ratio: 650 / 557;
	}
}

/* ==========================================================================
   8. Ajankohtaista
   ========================================================================== */

.kjo-news {
	padding-block: 105px 0;
}

.kjo-news__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-block-end: 46px;
}

.kjo-news__title {
	margin: 0 0 15px;
	font-size: clamp(1.75rem, 2.1vw, 2.5rem); /* → 40px */
	color: #000;
}

/* Vihreä alleviivauspalkki otsikon alla. */
.kjo-news__underline {
	display: block;
	width: 35px;
	height: 6px;
	background: var(--kjo-green);
}

.kjo-news__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kjo-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--louhos-grey);
	border: 3px solid #fff;
	border-radius: 10px;
	box-shadow: 4px 4px 45px rgba(0, 0, 0, .1);
}

.kjo-card__media {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 10px;
}

.kjo-card__media--empty {
	background: #e4e7ea;
}

.kjo-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px 23px 27px 27px;
}

.kjo-card__title {
	margin: 0 0 10px;
	font-size: 1.25rem; /* 20px */
	line-height: 1.2;
	color: #000;
}

.kjo-card__title a {
	color: inherit;
	text-decoration: none;
}

.kjo-card__title a:hover,
.kjo-card__title a:focus-visible {
	color: var(--kjo-navy);
	text-decoration: underline;
}

.kjo-card__date {
	margin: 0 0 12px;
	font-family: var(--kjo-font-heading);
	font-weight: 700;
	font-style: italic;
	font-size: .875rem; /* 14px */
	color: var(--kjo-grey-text);
}

.kjo-card__excerpt {
	margin: 0 0 20px;
	font-size: .875rem;
	color: #000;
}

.kjo-card__footer {
	margin-block-start: auto;
}

@media (max-width: 1199.98px) {
	.kjo-news {
		padding-block-start: 64px;
	}

	.kjo-news__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {
	.kjo-news__head {
		flex-direction: column;
	}

	.kjo-news__list {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   9. Alatunniste
   ========================================================================== */

.kjo-footer {
	position: relative;
	margin-block-start: 105px;
	padding-block: 79px 33px;
	background: linear-gradient(-25.5deg, #00111d 0%, #004e83 100%);
	color: #fff;
	filter: drop-shadow(0 -5px 22.5px rgba(0, 0, 0, .12));
}

.kjo-footer__inner {
	position: relative;
	width: 100%;
	max-width: calc(var(--kjo-content) + 2 * var(--kjo-edge));
	margin-inline: auto;
	padding-inline: var(--kjo-edge);
}

.kjo-footer a {
	color: #fff;
	text-decoration: none;
}

.kjo-footer a:hover,
.kjo-footer a:focus-visible {
	text-decoration: underline;
}

.kjo-footer__brand img {
	width: auto;
	height: 78px;
	max-width: 100%;
}

.kjo-footer__rule {
	height: 2px;
	margin-block: 18px 0;
	border: 0;
	background: rgba(255, 255, 255, .15);
	opacity: 1;
}

/* --- Esite-nosto ---------------------------------------------------------- */

.kjo-footer__brochure {
	position: absolute;
	top: -125px;
	right: calc(var(--kjo-edge) + 24px);
	width: 297px;
}

.kjo-footer__brochure-img {
	display: block;
	width: 100%;
	/* Leiskassa nosto on rajattu 297×253 px:iin — pystykuva rajautuu yläreunasta. */
	height: 253px;
	object-fit: cover;
	object-position: top center;
	border-radius: 4px;
	filter: drop-shadow(4px 4px 15px rgba(0, 0, 0, .3));
}

.kjo-footer__brochure-btn {
	position: absolute;
	inset-inline-start: -137px;
	inset-block-end: 24px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	padding: 12px 20px;
	background: var(--kjo-navy);
	border: 1px solid var(--kjo-green);
	border-start-start-radius: 10px;
	border-end-start-radius: 10px;
	font-family: var(--kjo-font-heading);
	font-weight: 700;
	font-size: .875rem;
	white-space: nowrap;
}

/* --- Sarakkeet ------------------------------------------------------------ */

.kjo-footer__columns {
	display: grid;
	/* Keskimmäinen sarake mukautuu, jottei "Usein kysytyt kysymykset" katkea. */
	grid-template-columns: 190px auto 1fr;
	column-gap: 139px;
	row-gap: 40px;
	padding-block: 55px 0;
}

.kjo-footer__columns > :last-child {
	justify-self: end;
}

.kjo-footer__heading {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0 0 24px;
	font-size: 1.5625rem; /* 25px */
	color: #fff;
}

.kjo-footer__address {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-style: normal;
	font-size: 1.125rem;
	line-height: 1.5;
}

.kjo-footer__address i {
	margin-block-start: 4px;
	color: #fff;
}

.kjo-footer__links {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kjo-footer__links a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.125rem;
}

.kjo-footer__links i {
	font-size: .875rem;
	color: var(--kjo-green);
}

.kjo-footer__services {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding-block-start: 15px;
	list-style: none;
}

.kjo-footer__services a {
	display: flex;
	align-items: center;
	gap: 15px;
	font-family: var(--kjo-font-heading);
	font-weight: 700;
	font-size: 1.375rem; /* 22px */
}

/* --- Merkit ja copyright --------------------------------------------------- */

.kjo-footer__certs {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding-block-start: 166px;
	list-style: none;
}

.kjo-footer__certs img {
	width: auto;
	max-height: 70px;
}

.kjo-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block-start: 27px;
	font-size: .875rem;
}

.kjo-footer__bottom p {
	margin: 0;
}

.kjo-footer__bottom a {
	color: var(--kjo-green);
	font-weight: 600;
}

@media (max-width: 1199.98px) {
	.kjo-footer {
		margin-block-start: 64px;
		padding-block-start: 56px;
	}

	.kjo-footer__brochure {
		position: static;
		width: 220px;
		margin-block: 32px 0;
	}

	.kjo-footer__brochure-img {
		height: 190px;
	}

	.kjo-footer__brochure-btn {
		position: static;
		margin-block-start: -32px;
		border-radius: 10px;
	}

	.kjo-footer__columns {
		grid-template-columns: 1fr;
		column-gap: 0;
		padding-block-start: 40px;
	}

	.kjo-footer__columns > :last-child {
		justify-self: start;
	}

	.kjo-footer__certs {
		flex-wrap: wrap;
		padding-block-start: 48px;
	}
}

/* ==========================================================================
   10. Saavutettavuus
   ========================================================================== */

:focus-visible {
	outline: 3px solid var(--kjo-green);
	outline-offset: 2px;
}

.kjo-footer :focus-visible,
.kjo-topbar :focus-visible,
.kjo-hero :focus-visible {
	outline-color: #fff;
}