/*
 * Turvamerkki – project styles. Loaded by the parent theme after the main bundle.
 *
 * Design tokens from Figma (WEBLAYOUT_Turvamerkki.fi) mapped to --louhos-*.
 * Project-only values use the --tm-* prefix. See docs/toteutussuunnitelma.md.
 */

:root {
	/* Brand */
	--louhos-primary: #021a35; /* color/navy-900 */
	--louhos-primary-rgb: 2, 26, 53;
	--louhos-primary-dark: #0d3563; /* hover state on navy surfaces (lighter reads better on near-black) */
	--louhos-accent: #08803a; /* green for text-bearing fills: 5.05:1 with white (Figma #0fa64a is 3.19:1) */

	--louhos-link-color: #021a35;

	/* Neutrals */
	--louhos-headings: #021a35;
	--louhos-body-color: #231f20; /* color/ink */
	--louhos-grey: #f2f2f2; /* color/grey-100 */
	--louhos-border: #d1d1d1; /* color/grey-300 */
	--louhos-border-rgb: 209, 209, 209;

	/* Dark surfaces (top bar, footer, card headers) */
	--louhos-dark-1: #021a35; /* color/navy-900 */
	--louhos-dark-1-rgb: 2, 26, 53;
	--louhos-dark-2: #061b34; /* color/navy-800 */
	--louhos-dark-2-rgb: 6, 27, 52;

	/* Layout */
	--louhos-header-height: 80px;
	--louhos-radius: 0;
	--louhos-radius-lg: 0;

	/* Typography */
	--louhos-font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Project tokens */
	--tm-green-bright: #0fa64a; /* color/green-600 – non-text use only (icons, search button fill) */
	--tm-green-bright-rgb: 15, 166, 74;
	--tm-grey-50: #f7f9fb;
	--tm-grey-200: #e6e6e6;
	--tm-grey-500: #6b6b6b; /* Figma #8c8c8c darkened to 5.3:1 for text use */
	--tm-card-shadow: 6px 6px 8px rgba(0, 0, 0, 0.18);
	--tm-container-max: 1800px;

	--bs-success: var(--louhos-accent);
	--bs-success-rgb: 8, 128, 58;
}

@media (min-width: 992px) {
	:root {
		--louhos-header-height: 119px;
	}
}

/* ------------------------------------------------------------------------
 * Base typography (Figma: Leipäteksti/18 Medium 1.6, Otsikko/H1 Bold 30/1.3)
 * --------------------------------------------------------------------- */

body {
	font-family: var(--louhos-font-family);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--louhos-body-color);
}

@media (min-width: 992px) {
	body {
		font-size: 1.125rem;
	}
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: var(--louhos-font-family);
	font-weight: 700;
	line-height: 1.3;
	color: var(--louhos-headings);
}

h1,
.h1 {
	font-size: clamp(1.625rem, 1.3rem + 1vw, 1.875rem);
}

h2,
.h2 {
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
}

h3,
.h3 {
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	font-weight: 600;
}

strong,
b {
	font-weight: 700;
}

a {
	text-underline-offset: 0.15em;
}

/* ------------------------------------------------------------------------
 * Buttons (Figma component "Painike": Tumma / Vihreä / Ääriviiva, L / M / S)
 * Square corners, SemiBold labels.
 * --------------------------------------------------------------------- */

.btn {
	--bs-btn-border-radius: 0;
	--bs-btn-font-weight: 600;
	--bs-btn-font-family: var(--louhos-font-family);
}

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--louhos-primary);
	--bs-btn-border-color: var(--louhos-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--louhos-primary-dark);
	--bs-btn-hover-border-color: var(--louhos-primary-dark);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--louhos-primary-dark);
	--bs-btn-active-border-color: var(--louhos-primary-dark);
	--bs-btn-focus-shadow-rgb: var(--louhos-primary-rgb);
}

.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--louhos-accent);
	--bs-btn-border-color: var(--louhos-accent);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #066a30;
	--bs-btn-hover-border-color: #066a30;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #066a30;
	--bs-btn-active-border-color: #066a30;
	--bs-btn-focus-shadow-rgb: 8, 128, 58;
}

.btn-outline-primary {
	--bs-btn-color: var(--louhos-headings);
	--bs-btn-border-color: var(--louhos-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--louhos-primary);
	--bs-btn-hover-border-color: var(--louhos-primary);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--louhos-primary);
	--bs-btn-active-border-color: var(--louhos-primary);
}

.section--dark .btn-outline-primary {
	--bs-btn-color: #fff;
	--bs-btn-border-color: #fff;
	--bs-btn-hover-color: var(--louhos-headings);
	--bs-btn-hover-bg: #fff;
}

