/**
 * Theme Name:        MMS Audio
 * Theme URI:         https://mmsaudio.se/
 * Description:       Ett avskalat onepage-child theme för MMS Audio, byggt ovanpå Twenty Twenty-Five.
 * Author:            MMS Audio
 * Version:           0.1.0
 * Requires at least: 6.7
 * Requires PHP:      7.2
 * Template:          twentytwentyfive
 * Text Domain:       mms-audio
 * License:           GNU General Public License v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

:root {
	--mmsa-radius: 24px;
	--mmsa-shadow: 0 24px 70px rgba(18, 30, 42, 0.10);
}

html {
	scroll-behavior: smooth;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.mmsa-site-header {
	position: relative;
	z-index: 10;
}

.mmsa-site-header .wp-block-site-logo img {
	max-height: 48px;
	width: auto;
}

.mmsa-brand {
	gap: 0.85rem;
}

.mmsa-brand .wp-block-site-title {
	font-size: clamp(1.05rem, 1.2vw, 1.25rem);
	font-weight: 650;
	letter-spacing: -0.025em;
	margin: 0;
}

.mmsa-hero {
	min-height: min(760px, calc(100vh - 88px));
	position: relative;
	overflow: hidden;
}

.mmsa-hero-copy {
	position: relative;
	z-index: 2;
}

.mmsa-eyebrow {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.mmsa-lead {
	max-width: 720px;
}

.mmsa-visual {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	min-height: 360px;
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(circle at 36% 46%, rgba(255,255,255,.96) 0 5%, transparent 5.4%),
		radial-gradient(circle at 50% 30%, rgba(255,255,255,.82) 0 3.5%, transparent 3.9%),
		radial-gradient(circle at 67% 52%, rgba(255,255,255,.78) 0 4%, transparent 4.4%),
		radial-gradient(circle at 50% 50%, rgba(117,194,201,.78), rgba(29,111,138,.94) 58%, #102739 100%);
	box-shadow: var(--mmsa-shadow);
}

.mmsa-visual::before,
.mmsa-visual::after {
	content: "";
	position: absolute;
	inset: 12%;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 50%;
}

.mmsa-visual::after {
	inset: 26%;
	border-width: 2px;
	border-color: rgba(255,255,255,.7);
}

.mmsa-visual-lines {
	position: absolute;
	inset: 24% 18%;
	z-index: 2;
	background:
		linear-gradient(90deg,
			transparent 0 5%, rgba(255,255,255,.9) 5% 7%, transparent 7% 18%,
			rgba(255,255,255,.9) 18% 20%, transparent 20% 31%,
			rgba(255,255,255,.9) 31% 33%, transparent 33% 44%,
			rgba(255,255,255,.9) 44% 46%, transparent 46% 57%,
			rgba(255,255,255,.9) 57% 59%, transparent 59% 70%,
			rgba(255,255,255,.9) 70% 72%, transparent 72% 83%,
			rgba(255,255,255,.9) 83% 85%, transparent 85% 100%);
	mask-image: radial-gradient(ellipse at center, #000 0 63%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 0 63%, transparent 70%);
	transform: rotate(-12deg);
	opacity: .75;
}

.mmsa-statement {
	border-radius: var(--mmsa-radius);
}

.mmsa-contact-card {
	border: 1px solid rgba(18, 30, 42, 0.10);
	border-radius: var(--mmsa-radius);
	box-shadow: 0 16px 50px rgba(18, 30, 42, 0.06);
}

.mmsa-site-footer {
	font-size: 0.88rem;
}

.mmsa-site-footer .wp-block-site-title {
	font-size: 1rem;
	font-weight: 650;
}

@media (max-width: 781px) {
	.mmsa-hero {
		min-height: auto;
	}

	.mmsa-hero-columns {
		gap: 3rem !important;
	}

	.mmsa-visual {
		min-height: 260px;
		max-width: 430px;
		margin-inline: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}