/*
 * layout.css — the page shell, header, navigation, title band, footer.
 *
 * Every value here was read off live (archives.christcathedral.org) at 1440
 * and 390 wide, from the Elementor templates and the Kit:
 *
 *   Kit            containers 1140px, padding 30px (15px sides on phones);
 *                  breakpoints 768 / 1025
 *   Header #9      logo 80px and the site title (Average 30px, 24px on
 *                  phones) side by side, 50px above and below (30px/15px on
 *                  phones); then the menu bar: #F6F6F6, a 1px primary rule
 *                  above and below, items 25px/20px in primary Lato 18px,
 *                  a dropdown of #F5F5F5 items with primary rules, a
 *                  hamburger below 768
 *   Pages 254,     a primary-green band holding the white title (Average
 *   archives       40px), 25px above and below it inside the container's
 *   8737, 340      30px — 50px on the tag archive
 *   Footer #113    #F6F6F6 with a 1px primary border, the copyright and
 *                  "Site v1.1" at either end, 30px above and below
 *
 * Hello Elementor's own templates (a single document, the /document/ and
 * file-type archives, search, 404) did not use the Kit's container: they sat
 * in Hello's stepped column (500 / 600 / 800 / 1140px from 576 / 768 / 992
 * / 1200, 10px padding below 576) with a plain title. `.stepped` is that
 * column.
 *
 * Width is the template's statement: every direct child of .site-main
 * declares one of `band`, `band-content`, `stepped`, `measure`, `alignwide`
 * or `alignfull`. One that says nothing runs full width, deliberately loudly.
 */

:root {
	--cccarchives-gutter: 30px;
	--cccarchives-rule: 1px solid var(--wp--preset--color--accent);
}

@media (max-width: 767px) {
	:root {
		--cccarchives-gutter: 15px;
	}
}

/* --- Width is the template's statement --- */

.entry-content > *,
.page-content > * {
	max-width: none;
}

.site-main > .measure {
	max-width: var(--cccarchives-measure);
	margin-inline: auto;
}

.site-main > .alignwide {
	max-width: var(--cccarchives-wide);
	margin-inline: auto;
}

.site-main > .alignfull {
	max-width: none;
}

/* The Kit's boxed container: 1140px inside 30px of padding. */
.band-content {
	padding: var(--cccarchives-gutter);
}

.band-content > * {
	max-width: var(--cccarchives-wide);
	margin-inline: auto;
}

@media (max-width: 767px) {
	.band-content {
		padding-block: 0;
	}
}

/* Hello's stepped column. */
.stepped {
	width: 100%;
	margin-inline: auto;
}

@media (max-width: 575px) {
	.stepped {
		padding-inline: 10px;
	}
}

@media (min-width: 576px) {
	.stepped { max-width: 500px; }
}

@media (min-width: 768px) {
	.stepped { max-width: 600px; }
}

@media (min-width: 992px) {
	.stepped { max-width: 800px; }
}

@media (min-width: 1200px) {
	.stepped { max-width: 1140px; }
}

/* --- Header: logo and title --- */

.site-branding {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	padding: 50px 0;
}

.site-logo {
	flex: none;
	width: 80px;
}

.site-logo a,
.site-logo img {
	display: block;
}

.site-logo img {
	width: 80px;
}

.site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
}

.site-title a,
.site-title a:hover {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

@media (max-width: 767px) {
	.site-branding {
		flex-direction: column;
		padding: 30px 15px;
	}

	.site-title {
		font-size: 24px;
		text-align: center;
	}
}

/* --- Navigation --- */

.site-navigation {
	border-block: var(--cccarchives-rule);
	background: var(--wp--preset--color--panel);
}

.site-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: var(--cccarchives-wide);
	margin-inline: auto !important;
}

.primary-menu > li {
	position: relative;
}

/* The nav widget's 25px between items (12.5px either side, none at the
   ends), and none at the Kit's tablet width, where it would wrap. */
.primary-menu > li + li {
	margin-inline-start: 25px;
}

@media (max-width: 1024px) {
	.primary-menu > li + li {
		margin-inline-start: 0;
	}
}

.primary-menu > li > a {
	display: flex;
	align-items: center;
	padding: 25px 20px;
	color: var(--wp--preset--color--accent);
	font-size: 18px;
	line-height: 20px;
	text-decoration: none;
}

.primary-menu > li > a:hover,
.primary-menu > li > a:focus,
.primary-menu > li:hover > a {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: none;
}

/* Elementor's caret-down, after "More…" */
.primary-menu .menu-item-has-children > a::after {
	content: "";
	width: 1em;
	height: 1em;
	margin-inline-start: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.primary-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 12em;
	width: max-content;
	border: var(--cccarchives-rule);
	border-top: 0;
}

/* The last item's dropdown opens leftwards, as SmartMenus flipped live's to
   keep "Vestry Minutes, Reports, and Documents" on screen. */
.primary-menu > li:last-child > .sub-menu {
	left: auto;
	right: 0;
}

.primary-menu > li:hover > .sub-menu,
.primary-menu > li:focus-within > .sub-menu {
	display: block;
}

