/* Fix the known WPBakery narrow-column failure only on designated content pages. */
@media (max-width: 1000px) {
	body.kouruset-content-page .content,
	body.kouruset-content-page .content_inner,
	body.kouruset-content-page .container,
	body.kouruset-content-page .container_inner,
	body.kouruset-content-page .vc_row,
	body.kouruset-content-page .vc_row-fluid,
	body.kouruset-content-page .vc_column_container,
	body.kouruset-content-page .vc_column-inner,
	body.kouruset-content-page .wpb_wrapper {
		min-width: 0;
		max-width: 100%;
	}
	body.kouruset-content-page .vc_row,
	body.kouruset-content-page .vc_row-fluid {
		margin-left: 0;
		margin-right: 0;
	}
	body.kouruset-content-page .vc_column_container {
		float: none;
		width: 100%;
	}
	body.kouruset-content-page input:not([type="checkbox"]):not([type="radio"]),
	body.kouruset-content-page select,
	body.kouruset-content-page textarea {
		width: 100%;
		max-width: 100%;
	}
	body.kouruset-content-page h1,
	body.kouruset-content-page h2,
	body.kouruset-content-page h3,
	body.kouruset-content-page p,
	body.kouruset-content-page a {
		overflow-wrap: break-word;
		word-break: normal;
	}
}


/* the Blog page has no approved visual sidebar; let its existing cards
 * use the same content width as the rest of the site. */
body.kouruset-blog .two_columns_75_25,
body.kouruset-blog .two_columns_66_33,
body.kouruset-blog .two_columns_25_75,
body.kouruset-blog .two_columns_33_66 {
	display: block;
	width: 100%;
}
body.kouruset-blog .two_columns_75_25 > .column1,
body.kouruset-blog .two_columns_66_33 > .column1,
body.kouruset-blog .two_columns_25_75 > .column2,
body.kouruset-blog .two_columns_33_66 > .column2 {
	float: none;
	width: 100%;
}
body.kouruset-blog .two_columns_75_25 > .column2,
body.kouruset-blog .two_columns_66_33 > .column2,
body.kouruset-blog .two_columns_25_75 > .column1,
body.kouruset-blog .two_columns_33_66 > .column1 {
	display: none;
}
body.kouruset-blog .blog_holder,
body.kouruset-blog .blog_holder article {
	max-width: 100%;
}

/* the Blog uses the full approved site content width while retaining its
 * own three-column card grid. */
body.kouruset-blog .content .container_inner,
body.kouruset-blog .content .default_template_holder {
	width: min(var(--kouruset-content), calc(100% - 40px)) !important;
	max-width: var(--kouruset-content) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
body.kouruset-blog .blog_holder {
	width: 100% !important;
	max-width: 100% !important;
}
@media (max-width: 767px) {
	body.kouruset-blog .content .container_inner,
	body.kouruset-blog .content .default_template_holder {
		width: calc(100% - 28px) !important;
	}
}

/* keep dxw3 spam protection active but hide its developer signature from
 * customer-facing forms. The hidden nonce field remains intact. */
body.kouruset input[name="dxw3_nce"] + small,
body.kouruset form + input[name="dxw3_nce"] + small {
	display: none !important;
}

/* Consistent content-page form actions; do not alter field behavior. */
body.kouruset-content-page form input[type="submit"],
body.kouruset-content-page form button[type="submit"],
body.kouruset-content-page form .wpcf7-submit {
	min-height: 42px;
	padding: 10px 20px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--kouruset-red) !important;
	color: #fff !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-transform: uppercase;
	cursor: pointer;
}
body.kouruset-content-page form input[type="submit"]:hover,
body.kouruset-content-page form button[type="submit"]:hover,
body.kouruset-content-page form .wpcf7-submit:hover {
	background: var(--kouruset-red-dark) !important;
	color: #fff !important;
}

/* Front-page/customer-reference media must stay inside its WPBakery column.
 * This is intentionally geometric only; source artwork remains untouched. */
body.kouruset.home .wpb_single_image,
body.kouruset.home .wpb_single_image .vc_single_image-wrapper {
	max-width: 100%;
}
body.kouruset.home .wpb_single_image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

