/*
 * Kameli Audio – lisätyylit, joita theme.json ei kata.
 * Ilme: hiilenmusta ja Kameli Audion vihreä, leveät otsikot kuten logossa,
 * logon aaltoviiva toistuvana aiheena.
 */

:root {
	--kameli-hiili: var(--wp--preset--color--hiili);
	--kameli-vihrea: var(--wp--preset--color--vihrea);
	--kameli-tummavihrea: #1d7a52; /* vihreän tumma sävy vaalealle taustalle (riittävä kontrasti) */
	--kameli-reuna: var(--wp--preset--color--reuna);
	--kameli-vaalea: var(--wp--preset--color--vaalea-teksti);
}

/* Osiot kiinni toisissaan ilman rakoja */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull + .alignfull,
main > .wp-block-post-content {
	margin-block-start: 0;
}

/* Typografia: leveät otsikot logon tapaan */
h1, h2, h3,
.wp-block-site-title {
	font-stretch: 118%;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}
p {
	text-wrap: pretty;
}
.kameli-eyebrow {
	font-size: 0.78rem !important;
	font-weight: 700;
	font-stretch: 125%;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kameli-tummavihrea);
	margin-bottom: 0.25rem !important;
}
.has-hiili-background-color .kameli-eyebrow,
.has-yo-background-color .kameli-eyebrow {
	color: var(--kameli-vihrea);
}
.has-vihrea-background-color .kameli-eyebrow {
	color: var(--kameli-hiili);
}
::selection {
	background: var(--kameli-vihrea);
	color: var(--kameli-hiili);
}

/* Linkit tummalla taustalla */
.has-hiili-background-color a:not(.wp-element-button),
.has-yo-background-color a:not(.wp-element-button) {
	color: inherit;
	text-decoration-color: var(--kameli-vihrea);
	text-underline-offset: 0.2em;
}

/* Ylätunniste */
.kameli-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .kameli-header {
	top: var(--wp-admin--admin-bar--height, 0);
}
.kameli-header .wp-block-site-logo img {
	display: block;
}
.kameli-header .wp-block-navigation-item__content {
	text-decoration: none;
	padding-block: 0.3rem;
	background-image: linear-gradient(var(--kameli-vihrea), var(--kameli-vihrea));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.25s ease;
}
.kameli-header .wp-block-navigation-item__content:hover,
.kameli-header .current-menu-item > .wp-block-navigation-item__content,
.kameli-header .wp-block-navigation-item__content[aria-current="page"] {
	background-size: 100% 2px;
}
.kameli-header .kameli-nav-painike > .wp-block-navigation-item__content {
	background: var(--kameli-vihrea);
	color: var(--kameli-hiili);
	border-radius: 999px;
	padding: 0.55rem 1.15rem;
	font-weight: 700;
}
.kameli-header .kameli-nav-painike > .wp-block-navigation-item__content:hover {
	background: #74c9a3;
}
.kameli-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	font-size: 1.6rem;
	font-stretch: 118%;
	gap: 1.4rem;
	padding-top: 2rem;
}

/* Hero: tumma, vasemmalle tasattu, logon aaltoviiva alareunassa */
.kameli-hero {
	position: relative;
	overflow: hidden;
	padding-bottom: calc(var(--wp--preset--spacing--70) + 70px) !important;
}
.kameli-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 90px;
	background: url("../images/aaltoviiva-vihrea.svg") center bottom / auto 100% repeat-x;
	pointer-events: none;
}
.kameli-hero > * {
	position: relative;
	z-index: 1;
}
.kameli-hero h1 {
	max-width: 16ch;
	margin-top: 0.5rem;
}
.kameli-hero .kameli-alaotsikko {
	font-weight: 400;
	font-stretch: 100%;
	letter-spacing: 0;
	line-height: 1.45;
	color: var(--kameli-vaalea);
	max-width: 46ch;
	margin-top: 1.25rem;
}
.kameli-hero--etusivu h1 {
	font-size: clamp(2.6rem, 7vw, 5.5rem);
}
.kameli-hero__rivi {
	align-items: center !important;
}
.kameli-hero__logo {
	margin: 0 auto !important;
	max-width: 360px;
}
.kameli-hero .wp-block-buttons {
	margin-top: 2rem;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
	padding-block: calc(0.85rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--kameli-vihrea);
	color: var(--kameli-vihrea);
}

