/*
Theme Name: JerryKetola
Theme URI: https://jerryketola.fi
Description: Child theme of Mestariteema for Jerry Ketola.
Author: Tapio Kauranen
Author URI: https://tapiokauranen.com
Template: mestariteema
Version: 1.4.5
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jerryketola
*/

/* Voimavalmennus: highlighted testimonials (icon boxes) */
.jk-vv-testimonials .icon-boxes-intro {
	max-width: 760px;
}

.jk-vv-testimonials .icon-boxes-grid {
	align-items: stretch;
}

.jk-vv-testimonials .icon-box {
	height: 100%;
	background: var(--scheme-bg);
	box-shadow: none;
}

.jk-vv-testimonials .icon-box-icon {
	color: var(--scheme-accent);
}

.jk-vv-testimonials .icon-box-icon-heading {
	font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
	font-weight: 600;
	line-height: 1.35 !important;
	color: var(--scheme-heading);
}

.jk-vv-testimonials .icon-box-content {
	margin-top: 18px !important;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--scheme-accent);
}

/* Voimavalmennus: numbered process (icon boxes) */
.jk-vv-process .icon-boxes-intro-heading {
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.jk-vv-process .icon-boxes-intro {
	max-width: 760px;
	margin-bottom: 48px;
}

.jk-vv-process .icon-boxes-intro-paragraph + .icon-boxes-intro-paragraph {
	margin-top: 12px;
}

.jk-vv-process .icon-box-icon {
	display: none;
}

.jk-vv-process .icon-box-icon-heading {
	margin-bottom: 12px !important;
	font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
	font-weight: 700;
	line-height: 1 !important;
	letter-spacing: 0.04em;
	color: var(--scheme-accent);
}

.jk-vv-process .icon-box-content {
	font-size: clamp(0.95rem, 1.3vw, 1.15rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--scheme-heading);
}

@media screen and (max-width: 768px) {
	.jk-vv-testimonials .icon-boxes-grid.columns-2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.jk-vv-testimonials .icon-box {
		flex-direction: column !important;
	}

	.jk-vv-testimonials .icon-box-icon-heading {
		font-size: 1.2rem !important;
	}

	.jk-vv-process .icon-boxes-intro {
		margin-bottom: 32px;
	}

	.jk-vv-process .icon-boxes-grid.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jk-vv-process .icon-box {
		grid-template-columns: minmax(0, 1fr) !important;
		text-align: left;
	}
}

/* ==========================================================================
   Header navigation by width
   Customizer: Navigation Font Size 19, Compact Menu Below 1229.
   Measured to fit on one row in FI and EN (the EN button label is longer).
   ========================================================================== */

/* Labels never break inside; if the menu ever runs out of room (e.g. before
   the web fonts load), whole items move to a second row instead. */
@media screen and (min-width: 769px) {
	body:not(.nav-hamburger) .main-navigation > ul > li > a {
		white-space: nowrap;
	}

	body:not(.nav-hamburger) .header-style-classic .header-inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	body:not(.nav-hamburger) .header-style-classic .main-navigation {
		min-width: 0;
		max-width: 100%;
	}

	body:not(.nav-hamburger) .main-navigation > ul {
		flex-wrap: wrap;
	}

	/* Language switcher: 14px text, at least 24px tall, readable current language */
	.site-header .header-extras .header-lang-btn,
	.site-header .header-extras a.header-lang-btn {
		padding: 5px;
		font-size: 14px;
	}

	.site-header .header-extras a.header-lang-btn {
		color: var(--nav-link-color);
	}

	.site-header .header-extras a.header-lang-btn:hover,
	.site-header .header-extras a.header-lang-btn:focus-visible {
		color: var(--nav-hover-color);
	}

	.site-header .header-extras .header-lang-btn.is-current {
		opacity: 0.55;
	}
}

/* 1330px and wider: 19px menu (Customizer value) with a little less side padding */
@media screen and (min-width: 1330px) {
	body:not(.nav-hamburger) .main-navigation > ul > li > a {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* 1230-1329px (1280px laptops): 17px */
@media screen and (min-width: 1230px) and (max-width: 1329px) {
	body:not(.nav-hamburger) .main-navigation > ul > li > a {
		padding: 10px;
		font-size: 17px;
		letter-spacing: 0.5px;
	}

	body:not(.nav-hamburger) .main-navigation .sub-menu a {
		font-size: 17px;
	}
}

/* 1024-1229px (tablet landscape, small laptops): 16px, slightly smaller logo and button */
@media screen and (min-width: 1024px) and (max-width: 1229px) {
	body:not(.nav-hamburger) .main-navigation > ul > li > a {
		padding: 10px 7px;
		font-size: 16px;
		letter-spacing: 0.5px;
	}

	body:not(.nav-hamburger) .main-navigation .sub-menu a {
		font-size: 16px;
	}

	.header-style-classic .header-inner {
		column-gap: 16px;
	}

	.site-header .site-branding .custom-logo-link img {
		max-height: 36px !important;
	}

	.header-extras {
		gap: 8px;
	}

	.site-header .header-extras .header-cta {
		padding: 9px 14px;
		font-size: 13px;
	}
}

/* 769-1023px (tablet portrait): logo, language and button on row 1, the full 16px menu on row 2 */
@media screen and (min-width: 769px) and (max-width: 1023px) {
	body:not(.nav-hamburger) .header-style-classic .header-inner {
		grid-template-columns: auto minmax(0, 1fr);
		padding-top: 10px;
	}

	body:not(.nav-hamburger) .header-style-classic .header-extras {
		grid-column: 2;
		grid-row: 1;
	}

	body:not(.nav-hamburger) .header-style-classic .main-navigation {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center !important;
	}

	body:not(.nav-hamburger) .main-navigation > ul {
		flex-wrap: nowrap;
	}

	body:not(.nav-hamburger) .main-navigation > ul > li > a {
		padding: 8px 10px 10px;
		font-size: 16px;
		letter-spacing: 0.5px;
	}

	body:not(.nav-hamburger) .main-navigation .sub-menu a {
		font-size: 16px;
	}

	.site-header .header-extras .header-cta {
		padding: 9px 16px;
		font-size: 13px;
	}
}

/* ==========================================================================
   Page layout fixes
   ========================================================================== */

/* Text links in teal (scheme 2) sections: the orange accent is unreadable on teal */
#page [data-color-scheme="2"] :is(p, li) > a:not([class*="button"]) {
	color: #fff !important;
	text-decoration: underline;
}

/* Legal pages (Contained Page template): readable line length */
.page-contained .entry-content {
	max-width: 860px;
}

/* Cookie tables in that column: size columns by content (fixed layout split
   them into equal quarters and broke cookie names mid-word) */
@media screen and (min-width: 769px) {
	.page-contained .kncc-policy__table {
		table-layout: auto;
	}

	.page-contained .kncc-policy__table :is(td, th):last-child {
		white-space: nowrap;
	}
}

/* Condition-page heroes (text only): no empty 60vh band, readable intro width */
@media screen and (min-width: 769px) {
	.hero-block.hero-block--full-width-narrow {
		min-height: 0 !important;
	}

	.hero-block--full-width-narrow .hero-content > p:not(.section-subtitle-block) {
		max-width: 56ch;
	}
}

/* Narrow heroes set to "Justify content: Center": keep the 8/12 column on desktop
   (Mestariteema's critical CSS sets .hero-block .hero-content to max-width 100%) */
@media screen and (min-width: 1025px) {
	.hero-block .hero-content.hero-content-narrow.hero-content-narrow--justify-center {
		max-width: 66.666667%;
	}
}

/* Category pages: intro under the H1, guide below the post list (inc/category-guide.php) */
.jerryketola-blog-hero-jerry .jk-archive-head {
	padding-bottom: 0;
}

.jerryketola-blog-hero-jerry .jk-archive-head .jk-single-hero-wrap.container {
	margin-bottom: 0;
}

.jerryketola-blog-hero-jerry .jk-archive-head .jk-single-hero {
	align-items: start;
}

.jk-single-hero__desc {
	margin-top: 14px;
	max-width: 680px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--scheme-text);
}

.jk-single-hero__desc p {
	margin: 0 0 10px;
}

.jk-single-hero__desc p:last-child {
	margin-bottom: 0;
}

.jk-single-hero__desc a {
	text-decoration: underline;
}

body.jk-has-category-guide #primary.content-area.blog-archive {
	padding-bottom: 0;
}