/* Sizes: L 50px / M 40px / S min 32px (Figma S is 28px – raised for touch targets) */
.louhos-btn,
.tm-btn {
	min-height: 50px;
	padding-inline: 1.5rem;
	font-size: 1rem;
}

@media (min-width: 992px) {
	.louhos-btn,
	.tm-btn {
		font-size: 1.125rem;
	}
}

.tm-btn--m {
	min-height: 40px;
	padding-inline: 1.25rem;
	font-size: 1rem;
}

.tm-btn--s {
	min-height: 32px;
	padding-inline: 0.875rem;
	font-size: 0.875rem; /* Figma 12px raised to 14px for legibility */
}

/* Visible focus on all interactive elements */
.btn:focus-visible,
a:focus-visible {
	outline: 3px solid var(--tm-green-bright);
	outline-offset: 2px;
	box-shadow: none;
}

/* ------------------------------------------------------------------------
 * Layout helpers shared by Turvamerkki blocks
 * --------------------------------------------------------------------- */

.tm-container {
	width: min(var(--tm-container-max), calc(100% - 2rem));
	margin-inline: auto;
}

@media (min-width: 992px) {
	.tm-container {
		width: min(var(--tm-container-max), calc(100% - 7.5rem));
	}
}

.tm-block {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

.tm-section-head {
	max-width: 60rem;
	margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}

.tm-section-head__title {
	margin-bottom: 0.5em;
}

.tm-section-head__intro {
	margin-bottom: 0;
}

/* Responsive card grids: 1 → 2 → N columns */
[class*="tm-cols-"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 576px) {
	.tm-cols-2,
	.tm-cols-3,
	.tm-cols-4,
	.tm-cols-5,
	.tm-cols-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.tm-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tm-cols-4,
	.tm-cols-5,
	.tm-cols-6 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1400px) {
	.tm-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.tm-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Inline SVG icons (inc/hooks/icons.php) */
.tm-icon {
	display: inline-block;
	width: auto;
	height: 1em;
	flex-shrink: 0;
	vertical-align: -0.125em;
}

/* Parent: dark-section links hover to --louhos-primary, which is navy here */
.section--dark a:not(.btn):hover,
.section--dark a:not(.btn):focus-visible {
	color: #fff;
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------------
 * Header (Figma: Yläpalkki + Ylätunniste)
 * --------------------------------------------------------------------- */

.tm-topbar {
	background: var(--louhos-dark-1);
	font-size: 0.875rem;
	font-weight: 600;
}

.tm-topbar__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 48px;
	padding-inline: clamp(1rem, 1.2vw, 1.5rem);
}

.tm-topbar__flag .tm-icon {
	height: 1.5rem;
}

.tm-topbar__nav--account {
	margin-left: auto;
}

.tm-topbar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem clamp(1rem, 1.6vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.section--dark a.tm-topbar__link,
.tm-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	color: #fff;
	text-decoration: none;
}

.tm-topbar__link:hover span,
.tm-topbar__link:focus-visible span,
.tm-topbar__link[aria-current] span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tm-topbar__icon {
	height: 1.6rem;
}

@media (max-width: 1399.98px) {
	.tm-topbar__nav--account .tm-topbar__link span {
		font-size: 0.8125rem;
	}
}

@media (min-width: 1600px) {
	.tm-topbar {
		font-size: 1rem;
	}

	.tm-topbar__inner {
		min-height: 70px;
	}

	.tm-topbar__flag .tm-icon {
		height: 2.5rem;
	}

	.tm-topbar__icon {
		height: 2.1rem;
	}
}

@media (min-width: 1700px) {
	.tm-topbar {
		font-size: 1.125rem;
	}
}

.tm-mainbar {
	position: relative;
	background: #fff;
	border-bottom: 1px solid var(--tm-grey-200);
}

.tm-mainbar__inner.navbar {
	flex-wrap: wrap;
	gap: 0 clamp(1rem, 2.5vw, 3.25rem);
	min-height: var(--louhos-header-height);
	padding: 0.5rem clamp(1rem, 1.5vw, 1.875rem) 0.5rem clamp(1rem, 3vw, 3.625rem);
}

.tm-brand {
	display: block;
	flex-shrink: 0;
}

.tm-brand__img {
	display: block;
	width: clamp(180px, 6rem + 12vw, 344px);
	height: auto;
}

/* Main menu */
.tm-menu__list {
	gap: 0 clamp(0.75rem, 1.4vw, 1.9rem);
}

@media (min-width: 1400px) {
	.tm-menu__toggle {
		width: 32px;
	}
}

/* 1400–1599px: fit logo + five menu items on one row */
@media (min-width: 1400px) and (max-width: 1599.98px) {
	.tm-brand__img {
		width: 220px;
	}

	.tm-menu__list {
		gap: 0 0.75rem;
	}

	.tm-menu__link.nav-link {
		font-size: 1rem;
	}

	.tm-menu__toggle {
		width: 28px;
	}

	.tm-mainbar__inner.navbar {
		gap: 0 1.25rem;
	}

	.tm-actions .tm-actions__btn {
		width: 48px;
		height: 48px;
	}

	.tm-actions .tm-actions__btn .tm-icon {
		height: 2.25rem;
	}
}

.tm-menu__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.tm-menu__link.nav-link {
	padding: 0.5rem 0;
	color: var(--louhos-headings);
	font-size: clamp(1.0625rem, 0.25rem + 0.9vw, 1.375rem);
	font-weight: 600;
}

.tm-menu__link.nav-link:hover,
.tm-menu__link.nav-link:focus-visible,
.tm-menu__item.is-active > .tm-menu__link {
	color: var(--louhos-headings);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.tm-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--louhos-headings);
}

.tm-menu__toggle .tm-icon {
	height: 0.65rem;
	transition: transform 0.2s ease;
}

.tm-menu__toggle[aria-expanded="true"] .tm-icon {
	transform: rotate(180deg);
}

.tm-menu__sub.dropdown-menu {
	--bs-dropdown-border-radius: 0;
	--bs-dropdown-border-color: var(--louhos-border);
	--bs-dropdown-link-color: var(--louhos-headings);
	--bs-dropdown-link-hover-bg: var(--louhos-grey);
	--bs-dropdown-link-active-bg: var(--louhos-primary);
	--bs-dropdown-font-size: 1rem;
	--bs-dropdown-item-padding-y: 0.6rem;
	box-shadow: var(--tm-card-shadow);
}

.tm-menu__sub .dropdown-item {
	font-weight: 600;
}

.tm-menu__secondary {
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--tm-grey-200);
	list-style: none;
}

