/* ===================================================================
 * Yomu site-wide additive styles.
 * Loaded on every page after home-new.css (the design system base).
 * Contains nav menu + prose typography for long-form content.
 * =================================================================== */

/* ---------------------------------------------------------------
 * Sticky footer scaffolding (footer always at bottom of viewport)
 * ------------------------------------------------------------- */
html, body { height: 100%; }

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

body > .header { flex: 0 0 auto; }
body > .content,
body > main,
body > main.content { flex: 1 0 auto; }
body > .footer { flex: 0 0 auto; margin-top: auto; }

/* ---------------------------------------------------------------
 * Header layout: logo + top nav
 * ------------------------------------------------------------- */
.header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.header__nav {
	display: flex;
	align-items: center;
}

/* ---------------------------------------------------------------
 * Top nav (Home / Blog)
 * ------------------------------------------------------------- */
.top-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 32px;
}

.top-nav li { list-style: none; margin: 0; }

.top-nav__item a {
	display: inline-block;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-dark);
	text-decoration: none;
	padding: 8px 4px;
	transition: color var(--transition-duration) ease;
}

.top-nav__item a:hover { color: #F7623C; }

.top-nav__item.is-active a {
	font-weight: 700;
}

@media (max-width: 480px) {
	.top-nav { gap: 20px; }
	.top-nav__item a { font-size: 15px; }
}

/* ---------------------------------------------------------------
 * Prose: long-form content (pages, post bodies)
 * ------------------------------------------------------------- */
.prose {
	max-width: 720px;
	margin-inline: auto;
	font-family: "Inter", sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-dark);
}

.prose > * + * { margin-top: 1.2em; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
	margin-top: 2em;
	margin-bottom: 0.6em;
}
.prose h1 { font-size: clamp(32px, 3vw, 42px); }
.prose h2 { font-size: clamp(28px, 2.5vw, 34px); }
.prose h3 { font-size: clamp(22px, 2vw, 28px); }
.prose h4 { font-size: clamp(20px, 1.6vw, 22px); }

.prose p { margin: 0 0 1.2em; }

.prose a {
	color: #F7623C;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.prose a:hover { color: #d44a25; }

.prose ul, .prose ol {
	margin: 0 0 1.2em;
	padding-left: 1.5em;
}
.prose li { margin: 0.4em 0; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }

.prose blockquote {
	margin: 1.6em 0;
	padding: 0.6em 1.2em;
	border-left: 4px solid #FBC457;
	font-style: italic;
	color: var(--color-gray);
}

.prose img {
	border-radius: var(--border-radius);
	margin: 1.6em 0;
}

.prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: rgba(0, 0, 0, 0.05);
	padding: 0.15em 0.4em;
	border-radius: 4px;
}

.prose pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: #1A1A1A;
	color: #FBFBF9;
	padding: 1.2em;
	border-radius: var(--border-radius);
	overflow-x: auto;
	margin: 1.6em 0;
}

.prose pre code {
	background: transparent;
	padding: 0;
	color: inherit;
}

.prose hr {
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin: 2.4em 0;
}

/* ---------------------------------------------------------------
 * Page (single Page) header
 * ------------------------------------------------------------- */
.page-article__header {
	text-align: center;
	margin-bottom: 40px;
}
.page-article__title {
	font-family: "PiepieW01-Regular", sans-serif;
	text-transform: uppercase;
	font-size: clamp(38px, 4vw, 58px);
	margin: 0;
}