/* FAQ contracts.
 * Product tabs use schema/dxw3 markup; the main FAQ page uses many separate
 * Qode accordion-holder blocks (one question per holder). */
body.kouruset:not(.single-product) .schema-faq-section + .schema-faq-section,
body.kouruset:not(.single-product) .faq-item + .faq-item {
	margin-top: 10px !important;
}
body.kouruset:not(.single-product) .schema-faq-question,
body.kouruset:not(.single-product) .faq-question {
	line-height: 1.35 !important;
}
body.kouruset-faq-page .qode-accordion-holder.qode-toggle,
body.kouruset-faq-page .qode-accordion-holder.qode-accordion {
	margin-bottom: 10px !important;
}
body.kouruset-faq-page .qode-accordion-holder.qode-toggle:last-child,
body.kouruset-faq-page .qode-accordion-holder.qode-accordion:last-child {
	margin-bottom: 0 !important;
}
body.kouruset-faq-page .qode-accordion-holder > .qode-title-holder {
	margin: 0 !important;
}
body.kouruset-faq-page .qode-accordion-holder > .qode-title-holder + .qode-accordion-content {
	margin-top: 0 !important;
}

/* Evergreen blog articles intentionally omit publication date and category.
 * Hide Bridge's legacy post-info row completely so no empty metadata shell
 * remains beside or below the article title. */
body.kouruset-blog-single .post_info,
body.kouruset-blog-single .post_info_single {
	display: none !important;
}
body.kouruset-blog-single .content .container_inner,
body.kouruset-blog-single .content .default_template_holder,
body.kouruset-blog-single .blog_holder {
	width: min(var(--kouruset-content), calc(100% - 40px)) !important;
	max-width: var(--kouruset-content) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
@media (max-width: 767px) {
	body.kouruset-blog-single .content .container_inner,
	body.kouruset-blog-single .content .default_template_holder,
	body.kouruset-blog-single .blog_holder {
		width: calc(100% - 28px) !important;
	}
}

/* the customer references are a raw-HTML #clients grid containing five
 * .logot blocks. Target that exact editorial markup instead of WPBakery image
 * wrappers, which do not own these assets. */
body.kouruset.home #clients {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	align-items: stretch !important;
	gap: 24px 30px !important;
	width: min(1100px, 100%) !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: 8px 0 18px !important;
	box-sizing: border-box !important;
}
body.kouruset.home #clients > .logot {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 0 !important;
	min-height: 112px !important;
	margin: 0 !important;
	padding: 12px 10px !important;
	box-sizing: border-box !important;
}
body.kouruset.home #clients > .logot > a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
}
body.kouruset.home #clients > .logot img {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 78px !important;
	margin: 0 auto !important;
	object-fit: contain !important;
}
@media (max-width: 1000px) {
	body.kouruset.home #clients {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 18px 24px !important;
		width: min(760px, calc(100% - 32px)) !important;
	}
}
@media (max-width: 700px) {
	body.kouruset.home #clients {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px 18px !important;
		width: calc(100% - 28px) !important;
		padding-bottom: 12px !important;
	}
	body.kouruset.home #clients > .logot {
		min-height: 92px !important;
		padding: 10px 8px !important;
	}
	body.kouruset.home #clients > .logot img {
		max-height: 64px !important;
	}
	body.kouruset.home #clients > .logot:nth-child(5) {
		grid-column: 1 / -1 !important;
		justify-self: center !important;
		width: min(210px, 100%) !important;
	}
}


/* editorial rhythm: omitted H1 and the FAQ page from the black
 * editorial-heading contract. Keep branded home-page section headings and
 * commerce state/price colors untouched, but make actual editorial hierarchy
 * H1-H4 consistently ink-black in the contexts owned by this stylesheet. */
