/*
Theme Name: Aarna Marketing
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: Aarna Marketing
Author URI: https://wordpress.org
Description: Aarna Marketing theme based on Twenty Twenty-Five. Emphasizes simplicity and adaptability with flexible design options.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aarna-marketing
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */


 
 /* Imports */
 @import "css/forms.css";

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

.current-menu-item > a,
.current-menu-ancestor > a {
	color: var(--wp--preset--color--accent-1) !important;
}

/* Focus styles */
/*
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}
*/
.margin-block-start-0 {
	margin-block-start: 0 !important;
}

/* Navigation dropdown: box shadow for separation from header background */
.wp-block-navigation .wp-block-navigation__submenu-container {
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}


/* Site logo */
.site-logo img,
.custom-logo-link img {
	inline-size: 100%;
	block-size: 100%;
	max-block-size: 52px;
	object-fit: contain;
}

/* button in hero in palvelut page */
.page-template-page-palvelut .wp-block-button__link {
	background-color: #053825;
	border-color: #053825;
	color: #FFFFFF;
}

/* Home page hero spacing fix */
.home main {
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
}
.home main > div.wp-block-group {
	padding-block-start: 0 !important;
}

/* Home page hero overlay for better text readability */
.hero-gradient {
	position: relative;
}

.hero-gradient::before {
	background-color: rgba(0, 0, 0, 0.5);
	content: '';
	inset: 0;
	position: absolute;
	z-index: 1;
}

.hero-gradient > * {
	position: relative;
	z-index: 2;
}

/*
 * Palvelut (Services) page template
 * White background, dark green navigation, dark text
 */
body.page-template-page-palvelut,
body.page-template-page-palvelut .wp-site-blocks {
	background-color: #FFFFFF;
	color: #0D0F09;
}

body.page-template-page-palvelut .wp-block-site-title a,
body.page-template-page-palvelut .wp-block-navigation a,
body.page-template-page-palvelut .wp-block-navigation .wp-block-navigation-item__content {
	color: #053825 !important;
}

body.page-template-page-palvelut .wp-block-site-title a:hover,
body.page-template-page-palvelut .wp-block-navigation a:hover,
body.page-template-page-palvelut .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #053825 !important;
	opacity: 0.85;
}

/* Active/current menu item in header and footer */
body.page-template-page-palvelut .current-menu-item > a,
body.page-template-page-palvelut .current-menu-item .wp-block-navigation-item__content,
body.page-template-page-palvelut .current-menu-ancestor > a,
body.page-template-page-palvelut .current-menu-ancestor .wp-block-navigation-item__content,
body.page-template-page-palvelut .palvelut-footer .current-menu-item > a,
body.page-template-page-palvelut .palvelut-footer .current-menu-ancestor > a {
	color: #784BF7 !important;
}

/* Dropdown submenu: white background, dark links */
body.page-template-page-palvelut .wp-block-navigation__submenu-container {
	background-color: #FFFFFF !important;
}

body.page-template-page-palvelut .wp-block-navigation__submenu-container a,
body.page-template-page-palvelut .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #053825 !important;
}

body.page-template-page-palvelut .wp-block-navigation__submenu-container a:hover,
body.page-template-page-palvelut .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #053825 !important;
	opacity: 0.85;
}

/* Active item in dropdown submenu */
body.page-template-page-palvelut .wp-block-navigation__submenu-container .current-menu-item a,
body.page-template-page-palvelut .wp-block-navigation__submenu-container .current-menu-item .wp-block-navigation-item__content {
	color: #784BF7 !important;
}

body.page-template-page-palvelut .palvelut-page,
body.page-template-page-palvelut .wp-block-post-content,
body.page-template-page-palvelut .wp-block-post-title,
body.page-template-page-palvelut .wp-block-post-title a {
	color: #0D0F09;
}

body.page-template-page-palvelut .wp-block-post-content a:not(.wp-block-button__link) {
	color: #053825;
}

body.page-template-page-palvelut .wp-block-post-content a:hover {
	color: #0D0F09;
	text-decoration: underline;
}