.tm-menu__secondary a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	color: var(--louhos-headings);
	font-weight: 600;
	text-decoration: none;
}

.tm-menu__secondary .tm-icon {
	width: 1.75rem;
	height: 1.5rem;
	padding: 0.15rem;
	border-radius: 2px;
	background: var(--louhos-dark-1);
	color: #fff;
}

@media (max-width: 1399.98px) {
	.tm-menu {
		order: 3;
		flex-basis: 100%;
	}

	.tm-menu__list {
		padding-block: 0.5rem 1rem;
	}

	.tm-menu__item {
		justify-content: space-between;
		border-bottom: 1px solid var(--tm-grey-200);
	}

	.tm-menu__sub.dropdown-menu {
		flex-basis: 100%;
		margin-bottom: 0.75rem;
		border: 0;
		box-shadow: none;
		background: var(--louhos-grey);
	}
}

/* Search + cart + burger */
.tm-actions {
	display: flex;
	align-items: center;
	gap: clamp(0.25rem, 0.8vw, 0.875rem);
	margin-left: auto;
}

.tm-actions__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--louhos-headings);
}

.tm-actions__btn .tm-icon {
	height: 2rem;
}

@media (min-width: 1400px) {
	.tm-actions__btn {
		width: 60px;
		height: 56px;
	}

	.tm-actions__btn .tm-icon {
		height: 3.25rem;
	}
}

.tm-actions__toggler.navbar-toggler {
	border: 0;
	border-radius: 0;
}

.tm-actions__toggler.navbar-toggler:focus {
	box-shadow: none;
}

