/* Modern website template. Loaded after default.css. */

html[data-template="modern"] {
	--page-bg: #eef3f5;
	--surface: #ffffff;
	--surface-muted: #dfeaed;
	--text: #10242a;
	--muted: #567078;
	--border: #c6d8dc;
	--accent: #007f86;
	--accent-strong: #005f66;
	--nav-bg: rgba(247, 251, 252, 0.94);
	--input-bg: #ffffff;
	--section-dark: #0d2930;
	--section-dark-text: #f2ffff;
	--shadow: 0 18px 44px rgba(13, 41, 48, 0.12);
}

html[data-template="modern"][data-theme="dark"] {
	--page-bg: #071317;
	--surface: #0e2025;
	--surface-muted: #153038;
	--text: #edfcff;
	--muted: #9bb9c0;
	--border: #29464e;
	--accent: #42d5d7;
	--accent-strong: #7be8e8;
	--nav-bg: rgba(7, 19, 23, 0.95);
	--input-bg: #0a181c;
	--section-dark: #030b0d;
	--section-dark-text: #edfcff;
	--shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
}

.template-modern {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.template-modern .site-navbar {
	border-bottom: 3px solid var(--accent);
	box-shadow: none;
}

.template-modern .site-navbar__brand,
.template-modern .nav-link {
	font-weight: 800;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.template-modern .nav-link::after {
	right: 8px;
	bottom: 12px;
	left: 8px;
	height: 3px;
}

.template-modern .home-banner {
	min-height: 520px;
}

.template-modern .home-banner:not(.home-banner--has-image) {
	background:
		linear-gradient(115deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 48%),
		linear-gradient(145deg, var(--surface) 0%, var(--surface-muted) 100%);
}

.template-modern .home-banner__shade {
	background: linear-gradient(105deg, rgba(2, 18, 22, 0.86) 0%, rgba(2, 18, 22, 0.48) 62%, rgba(0, 127, 134, 0.25) 100%);
}

.template-modern .home-banner__content {
	grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 74px);
	padding-top: 68px;
	padding-bottom: 68px;
}

.template-modern .home-banner-logo {
	min-height: 210px;
	border: 0;
	border-radius: 24px 4px 24px 4px;
	box-shadow: 18px 18px 0 color-mix(in srgb, var(--accent) 58%, transparent);
}

.template-modern .home-banner__identity h1 {
	font-size: clamp(40px, 5.5vw, 78px);
	font-weight: 850;
	letter-spacing: -0.055em;
	text-transform: uppercase;
}

.template-modern .home-banner__identity p {
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.template-modern .home-banner-button {
	grid-column: 2;
	text-align: left;
}

.template-modern .site-action,
.template-modern .site-order-link {
	border-radius: 4px;
	font-weight: 800;
	text-transform: uppercase;
}

.template-modern .container-category-title {
	background: transparent;
	border: 0;
	border-bottom: 4px solid var(--accent);
	border-left: 0;
	border-radius: 0;
	box-shadow: none;
}

.template-modern .container-category-inner {
	padding: 14px 4px;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 850;
	letter-spacing: -0.035em;
	text-align: left;
}

.template-modern .welcome-title {
	font-weight: 850;
	letter-spacing: -0.045em;
}

.template-modern .card,
.template-modern .modal-content,
.template-modern .img-thumbnail {
	border-radius: 4px;
	box-shadow: var(--shadow);
}

.template-modern .section-dark {
	background:
		linear-gradient(120deg, rgba(66, 213, 215, 0.08), transparent 55%),
		var(--section-dark);
}

.template-modern .map-container,
.template-modern .site-footer {
	border-top-color: var(--accent);
}

.template-modern .site-footer {
	background: linear-gradient(135deg, #06171c 0%, #10353d 100%) !important;
}

.template-modern .site-footer a {
	color: color-mix(in srgb, var(--accent) 72%, #ffffff);
}

@media (max-width: 767.98px) {
	.template-modern .home-banner {
		min-height: 470px;
	}

	.template-modern .home-banner__content {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 24px;
		padding: 48px 22px;
	}

	.template-modern .home-banner-logo {
		min-height: 112px;
		box-shadow: 10px 10px 0 color-mix(in srgb, var(--accent) 52%, transparent);
	}

	.template-modern .home-banner__identity h1 {
		font-size: clamp(30px, 9vw, 46px);
	}

	.template-modern .home-banner-button {
		grid-column: 1 / -1;
	}
}