/*
 * generations theme — responsive rules.
 *
 * Desktop-first: base styles in main.css assume a wide nav bar. Below each
 * breakpoint the nav collapses into a toggleable mobile menu (driven by
 * js/navigation.js, which adds/removes #site-navigation.toggled and
 * li.focus).
 */

/* ============================================================ max-width: 768px */
@media (max-width: 768px) {
	:root {
		--gutter: 5%;
	}

	body {
		padding: 1rem 0.5rem;
	}

	.site-branding {
		padding-top: 1rem;
	}

	/* Nav collapses into a toggle button + off-canvas-style list. */
	.main-navigation {
		position: relative;
		flex-direction: column;
		align-items: stretch;
	}

	.main-navigation .menu-toggle {
		display: block;
		width: 100%;
		background: transparent;
		border: 0;
		color: var(--nav-foreground);
		font-family: inherit;
		font-size: 13px;
		text-align: left;
		padding: 0.9em var(--gutter);
		cursor: pointer;
	}

	.main-navigation .menu-toggle::after {
		content: "\2630";
		float: right;
	}

	.main-navigation.toggled .menu-toggle::after {
		content: "\2715";
	}

	.main-navigation ul#primary-menu {
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 0 var(--gutter) 0.5em;
	}

	.main-navigation.toggled ul#primary-menu {
		display: flex;
	}

	.main-navigation ul#primary-menu > li > a {
		line-height: 2.6em;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	/* Submenus render inline (indented) instead of as hover flyouts. */
	.main-navigation .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		box-shadow: none;
		background: transparent;
		padding-left: 1em;
	}

	.main-navigation .sub-menu a {
		color: rgba(238, 238, 238, 0.8);
		padding: 0.5em 0.5em;
	}

	.main-navigation .sub-menu a:hover,
	.main-navigation .sub-menu a:focus {
		background: transparent;
		color: var(--nav-foreground);
	}

	.lang-switcher {
		padding: 0.75em var(--gutter);
	}

	#primary.site-main {
		padding: 1.5rem var(--gutter);
	}

	.entry-title {
		font-size: 22px;
	}

	.posts-navigation,
	.post-navigation,
	.comment-navigation {
		flex-direction: column;
		gap: 0.5em;
	}

	.site-footer .site-info {
		padding: 1.25rem var(--gutter);
	}
}

/* ============================================================ max-width: 480px */
@media (max-width: 480px) {
	:root {
		--gutter: 4%;
	}

	body {
		padding: 0.5rem;
	}

	.entry-title {
		font-size: 20px;
	}

	.alignleft,
	.alignright {
		float: none;
		display: block;
		margin: 0 auto 1.2em;
	}
}