/*
Theme Name:  Karhulan Kanat
Theme URI:   https://karhulankanat.fi
Description: Karhulan Kanat child theme – Kadence-pohjainen
Author:      Karhulan Kanat
Author URI:  https://karhulankanat.fi
Template:    kadence
Version:     1.4.1
License:     GNU General Public License v2 or later
Text Domain: karhulan-kanat
*/

/* ============================================================
   GLOBAALIT VÄRIT JA TYPOGRAFIA
   ============================================================ */

:root {
	--kk-vihrea:      #2C3E2D;
	--kk-vihrea-tumma:#243328;
	--kk-vihrea-medi: #344a36;
	--kk-oranssi:     #C4622D;
	--kk-kerma:       #F5F0E8;
	--kk-kerma-tumma: #E8E2D8;
	--kk-teksti-muted:#5a6e5b;
	--kk-vihrea-vaalea:#EAF3DE;
	--kk-vihrea-teksti:#27500A;
	--kk-vihrea-light:#8aac8b;
	--kk-oranssi-tumma:#a8521f;
	--kk-oranssi-rgb:196,98,45;
	--kk-vihrea-rgb:44,62,45;
	--kk-vihrea-light-rgb:138,172,139;
	--kk-tausta:#faf8f4;
	--kk-reuna:#ddd5c5;
	--kk-teksti-vaalea:#cdddce;
}

/* ============================================================
   BODY JA PERUSTYPOGRAFIA
   ============================================================ */

body {
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	color: #1a1a1a;
	background: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	line-height: 1.25;
	color: var(--kk-vihrea);
}

p {
	line-height: 1.7;
}

/* ============================================================
   NAVIGAATIO
   ============================================================ */

.site-header,
.kadence-sticky-header {
	background-color: var(--kk-vihrea) !important;
}

.site-header .site-branding .site-title,
.site-header .site-branding .site-title a {
	color: var(--kk-kerma) !important;
	font-weight: 500;
	font-size: 1.1rem;
	text-decoration: none;
}

/* Päävalikko */
.main-navigation ul li a,
header .kadence-navigation ul li a {
	color: rgba(245, 240, 232, 0.75) !important;
	font-size: 0.875rem;
	transition: color 0.2s ease;
}

.main-navigation ul li a:hover,
header .kadence-navigation ul li a:hover {
	color: var(--kk-kerma) !important;
}

/* CTA-nappi navigaatiossa – lisää luokka "nav-cta" valikkokohteelle */
.main-navigation ul li.nav-cta a,
header .kadence-navigation ul li.nav-cta a {
	background: var(--kk-oranssi) !important;
	color: var(--kk-kerma) !important;
	padding: 4px 14px !important;
	border-radius: 4px !important;
	font-weight: 500 !important;
}

.main-navigation ul li.nav-cta a:hover,
header .kadence-navigation ul li.nav-cta a:hover {
	background: var(--kk-oranssi-tumma,#a8521f) !important;
}

/* Mobiilinavigaatio */
.kadence-mobile-nav-toggle svg,
.kadence-mobile-nav-toggle span {
	color: var(--kk-kerma) !important;
	background: var(--kk-kerma) !important;
}

/* ============================================================
   HERO-OSIO  (.kk-hero)
   ============================================================ */

.kk-hero {
	background-color: var(--kk-vihrea-medi);
	padding: 72px 24px 56px;
	text-align: center;
}

.kk-hero .kk-eyebrow {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kk-vihrea-light,#8aac8b);
	margin-bottom: 12px;
}

.kk-hero h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 500;
	color: var(--kk-kerma);
	line-height: 1.2;
	margin-bottom: 12px;
}

.kk-hero .kk-hero-sub {
	font-size: 0.9375rem;
	color: #b8ccba;
	max-width: 480px;
	margin: 0 auto 28px;
	line-height: 1.65;
}

.kk-hero .kk-hero-badges {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 20px;
}