/* Osion otsikkoalue */
.kameli-osion-alku {
	margin-bottom: var(--wp--preset--spacing--50);
}
.kameli-osio-otsikko {
	max-width: 22ch;
}
.kameli-johdanto {
	max-width: 60ch;
	color: var(--wp--preset--color--harmaa);
	margin-top: 1rem !important;
}

/* Kortit */
.wp-block-group.is-style-kortti {
	background: var(--wp--preset--color--valkoinen);
	border: 1px solid var(--kameli-reuna);
	border-radius: 14px;
	padding: clamp(1.4rem, 3vw, 2.2rem);
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.wp-block-group.is-style-kortti > * {
	margin: 0 !important;
}
.kameli-palvelukortti {
	position: relative;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.kameli-palvelukortti:hover {
	border-color: var(--kameli-hiili);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -18px rgba(11, 11, 11, 0.45);
}
.kameli-palvelukortti .kameli-ikoni {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--vaalea);
	display: grid;
	place-items: center;
}
.kameli-palvelukortti .kameli-ikoni img {
	width: 30px !important;
}
.kameli-palvelukortti h3 {
	font-size: 1.35rem;
	margin-top: 0.5rem !important;
}
.kameli-palvelukortti p {
	color: var(--wp--preset--color--harmaa);
}
.kameli-palvelukortti p:last-child {
	margin-top: auto !important;
	padding-top: 0.5rem;
}
/* Koko kortti on klikattava */
.kameli-palvelukortti .kameli-lue-lisaa::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.kameli-lue-lisaa {
	font-weight: 700;
	color: var(--kameli-hiili);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.kameli-lue-lisaa::after {
	content: "→";
	transition: transform 0.2s ease;
}
.kameli-lue-lisaa:hover::after,
.kameli-palvelukortti:hover .kameli-lue-lisaa::after {
	transform: translateX(4px);
}
.kameli-lue-lisaa:focus-visible {
	outline: 2px solid var(--kameli-hiili);
	outline-offset: 4px;
}

/* Luettelot: pieni hiekanvärinen aaltomerkki */
.kameli-lista {
	list-style: none;
	padding-left: 0 !important;
	display: grid;
	gap: 0.7rem;
}
.kameli-lista li {
	position: relative;
	padding-left: 1.9rem;
}
.kameli-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.1rem;
	height: 0.8em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='%2352b489' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 9V5a2 2 0 0 1 4 0v6a2 2 0 0 0 4 0V3a2 2 0 0 1 4 0v8a2 2 0 0 0 4 0V6a2 2 0 0 1 4 0v2'/%3E%3C/svg%3E") left center / contain no-repeat;
}

/* Palvelurivit */
.kameli-palvelurivi {
	border-top: 1px solid var(--kameli-reuna);
	padding-top: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50) !important;
}
.kameli-osion-alku + .kameli-palvelurivi {
	margin-top: 0 !important;
}
.kameli-palvelurivi__otsikko {
	font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
	position: sticky;
	top: 110px;
}

/* Miksi Kameli Audio */
.kameli-syyt > .wp-block-column {
	border-top: 2px solid var(--kameli-vihrea);
	padding-top: 1.25rem;
}
.kameli-syy__otsikko {
	font-size: 1.2rem !important;
	color: var(--kameli-vihrea);
}
.kameli-syyt p {
	color: var(--kameli-vaalea);
}

/* Toimintakehote */
.kameli-cta {
	position: relative;
	overflow: hidden;
	padding-bottom: calc(var(--wp--preset--spacing--70) + 60px) !important;
}
.kameli-cta::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 90px;
	background: url("../images/aaltoviiva-tumma.svg") center bottom / auto 100% repeat-x;
	pointer-events: none;
}
.kameli-cta > * {
	position: relative;
	z-index: 1;
}
.kameli-cta__rivi {
	align-items: center !important;
}
.kameli-cta h2 {
	max-width: 28ch;
}

