/*
 * Global styles: reset, accessibility basics, layout primitives.
 * Tokens come from theme.json (--wp--preset--*). Keep this file small:
 * block-specific rules go in assets/css/blocks/core-<block>.css.
 */

/* Reset in a layer so core and theme.json win. */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	body {
		margin: 0;
	}

	/* Not in TinyMCE: its autoresize iframe grows forever. */
	body:not(.mce-content-body) {
		min-height: 100dvh;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	svg.lmt-icon {
		display: inline-block;
		flex-shrink: 0;
		vertical-align: middle;
	}

	img,
	video {
		height: auto;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	h1,
	h2,
	h3,
	h4 {
		text-wrap: balance;
	}

	p,
	li,
	figcaption {
		text-wrap: pretty;
		overflow-wrap: break-word;
	}
}

/* Short names for theme.json tokens. */
:root {
	--r-lg: var(--wp--custom--radius--lg);
	--r-md: var(--wp--custom--radius--md);
	--r-pill: var(--wp--custom--radius--pill);
	--r-sm: var(--wp--custom--radius--sm);
	--c-base: var(--wp--preset--color--base);
	--c-contrast: var(--wp--preset--color--contrast);
	--c-critical: var(--wp--preset--color--critical);
	--c-good: var(--wp--preset--color--good);
	--c-line: var(--wp--preset--color--line);
	--c-line-strong: var(--wp--preset--color--line-strong);
	--c-muted: var(--wp--preset--color--muted);
	--c-soft: var(--wp--preset--color--soft);
	--c-sunken: var(--wp--preset--color--sunken);
	--c-surface: var(--wp--preset--color--surface);
	--ff-display: var(--wp--preset--font-family--display);
	--ff-mono: var(--wp--preset--font-family--mono);
	--fs-large: var(--wp--preset--font-size--large);
	--fs-medium: var(--wp--preset--font-size--medium);
	--fs-small: var(--wp--preset--font-size--small);
	--fs-ctl: 1rem; /* 16px on touch: iOS zooms into smaller fields. */
	--fs-x-small: var(--wp--preset--font-size--x-small);
	--sp-50: var(--wp--preset--spacing--50);
	/* Fluid card padding and section gap. */
	--pad: clamp(1.25rem, 1rem + 1vw, 1.5rem);
	--pad-l: clamp(1.25rem, 0.85rem + 1.7vw, 1.75rem);
	--gap-l: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

/* Fluid root: 16px on phones to 105% at ~1200px. */
@media (pointer: fine) {
	:root {
		--fs-ctl: var(--fs-small);
	}
}

html {
	font-size: clamp(100%, 0.97rem + 0.12vw, 105%);
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Accessibility basics. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-ink);
	outline-offset: 2px;
}

:target {
	scroll-margin-block-start: var(--wp--preset--spacing--60);
}

a {
	text-underline-offset: 3px;
	text-decoration-color: var(--c-line-strong);
	transition: text-decoration-color 150ms ease;
}

a:hover {
	text-decoration-color: currentColor;
}

/*
 * Components shared by the store, the account area and License Monks screens.
 * Short names on purpose: these classes also go in "Additional CSS class".
 */
.lmt-label {
	font-family: var(--ff-mono);
	font-size: var(--fs-x-small);
	line-height: 1.35;
	color: var(--c-muted);
}

.lmt-mono {
	font-family: var(--ff-mono);
	font-variant-numeric: tabular-nums;
}

.lmt-lede {
	max-width: 62ch;
	color: var(--c-muted);
}

.lmt-hl,
h1 mark {
	background: none;
	color: inherit;
	box-shadow: inset 0 -0.34em 0 var(--wp--preset--color--accent);
}

.lmt-card {
	padding: 1.125rem 1.25rem;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}

.lmt-well {
	padding: 0.75rem 0.875rem;
	background: var(--c-sunken);
	border-radius: var(--r-md);
}

.lmt-ink {
	padding: var(--pad);
	background: var(--c-contrast);
	color: var(--wp--preset--color--on-ink);
	border-radius: var(--r-lg);
}

.lmt-ink :is(p, .lmt-label) {
	color: var(--wp--preset--color--on-ink-muted);
}

/* Fields: WooCommerce, License Monks and theme forms. */
:where(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden]), select, textarea) {
	inline-size: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	background-color: var(--c-surface);
	color: var(--c-contrast);
	font-size: var(--fs-ctl);
	line-height: 1.43;
	transition: border-color 150ms ease;
}