/* Footer consistency on Palvelut pages */
body.page-template-page-palvelut .palvelut-footer a,
body.page-template-page-palvelut .palvelut-footer .footer-copyright,
body.page-template-page-palvelut .palvelut-footer p {
	color: #0D0F09;
}

body.page-template-page-palvelut .palvelut-footer .wp-block-button__link {
	background-color: #053825;
	border-color: #053825;
	color: #FFFFFF;
}

body.page-template-page-palvelut .palvelut-footer .wp-block-button__link:hover {
	background-color: #0D0F09;
	border-color: #0D0F09;
	color: #FFFFFF;
}

/* Form styles */
.footer-form-wrapper .wp-block-heading {
	max-inline-size: 19ch;
}
.wpforms-form label {
	text-align: center;
}
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="number"],
.wpforms-form input[type="textarea"]
.wpforms-form textarea {
	margin-inline: auto !important;
}
.wpforms-form button {
	display: block;
	margin-inline: auto !important;
}

/*
 * Marquee Text with Icon
 */
.marquee-wrapper {
	overflow: hidden;
	position: relative;
}

.marquee-wrapper .marquee-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	inline-size: max-content;
}

.marquee-wrapper .marquee-track.is-animating {
	animation: marquee-scroll var(--marquee-speed, 25s) linear infinite;
}

/* Speed variants - select from Styles panel in editor */
.marquee-wrapper.is-style-marquee-slow .marquee-track.is-animating {
	--marquee-speed: 40s;
}

.marquee-wrapper.is-style-marquee-medium .marquee-track.is-animating {
	--marquee-speed: 25s;
}

.marquee-wrapper.is-style-marquee-fast .marquee-track.is-animating {
	--marquee-speed: 12s;
}

.marquee-wrapper .marquee-content {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--60, 70px);
	padding-inline-end: var(--wp--preset--spacing--60, 70px);
}

.marquee-wrapper .marquee-item {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	flex-wrap: nowrap;
	gap: 12px;
	white-space: nowrap;
}

.marquee-wrapper .wp-block-image {
	flex-shrink: 0;
	height: 21px;
	margin: 0;
	width: 22px;
}

.marquee-wrapper .wp-block-image img {
	display: block;
	height: 21px;
	max-width: none !important; /* Override WP core max-width: 100% */
	object-fit: contain;
	width: 22px;
}

.marquee-wrapper .marquee-item p {
	font-family: "DM Sans", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	margin: 0;
}

@keyframes marquee-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* Pause animation on hover for accessibility */
.marquee-wrapper:hover .marquee-track.is-animating {
	animation-play-state: paused;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.marquee-wrapper .marquee-track.is-animating {
		animation: none;
	}
}


/**/
.centered-content-with-icon-on-left {
	margin-inline: auto;
	max-inline-size: 600px;
}

/*
 * Custom List Styles
 */

/* X-mark list (for pain points) */
ul.is-style-x-list {
	list-style: none;
	padding-inline-start: 0;
}

ul.is-style-x-list li {
	padding-inline-start: 1.75em;
	position: relative;
}

ul.is-style-x-list li::before {
	color: #784bf7;
	content: "\f00d";
	font-family: "Font Awesome 6 Free";
	font-size: 19px;
	font-weight: 900;
	inset-inline-start: 0;
	line-height: 23px;
	position: absolute;
}

/* Checkmark list (for solutions) */
ul.is-style-check-list {
	list-style: none;
	padding-inline-start: 0;
}

ul.is-style-check-list li {
	padding-inline-start: 1.75em;
	position: relative;
}

ul.is-style-check-list li::before {
	color: #fff6ae;
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-size: 19px;
	font-weight: 900;
	inset-inline-start: 0;
	letter-spacing: 0;
	line-height: 23px;
	position: absolute;
}

/*
 * Pain & Solution Pattern (Kipu & Ratkaisu)
 */

/* Outer wrapper with gradient: white top, green bottom */
.kipu-ratkaisu {
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--contrast) 0%,
		var(--wp--preset--color--contrast) 222px,
		#1e4430 222px,
		#1e4430 100%
	);
	background: #1e4430;
	margin-block-start: 0;
	overflow: hidden;
	position: relative;
}