/* Yhteystiedot-luettelo */
.kameli-yhteystiedot {
	list-style: none;
	padding-left: 0 !important;
	display: grid;
	gap: 0.55rem;
	font-weight: 600;
}
.kameli-yhteystiedot a {
	color: inherit;
	text-decoration-color: var(--kameli-vihrea);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

/* Henkilökortti */
.kameli-henkilokortti {
	padding: 0 !important;
	overflow: hidden;
}
.kameli-henkilokortti > :not(.kameli-henkilokuva) {
	padding-inline: clamp(1.4rem, 3vw, 2rem) !important;
}
.kameli-henkilokortti > :last-child {
	padding-bottom: clamp(1.4rem, 3vw, 2rem);
}
.kameli-henkilokuva {
	width: 100%;
}
.kameli-henkilokuva img {
	width: 100% !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* Alatunniste */
.kameli-footer a {
	color: var(--wp--preset--color--valkoinen);
	text-decoration: none;
}
.kameli-footer a:hover {
	color: var(--kameli-vihrea);
}
.kameli-linkkilista {
	list-style: none;
	padding-left: 0 !important;
	display: grid;
	gap: 0.4rem;
}
.kameli-copyright {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto !important;
	margin-top: var(--wp--preset--spacing--50) !important;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	opacity: 0.75;
}

/* Yhteydenottolomake */
.kameli-lomakekortti {
	box-shadow: 0 24px 50px -30px rgba(11, 11, 11, 0.35);
}
.kameli-lomake__kentta {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1.1rem;
}
.kameli-lomake label {
	font-size: 0.85rem;
	font-weight: 700;
}
.kameli-lomake input,
.kameli-lomake textarea {
	font: inherit;
	font-size: 1rem;
	width: 100%;
	box-sizing: border-box;
	padding: 0.8rem 0.95rem;
	border: 1px solid #bccac3;
	border-radius: 10px;
	background: #fbfdfc;
	color: var(--kameli-hiili);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kameli-lomake textarea {
	min-height: 9rem;
	resize: vertical;
}
.kameli-lomake input:focus,
.kameli-lomake textarea:focus {
	outline: none;
	border-color: var(--kameli-hiili);
	box-shadow: 0 0 0 3px rgba(82, 180, 137, 0.45);
}
.kameli-lomake__ansa {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.kameli-lomake__huomautus {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--harmaa);
}
.kameli-lomake__laheta {
	width: 100%;
	cursor: pointer;
	border: 0;
	background: var(--kameli-hiili) !important;
	color: var(--wp--preset--color--valkoinen) !important;
}
.kameli-lomake__laheta:hover {
	background: #2a2a2a !important;
}
.kameli-lomake-ilmoitus {
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: 10px;
	border-left: 4px solid var(--kameli-vihrea);
	background: var(--wp--preset--color--vaalea);
}
.kameli-lomake-ilmoitus--virhe {
	border-left-color: #b3261e;
	color: #8c1d18;
}

/* Hyppy ankkuriin kiinteän ylätunnisteen alle */
[id] {
	scroll-margin-top: 100px;
}

/* Mobiili */
@media (max-width: 781px) {
	.kameli-hero__logo {
		max-width: 180px;
		margin: 1rem 0 0 !important;
	}
	.kameli-hero--etusivu .kameli-hero__rivi {
		flex-direction: column-reverse;
	}
	.kameli-palvelurivi__otsikko {
		position: static;
	}
	.kameli-cta .wp-block-buttons {
		justify-content: flex-start !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* ---------- Blogi ---------- */

/* Kategoriasuodatin */
.kameli-suodatin {
	gap: 0.5rem !important;
	margin-bottom: var(--wp--preset--spacing--50) !important;
}
.kameli-suodatin p,
.kameli-suodatin ul {
	margin: 0;
}
.kameli-suodatin__kategoriat {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0 !important;
}
.kameli-suodatin a {
	display: inline-block;
	padding: 0.45rem 1rem;
	border: 1px solid var(--kameli-reuna);
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--kameli-hiili);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kameli-suodatin a:hover {
	border-color: var(--kameli-hiili);
}
.blog .kameli-suodatin__kaikki a,
.kameli-suodatin__kategoriat .current-cat a {
	background: var(--kameli-hiili);
	border-color: var(--kameli-hiili);
	color: var(--wp--preset--color--valkoinen);
}

/* Julkaisukortit */
.kameli-postiruudukko {
	gap: var(--wp--preset--spacing--40) !important;
}
@media (max-width: 900px) {
	.kameli-postiruudukko {
		grid-template-columns: 1fr 1fr !important;
	}
}
@media (max-width: 600px) {
	.kameli-postiruudukko {
		grid-template-columns: 1fr !important;
	}
}
.kameli-postikortti {
	position: relative;
	padding: 0 !important;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.kameli-postikortti:hover {
	border-color: var(--kameli-hiili);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -18px rgba(11, 11, 11, 0.45);
}
.kameli-postikortti > :not(.wp-block-post-featured-image) {
	padding-inline: clamp(1.25rem, 2.5vw, 1.75rem);
}
.kameli-postikortti > .wp-block-post-featured-image + * ,
.kameli-postikortti > :first-child:not(.wp-block-post-featured-image) {
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.kameli-postikortti > :last-child {
	padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-top: auto !important;
}
/* Kortti ilman kuvaa: aaltoviiva kuvan paikalla */
.kameli-postikortti:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 7;
	background: var(--kameli-hiili) url("../images/aaltoviiva-vihrea.svg") center bottom / auto 70% repeat-x;
}
.kameli-postikortti .wp-block-post-featured-image img {
	transition: transform 0.4s ease;
}
.kameli-postikortti:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}
.kameli-postikortti .wp-block-post-title {
	font-size: 1.3rem;
	line-height: 1.2;
}
.kameli-postikortti .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}
/* Koko kortti on klikattava otsikon linkin kautta */
.kameli-postikortti .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.kameli-postikortti .kameli-eyebrow a,
.kameli-postikortti .kameli-eyebrow {
	position: relative;
	z-index: 1;
	text-decoration: none;
	color: var(--kameli-tummavihrea);
}
.kameli-postikortti .wp-block-post-excerpt {
	color: var(--wp--preset--color--harmaa);
}
.kameli-postikortti .wp-block-post-excerpt__more-text {
	display: none;
}
.kameli-postikortti__pvm {
	color: var(--wp--preset--color--harmaa);
}
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50) !important;
	font-weight: 600;
}
.wp-block-query-pagination a {
	text-decoration: none;
}
.wp-block-query-pagination .current {
	color: var(--kameli-tummavihrea);
}

/* Osion otsikkorivi linkillä oikealla */
.kameli-osio-otsikkorivi {
	align-items: flex-end !important;
	margin-bottom: var(--wp--preset--spacing--40) !important;
}
.kameli-osio-otsikkorivi > .wp-block-column:last-child {
	text-align: right;
}
@media (max-width: 781px) {
	.kameli-osio-otsikkorivi > .wp-block-column:last-child {
		text-align: left;
	}
}

/* Hero-otsikon kategoriat ja päiväys */
.kameli-hero .kameli-eyebrow a {
	color: inherit;
	text-decoration: none;
}
.kameli-hero--artikkeli > *,
.kameli-hero--artikkeli h1 {
	max-width: var(--wp--style--global--content-size) !important;
	margin-inline: auto !important;
}
.kameli-hero--artikkeli h1 {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
}
.kameli-hero .wp-block-term-description p {
	margin: 0;
}

/* Artikkeli */
.kameli-artikkeli__kuva img {
	border-radius: 14px;
}
.kameli-artikkeli .wp-block-post-content {
	font-size: 1.125rem;
	line-height: 1.75;
}
.kameli-artikkeli .wp-block-post-content h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-top: 2.5rem;
}
.kameli-artikkeli .wp-block-post-content h3 {
	font-size: 1.3rem;
	margin-top: 2rem;
}
.kameli-artikkeli .wp-block-post-content > p:first-child.has-large-font-size {
	font-size: 1.35rem !important;
	line-height: 1.55;
}
.kameli-artikkeli .wp-block-post-content a {
	text-decoration-color: var(--wp--preset--color--vihrea);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}
.kameli-artikkeli__alaosa {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto !important;
	margin-top: var(--wp--preset--spacing--60) !important;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--kameli-reuna);
	font-weight: 600;
}
.kameli-artikkeli__alaosa a {
	text-decoration: none;
}

/* Asiakastarinan faktalaatikko */
.kameli-faktat {
	background: var(--wp--preset--color--vaalea);
	border-radius: 14px;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	margin-block: 2rem !important;
}
.kameli-faktat .wp-block-columns {
	gap: 1.25rem !important;
	margin: 0;
}
.kameli-faktat p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
}
.kameli-faktat .kameli-eyebrow {
	margin-bottom: 0.3rem !important;
}

/* Lainaus */
.wp-block-quote.kameli-lainaus,
.kameli-artikkeli .wp-block-quote {
	border: 0;
	margin-block: 2.5rem;
	padding: 0 0 0 3.25rem;
	position: relative;
	font-size: 1.35rem;
	line-height: 1.5;
	font-weight: 500;
}
.wp-block-quote.kameli-lainaus::before,
.kameli-artikkeli .wp-block-quote::before {
	content: "”";
	position: absolute;
	left: 0;
	top: -0.35em;
	font-size: 4.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--vihrea);
}
.wp-block-quote cite {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.9rem;
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--harmaa);
}