:where(input, select, textarea):focus-visible {
	border-color: var(--c-contrast);
}

:where(input[type=checkbox], input[type=radio]) {
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin: 0;
	accent-color: var(--c-contrast);
}

:where(label) {
	font-size: var(--fs-small);
	font-weight: 600;
}

::placeholder {
	color: #7a7a84;
}

/* Button variants; primary is in theme.json. */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 160ms var(--wp--custom--ease-out), background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.wp-element-button:active {
	transform: scale(0.97);
}

.is-style-outline > .wp-block-button__link,
.lmt-btn-secondary {
	padding: 0.5rem 1rem;
	border: 1px solid var(--c-line-strong);
	background: var(--c-surface);
	color: var(--c-contrast);
	box-shadow: none;
}

.is-style-outline > .wp-block-button__link:hover,
.lmt-btn-secondary:hover {
	border-color: var(--c-contrast);
	background: var(--c-surface);
}

.lmt-btn-ghost {
	border-color: transparent;
	background: transparent;
	color: var(--c-muted);
	box-shadow: none;
}

.lmt-btn-ghost:hover {
	background: var(--c-sunken);
	color: var(--c-contrast);
}

.lmt-btn-sm {
	padding: 0.3125rem 0.75rem;
}

/* Badges. */
.lmt-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0 0.625rem;
	border-radius: var(--r-pill);
	background: var(--c-sunken);
	color: var(--c-muted);
	font-size: var(--fs-x-small);
	font-weight: 600;
	line-height: 1.25rem;
	white-space: nowrap;
}

.lmt-badge.is-good { background: var(--wp--preset--color--good-soft); color: var(--c-good); }
.lmt-badge.is-warning { background: var(--wp--preset--color--warning-soft); color: var(--wp--preset--color--warning); }
.lmt-badge.is-critical { background: var(--wp--preset--color--critical-soft); color: var(--c-critical); }
.lmt-badge.is-info { background: var(--wp--preset--color--info-soft); color: var(--wp--preset--color--info); }

/* Usage meter: <div class="lmt-meter"><i style="width:12%"></i></div>. */
.lmt-meter {
	height: 0.375rem;
	overflow: hidden;
	border-radius: var(--r-pill);
	background: var(--c-sunken);
	box-shadow: inset 0 0 0 1px var(--c-line);
}

.lmt-meter i {
	display: block;
	height: 100%;
	background: var(--c-contrast);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Empty template parts take no space. */
.wp-block-template-part:not(:has(*)) {
	display: none;
}

/*
 * Layout primitives (Every Layout / CUBE CSS). Add the class in the block's
 * "Additional CSS class" field. Tune with the custom properties.
 */

/* Stack: vertical rhythm between siblings. */
.stack {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.stack > * {
	margin-block: 0;
}

.stack > * + * {
	margin-block-start: var(--space, var(--wp--preset--spacing--40));
}

/* Cluster: wrapping row of items (tags, buttons, links). */
.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: var(--align, center);
	justify-content: var(--justify, flex-start);
	gap: var(--space, var(--wp--preset--spacing--30));
}

/* Sidebar: first child is the sidebar, the rest fills. */
.sidebar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space, var(--sp-50));
}

.sidebar > :first-child {
	flex-basis: var(--side-width, 16rem);
	flex-grow: 1;
}

.sidebar > :last-child {
	flex-basis: 0;
	flex-grow: 999;
	min-inline-size: var(--content-min, 55%);
}

/* Grid: as many columns as fit, each at least --min wide. */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 16rem), 100%), 1fr));
	gap: var(--space, var(--sp-50));
}

/* Center: horizontally centred, max-width measure. */
.center {
	box-sizing: content-box;
	max-inline-size: var(--measure, 65ch);
	margin-inline: auto;
	padding-inline: var(--gutter, 0);
}

/* Cover: centres .cover__main in a min-height block. */
.cover {
	display: flex;
	flex-direction: column;
	min-block-size: var(--min-height, 80vh);
	padding: var(--space, var(--sp-50));
}

.cover > * {
	margin-block: var(--space, var(--sp-50));
}

.cover > :first-child:not(.cover__main) {
	margin-block-start: 0;
}

.cover > :last-child:not(.cover__main) {
	margin-block-end: 0;
}

.cover > .cover__main {
	margin-block: auto;
}

