/*
 * Liikenne Vesma Oy — brand styles. Loaded after the Louhosteema bundle.
 *
 * Louhosteema's defaults assume a light (orange) primary: dark text on primary
 * fills and primary as the hover/active colour on dark surfaces. Vesma's primary
 * is dark navy, so those spots are flipped below: white text on primary, and the
 * yellow accent wherever the parent uses primary on a dark background.
 *
 * Contrast (WCAG 2.1): white/primary 9.2:1, headings/accent 9.9:1,
 * accent/dark-1 9.0:1, body/white 11.6:1.
 */

:root {
	/* Brand */
	--louhos-primary: #0e4a7b;
	--louhos-primary-rgb: 14, 74, 123;
	--louhos-primary-dark: #0a3558;
	--louhos-accent: #f5b700;
	--vesma-accent-rgb: 245, 183, 0;
	--vesma-accent-dark: #d99f00;
	--louhos-link-color: #0e4a7b;

	/* Neutrals */
	--louhos-headings: #14181d;
	--louhos-body-color: #2f3a45;
	--louhos-grey: #f3f5f8;
	--louhos-border: #c9ced6;
	--louhos-border-rgb: 201, 206, 214;

	/* Dark surfaces (header, footer, hero panel) */
	--louhos-dark-1: #0b2239;
	--louhos-dark-1-rgb: 11, 34, 57;
	--louhos-dark-2: #071726;
	--louhos-dark-2-rgb: 7, 23, 38;

	/* Layout */
	--louhos-header-height: 91px;
	--louhos-radius: 0.5rem;
	--louhos-radius-lg: 1rem;

	/* Typography */
	--louhos-font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--vesma-font-headings: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;

	/* Bootstrap bridges not covered by the parent tokens */
	--bs-border-radius: var(--louhos-radius);
	--bs-border-radius-lg: var(--louhos-radius-lg);
	--bs-link-hover-color: var(--louhos-primary-dark);
}

/* --------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------ */

body {
	font-size: 1.0625rem;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.site-brand__text {
	font-family: var(--vesma-font-headings);
	font-weight: 700;
	letter-spacing: 0.005em;
	line-height: 1.15;
}

/* Plain selector lists keep element specificity, so component classes
   (e.g. .site-footer__heading) still win. */
h1, .h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }
h2, .h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
h3,
.h3 {
	font-size: 1.375rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------ */

.btn {
	font-weight: 600;
}

.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);
}

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

	border-width: 2px;
}

/* Yellow accent button: always dark text. */
.btn-accent {
	--bs-btn-color: var(--louhos-headings);
	--bs-btn-bg: var(--louhos-accent);
	--bs-btn-border-color: var(--louhos-accent);
	--bs-btn-hover-color: var(--louhos-headings);
	--bs-btn-hover-bg: var(--vesma-accent-dark);
	--bs-btn-hover-border-color: var(--vesma-accent-dark);
	--bs-btn-active-color: var(--louhos-headings);
	--bs-btn-active-bg: var(--vesma-accent-dark);
	--bs-btn-active-border-color: var(--vesma-accent-dark);
}

/* On dark surfaces the primary fill disappears into the navy: use the accent. */
.section--dark .btn-primary {
	--bs-btn-color: var(--louhos-headings);
	--bs-btn-bg: var(--louhos-accent);
	--bs-btn-border-color: var(--louhos-accent);
	--bs-btn-hover-color: var(--louhos-headings);
	--bs-btn-hover-bg: var(--vesma-accent-dark);
	--bs-btn-hover-border-color: var(--vesma-accent-dark);
	--bs-btn-active-color: var(--louhos-headings);
	--bs-btn-active-bg: var(--vesma-accent-dark);
	--bs-btn-active-border-color: var(--vesma-accent-dark);
}

.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;
	--bs-btn-hover-border-color: #fff;
	--bs-btn-active-color: var(--louhos-headings);
	--bs-btn-active-bg: #fff;
}

/* --------------------------------------------------------------------------
 * Accessibility: focus + skip link on navy
 * ------------------------------------------------------------------------ */

.skip-link {
	color: #fff;
}

.site-header :focus-visible,
.section--dark :focus-visible {
	outline-color: var(--louhos-accent);
}

.section--dark a:not(.btn):is(:hover, :focus-visible) {
	color: var(--louhos-accent);
}