body.kouruset-content-page .wpb_text_column h1,
body.kouruset-content-page .wpb_text_column h2,
body.kouruset-content-page .wpb_text_column h3,
body.kouruset-content-page .wpb_text_column h4,
body.kouruset-faq-page .wpb_text_column h1,
body.kouruset-faq-page .wpb_text_column h2,
body.kouruset-faq-page .wpb_text_column h3,
body.kouruset-faq-page .wpb_text_column h4,
body.kouruset-blog-single .post_text h1,
body.kouruset-blog-single .post_text h2,
body.kouruset-blog-single .post_text h3,
body.kouruset-blog-single .post_text h4,
body.kouruset.tax-product_cat .term-description h1,
body.kouruset.tax-product_cat .term-description h2,
body.kouruset.tax-product_cat .term-description h3,
body.kouruset.tax-product_cat .term-description h4,
body.kouruset.tax-product_cat .kouruset-archive-main .woocommerce-products-header h1,
body.kouruset.tax-product_cat .kouruset-archive-main .woocommerce-products-header h2,
body.kouruset.tax-product_cat .kouruset-archive-main .woocommerce-products-header h3,
body.kouruset.single-product .q_tabs.horizontal .tab-content h1,
body.kouruset.single-product .q_tabs.horizontal .tab-content h2,
body.kouruset.single-product .q_tabs.horizontal .tab-content h3,
body.kouruset.single-product .q_tabs.horizontal .tab-content h4 {
	color: #111 !important;
}
body.kouruset-content-page .wpb_text_column h1,
body.kouruset-content-page .wpb_text_column h2,
body.kouruset-content-page .wpb_text_column h3,
body.kouruset-content-page .wpb_text_column h4,
body.kouruset-faq-page .wpb_text_column h1,
body.kouruset-faq-page .wpb_text_column h2,
body.kouruset-faq-page .wpb_text_column h3,
body.kouruset-faq-page .wpb_text_column h4,
body.kouruset-blog-single .post_text h1,
body.kouruset-blog-single .post_text h2,
body.kouruset-blog-single .post_text h3,
body.kouruset-blog-single .post_text h4,
body.kouruset.tax-product_cat .term-description h1,
body.kouruset.tax-product_cat .term-description h2,
body.kouruset.tax-product_cat .term-description h3,
body.kouruset.tax-product_cat .term-description h4,
body.kouruset.single-product .q_tabs.horizontal .tab-content h1,
body.kouruset.single-product .q_tabs.horizontal .tab-content h2,
body.kouruset.single-product .q_tabs.horizontal .tab-content h3,
body.kouruset.single-product .q_tabs.horizontal .tab-content h4 {
	margin-top: 1.35em !important;
	margin-bottom: .65em !important;
}
body.kouruset-content-page .wpb_text_column p,
body.kouruset-blog-single .post_text p,
body.kouruset.tax-product_cat .term-description p,
body.kouruset.single-product .q_tabs.horizontal .tab-content p {
	margin-bottom: .95em !important;
}
body.kouruset-content-page .wpb_text_column li + li,
body.kouruset-blog-single .post_text li + li,
body.kouruset.tax-product_cat .term-description li + li,
body.kouruset.single-product .q_tabs.horizontal .tab-content li + li {
	margin-top: .3em !important;
}


/* complete the customer H1 color request on the two public contexts
 * still left outside the editorial body-class map. The front page
 * currently uses H2 for its branded slider/section titles, so this does not
 * recolor Palvelumme, Asiakkainamme mm. or hero slide headings. */
body.kouruset.home .wpb_text_column h1,
body.kouruset-blog .wpb_text_column h1 {
	color: #111 !important;
}

/* customer-wide heading contract. Normal content H1/H2 headings are
 * ink-black across the public content canvas. Components that intentionally
 * render inverse text on a dark title bar own their color in component CSS. */
body.kouruset .content h1,
body.kouruset .content h2,
body.kouruset .kouruset-benefit-dialog h1,
body.kouruset .kouruset-benefit-dialog h2 {
	color: #111 !important;
}

/* the customer-wide black H1/H2 contract must not override Bridge's
 * intentionally inverse hero/slider titles that sit on photographic media.
 * Keep the scope inside q_slider so normal page headings remain ink-black. */
body.kouruset .content .q_slider h1,
body.kouruset .content .q_slider h2,
body.kouruset .content .q_slider h1 a,
body.kouruset .content .q_slider h2 a,
body.kouruset .content .q_slider h1 span,
body.kouruset .content .q_slider h2 span {
	color: #fff !important;
}