/**
 * NovaPress — layout.css
 * Structural layout: container, main, sections, grids, header/footer
 * scaffolding, and the two-column content layout.
 *
 * @package NovaPress
 */

/* -------------------------------------------------------------------------
 * Container
 * ---------------------------------------------------------------------- */
.np-container {
	width: 100%;
	max-width: var(--np-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* -------------------------------------------------------------------------
 * Main content region
 * ---------------------------------------------------------------------- */
.np-main {
	display: block;
	min-height: 40vh;
}

/* -------------------------------------------------------------------------
 * Sections
 * ---------------------------------------------------------------------- */
.np-section {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.np-section--alt {
	background-color: color-mix(in srgb, var(--np-color-secondary) 4%, var(--np-color-bg));
}

.np-section__header {
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.np-section__title {
	margin-bottom: calc(var(--np-space) * 0.5);
	font-size: var(--np-fs-h2);
}

.np-section__subtitle {
	margin-bottom: 0;
	color: var(--np-color-muted);
	font-size: 1.125rem;
}

/* -------------------------------------------------------------------------
 * Grid system
 * ---------------------------------------------------------------------- */
.np-grid {
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	grid-template-columns: 1fr;
}

.np-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.np-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.np-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* -------------------------------------------------------------------------
 * Header layout structure
 * ---------------------------------------------------------------------- */
.np-header {
	position: relative;
	z-index: 100;
	width: 100%;
	background-color: var(--np-color-bg);
	border-bottom: 1px solid var(--np-color-border);
}

.np-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--np-space);
	min-height: 4.5rem;
}

.np-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 0 0 auto;
}

.np-nav {
	display: flex;
	align-items: center;
}

/* -------------------------------------------------------------------------
 * Footer layout structure
 * ---------------------------------------------------------------------- */
.np-footer {
	margin-top: auto;
	background-color: var(--np-color-secondary);
	color: color-mix(in srgb, #ffffff 82%, var(--np-color-secondary));
}

.np-footer__inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.np-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--np-space);
	padding-block: 1.25rem;
	border-top: 1px solid color-mix(in srgb, #ffffff 15%, transparent);
}

/* -------------------------------------------------------------------------
 * Two-column content layout (post/page with sidebar)
 * ---------------------------------------------------------------------- */
.np-content {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	padding-block: clamp(2rem, 5vw, 4rem);
}

/* When a sidebar is present, use a content + sidebar track split. */
.np-content:has(.np-sidebar) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
}

.np-content > .np-article,
.np-content > .np-entry {
	min-width: 0;
}

.np-sidebar {
	min-width: 0;
}