.jk-category-guide {
	background: var(--scheme-3-bg, #def7f5);
	color: var(--scheme-3-text, #000000);
	padding: 48px 0 56px;
}

.jk-category-guide__inner {
	max-width: var(--mestari-single-content-width, 800px);
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.6;
}

.jk-category-guide__inner h2,
.jk-category-guide__inner h3 {
	color: var(--scheme-3-heading, #177e89);
}

.jk-category-guide__inner h2 {
	margin: 0 0 16px;
}

.jk-category-guide__inner h3 {
	margin: 28px 0 8px;
	font-size: 22px;
	line-height: 1.3;
}

.jk-category-guide__inner p,
.jk-category-guide__inner ul {
	margin: 0 0 12px;
}

.jk-category-guide__inner ul {
	padding-left: 1.25em;
}

.jk-category-guide__inner li + li {
	margin-top: 4px;
}

.jk-category-guide__inner a:not(.wp-block-button__link) {
	color: var(--scheme-3-accent, #177e89);
	text-decoration: underline;
}

.jk-category-guide__cta {
	margin-top: 20px;
}

@media screen and (max-width: 768px) {
	.jk-single-hero__desc {
		max-width: 100%;
		font-size: 1rem;
	}

	.jk-category-guide {
		padding: 32px 0 40px;
	}

	.jk-category-guide__inner h3 {
		margin-top: 22px;
		font-size: 19px;
	}
}

/* Price cards: buttons line up at the bottom of each card */
@media screen and (min-width: 769px) {
	.content-block.layout-columns.columns-has-borders > .container > .wp-block-columns > .wp-block-column {
		display: flex;
		flex-direction: column;
	}

	/* !important: Mestariteema Core zeroes margins of card children with !important */
	.content-block.layout-columns.columns-has-borders > .container > .wp-block-columns > .wp-block-column > .wp-block-buttons:last-child {
		margin-top: auto !important;
	}
}

/* Price list table: short columns (duration, price) never wrap; service names from 1024px */
@media screen and (min-width: 769px) {
	.mestari-table-normal :is(td, th):nth-child(3),
	.mestari-table-normal :is(td, th):nth-child(4) {
		white-space: nowrap;
	}
}

@media screen and (min-width: 1024px) {
	.mestari-table-normal :is(td, th):nth-child(-n+2) {
		white-space: nowrap;
	}
}

/* Footer on tablets and small laptops: equal columns so the booking button
   (longer in EN) fits. The Customizer ratio (2fr 1fr 1fr) is an inline
   variable, so set the columns directly. */
@media screen and (min-width: 769px) and (max-width: 1229px) {
	.site-footer .footer-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
	.site-footer .footer-column .wp-block-button__link {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Blog cards without a featured image: left-aligned like their neighbours */
.blog-archive .mestari-card.mestari-card--no-thumb .mestari-card-body,
.posts-block .mestari-card.mestari-card--no-thumb .mestari-card-body {
	text-align: left;
	align-items: flex-start;
	justify-content: flex-start;
}

/* Phones in landscape (769-1023px wide, short screen): the two-row header
   would cover a quarter of the screen, so it scrolls away with the page */
@media screen and (min-width: 769px) and (max-width: 1023px) and (max-height: 500px) {
	.header-sticky .site-header {
		position: relative;
	}
}