/* --------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.site-nav {
	background: var(--louhos-dark-1);
	border-bottom: 4px solid var(--louhos-accent);
}

.site-nav .nav-link {
	font-weight: 600;
	font-size: 1.0625rem;
	padding-inline: 0.875rem;
}

.site-nav .nav-link:is(:hover, :focus-visible) {
	color: var(--louhos-accent);
}

.site-nav__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.site-nav__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.site-nav__phone .fa-solid,
.site-nav__phone:is(:hover, :focus-visible) {
	color: var(--louhos-accent);
}

.site-nav__phone--compact {
	margin-left: auto;
	margin-right: 0.5rem;
	padding: 0.5rem 0.75rem;
	font-size: 1.25rem;
}

.site-nav__cta {
	min-height: 46px;
}

@media (min-width: 1200px) {
	.site-nav__actions {
		margin-left: 1.25rem;
	}

	/* Active page: yellow bar under the link instead of a solid block. */
	.site-nav .nav-item.is-active .nav-link {
		background: transparent;
		color: #fff;
		box-shadow: inset 0 -4px 0 var(--louhos-accent);
	}
}

@media (max-width: 1199.98px) {
	.site-nav .nav-item.is-active .nav-link {
		color: var(--louhos-accent);
	}

	.site-nav__actions {
		padding: 0.5rem 0.875rem;
	}
}

/* --------------------------------------------------------------------------
 * Hero: navy gradient when no image is set yet; compact variant for subpages
 * ------------------------------------------------------------------------ */

.louhos-hero {
	background-color: var(--louhos-dark-1);
}

.louhos-hero:not(:has(.louhos-hero__media)) .louhos-hero__panel--overlay {
	background: transparent;
	backdrop-filter: none;
}

.louhos-hero__title {
	max-width: 32rem;
}

.louhos-hero.is-compact {
	min-height: clamp(18rem, 36vh, 24rem);
}

.louhos-hero.is-compact .louhos-hero__panel {
	width: min(760px, 100%);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.louhos-hero.is-compact .louhos-hero__title {
	max-width: none;
	margin-bottom: 1rem;
}

.louhos-hero.is-compact .louhos-hero__text {
	max-width: 40rem;
	font-size: 1.1875rem;
}

.louhos-hero__quote-tab {
	--bs-btn-color: var(--louhos-headings);
	--bs-btn-bg: var(--louhos-accent);
	--bs-btn-border-color: var(--louhos-accent);
	--bs-btn-hover-color: var(--louhos-headings);
	--bs-btn-hover-bg: var(--vesma-accent-dark);
	--bs-btn-hover-border-color: var(--vesma-accent-dark);
}

/* --------------------------------------------------------------------------
 * Banner: bolded words in the accent; yellow variant without an image
 * ------------------------------------------------------------------------ */

.louhos-banner {
	background-color: var(--louhos-dark-1);
}

.louhos-banner__title :is(strong, b) {
	color: var(--louhos-accent);
}

.louhos-banner.is-accent {
	background: var(--louhos-accent);
	color: var(--louhos-headings);
}

.louhos-banner.is-accent :is(h1, h2, h3, h4, h5, h6),
.louhos-banner.is-accent .louhos-banner__title :is(strong, b) {
	color: var(--louhos-headings);
}

.louhos-banner.is-accent a:not(.btn) {
	color: var(--louhos-headings);
}

.louhos-banner.is-accent :focus-visible {
	outline-color: var(--louhos-headings);
}

.louhos-banner.is-accent .btn-primary,
.louhos-banner.is-accent .btn-outline-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--louhos-dark-1);
	--bs-btn-border-color: var(--louhos-dark-1);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--louhos-dark-2);
	--bs-btn-hover-border-color: var(--louhos-dark-2);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--louhos-dark-2);
}

/* --------------------------------------------------------------------------
 * Footer: accent details on navy
 * ------------------------------------------------------------------------ */

.site-footer {
	background: var(--louhos-dark-1);
	border-top: 4px solid var(--louhos-accent);
}

.site-footer .fa-solid,
.site-footer__menu a .fa-solid,
.site-footer__role,
.site-footer__menu a[aria-current="page"] span {
	color: var(--louhos-accent);
}

/* --------------------------------------------------------------------------
 * Badges
 * ------------------------------------------------------------------------ */

.vesma-badge {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	background: var(--louhos-grey);
	color: var(--louhos-headings);
}

.vesma-badge--few {
	background: var(--louhos-accent);
}

.vesma-badge--full {
	background: #e3e7ed;
}

