/* header.css — Figma node 124:138. Kolme kerrosta: topbar 35px, masthead 80px, navi 60px. */

.site-header { background: var(--c-black); }

/* Ylin palkki */
.topbar { background: var(--c-dark); }
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 35px;
	padding-block: var(--sp-2);
}
.topbar__date,
.topbar__login {
	color: var(--c-light);
	font-size: 12px;
}
.topbar__login {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.topbar__login img { width: 13px; height: auto; }

/* Logorivi */
.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	min-height: 80px;
	padding-top: var(--sp-5);
}
.masthead__brand {
	display: inline-flex;
	align-items: center;
	gap: 25px;
}
.masthead__brand:hover { text-decoration: none; }
.masthead__logo { width: 134px; height: auto; }
.masthead__tagline {
	color: var(--c-grey);
	font-size: 13px;
	letter-spacing: 4px;
}

.search { display: flex; align-items: center; }
.search__input {
	width: 202px;
	height: 35px;
	padding-inline: 15px;
	background: var(--c-card);
	border: 0;
	color: var(--c-light);
	font: inherit;
	font-size: 12px;
}
.search__input::placeholder { color: var(--c-light); opacity: 1; }
.search__button {
	display: grid;
	place-items: center;
	width: 35px;
	height: 35px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.search__button img { width: 31px; height: auto; }

/* Navi */
.mainnav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	min-height: 60px;
}
.mainnav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 30px;
}
.mainnav__right {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
}
.mainnav__link {
	display: inline-flex;
	align-items: center;
	padding-block: var(--sp-2);
	border-bottom: 2px solid transparent;
	color: var(--c-white);
	font-size: 15px;
	font-weight: 700;
}
.mainnav__link:hover { text-decoration: none; border-bottom-color: var(--c-grey); }
.mainnav__link.is-current { border-bottom-color: var(--c-brand); }
.mainnav .btn { padding: var(--sp-2) 15px; border-radius: 100px; }

@media (max-width: 900px) {
	.masthead__tagline { display: none; }
	.mainnav__inner { flex-wrap: wrap; row-gap: var(--sp-2); padding-block: var(--sp-2); }
	.mainnav__list { gap: 0 var(--sp-5); }
}

@media (max-width: 600px) {
	.topbar__date { display: none; }
	.masthead__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding-block: var(--sp-4); }
	.search__input { width: 100%; }
	.search { width: 100%; }
	.mainnav__link { font-size: 14px; }
}