/**
 * page-chrome-contract.css
 *
 * Board/page heading geometry, opaque navbar base surface, and OP body spacing.
 * Loaded after theme CSS. Typography identity stays on masthead tokens; this
 * module normalizes size and vertical rhythm only.
 */

:root {
	--theme-page-heading-size: 28pt;
	--theme-page-heading-line-height: 1.15;
	--theme-page-heading-margin-block: 0;
	--theme-page-header-margin-block: 1em;
	--theme-page-header-padding-top: 0;
	--theme-page-subheading-size: 11pt;
	--theme-page-subheading-line-height: 1.35;
	--theme-home-heading-size: 40pt;

	/* Board page title text treatments (distinct from homepage Ponychan branding). */
	--theme-board-title-color: var(--theme-heading);
	--theme-board-title-text-shadow: var(--theme-heading-shadow, none);
	--theme-board-title-letter-spacing: var(--theme-heading-letter-spacing, normal);
	--theme-board-title-text-transform: var(--theme-heading-text-transform, none);
	--theme-board-title-font-style: var(--theme-heading-style, normal);
}

/* Board / thread / catalog page headings (not homepage branding). */
body.boardpage:not(.homepage) > header h1,
body.boardpage:not(.homepage) > header .thread-header-title h1,
body.homepage > header h1 {
	font-family: var(--theme-masthead-font-family, var(--theme-font-heading, "tahoma", Arial, sans-serif));
	font-weight: var(--theme-masthead-font-weight, var(--theme-heading-weight, normal));
	font-style: var(--theme-masthead-font-style, var(--theme-heading-style, normal));
	color: var(--theme-masthead-color, var(--theme-heading));
	text-shadow: var(--theme-masthead-text-shadow, var(--theme-heading-shadow, none));
	letter-spacing: var(--theme-masthead-letter-spacing, var(--theme-heading-letter-spacing, normal));
	word-spacing: var(--theme-masthead-word-spacing, var(--theme-heading-word-spacing, normal));
	text-transform: var(--theme-masthead-text-transform, var(--theme-heading-text-transform, none));
}

body.boardpage:not(.homepage) > header h1,
body.boardpage:not(.homepage) > header .thread-header-title h1 {
	font-size: var(--theme-page-heading-size);
	line-height: var(--theme-page-heading-line-height);
	margin-top: var(--theme-page-heading-margin-block);
	margin-bottom: var(--theme-page-heading-margin-block);
	/* Reserve masthead block height during webfont swap. */
	min-height: calc(var(--theme-page-heading-size) * var(--theme-page-heading-line-height));
}

body.boardpage:not(.homepage) > header,
body.boardpage:not(.homepage) > header.thread-page-header {
	margin: var(--theme-page-header-margin-block) 0;
	padding-top: var(--theme-page-header-padding-top);
}

body.boardpage:not(.homepage) > header .subtitle {
	font-size: var(--theme-page-subheading-size);
	line-height: var(--theme-page-subheading-line-height);
}

/* Homepage keeps distinct branding scale from style.css. */
body.homepage > header h1 {
	font-size: var(--theme-home-heading-size);
	line-height: var(--theme-page-heading-line-height);
	margin-top: var(--theme-page-heading-margin-block);
	margin-bottom: var(--theme-page-heading-margin-block);
	min-height: var(--theme-home-heading-min-height, calc(var(--theme-home-heading-size) * var(--theme-page-heading-line-height)));
}

/* Opaque navbar base: theme gradients/images may layer above this color. */
.top,
.top.boardlist,
div.boardlist.top {
	background-color: var(--theme-top-bg);
}

/* OP fileinfo → body spacing matches reply rhythm. */
.opMain > .body {
	margin-top: 0.8em;
}

/*
 * Mobile top navbar (all page types): row 1 = Ponychan + board links;
 * row 2 = recent + watcher + settings, right-aligned. Replaces float-only layout
 * that could not wrap while keeping utilities inside the viewport.
 */
@media screen and (max-width: 480px) {
	/*
	 * Fixed navbar is two wrapped rows (see rules below). style.css zeros body
	 * padding here; .top + .banner { margin: 0 auto } clears .top + * top margin,
	 * so restore clearance via --site-navbar-offset on the first in-flow sibling.
	 */
	:root {
		--site-navbar-offset: 67px;
	}

	.top + * {
		margin-top: var(--site-navbar-offset, 48px);
	}

	.top + .banner,
	.top + img.banner {
		margin-top: var(--site-navbar-offset, 48px);
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
	}

	/* body.boardpage beats theme `.boardlist.top { display: block }` (e.g. Zecora). */
	body.boardpage .top,
	body.boardpage div.boardlist.top,
	body.homepage .top,
	body.homepage div.boardlist.top,
	body.recent-posts-page .top,
	body.recent-posts-page div.boardlist.top {
		box-sizing: border-box;
		width: 100%;
		max-width: 100svw;
		min-width: 0;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: 0 !important;
		right: 0 !important;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}

	body.boardpage .top .boardlistpart,
	body.boardpage div.boardlist.top .boardlistpart,
	body.homepage .top .boardlistpart,
	body.homepage div.boardlist.top .boardlistpart,
	body.recent-posts-page .top .boardlistpart,
	body.recent-posts-page div.boardlist.top .boardlistpart {
		float: none;
		min-width: 0;
		max-width: 100%;
		flex: 0 1 auto;
	}

	body.boardpage .top .settingsSection,
	body.boardpage div.boardlist.top .settingsSection,
	body.homepage .top .settingsSection,
	body.homepage div.boardlist.top .settingsSection,
	body.recent-posts-page .top .settingsSection,
	body.recent-posts-page div.boardlist.top .settingsSection {
		float: none;
		flex: 1 0 100%;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		gap: 0.15em 0.35em;
		box-sizing: border-box;
		padding-left: 4px;
		padding-right: 4px;
	}

	body.boardpage .top .settingsSection.boardlistpart,
	body.boardpage div.boardlist.top .settingsSection.boardlistpart,
	body.homepage .top .settingsSection.boardlistpart,
	body.homepage div.boardlist.top .settingsSection.boardlistpart,
	body.recent-posts-page .top .settingsSection.boardlistpart,
	body.recent-posts-page div.boardlist.top .settingsSection.boardlistpart {
		padding-left: 4px;
	}

	body.boardpage div.boardlist.top .settingsSection a.watcherButton,
	body.boardpage div.boardlist.top .settingsSection a.settingsButton,
	body.boardpage div.boardlist.top .settingsSection a.recentNavButton,
	body.homepage div.boardlist.top .settingsSection a.watcherButton,
	body.homepage div.boardlist.top .settingsSection a.settingsButton,
	body.homepage div.boardlist.top .settingsSection a.recentNavButton,
	body.recent-posts-page div.boardlist.top .settingsSection a.watcherButton,
	body.recent-posts-page div.boardlist.top .settingsSection a.settingsButton,
	body.recent-posts-page div.boardlist.top .settingsSection a.recentNavButton {
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-inline: 0 !important;
		flex: 0 1 auto;
		min-width: 0;
		max-width: 100%;
		padding-inline: 0.45em;
	}

	body.boardpage div.boardlist.top .boardlistpart:not(.settingsSection),
	body.homepage div.boardlist.top .boardlistpart:not(.settingsSection),
	body.recent-posts-page div.boardlist.top .boardlistpart:not(.settingsSection) {
		overflow-wrap: anywhere;
		word-wrap: break-word;
	}
}