.kk-hero .kk-hero-badges span {
	font-size: 0.8125rem;
	color: var(--kk-vihrea-light,#8aac8b);
	display: flex;
	align-items: center;
	gap: 5px;
}

/* ============================================================
   NAPIT (BUTTONS)
   ============================================================ */

.wp-block-button .wp-block-button__link,
.kk-btn-primary {
	background-color: var(--kk-oranssi) !important;
	color: var(--kk-kerma) !important;
	border: none !important;
	border-radius: 5px !important;
	font-weight: 500 !important;
	font-size: 0.9375rem !important;
	padding: 10px 24px !important;
	transition: background 0.2s ease !important;
	text-decoration: none !important;
}

.wp-block-button .wp-block-button__link:hover,
.kk-btn-primary:hover {
	background-color: var(--kk-oranssi-tumma,#a8521f) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.kk-btn-secondary {
	background: transparent !important;
	color: var(--kk-kerma) !important;
	border: 1px solid rgba(245, 240, 232, 0.35) !important;
	border-radius: 5px !important;
	font-size: 0.9375rem !important;
	padding: 10px 24px !important;
	transition: all 0.2s ease !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(245, 240, 232, 0.1) !important;
}

/* Kauppa-nappi (valkoisella taustalla) */
.kk-btn-dark {
	background-color: var(--kk-vihrea) !important;
	color: var(--kk-kerma) !important;
	border: none !important;
	border-radius: 5px !important;
	font-weight: 500 !important;
	padding: 10px 24px !important;
}

/* ============================================================
   3 ASKELEEN PROSESSIOSIO (.kk-steps)
   ============================================================ */

.kk-steps {
	background: var(--kk-kerma);
	padding: 32px 24px;
}

.kk-steps .kk-steps-title {
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kk-teksti-muted);
	text-align: center;
	margin-bottom: 24px;
}

.kk-steps-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.kk-step-num {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	font-weight: 500;
	margin: 0 auto 10px;
	background: var(--kk-vihrea);
	color: var(--kk-kerma);
}

.kk-step-num.accent {
	background: var(--kk-oranssi);
}

.kk-step h3 {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--kk-vihrea);
	margin-bottom: 4px;
}

.kk-step p {
	font-size: 0.75rem;
	color: var(--kk-teksti-muted);
	line-height: 1.55;
	margin: 0;
}

.kk-steps-grid .kk-step:nth-child(2) {
	border-left: 0.5px solid #ccc5b5;
	border-right: 0.5px solid #ccc5b5;
	padding: 0 16px;
}

@media (max-width: 640px) {
	.kk-steps-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		gap: 16px;
	}
	.kk-steps-grid .kk-step:nth-child(2) {
		border-left: none;
		border-right: none;
		border-top: 0.5px solid #ccc5b5;
		border-bottom: 0.5px solid #ccc5b5;
		padding: 16px 0;
	}
}

/* ============================================================
   ERÄ-BANNERI (.kk-era-banner)
   ============================================================ */

.kk-era-banner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.kk-era-banner h2 {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--color-text-primary, #1a1a1a);
	margin: 0 0 3px;
}

.kk-era-banner .kk-era-sub {
	font-size: 0.75rem;
	color: #666;
	margin: 0;
}

.kk-pill-open {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--kk-vihrea-vaalea);
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.6875rem;
	color: var(--kk-vihrea-teksti);
	font-weight: 500;
}

/* ============================================================
   MAKSUINFO-LAATIIKKO (.kk-maksuinfo)
   ============================================================ */

.kk-maksuinfo {
	background: var(--kk-kerma);
	border-left: 3px solid var(--kk-oranssi);
	border-radius: 0 6px 6px 0;
	padding: 10px 14px;
	font-size: 0.75rem;
	color: #4a3a2a;
	line-height: 1.6;
	margin-bottom: 16px;
}

.kk-maksuinfo strong {
	color: var(--kk-vihrea);
}

/* ============================================================
   TUOTEKORTIT – MOBIILI (.kk-prod-row)
   ============================================================ */

.kk-prod-row {
	display: flex;
	align-items: stretch;
	border: 0.5px solid #e0e0e0;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 10px;
	background: #fff;
}

.kk-prod-icon {
	width: 68px;
	background: #3a5040;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1.75rem;
}

.kk-prod-body {
	padding: 10px 12px;
	flex: 1;
}

