/*
 * Heller Funeral Home look, layered on Twenty Twenty-One. Colors follow the
 * sign out front: burgundy, antique gold, warm ivory.
 *
 * Selectors that start with `body` outrank the Customizer's Additional CSS
 * (which still sets #masthead and .widget-area backgrounds).
 */

:root {
	--heller--burgundy: #6e1a24;
	--heller--burgundy-dark: #4a1118;
	--heller--gold: #b8955a;
	--heller--gold-light: #e3cf9f;
	--heller--ivory: #faf7f1;
	--heller--paper: #fff;
	--heller--ink: #2e2926;
	--heller--muted: #6b625b;
	--heller--rule: #e4dccd;

	--global--font-primary: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--global--font-secondary: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--global--font-size-base: 1.1875rem;
	--global--font-size-xxl: 3.5rem;
	--global--line-height-heading: 1.2;

	--global--color-primary: var(--heller--ink);
	--global--color-secondary: var(--heller--muted);
	--global--color-primary-hover: var(--heller--burgundy);
	--global--color-background: var(--heller--ivory);
	--global--color-border: var(--heller--rule);

	--heading--font-weight: 500;
	--heading--font-weight-page-title: 500;
	--heading--font-weight-strong: 600;

	--wp--style--color--link: var(--heller--burgundy);
	--primary-nav--color-link: var(--heller--ink);
	--primary-nav--color-link-hover: var(--heller--burgundy);
	--primary-nav--font-family: var(--global--font-secondary);
	--primary-nav--font-size: 0.875rem;
	--primary-nav--font-weight: 600;
	--primary-nav--font-family-mobile: var(--global--font-secondary);
	--primary-nav--font-size-mobile: 1.125rem;
	--primary-nav--font-size-sub-menu-mobile: 1rem;

	--entry-header--color: var(--heller--burgundy-dark);
	--entry-header--color-hover: var(--heller--burgundy);

	--button--color-background: var(--heller--burgundy);
	--button--color-text: #fff;
	--button--color-text-hover: var(--heller--burgundy);
	--button--color-background-active: #fff;
	--button--font-family: var(--global--font-secondary);
	--button--font-size: 1rem;
	--button--border-width: 2px;
	--button--border-radius: 3px;
	--button--padding-vertical: 12px;

	--form--border-width: 1px;
	--form--border-radius: 3px;
	--form--border-color: #c9bfb0;

	--footer--font-family: var(--global--font-secondary);
	--footer--font-size: 1rem;
}

body {
	background: var(--heller--ivory);
	color: var(--heller--ink);
}

a {
	color: var(--heller--burgundy);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--heller--burgundy-dark);
	text-decoration-color: var(--heller--gold);
}

/* Address and phone strip above the header. */
.heller-topbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
	padding: 0.5rem 4rem;
	background: var(--heller--burgundy-dark);
	color: var(--heller--gold-light);
	font-family: var(--global--font-secondary);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

.heller-topbar a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.heller-topbar a:hover {
	color: var(--heller--gold-light);
	text-decoration: underline;
}

/* Header */
body #masthead {
	position: relative;
	align-items: center;
	margin: 0;
	padding: 1.75rem 4rem;
	width: 100%;
	max-width: none;
	background: var(--heller--paper);
	border-bottom: 1px solid var(--heller--rule);
	box-shadow: 0 1px 0 var(--heller--paper), 0 4px 0 -1px var(--heller--gold);
}

.site-title {
	font-family: var(--global--font-primary);
	font-size: 2.25rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--heller--burgundy);
	margin-bottom: 0.15rem;
}

.site-title a,
.site-title a:link,
.site-title a:visited {
	color: var(--heller--burgundy);
	text-decoration: none;
}

.site-description {
	color: var(--heller--muted);
	font-family: var(--global--font-primary);
	font-size: 1.3rem;
	font-style: italic;
	max-width: 34em;
}