/* Header: sticky bar, shadow on scroll (scroll timeline, no JS). */
.wp-site-blocks > header:has(.lmt-hdr) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 10;
}

.lmt-hdr {
	padding-block-start: 0.75rem;
}

@supports (animation-timeline: scroll()) {
	.lmt-hdr__bar {
		animation: lmt-hdr-shadow linear both;
		animation-timeline: scroll();
		animation-range: 0 8px;
	}

	@keyframes lmt-hdr-shadow {
		to {
			box-shadow: var(--wp--preset--shadow--header);
		}
	}
}

.lmt-hdr__bar {
	gap: 1rem 0.25rem; /* Matches the nav item gap. */
	min-height: 4rem;
	padding: 0.625rem 0.75rem 0.625rem 1.25rem;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--xl);
	background: rgb(250 250 251 / 0.86);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
}

.lmt-brand {
	gap: 0.75rem;
}

.lmt-brand .wp-block-image {
	margin: 0;
}

.lmt-brand__where {
	margin: 0;
	padding-inline-start: 0.75rem;
	border-inline-start: 1px solid var(--c-line);
}

.lmt-hdr__bar > .lmt-hdr__site {
	margin-inline-start: auto;
	font-size: 0.9375rem;
}

.lmt-hdr__site .lmt-nav__list {
	gap: 0.25rem;
}

.lmt-hdr__site a,
a.lmt-hdr__site {
	display: block;
	padding: 0.375rem 0.75rem;
	border-radius: var(--r-md);
	color: var(--c-soft);
	transition: background-color 150ms ease;
}

.lmt-hdr__site a:hover,
a.lmt-hdr__site:hover,
.lmt-hdr__site [aria-current],
a.lmt-hdr__site[aria-current] {
	background: var(--c-sunken);
	color: var(--c-contrast);
	text-decoration: none;
}

.lmt-hdr__bar > .lmt-brand + .wp-block-lm-theme-account {
	margin-inline-start: auto;
}

/* Footer. */
.lmt-foot {
	overflow: hidden;
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block: 3rem 2rem;
	border-top: 1px solid var(--c-line);
	background: linear-gradient(var(--c-base), var(--wp--preset--color--mist));
	font-size: var(--fs-small);
}

.lmt-foot p {
	margin: 0;
}

.lmt-foot a {
	color: var(--c-soft);
}

.lmt-foot__top {
	gap: var(--gap-l) 4rem;
}

.lmt-foot__about {
	flex: 1 1 280px;
	max-width: 22.5rem;
	gap: 0.75rem;
}

.lmt-foot__about .wp-block-image {
	margin: 0;
}

.lmt-foot__cols {
	flex: 2 1 480px;
	gap: 1.5rem;
}

.lmt-foot__col {
	gap: 0.625rem;
}

.lmt-foot__col a {
	text-decoration: none;
}

.lmt-foot__col a:hover {
	text-decoration: underline;
}

.lmt-foot__bottom {
	margin-block-start: var(--gap-l);
	padding-block-start: 1.25rem;
	border-top: 1px solid var(--c-line);
}

.lmt-foot__bottom.lmt-foot__bottom {
	gap: 0.5rem 0.75rem;
}

.lmt-foot__bottom > :last-child {
	margin-inline-start: auto;
}

.lmt-foot__top-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

/* Standalone small links get a 24px tap height. */
:is(.lmt-foot__top-link, .lmt-crumbs a, a.lmt-label, a.lmt-sub, .lmt-well a, .lmt-trust a, .lmt-account__login, a.lmt-push) {
	min-height: 1.5rem;
	align-content: center;
}

.woocommerce-breadcrumb a {
	padding-block: 0.25rem;
}

/* Wordmark fills the wide column (text is about 5.9em wide). */
.lmt-foot__markbox {
	container-type: inline-size;
	margin-block-start: var(--gap-l);
}

.lmt-foot__mark {
	margin: 0 0 0 -0.055em;
	color: color-mix(in srgb, var(--c-contrast) 7%, transparent);
	font: 700 16.95cqi / 0.9 var(--ff-display);
	letter-spacing: -0.045em;
	white-space: nowrap;
	user-select: none;
}

.lmt-foot__mark span {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 720px) {
	.lmt-hdr__site,
	.lmt-brand__where {
		display: none;
	}

	.lmt-hdr__bar > .wp-block-lm-theme-account {
		margin-inline-start: auto;
		column-gap: 0.5rem; /* Fits the logo row at 375px. */
	}
}