.kk-prod-body h3 {
	font-size: 0.8125rem;
	font-weight: 500;
	color: #1a1a1a;
	margin: 0 0 2px;
}

.kk-prod-body .kk-prod-meta {
	font-size: 0.6875rem;
	color: #666;
	margin: 0 0 4px;
}

.kk-prod-body .kk-prod-price {
	font-size: 0.8125rem;
	color: var(--kk-oranssi);
	font-weight: 500;
	margin: 0;
}

/* ============================================================
   WOOCOMMERCE – YLEISET MUKAUTUKSET
   ============================================================ */

/* Lisää ostoskoriin -nappi */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .single_add_to_cart_button {
	background-color: var(--kk-oranssi) !important;
	color: var(--kk-kerma) !important;
	border-radius: 5px !important;
	font-weight: 500 !important;
	border: none !important;
	transition: background 0.2s !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
	background-color: var(--kk-oranssi-tumma,#a8521f) !important;
}

/* Hinnat */
.woocommerce .price,
.woocommerce .amount {
	color: var(--kk-oranssi) !important;
	font-weight: 500;
}

/* Checkout-nappi */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background-color: var(--kk-oranssi) !important;
	border-radius: 5px !important;
	font-weight: 500 !important;
}

/* Tuotesivun otsikko */
.woocommerce div.product .product_title {
	color: var(--kk-vihrea) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
	background-color: var(--kk-vihrea) !important;
	color: var(--kk-kerma) !important;
}

.site-footer a {
	color: var(--kk-vihrea-light,#8aac8b) !important;
	font-size: 0.75rem;
}

.site-footer a:hover {
	color: var(--kk-kerma) !important;
}

.site-footer .site-info,
.site-footer p {
	color: var(--kk-vihrea-light,#8aac8b);
	font-size: 0.75rem;
}

/* ============================================================
   LANDING PAGE TEMPLATE – FULL WIDTH
   ============================================================ */

.page-template-landing-page .site-header,
.page-template-landing-page .site-footer {
	/* Header ja footer näkyvillä mutta ilman navigaatiota */
}

.page-template-landing-page .main-navigation {
	display: none !important;
}

/* ============================================================
   APULUOKAT
   ============================================================ */

.kk-section {
	padding: 48px 24px;
}

.kk-section-cream {
	background: var(--kk-kerma);
}

.kk-section-green {
	background: var(--kk-vihrea);
}

.kk-text-center { text-align: center; }
.kk-text-cream  { color: var(--kk-kerma) !important; }
.kk-text-muted  { color: var(--kk-teksti-muted) !important; }
.kk-text-orange { color: var(--kk-oranssi) !important; }

.kk-divider {
	border: none;
	border-top: 0.5px solid var(--kk-reuna,#ddd5c5);
	margin: 0;
}

/* ============================================================
   "VARAA NYT" -VALIKKONAPPI
   Lisää valikkokohdalle CSS-luokka: nav-cta (Ulkoasu → Valikot).
   Värit seuraavat värienhallintaa (var(--kk-...)).
   ============================================================ */
.nav-cta > a,
li.nav-cta > a {
	background: var(--kk-oranssi) !important;
	color: var(--kk-kerma) !important;
	border-radius: 8px;
	padding: 0.5em 1.15em !important;
	margin: 0 0 0 0.5em;
	font-weight: 600;
	text-decoration: none !important;
	line-height: 1.4;
	transition: background .2s, transform .15s, box-shadow .2s;
	box-shadow: 0 4px 12px rgba(var(--kk-oranssi-rgb,196,98,45),.22);
}
.nav-cta > a:hover,
.nav-cta > a:focus,
li.nav-cta > a:hover,
li.nav-cta > a:focus {
	background: var(--kk-oranssi-tumma) !important;
	color: var(--kk-kerma) !important;
	transform: translateY(-1px);
}
/* poista Kadencen alleviivaus-/hover-efekti napilta */
.nav-cta > a::after,
.nav-cta > a::before { display: none !important; }

/* Mobiilivalikossa nappi siistinä, ei koko leveydeltä venytettynä */
@media (max-width: 1024px) {
	.nav-cta > a,
	li.nav-cta > a { display: inline-block; margin: 6px 0; }
}