/*
 * Responsive overrides for the Parament theme.
 * Desktop appearance stays as close as possible to the original
 * 1000px two-column layout; below that the layout reflows so the
 * site never needs a horizontal scrollbar.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-x: hidden;
}

body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

img,
video,
iframe,
embed,
object,
svg {
	max-width: 100%;
	height: auto;
}

table {
	max-width: 100%;
}

pre,
code {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

a {
	overflow-wrap: anywhere;
}

/* Fluid wrappers. Max widths match the original fixed layout. */
#page-wrap {
	width: 100%;
	max-width: 1000px;
	padding: 0;
}

#container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
	max-width: 970px;
	padding: 0;
	column-gap: 25px;
}

#main {
	display: block;
	float: none;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	max-width: none;
	margin: 0 0 30px;
}

#main.image-template {
	flex: 1 1 100%;
	width: 100%;
	max-width: none;
}

#sidebar {
	float: none;
	flex: 0 0 260px;
	width: 260px;
	max-width: 100%;
	right: auto;
	margin: 40px 0 30px;
	min-width: 0;
}

#sidebar img {
	max-width: 100%;
	height: auto;
}

/* Header banner scales with the container, keeping its 950x200 ratio. */
#branding {
	width: 100% !important;
	max-width: 950px;
	height: auto !important;
	aspect-ratio: 950 / 200;
}

#header-image {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
}

#header-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: fill;
}

/* Menu is 1000px + a 1px border in the original, which overflowed. */
#menu {
	float: none;
	width: 100%;
	max-width: 1000px;
}

#menu ul ul,
#menu ul ul a {
	max-width: 100%;
	box-sizing: border-box;
}

/* Content images must shrink with the column, not stay at 627/917px. */
.hentry img,
.image-template .hentry img,
#main .gallery img,
#main div.wp-caption,
#main div.wp-caption img {
	max-width: 100%;
	height: auto;
}

#attachment-image img,
#attachment_5 {
	max-width: 100%;
	height: auto;
}

div.wp-caption,
#main div.wp-caption,
#attachment_5.wp-caption {
	width: auto !important;
	max-width: 100%;
}

/* Widget titles were a fixed 238px and spilled out of a fluid sidebar. */
.widget-title {
	width: calc(100% + 30px);
	max-width: none;
}

#post-nav .nav-older,
#post-nav .nav-newer {
	width: 48%;
	max-width: 100%;
}

/* Contact honeypot used left:-9999px, which forces horizontal scroll. */
#fscf_form1,
#FSContact1 {
	position: relative;
	max-width: 100%;
}

#fscf_honeypot1 {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
}

#FSContact1 input,
#FSContact1 textarea {
	max-width: 100% !important;
}

/* Keep a little edge gutter once the viewport is narrower than the 1000px canvas. */
@media (max-width: 1020px) {
	#page-wrap {
		padding: 0 10px;
	}
}

/* Magazine teaser rows should stack before the 32%/68% grid gets cramped. */
@media (max-width: 600px) {
	.wp-block-media-text,
	.wp-block-media-text.alignwide,
	.wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
	}

	.wp-block-media-text .wp-block-media-text__media,
	.wp-block-media-text .wp-block-media-text__content {
		grid-column: 1 !important;
	}

	.wp-block-media-text .wp-block-media-text__media {
		grid-row: 1 !important;
	}

	.wp-block-media-text .wp-block-media-text__content {
		grid-row: 2 !important;
		padding: 12px 0 0;
	}
}

/* Menu toggle is hidden on desktop. */
.menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	border-radius: 3px;
	color: #cccfd7;
	cursor: pointer;
	font-family: Trebuchet, arial, sans-serif;
	font-size: 13px;
	letter-spacing: 0.04em;
	line-height: 40px;
	margin: 0 7px 7px;
	padding: 0 15px;
	text-transform: uppercase;
}

.menu-toggle:hover,
.menu-toggle:focus {
	background: #272a31;
	color: #fff;
	outline: 0;
}

.menu-toggle:focus-visible {
	outline: 2px solid #d24d04;
	outline-offset: 2px;
}

@media (max-width: 640px) {
	#container {
		column-gap: 0;
	}

	#main,
	#main.image-template,
	#sidebar {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
		margin: 0 0 20px;
	}

	/* Stack the byline so it doesn't hang off the left edge. */
	.entry-byline {
		left: 0;
		top: 0;
		position: relative;
		margin: 0 0 8px;
		display: inline-block;
	}

	.has-byline .title {
		padding-top: 15px;
	}

	h2.entry-title {
		font-size: 22px;
		line-height: 1.3;
		overflow-wrap: break-word;
	}

	#page-title,
	#page-tagline {
		width: 100%;
		float: none;
	}

	/* Collapsible nav when JS is available; otherwise links stack. */
	#menu {
		padding: 7px 0 0;
	}

	#menu .menu-toggle {
		display: none;
	}

	html.js #menu .menu-toggle {
		display: inline-block;
	}

	html.js #menu #primary-menu {
		display: none;
		width: 100%;
		padding-bottom: 7px;
	}

	html.js #menu.is-open #primary-menu {
		display: block;
	}

	#menu ul,
	#menu li,
	#menu li li {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	#menu li {
		margin: 0 7px 7px;
	}

	#menu a {
		padding: 0 15px;
	}

	#menu ul ul {
		position: static;
		display: block;
		float: none;
		width: 100%;
		border-top: 0;
		box-shadow: none;
	}

	#menu ul ul a {
		width: 100%;
		padding-left: 28px;
	}

}

@media (max-width: 480px) {
	body {
		font-size: 15px;
		padding: 8px 0 20px;
	}

	.entry-content .alignleft,
	.entry-content .alignright,
	#main div.alignleft,
	#main div.alignright {
		float: none;
		display: block;
		margin: 0 0 15px;
	}

	#page-wrap {
		padding: 0 8px;
	}

	.hentry {
		margin: 20px 0 16px;
	}

	.entry-content {
		padding: 12px;
	}

	.title {
		padding: 14px 12px 12px;
	}

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