/**
 * Shared styles for all Voicey Elements.
 * Breakpoints: desktop > 1024px, tablet 768–1024px, mobile <= 767px.
 */

/* Category heading fonts (Bare, Move, Serve/Receipts). Files are only downloaded when a heading uses them. */
@font-face {
	font-family: "Cook Psychesans";
	src: url("../fonts/CookPsychesans.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Better Times";
	src: url("../fonts/BetterTimes.otf") format("opentype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Canterbury";
	src: url("../fonts/Canterbury.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Woolen Plaid Sans";
	src: url("../fonts/WoolenPlaidSans.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter Variable";
	src: url("../fonts/Inter-Variable.ttf") format("truetype-variations"), url("../fonts/Inter-Variable.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Figma "Voicey Homepage" fonts, loaded from Google Fonts with this stylesheet. */
.wve-side-spacing {
	--wve-font-unbounded: "Unbounded", "Funnel Sans", Arial, sans-serif;
	--wve-font-space-mono: "Space Mono", "Roboto Mono", ui-monospace, monospace;
	--wve-font-dm-sans: "DM Sans", "Funnel Sans", Arial, sans-serif;
	--wve-side-padding: var(--wve-side-padding-desktop, 40px);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/* On wide screens the content stays inside the site container (theme --voicey-container); backgrounds stay full width. */
	padding-left: max(var(--wve-side-padding), calc((100% - var(--voicey-container, 1200px)) / 2));
	padding-right: max(var(--wve-side-padding), calc((100% - var(--voicey-container, 1200px)) / 2));
}

@media (max-width: 1024px) {
	.wve-side-spacing {
		--wve-side-padding: var(--wve-side-padding-tablet, 30px);
	}
}

@media (max-width: 767px) {
	.wve-side-spacing {
		--wve-side-padding: var(--wve-side-padding-mobile, 16px);
	}
}

/* Card title area: always as tall as the maximum title lines, shorter titles are centred in it.
   Each element sets --wve-title-box-size / -lh / -lines to its own title values. */
.wve-side-spacing .wve-card-title-box {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: calc(var(--wve-title-box-lines, 3) * var(--wve-title-box-lh, 1.25) * var(--wve-title-box-size, 18px));
}

/* Desktop: unify post card title size. */
@media (min-width: 1025px) {
	.wve-side-spacing .wve-card-title-box {
		--wve-title-box-size: 18px;
	}

	body .wve-side-spacing .wve-serve-post-title,
	body .wve-side-spacing .wve-move-card-title,
	body .wve-side-spacing .wve-blog-tabs-card-title,
	body .wve-side-spacing .wve-inner-circle-title,
	body .wve-side-spacing .wve-latest-posts-title,
	body .wve-side-spacing .wve-scp-card-title,
	body .wve-scp .wve-scp-card-title,
	body .wve-mal h3.wve-scp-card-title,
	body .wve-mal h3.wve-scp-card-title a {
		font-size: 18px;
	}
}

.wve-side-spacing .wve-card-title-box > * {
	width: 100%;
	min-height: 0;
}

/*
 * Card titles: fill the card width and avoid awkward orphans.
 * Prefer pretty over balance — balance shortens early lines and leaves
 * empty space on the right of the card.
 */
.wve-side-spacing .wve-serve-post-title,
.wve-side-spacing .wve-move-card-title,
.wve-side-spacing .wve-blog-tabs-card-title,
.wve-side-spacing .wve-inner-circle-title,
.wve-side-spacing .wve-bare-title,
.wve-side-spacing .wve-loud-featured-title,
.wve-side-spacing .wve-receipts-title,
.wve-side-spacing .wve-latest-posts-title,
.wve-side-spacing .wve-cpt-post-title,
.wve-side-spacing .wve-scp-card-title,
.wve-side-spacing .wve-scp-note-title,
.wve-mal .wve-scp-card-title {
	overflow-wrap: break-word;
	word-break: normal;
	-webkit-hyphens: auto;
	hyphens: auto;
	text-wrap: pretty;
}

.wve-side-spacing .wve-scp-card-title a,
.wve-mal .wve-scp-card-title a,
.wve-side-spacing .wve-cpt-post-title a,
.wve-side-spacing .wve-loud-featured-link,
.wve-side-spacing .wve-latest-posts-title-link {
	text-wrap: inherit;
}

/* Section heading linked to its category; keeps the heading's own look. */
.wve-side-spacing a.wve-heading-link,
.wve-side-spacing a.wve-heading-link:hover,
.wve-side-spacing a.wve-heading-link:focus,
.wve-side-spacing a.wve-heading-link:visited {
	color: inherit;
	font: inherit;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	pointer-events: auto;
	display: inline-block;
	max-width: 100%;
	transform-origin: center;
	transition: opacity 0.2s ease, transform 0.25s ease;
}

/* Grows a little on hover so it reads as a link. */
.wve-side-spacing a.wve-heading-link:hover,
.wve-side-spacing a.wve-heading-link:focus-visible {
	transform: scale(1.06);
}

.wve-side-spacing a.wve-heading-link:hover {
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	.wve-side-spacing a.wve-heading-link {
		transition: opacity 0.2s ease;
	}

	.wve-side-spacing a.wve-heading-link:hover,
	.wve-side-spacing a.wve-heading-link:focus-visible {
		transform: none;
	}
}

.wve-side-spacing a.wve-heading-link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}