/* #9b1c1c on white text: 7.9:1 */
.vesma-badge--cancelled {
	background: #9b1c1c;
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Matkat-lista + trip card
 * ------------------------------------------------------------------------ */

.vesma-trips__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-bottom: 1.5rem;
}

.vesma-trips__title {
	margin-bottom: 0;
}

.vesma-trips__all {
	font-weight: 600;
	text-decoration: none;
}

.vesma-trips__all .fa-solid {
	margin-left: 0.375rem;
	transition: transform 0.2s ease;
}

.vesma-trips__all:is(:hover, :focus-visible) .fa-solid {
	transform: translateX(4px);
}

.vesma-trips__intro {
	max-width: 48rem;
	margin-bottom: 2rem;
}

.vesma-trips__empty {
	padding: 1.5rem;
	background: var(--louhos-grey);
	border-radius: var(--louhos-radius);
}

.vesma-trip-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--louhos-border);
	border-radius: var(--louhos-radius-lg);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.vesma-trip-card:hover,
.vesma-trip-card:focus-within {
	box-shadow: 0 0.75rem 2rem rgba(var(--louhos-dark-1-rgb), 0.12);
	transform: translateY(-2px);
}

.vesma-trip-card__image {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.vesma-trip-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.5rem;
}

.vesma-trip-card__date {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	margin-bottom: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--louhos-radius);
	background: var(--louhos-dark-1);
	color: #fff;
	font-weight: 600;
}

.vesma-trip-card__date .fa-regular {
	color: var(--louhos-accent);
}

.vesma-trip-card__title {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.vesma-trip-card__title a {
	color: var(--louhos-headings);
	text-decoration: none;
}

.vesma-trip-card__title a:is(:hover, :focus-visible) {
	color: var(--louhos-primary);
	text-decoration: underline;
}

.vesma-trip-card__excerpt {
	margin-bottom: 1rem;
}

.vesma-trip-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-top: auto;
}

.vesma-trip-card__price {
	font-family: var(--vesma-font-headings);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--louhos-primary);
}

.vesma-trip-card.is-past,
.vesma-trip-card.is-cancelled {
	background: var(--louhos-grey);
}

/* --------------------------------------------------------------------------
 * Single trip
 * ------------------------------------------------------------------------ */

.vesma-trip__hero {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background-color: var(--louhos-dark-1);
}

.vesma-trip__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.vesma-trip__title {
	margin-bottom: 0.75rem;
}

.vesma-trip__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
}

.vesma-trip__image {
	width: 100%;
	height: auto;
	margin-bottom: 2rem;
	border-radius: var(--louhos-radius-lg);
}

.vesma-trip__content > * {
	max-width: none;
	margin-inline: 0;
}

.vesma-trip__facts {
	position: sticky;
	top: 1.5rem;
	padding: 1.75rem;
	background: var(--louhos-grey);
	border-top: 4px solid var(--louhos-accent);
	border-radius: var(--louhos-radius-lg);
}

.vesma-trip__facts dt {
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--louhos-body-color);
}

.vesma-trip__facts dd {
	margin-bottom: 0;
	font-size: 1.125rem;
	color: var(--louhos-headings);
}

.vesma-trip__facts .louhos-buttons {
	flex-direction: column;
}

.vesma-trip__facts .louhos-btn {
	justify-content: center;
}

/* --------------------------------------------------------------------------
 * Kalusto-kortit
 * ------------------------------------------------------------------------ */

.vesma-fleet__intro {
	max-width: 48rem;
	margin-bottom: 2rem;
}

.vesma-vehicle {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--louhos-border);
	border-radius: var(--louhos-radius-lg);
}

.vesma-vehicle__image {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.vesma-vehicle__image--empty {
	display: grid;
	place-items: center;
	background: var(--louhos-gradient-dark);
	color: rgba(var(--vesma-accent-rgb), 0.85);
	font-size: 4rem;
}

.vesma-vehicle__body {
	padding: 1.5rem;
}

.vesma-vehicle__type {
	margin-bottom: 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--louhos-body-color);
}

.vesma-vehicle__name {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

.vesma-vehicle__seats {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--louhos-radius);
	background: var(--louhos-accent);
	color: var(--louhos-headings);
	font-weight: 600;
}

.vesma-vehicle__features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--louhos-border);
	list-style: none;
}

.vesma-vehicle__features li {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	background: var(--louhos-grey);
	font-size: 0.9375rem;
}

.vesma-vehicle__features .fa-solid {
	color: var(--louhos-primary);
}

/* Project rules below. */