/* Inner pattern needs transparent background */
.kipu-ratkaisu > .wp-block-group {
	background-image: url(/wp-content/uploads/2026/01/mato-green.png) !important;
    background-position: 50% 0%;
    background-repeat: no-repeat !important;
    background-size: 100%;
    position: relative;
    z-index: 1;
}

/* Grid layout for Kipu/Ratkaisu boxes */
.kipu-ratkaisu-boxes {
	align-items: stretch;
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr 1fr;
	margin-block-end: 3rem;
	margin-inline: auto;
	position: relative;
}

/* Make boxes equal height and remove border-radius */
.kipu-ratkaisu-boxes > .wp-block-group {
	border-radius: 0 !important;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-block-start: 0 !important;
	margin-inline-end: 0 !important;
	margin-inline-start: 0 !important;
	max-inline-size: none !important;
}

/* Override WordPress core centering for content inside boxes */
.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-inline-end: 0 !important;
	margin-inline-start: 0 !important;
	max-inline-size: none !important;
}

/* Ensure headings and lists are left-aligned */
.kipu-ratkaisu-boxes .wp-block-heading,
.kipu-ratkaisu-boxes .wp-block-list {
	margin-inline-end: 0 !important;
	margin-inline-start: 0 !important;
	max-inline-size: none !important;
	text-align: start !important;
}

.kipu-ratkaisu-boxes > .wp-block-group:nth-child(2) li {
	color: #fff;
}
.page-template-page-palvelut .kipu-ratkaisu .wp-block-columns .wp-block-heading,
.page-template-page-palvelut .kipu-ratkaisu .wp-block-columns .wp-block-heading + p {
	color: #0D0F09 !important;
}

