/* ============================================
   MUUS Custom Styles
   Dark premium theme for Yakutian knives
   ============================================ */

/* --- Global --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: clip;
	overscroll-behavior-x: none;
	scroll-behavior: smooth;
}

body {
	overflow-x: clip;
	overscroll-behavior-x: none;
	width: 100%;
	max-width: 100vw;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: clamp(0.95rem, 2.2vw, 1rem);
}

::selection {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

img {
	max-width: 100%;
	height: auto;
}

/* --- Fluid Typography --- */
.wp-block-heading:where(h1),
.entry-title,
h1.wp-block-post-title {
	font-size: clamp(1.75rem, 5vw, 3rem);
}

.wp-block-heading:where(h2) {
	font-size: clamp(1.375rem, 4vw, 2.25rem);
}

.wp-block-heading:where(h3) {
	font-size: clamp(1.125rem, 3vw, 1.5rem);
}

/* --- Announcement Bar --- */
.muus-announcement-bar {
	position: relative;
	z-index: 99;
}

/* --- Header --- */
header.wp-block-template-part {
	position: sticky;
	top: -61px;
	z-index: 200;
}

header.wp-block-template-part > * + * {
	margin-top: 0 !important;
}

.muus-header {
	background-color: var(--wp--preset--color--background) !important;
}

/* 3-column balanced header: logo | nav (centered) | actions */
.muus-header > .wp-block-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.muus-header > .wp-block-group > .wp-block-group:first-child,
.muus-header > .wp-block-group > .muus-header-actions {
	flex: 1;
	min-width: 0;
}

.muus-header > .wp-block-group > .muus-header-actions {
	justify-content: flex-end;
}

.muus-header .muus-primary-nav {
	flex: 0 0 auto;
}

.muus-header .wp-block-site-title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.muus-header .wp-block-site-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Logo is a square source (shared with the favicon, which is intentionally a
   full-bleed square to avoid white edges in search results). Render it as a
   circle in the header. */
.muus-header .wp-block-site-logo img,
.custom-logo {
	border-radius: 50%;
}

/* --- Navigation --- */
.wp-block-navigation a {
	text-decoration: none !important;
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary) !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background);
}

/* --- Hero --- */
.muus-hero {
	margin-top: -1.5rem !important;
}

.muus-hero .wp-block-cover {
	overflow: hidden;
}

.muus-hero .wp-block-cover .wp-block-cover__image-background {
	filter: brightness(0.35);
}

.muus-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

.muus-hero .wp-block-cover::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	background: linear-gradient(to top, var(--wp--preset--color--background), transparent);
	pointer-events: none;
}

/* --- Hero Display Font --- */
.muus-hero h1.has-heading-font-family,
.muus-hero h1,
.muus-about-hero h1.has-heading-font-family,
.muus-about-hero h1 {
	font-family: var(--wp--preset--font-family--display) !important;
}

/* --- Story Section (Cover Block) --- */
.muus-story .wp-block-cover__image-background {
	filter: brightness(0.4);
}