.primary-navigation a {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.primary-navigation a:link,
.primary-navigation a:visited {
	text-decoration: none;
}

.primary-navigation .current-menu-item > a:first-child,
.primary-navigation .current_page_item > a:first-child {
	text-decoration: underline;
	text-decoration-color: var(--heller--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
	color: var(--heller--burgundy);
}

.primary-navigation > div > .menu-wrapper .sub-menu {
	background: var(--heller--paper);
	border: 1px solid var(--heller--rule);
	box-shadow: 0 6px 18px rgba(46, 41, 38, 0.08);
}

/* Content */
.site-main {
	padding-top: calc(2.5 * var(--global--spacing-vertical));
}

.home .site-main {
	padding-top: calc(1.5 * var(--global--spacing-vertical));
}

h1, h2, h3, h4,
.entry-title,
.page-title {
	color: var(--heller--burgundy-dark);
}

.singular .entry-header {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: calc(2 * var(--global--spacing-vertical));
	text-align: center;
}

.singular .entry-header::after {
	content: "";
	display: block;
	width: 6rem;
	height: 2px;
	margin: 1.5rem auto 0;
	background: var(--heller--gold);
}

.home .entry-header::after {
	display: none;
}

.entry-content img,
.wp-block-image img {
	border-radius: 3px;
}

.home .entry-content > .wp-block-image:first-child img,
.home .entry-content > figure:first-child img {
	box-shadow: 0 10px 30px rgba(46, 41, 38, 0.18);
}

.wp-block-pullquote {
	border-top: 1px solid var(--heller--gold);
	border-bottom: 1px solid var(--heller--gold);
	color: var(--heller--burgundy-dark);
}

.wp-block-pullquote blockquote p,
.wp-block-pullquote p {
	font-family: var(--global--font-primary);
	font-style: italic;
	font-weight: 500;
}

.wp-block-pullquote::before {
	color: var(--heller--gold);
}

hr,
.wp-block-separator {
	border-color: var(--heller--rule);
}

.entry-content ul li::marker {
	color: var(--heller--gold);
}

/* Obituary listings and other archives: one card per entry. */
.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article,
.site-main .wp-block-latest-posts > li {
	background: var(--heller--paper);
	border: 1px solid var(--heller--rule);
	border-radius: 4px;
	padding: 1.5rem 1.75rem;
	box-shadow: 0 1px 2px rgba(46, 41, 38, 0.04);
}

.site-main .wp-block-latest-posts:not(.is-grid) > li {
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.site-main .wp-block-latest-posts__post-title {
	font-family: var(--global--font-primary);
	font-size: 1.75rem;
	font-weight: 600;
	text-decoration: none;
}

.site-main .wp-block-latest-posts__post-date {
	color: var(--heller--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
}

.wp-block-latest-posts__featured-image img {
	border-radius: 3px;
}

.entry-footer,
.posted-on {
	color: var(--heller--muted);
}

/* Footer: widgets and the colophon share one dark band. */
body .widget-area,
body .site-footer {
	margin: 0;
	width: 100%;
	max-width: none;
	padding-left: 4rem;
	padding-right: 4rem;
	background: var(--heller--burgundy-dark);
	color: #efe7da;
}

body .widget-area {
	margin-top: calc(4 * var(--global--spacing-vertical));
	padding-top: calc(2 * var(--global--spacing-vertical));
	padding-bottom: var(--global--spacing-vertical);
	border-top: 4px solid var(--heller--gold);
}

.widget-area h2,
.widget-area .widget-title,
.widget-area .wp-block-search__label,
.widget-area .wp-block-heading {
	color: var(--heller--gold-light);
	font-family: var(--global--font-primary);
	font-size: 1.5rem;
	font-weight: 600;
}

.widget-area a,
.widget-area a:link,
.widget-area a:visited,
.site-footer a,
.site-footer a:link,
.site-footer a:visited {
	color: #fff;
	text-decoration-color: rgba(227, 207, 159, 0.5);
}

.widget-area a:hover,
.site-footer a:hover {
	color: var(--heller--gold-light);
}

.widget-area .wp-block-search__input {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 3px 0 0 3px;
	background: #fff;
}

.widget-area .wp-block-search__button {
	background: var(--heller--gold);
	border-color: var(--heller--gold);
	color: var(--heller--burgundy-dark);
	border-radius: 0 3px 3px 0;
	font-weight: 600;
}

body .site-footer {
	padding-bottom: 2rem;
}

.widget-area .wp-block-archives-list li,
.widget-area .wp-block-latest-posts li {
	margin-top: 0.15rem;
	margin-bottom: 0.15rem;
	font-size: 0.95rem;
}

body .site-footer > .site-info {
	border-top: 1px solid rgba(227, 207, 159, 0.3);
	color: #d8cdbd;
}

.site-footer > .site-info .site-name {
	font-family: var(--global--font-primary);
	font-size: 1.25rem;
	text-transform: none;
}

@media only screen and (max-width: 821px) {

	.heller-topbar,
	body #masthead,
	body .widget-area,
	body .site-footer {
		padding-left: var(--global--spacing-horizontal);
		padding-right: var(--global--spacing-horizontal);
	}

	.heller-topbar {
		justify-content: center;
		text-align: center;
	}

	.site-title {
		font-size: 1.85rem;
	}
}

@media only screen and (max-width: 481px) {

	.heller-topbar {
		font-size: 0.8rem;
	}

	/* Only the title needs to clear the Menu button; the tagline runs full width. */
	body #masthead .site-branding {
		max-width: none;
		width: 100%;
		margin-right: 0;
	}

	.site-title {
		padding-right: 110px;
	}

	.site-description {
		font-size: 1.1rem;
		max-width: none;
	}

	.primary-navigation > div > .menu-wrapper .sub-menu {
		border: 0;
		box-shadow: none;
		background: transparent;
	}
}