/* Arrow icon between boxes via ::before */
.kipu-ratkaisu-boxes::before {
	aspect-ratio: 1;
	background-color: #dec3eb;
	background-image: url('./assets/images/arrow-right.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 60%;
	border-radius: 50%;
	content: '';
	inline-size: clamp(80px, 10vw, 110px);
	inset-block-start: 50%;
	inset-inline-start: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 10;
}

/* Down arrow styling */
.arrow-down-circle {
	align-items: center;
	display: flex;
	inline-size: fit-content;
	justify-content: center;
	margin-block-start: -30px;
	margin-inline: auto;
}
h2+.arrow-down-circle {
	margin-block-start: 10px;
}

.arrow-down-circle .wp-block-image {
	margin: 0;
}

/* Numbered headings styling (1. Kartoitus, 2. Suunnitelma, 3. Toteutus) */
.kipu-ratkaisu .wp-block-columns .wp-block-heading {
	color: #ffffff !important;
	font-family: "DM Sans", sans-serif;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 30px;
	text-align: center;
}

.kipu-ratkaisu .wp-block-columns .wp-block-heading + p {
	margin-inline: auto !important;
	max-inline-size: 19ch;
    text-align: center;
}

/* Override WordPress color classes */
.kipu-ratkaisu .wp-block-columns .wp-block-heading.has-accent-1-color,
.kipu-ratkaisu .wp-block-columns .wp-block-heading.has-accent-3-color {
	color: #ffffff !important;
}

/* Style numbers and dots in yellow */
.kipu-ratkaisu .wp-block-columns .wp-block-heading .step-number {
	color: #fff6ae !important;
}
.page-template-page-palvelut .kipu-ratkaisu .wp-block-columns .wp-block-heading .step-number {
	color: #784BF7 !important;
}

/* Pattern main container needs relative positioning for SVG */
.pain-solution-pattern {
	overflow: hidden;
	position: relative;
}

/* Override WordPress core: .has-global-padding > .alignfull negative margins */
/* This must override WordPress core's .has-global-padding > .alignfull rule */
/* Only apply on mobile to avoid breaking desktop centering */
@media (max-width: 782px) {
	.kipu-ratkaisu.has-global-padding > .alignfull,
	.pain-solution-pattern.has-global-padding > .alignfull,
	.has-global-padding > .pain-solution-pattern.alignfull,
	.has-global-padding > .kipu-ratkaisu-boxes.alignfull {
		margin-right: 0 !important;
		margin-left: 0 !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}
}



/* Ensure content is above the decoration */
.kipu-ratkaisu .wp-block-columns,
.kipu-ratkaisu .kipu-ratkaisu-boxes,
.kipu-ratkaisu .arrow-down-circle {
	position: relative;
	z-index: 1;
}

@media (max-width: 782px) {
	.kipu-ratkaisu {
		background: #1e4430;
		padding: 0 !important;
	}

	/* Remove padding from inner pattern wrapper on mobile */
	.kipu-ratkaisu > .wp-block-group {
		padding-inline: 0 !important;
		padding-block-start: 0 !important;
	}

	/* Stack boxes vertically on mobile */
	.kipu-ratkaisu-boxes {
		gap: 0;
		grid-template-columns: 1fr;
		justify-items: stretch;
	}

	/* Make boxes same width on mobile, preserve padding */
	.kipu-ratkaisu-boxes > .wp-block-group {
		inline-size: 100% !important;
		margin-inline: 0 !important;
		max-inline-size: 100% !important;
		padding-inline: 4rem !important;
		padding-block: var(--wp--preset--spacing--50) !important;
		box-sizing: border-box !important;
	}
	
	/* Ensure content inside boxes has proper padding on mobile */
	.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained {
		padding-inline-start: 4rem !important;
		padding-inline-end: 4rem !important;
		padding-left: 4rem !important;
		padding-right: 4rem !important;
	}
	
	.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
		max-inline-size: 100% !important;
	}
	
	/* Ensure headings and lists inside boxes respect padding on mobile */
	.kipu-ratkaisu-boxes > .wp-block-group .wp-block-heading,
	.kipu-ratkaisu-boxes > .wp-block-group .wp-block-list {
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
		padding-inline-start: 0 !important;
		padding-inline-end: 0 !important;
	}
	
	/* Ensure pain-solution-pattern container doesn't cut off boxes on mobile */
	.pain-solution-pattern {
		overflow: visible !important;
		padding-inline: 0 !important;
	}
	
	.kipu-ratkaisu-boxes {
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}

	/* Add space between boxes for arrow on mobile */
	.kipu-ratkaisu-boxes > .wp-block-group:first-child {
		padding-block-end: 4rem !important;
	}

	.kipu-ratkaisu-boxes > .wp-block-group:last-child {
		padding-block-start: 4rem !important;
	}

	/* Override WordPress core negative margins on mobile */
	.kipu-ratkaisu-boxes > .wp-block-group.has-global-padding,
	.kipu-ratkaisu-boxes > .wp-block-group.alignfull {
		margin-inline: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* Override WordPress core pattern: .has-global-padding > .alignfull negative margins */
	/* This is the key pattern that breaks padding: .has-global-padding > .alignfull */
	.has-global-padding > .kipu-ratkaisu-boxes > .wp-block-group.alignfull,
	.kipu-ratkaisu-boxes.has-global-padding > .wp-block-group.alignfull,
	.kipu-ratkaisu-boxes > .wp-block-group.has-global-padding > .alignfull,
	.pain-solution-pattern.has-global-padding > .kipu-ratkaisu-boxes > .wp-block-group.alignfull,
	.pain-solution-pattern > .kipu-ratkaisu-boxes.has-global-padding > .wp-block-group.alignfull,
	.pain-solution-pattern > .kipu-ratkaisu-boxes > .wp-block-group.has-global-padding > .alignfull {
		margin-right: 0 !important;
		margin-left: 0 !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}
	
	/* Also override the calc() negative margins that WordPress uses */
	.has-global-padding > .kipu-ratkaisu-boxes > .wp-block-group,
	.kipu-ratkaisu-boxes.has-global-padding > .wp-block-group,
	.kipu-ratkaisu-boxes > .wp-block-group.has-global-padding {
		margin-right: 0 !important;
		margin-left: 0 !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}

	/* Rotate arrow to point down and position between boxes on mobile */
	.kipu-ratkaisu-boxes::before {
		inset-block-start: 50%;
		inset-inline-start: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
	}
	
	/* Ensure kipu-ratkaisu boxes maintain padding on mobile - override any conflicting rules */
	.kipu-ratkaisu-boxes > .wp-block-group,
	.kipu-ratkaisu-boxes > .wp-block-group.has-global-padding,
	.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained {
		padding-inline-start: 4rem !important;
		padding-inline-end: 4rem !important;
		padding-left: 4rem !important;
		padding-right: 4rem !important;
	}
	
	/* Override WordPress negative margins that break padding on mobile */
	.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained,
	.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained.has-global-padding {
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* Prevent negative margins on all direct children - override WordPress core */
	.kipu-ratkaisu-boxes > .wp-block-group > *,
	.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained > *,
	.kipu-ratkaisu-boxes > .wp-block-group.has-global-padding > * {
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* Override WordPress core negative margin pattern for constrained layouts */
	.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* Specifically target headings and lists to prevent negative margins */
	.kipu-ratkaisu-boxes > .wp-block-group .wp-block-heading,
	.kipu-ratkaisu-boxes > .wp-block-group .wp-block-list,
	.kipu-ratkaisu-boxes > .wp-block-group .wp-block-paragraph,
	.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained .wp-block-heading,
	.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained .wp-block-list,
	.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained .wp-block-paragraph {
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

.mato-green {
	width: 100%;
    height: 530px;
    background-color: red;
    margin: 0 !important;
    max-width: 100% !important;
	position: absolute;
    bottom: 0;
    left: 0;

	display: none;
}
.mato-green img {
	position: relative;
}

/*
 * One Two Three Pattern
 */
.one-two-three-pattern .one-two-three-number {
	color: #FFFDAE;
	font-family: "Termina", sans-serif;
	font-size: 66px;
	font-style: normal;
	font-weight: bold;
	letter-spacing: 0;
	line-height: 30px;
	margin-block-end: 2rem;
	opacity: 1;
	text-align: center;
}

.one-two-three-pattern .one-two-three-text {
	color: #FFFFFF;
	font-family: "DM Sans", sans-serif;
	font-size: 19px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 30px;
	opacity: 1;
	text-align: center;
}
.referenssit-latest h2 {
	margin-block-end: 4rem;
}

.referenssit-latest-link {
	color: var(--wp--preset--color--accent-1) !important;
	display: inline-block;
	margin-block-end: 4rem;
	margin-block-start: 2rem;
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}


/* Referenssit stuff */
.single-referenssit main {
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
}

.single-referenssit main > .wp-block-group {
	padding-block-start: 0 !important;
}
.single-referenssit figure.wp-block-post-featured-image,
.single-referenssit figure.wp-block-post-featured-image img {
	object-fit: cover;
	object-position: center;
	max-block-size: 40rem;
}
.single-referenssit .heading--referenssit {
	margin-block-start: 3rem !important;
	padding-block: 0 !important;
}

.referenssit-top {
	padding-block-end: var(--wp--preset--spacing--60);
}
.heading--referenssit {
	font-size: clamp(32px, 5vw + 1rem, 58px);
	max-inline-size: 20ch;
	margin-block-end: var(--wp--preset--spacing--60);
}
.heading--referenssit span {
	color: var(--wp--preset--color--accent-1);	
	display: block;
	font-family: "DM Sans", sans-serif;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: normal;
	padding-block-end: var(--wp--preset--spacing--20);
}

.referenssit-top p {
	font-size: var(--wp--preset--font-size--large);
}

/* Referenssit archive grid layout - remove all padding and constraints */
.referenssit-grid,
.referenssit-grid.is-layout-constrained,
.referenssit-grid.has-global-padding,
.referenssit-grid.is-layout-constrained.has-global-padding {
	max-inline-size: 100% !important;
	width: 100% !important;
	padding-inline-start: 0 !important;
	padding-inline-end: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-inline-start: 0 !important;
	margin-inline-end: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background-color: #ffffff !important;
	background-image: url('/wp-content/uploads/2026/01/mato-green.png') !important;
	background-position: center bottom !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	background-clip: padding-box !important;
}

/* Remove padding from parent wrapper if it contains referenssit-grid - but exclude kipu-ratkaisu pattern */
.referenssit-latest:has(.referenssit-grid),
.referenssit-latest:has(.referenssit-grid).has-global-padding,
.referenssit-latest:has(.referenssit-grid).is-layout-constrained,
.wp-block-group:has(.referenssit-grid):not(.kipu-ratkaisu):not(.kipu-ratkaisu-boxes):not(.pain-solution-pattern):not(:has(.kipu-ratkaisu)),
.wp-block-group:has(.referenssit-grid).has-global-padding:not(.kipu-ratkaisu):not(.kipu-ratkaisu-boxes):not(.pain-solution-pattern):not(:has(.kipu-ratkaisu)),
.wp-block-group:has(.referenssit-grid).is-layout-constrained:not(.kipu-ratkaisu):not(.kipu-ratkaisu-boxes):not(.pain-solution-pattern):not(:has(.kipu-ratkaisu)) {
	padding-inline-start: 0 !important;
	padding-inline-end: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Ensure kipu-ratkaisu boxes maintain their padding - override any referenssit-grid rules */
.kipu-ratkaisu-boxes > .wp-block-group,
.kipu-ratkaisu-boxes > .wp-block-group.has-global-padding,
.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained,
.pain-solution-pattern .kipu-ratkaisu-boxes > .wp-block-group,
.pain-solution-pattern .kipu-ratkaisu-boxes > .wp-block-group.has-global-padding,
.pain-solution-pattern .kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained {
	padding-inline-start: var(--wp--preset--spacing--50) !important;
	padding-inline-end: var(--wp--preset--spacing--50) !important;
	padding-left: var(--wp--preset--spacing--50) !important;
	padding-right: var(--wp--preset--spacing--50) !important;
}

/* Prevent referenssit-grid rules from affecting kipu-ratkaisu boxes */
.kipu-ratkaisu-boxes > .wp-block-group:not(.referenssit-item):not(:has(.referenssit-grid)) {
	padding-inline-start: var(--wp--preset--spacing--50) !important;
	padding-inline-end: var(--wp--preset--spacing--50) !important;
	padding-left: var(--wp--preset--spacing--50) !important;
	padding-right: var(--wp--preset--spacing--50) !important;
}

/* Ensure kipu-ratkaisu boxes content has proper max-width */
.kipu-ratkaisu-boxes > .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-inline-size: 100% !important;
	margin-inline-start: 0 !important;
	margin-inline-end: 0 !important;
}

/* Override WordPress core pattern: .has-global-padding > .alignfull negative margins */
/* This prevents the negative margin calc() from breaking box padding */
/* Only apply on mobile to avoid breaking desktop centering */
@media (max-width: 782px) {
	.has-global-padding > .kipu-ratkaisu-boxes > .wp-block-group,
	.has-global-padding > .kipu-ratkaisu-boxes > .wp-block-group.alignfull,
	.kipu-ratkaisu-boxes.has-global-padding > .wp-block-group,
	.kipu-ratkaisu-boxes.has-global-padding > .wp-block-group.alignfull,
	.pain-solution-pattern.has-global-padding > .kipu-ratkaisu-boxes > .wp-block-group,
	.pain-solution-pattern.has-global-padding > .kipu-ratkaisu-boxes > .wp-block-group.alignfull {
		margin-right: 0 !important;
		margin-left: 0 !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}

	/* Override WordPress core: .has-global-padding > .alignfull for pain-solution-pattern */
	/* This is the specific pattern that's breaking: .has-global-padding > .alignfull */
	.has-global-padding > .pain-solution-pattern.alignfull,
	.kipu-ratkaisu.has-global-padding > .pain-solution-pattern.alignfull,
	.has-global-padding > .kipu-ratkaisu-boxes,
	.has-global-padding > .kipu-ratkaisu-boxes.alignfull {
		margin-right: 0 !important;
		margin-left: 0 !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}

	/* Override WordPress core: .has-global-padding > .alignfull - global override for kipu-ratkaisu context */
	/* This must be more specific than WordPress core's .has-global-padding > .alignfull */
	.kipu-ratkaisu.has-global-padding > .pain-solution-pattern.alignfull.has-global-padding,
	.pain-solution-pattern.has-global-padding > .kipu-ratkaisu-boxes,
	.pain-solution-pattern.has-global-padding > .kipu-ratkaisu-boxes > .wp-block-group.has-global-padding {
		margin-right: 0 !important;
		margin-left: 0 !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}
}

.referenssit-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 0 !important;
	max-inline-size: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	background-color: transparent !important;
}

.referenssit-grid .wp-block-post-template > li,
.referenssit-grid .wp-block-post-template > * {
	margin: 0;
	list-style: none;
	max-inline-size: 100% !important;
}

.referenssit-grid .referenssit-item,
.referenssit-grid .referenssit-item.is-layout-constrained,
.referenssit-grid .referenssit-item.has-global-padding,
.referenssit-grid .referenssit-item.is-layout-constrained.has-global-padding {
	position: relative;
	overflow: hidden;
	width: 100% !important;
	max-inline-size: 100% !important;
	aspect-ratio: 1;
	padding-inline-start: 0 !important;
	padding-inline-end: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
	background-color: #ffffff !important;
}

.referenssit-grid .referenssit-item > * {
	max-inline-size: 100% !important;
}

/* Remove padding from post template and list items */
.referenssit-grid .wp-block-post-template,
.referenssit-grid .wp-block-post-template.has-global-padding {
	padding-inline-start: 0 !important;
	padding-inline-end: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.referenssit-grid .wp-block-post-template > li {
	padding: 0 !important;
	margin: 0 !important;
	background-color: #ffffff !important;
}

.referenssit-grid .wp-block-post-featured-image {
	width: 100% !important;
	max-inline-size: 100% !important;
	height: 100%;
	aspect-ratio: 1;
	margin: 0 !important;
	position: absolute;
	inset: 0;
}

.referenssit-grid .wp-block-post-featured-image.is-layout-constrained {
	max-inline-size: 100% !important;
	width: 100% !important;
}

.referenssit-grid .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	max-inline-size: 100% !important;
	height: 100%;
	position: relative;
}

.referenssit-grid .wp-block-post-featured-image img {
	width: 100%;
	max-inline-size: 100% !important;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.referenssit-grid .referenssit-overlay-title,
.referenssit-grid .referenssit-overlay-title.is-layout-constrained {
	align-items: center;
	block-size: 100% !important;
	display: flex !important;
	font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
	inset: 0 !important;
	justify-content: center;
	margin: 0 !important;
	max-inline-size: 100% !important;
	opacity: 0 !important;
	padding: 0 !important;
	pointer-events: none;
	position: absolute !important;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	visibility: hidden !important;
	width: 100% !important;
	z-index: 10 !important;
}

.referenssit-grid .referenssit-overlay-title a,
.referenssit-grid .referenssit-overlay-title a:link,
.referenssit-grid .referenssit-overlay-title a:visited {
	color: var(--wp--preset--color--contrast, #ffffff) !important;
	font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
	font-weight: 500 !important;
	text-align: center !important;
	padding: var(--wp--preset--spacing--40) !important;
	text-decoration: none !important;
	pointer-events: auto;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Referenssit archive: override constrained layout and theme typography so overlay title matches referenssit-latest (centered, responsive) */
.referenssit-archive .referenssit-grid .referenssit-overlay-title,
body.post-type-archive-referenssit .referenssit-grid .referenssit-overlay-title,
.referenssit-archive .referenssit-grid .referenssit-overlay-title.is-layout-constrained,
body.post-type-archive-referenssit .referenssit-grid .referenssit-overlay-title.is-layout-constrained {
	align-items: center !important;
	display: flex !important;
	font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
	inset: 0 !important;
	justify-content: center !important;
	max-inline-size: 100% !important;
	padding-inline: var(--wp--preset--spacing--40) !important;
	text-align: center !important;
	width: 100% !important;
}

.referenssit-archive .referenssit-grid .referenssit-overlay-title a,
.referenssit-archive .referenssit-grid .referenssit-overlay-title a:link,
.referenssit-archive .referenssit-grid .referenssit-overlay-title a:visited,
body.post-type-archive-referenssit .referenssit-grid .referenssit-overlay-title a,
body.post-type-archive-referenssit .referenssit-grid .referenssit-overlay-title a:link,
body.post-type-archive-referenssit .referenssit-grid .referenssit-overlay-title a:visited {
	font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
	padding: var(--wp--preset--spacing--40) !important;
	text-align: center !important;
}

.referenssit-grid .referenssit-item::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0);
	transition: background-color 0.3s ease;
	z-index: 5;
	pointer-events: none;
}

.referenssit-grid .referenssit-item:hover::before {
	background-color: rgba(0, 0, 0, 0.6);
}

.referenssit-grid .referenssit-item:hover .referenssit-overlay-title {
	opacity: 1 !important;
	visibility: visible !important;
	display: flex !important;
}

.referenssit-grid .referenssit-item:hover .referenssit-overlay-title a {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}

.referenssit-grid .referenssit-item:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

@media (max-width: 782px) {
	.referenssit-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 783px) and (max-width: 1024px) {
	.referenssit-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Artikkelit archive / page listing
 */
 .artikkelit-grid {
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto !important;
 }
.artikkelit-grid .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
	list-style: none;
	margin: 0;
	padding: 0;
}

.artikkelit-grid .wp-block-post-template > li {
	border-block-end: 1px solid var(--wp--preset--color--accent-6);
	padding-block-end: var(--wp--preset--spacing--60);
}

.artikkelit-grid .wp-block-post-template > li:last-child {
	border-block-end: none;
	padding-block-end: 0;
}

.artikkelit-grid .wp-block-columns {
	align-items: flex-start;
}

.artikkelit-grid .wp-block-post-featured-image img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 782px) {
	.artikkelit-grid .wp-block-columns {
		flex-direction: column;
	}
}

/* Columns 2x2 grid layout - allows 4 columns to display in a 2x2 grid */
.wp-block-columns.columns-2x2 {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--wp--style--block-gap, 2em);
}

.wp-block-columns.columns-2x2 > .wp-block-column {
	flex-basis: auto !important;
	flex-grow: 0 !important;
}

/* Responsive: stack to 1 column on mobile */
@media (max-width: 782px) {
	.wp-block-columns.columns-2x2 {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}
}

/*
 * FAQ Accordion Pattern
 */
.faq-accordion {
	position: relative;
}

.faq-accordion-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.faq-item {
	border-top: 1px solid var(--wp--preset--color--accent-6);
	margin: 0;
	padding-block-end: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
}

.faq-item:first-child {
	border-top: none;
}

.faq-details {
	border: none;
	cursor: pointer;
	display: block;
	margin: 0;
	padding: 0;
}

.faq-summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-weight: inherit;
	list-style: none;
	margin: 0;
	outline-offset: 0.25rem;
	padding: 0;
	position: relative;
	user-select: none;
}

.faq-summary::-webkit-details-marker {
	display: none;
}

.faq-summary::marker {
	display: none;
}

.faq-summary::after {
	align-items: center;
	background-color: transparent;
	border: 2px solid currentColor;
	border-radius: 50%;
	content: '+';
	display: flex;
	flex-shrink: 0;
	font-size: 1.25rem;
	font-weight: 400;
	height: 2rem;
	justify-content: center;
	line-height: 1;
	margin-inline-start: auto;
	transition: transform 0.2s ease-in-out;
	width: 2rem;
}

.faq-details[open] .faq-summary::after {
	content: '−';
	transform: rotate(0deg);
}

.faq-summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 0.25rem;
}

.faq-question {
	margin: 0;
	padding-inline-end: var(--wp--preset--spacing--40);
}

.faq-answer {
	animation: faq-fade-in 0.3s ease-in-out;
	margin-block-start: var(--wp--preset--spacing--30);
	padding-inline-start: 0;
}

@keyframes faq-fade-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.faq-answer p {
	margin: 0;
}

.faq-answer p:not(:last-child) {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Ensure proper spacing for nested content */
.faq-answer .wp-block-paragraph,
.faq-answer .wp-block-heading,
.faq-answer .wp-block-list {
	margin-block-end: var(--wp--preset--spacing--20);
}

.faq-answer .wp-block-paragraph:last-child,
.faq-answer .wp-block-heading:last-child,
.faq-answer .wp-block-list:last-child {
	margin-block-end: 0;
}