.tm-burger,
.tm-burger::before,
.tm-burger::after,
.tm-burger span {
	display: block;
	width: 26px;
	height: 3px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.tm-burger {
	position: relative;
	background: none;
}

.tm-burger::before,
.tm-burger::after {
	content: "";
	position: absolute;
	left: 0;
}

.tm-burger::before {
	top: -8px;
}

.tm-burger::after {
	top: 8px;
}

[aria-expanded="true"] > .tm-burger span {
	opacity: 0;
}

[aria-expanded="true"] > .tm-burger::before {
	transform: translateY(8px) rotate(45deg);
}

[aria-expanded="true"] > .tm-burger::after {
	transform: translateY(-8px) rotate(-45deg);
}

.tm-cart__count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 1.35rem;
	height: 1.35rem;
	padding-inline: 0.3rem;
	border-radius: 999px;
	background: var(--louhos-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.35rem;
	text-align: center;
}

.tm-cart__count.is-empty {
	display: none;
}

.tm-search-panel {
	padding-block: 1rem;
	border-top: 1px solid var(--tm-grey-200);
	background: #fff;
}

/* ------------------------------------------------------------------------
 * Search section (Figma: Hakuosio, Hakukenttä, Pikapainikkeet)
 * --------------------------------------------------------------------- */

.tm-search-bar {
	padding-block: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
}

.tm-search {
	display: flex;
	max-width: 1152px;
}

.tm-search__input {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	padding: 0.5rem clamp(1rem, 4vw, 6rem) 0.5rem 1rem;
	border: 1px solid #767676;
	border-right: 0;
	border-radius: 0;
	color: var(--louhos-body-color);
	font-size: clamp(1rem, 0.7rem + 0.7vw, 1.75rem);
	font-weight: 500;
}

.tm-search__input::placeholder {
	color: var(--tm-grey-500);
	opacity: 1;
}

.tm-search__input:focus {
	outline: 3px solid var(--tm-green-bright);
	outline-offset: -3px;
}

.tm-search__submit {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: clamp(52px, 3rem + 2vw, 90px);
	border: 0;
	background: var(--tm-green-bright);
	color: #fff;
}

.tm-search__submit:hover {
	background: var(--louhos-accent);
}

.tm-search__submit .tm-icon {
	height: clamp(1.5rem, 1rem + 1vw, 2.75rem);
}

@media (min-width: 992px) {
	.tm-search__input {
		min-height: 77px;
		padding-left: 6rem;
	}
}

.tm-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.tm-quick__btn {
	gap: 0.75rem;
	min-width: min(100%, 300px);
	justify-content: center;
}

.tm-quick__btn .tm-icon {
	height: 1.25em;
}

.tm-quick__arrow.tm-icon {
	height: 0.8em;
}

@media (max-width: 575.98px) {
	.tm-quick li {
		flex: 1 1 100%;
	}

	.tm-quick__btn {
		width: 100%;
	}
}

/* ------------------------------------------------------------------------
 * Footer (Figma: Alatunniste)
 * --------------------------------------------------------------------- */

.tm-footer__main {
	padding-block: clamp(2rem, 4vw, 2.5rem);
	background: var(--louhos-dark-2);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
}

@media (min-width: 1400px) {
	.tm-footer__main {
		font-size: 1.125rem;
	}
}

.tm-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

@media (min-width: 768px) {
	.tm-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.tm-footer__grid {
		grid-template-columns: 1.15fr 0.95fr 1.2fr 1.4fr;
		gap: 2.5rem;
	}
}

.tm-footer__brand img {
	display: block;
	width: min(100%, 300px);
	height: auto;
	margin-bottom: 1.25rem;
}

.tm-footer__text {
	max-width: 22rem;
}

.tm-footer__heading {
	margin-bottom: 0.75rem;
	font-size: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
	font-weight: 600;
	text-transform: uppercase;
}

.tm-footer__address {
	margin: 0;
	font-style: normal;
}

.tm-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tm-footer a:not(.tm-footer__cta-btn) {
	color: #fff;
	text-decoration: none;
}

.tm-footer a:not(.tm-footer__cta-btn):hover,
.tm-footer a:not(.tm-footer__cta-btn):focus-visible {
	text-decoration: underline;
}

.tm-footer__menu a {
	display: inline-block;
	padding-block: 0.1rem;
}

.tm-footer__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.tm-footer__logos img {
	display: block;
	width: auto;
	height: 72px;
}

.tm-footer__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.tm-footer__main a.tm-footer__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	padding: 0.35rem 1rem;
	background: #fff;
	color: var(--louhos-headings);
	text-decoration: none;
	line-height: 1.15;
}

.tm-footer__main a.tm-footer__cta-btn:hover,
.tm-footer__main a.tm-footer__cta-btn:focus-visible {
	background: var(--louhos-grey);
	color: var(--louhos-headings);
}

.tm-footer__cta-btn .tm-icon {
	height: 1.75rem;
}

.tm-footer__cta-btn span {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tm-footer__cta-btn strong {
	font-size: 0.9375rem;
	font-weight: 700;
}

.tm-footer__cta-btn small {
	font-size: 0.75rem;
	font-weight: 700;
}

.tm-footer__bottom {
	background: #fff;
	color: var(--louhos-body-color);
	font-size: 0.8125rem;
}

.tm-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
	padding-block: 0.875rem;
}

.tm-footer__bottom p {
	margin: 0;
}

.tm-footer .tm-footer__bottom a {
	color: var(--louhos-body-color);
}