.primary-menu .sub-menu li + li {
	border-top: var(--cccarchives-rule);
}

.primary-menu .sub-menu a {
	display: block;
	padding: 25px;
	background: var(--wp--preset--color--panel-item);
	color: var(--wp--preset--color--ink);
	font-size: 18px;
	line-height: 20px;
	white-space: nowrap;
	text-decoration: none;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus,
.primary-menu .sub-menu .current-menu-item > a {
	background: var(--wp--preset--color--panel-hover);
	color: var(--wp--preset--color--accent);
}

.nav-toggle,
.submenu-toggle {
	display: none;
}

/* Below 768: live's hamburger, and the menu as a full-width list that
   pushes the page down. */
@media (max-width: 767px) {
	.site-navigation {
		padding-block: 15px;
	}

	.nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 33px;
		height: 33px;
		margin-inline: auto;
		padding: 5.5px;
		border: 0;
		border-radius: 3px;
		background: var(--wp--preset--color--panel);
		color: var(--wp--preset--color--ink);
	}

	.nav-toggle:hover,
	.nav-toggle:focus {
		background: var(--wp--preset--color--panel);
		color: var(--wp--preset--color--ink);
	}

	.nav-toggle svg {
		width: 22px;
		height: 22px;
		fill: currentColor;
	}

	.nav-toggle .icon-close,
	.site-navigation[data-open="true"] .nav-toggle .icon-open {
		display: none;
	}

	.site-navigation[data-open="true"] .nav-toggle .icon-close {
		display: block;
	}

	.primary-menu {
		display: none;
		margin-top: 15px !important;
		margin-bottom: -15px !important;
		border-top: var(--cccarchives-rule);
	}

	.site-navigation[data-open="true"] .primary-menu {
		display: block;
	}

	.primary-menu li {
		border-bottom: var(--cccarchives-rule);
	}

	.primary-menu > li + li {
		margin-inline-start: 0;
	}

	.primary-menu li:last-child {
		border-bottom: 0;
	}

	.primary-menu > li > a,
	.primary-menu .sub-menu a {
		justify-content: center;
		padding: 25px;
		background: var(--wp--preset--color--panel-item);
		color: var(--wp--preset--color--ink);
		text-align: center;
	}

	.primary-menu > li > a:hover,
	.primary-menu > li > a:focus,
	.primary-menu > li:hover > a,
	.primary-menu .current-menu-item > a {
		background: var(--wp--preset--color--panel-hover);
		color: var(--wp--preset--color--accent);
	}

	.primary-menu .sub-menu {
		position: static;
		width: auto;
		min-width: 0;
		border: 0;
		border-top: var(--cccarchives-rule);
	}

	.primary-menu > li:hover > .sub-menu,
	.primary-menu > li:focus-within > .sub-menu {
		display: none;
	}

	.primary-menu > li[data-open="true"] > .sub-menu {
		display: block;
	}

	.primary-menu .sub-menu li + li {
		border-top: 0;
	}
}

/* --- The title band --- */

/* flow-root: on phones the band has no vertical padding, and the title's
   25px would otherwise collapse out of it. */
.band {
	display: flow-root;
	padding: var(--cccarchives-gutter);
	background: var(--wp--preset--color--accent);
}

.band-title {
	max-width: var(--cccarchives-wide);
	margin: 25px auto;
	color: var(--wp--preset--color--white);
	font-size: 40px;
	line-height: 1;
	text-align: center;
}

.band--loose .band-title {
	margin-block: 50px;
}

@media (max-width: 767px) {
	.band {
		padding-block: 0;
	}
}

/* --- Hello's page header, on its own templates --- */

.page-header .entry-title {
	font-size: 40px;
}

/* Hello underlines links in .page-content, but the Kit's link rule loads
   after it and wins: no underline until hover, as everywhere else. */

/* A result's featured image, as a banner: Hello's crop. */
.page-content .post .wp-post-image {
	width: 100%;
	max-height: 500px;
	object-fit: cover;
}

@media (max-width: 991px) {
	.page-content .post .wp-post-image {
		max-height: 400px;
	}
}

@media (max-width: 575px) {
	.page-content .post .wp-post-image {
		max-height: 300px;
	}
}

/* A password-protected page (Submit Document is one): Hello's box. */
.post-password-form {
	max-width: 500px;
	margin: 50px auto;
}

.post-password-form p:empty {
	display: none;
}

.archive-description p:last-child {
	margin-bottom: 0;
}

.pagination {
	display: flex;
	justify-content: space-between;
	margin-block: 20px;
}

/* --- Footer --- */

.site-footer {
	padding-inline: var(--cccarchives-gutter);
	border: var(--cccarchives-rule);
	background: var(--wp--preset--color--panel);
}

.site-footer__inner {
	display: flex;
	justify-content: space-between;
	max-width: var(--cccarchives-wide);
	margin-inline: auto;
	padding-block: 30px;
}

@media (max-width: 767px) {
	.site-footer__inner {
		flex-direction: column;
		align-items: center;
		gap: 30px;
		text-align: center;
	}
}