/**
 * Theme Name:       Visit Sleepy Hollow
 * Theme URI:        https://visitsleepyhollow.com/
 * Description:      Visit Sleepy Hollow child theme for Mai Theme.
 * Author:           BizBudding
 * Author URI:       https://bizbudding.com/
 * Version:          2.2.0
 * Text Domain:      visitsleepyhollow
 * Template:         genesis
 * Template Version: 3.6.0
 * License:          GPL-2.0-or-later
 * License URI:      http://www.gnu.org/licenses/gpl-2.0.html
 */

/* Menus and buttons in the heading font, bold. Secondary buttons in the light neutral blue. */
:root {
	--menu-font-weight: var(--heading-font-weight);
	--button-font-family: var(--heading-font-family);
	--button-font-weight: var(--heading-font-weight);
	--button-font-size: var(--font-size-lg);
	--button-text-transform: uppercase;
	--button-letter-spacing: 1px;
}

/* Mai writes the font name unquoted, and "Source Sans 3" is not valid CSS that way
 * because a word starts with a digit. Quoted here, with a fallback. Doubled :root
 * so it wins over Mai's inline :root. */
:root:root {
	--body-font-family: "Source Sans 3", sans-serif;

	/* Mai prints its own secondary button colors in the same inline :root, so these ride along here. */
	--button-secondary-background: var(--color-neutral);
	--button-secondary-background-hover: color-mix(in srgb, var(--color-neutral), var(--color-secondary) 15%);
	--button-secondary-color: var(--color-secondary);
	--button-secondary-color-hover: var(--color-secondary);
}

/* Page titles wear the old-book face. Everything else is Crimson Pro. */
h1,
.site-title {
	font-family: var(--alt-font-family);
	font-weight: var(--alt-font-weight);
	letter-spacing: 0.01em;
}

/* Footer sits on night blue, so links stay white and warm up on hover. */
.site-footer a {
	color: var(--color-white);
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--color-custom-2);
}

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

.site-footer li {
	margin-block-end: var(--spacing-xs);
}

/* Calendar views print the original upload at any shape. Hold them to 3:2 like every other card. */
.tribe-events-calendar-list__event-featured-image,
.tribe-events-calendar-day__event-featured-image,
.tribe-events-pro-photo__event-featured-image,
.tribe-events-event-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Single listing facts block. */
.vsh-facts {
	display: grid;
	gap: var(--spacing-sm);
	margin-block-end: var(--spacing-lg);
	padding: var(--spacing-md);
	background: var(--color-alt);
	border-radius: var(--border-radius);
}

.vsh-facts .mai-address-item {
	display: inline;
}

.vsh-facts .mai-address-item + .mai-address-item::before {
	content: ", ";
}

.vsh-fact-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
}

.vsh-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vsh-badge {
	padding: 0.15em 0.6em;
	border: 1px solid var(--color-secondary);
	border-radius: 999px;
	font-size: var(--font-size-sm);
	color: var(--color-secondary);
}

/* Event titles turn pumpkin on hover, with no underline. */
.tribe-common .tribe-common-anchor-thin {
	transition: var(--tec-transition-color);

	&:is(:hover, :focus, :active) {
		border-bottom-color: transparent;
		color: var(--tec-color-accent-primary);
	}
}

/* The Events Calendar's colors, set here too so they are right on first paint.
 * TEC prints its own copy of these from its Customizer settings, but only partway
 * down the page, so buttons flashed its default blue first. */
:root {
	--tec-color-text-events-title: var(--color-heading);
	--tec-color-text-event-title: var(--color-heading);
	--tec-color-text-event-date: var(--color-body);
	--tec-color-text-secondary-event-date: var(--color-body);
	--tec-color-link-primary: var(--color-primary);
	--tec-color-link-accent: var(--color-primary);
	--tec-color-link-accent-hover: color-mix(in srgb, var(--color-primary) 80%, transparent);
	--tec-color-accent-primary: var(--color-primary);
	--tec-color-accent-primary-hover: color-mix(in srgb, var(--color-primary) 80%, transparent);
	--tec-color-accent-primary-active: color-mix(in srgb, var(--color-primary) 90%, transparent);
	--tec-color-accent-primary-multiday: color-mix(in srgb, var(--color-primary) 24%, transparent);
	--tec-color-accent-primary-multiday-hover: color-mix(in srgb, var(--color-primary) 34%, transparent);
	--tec-color-accent-primary-background: color-mix(in srgb, var(--color-primary) 7%, transparent);
	--tec-color-accent-primary-background-datepicker: var(--color-primary);
	--tec-color-background-secondary-datepicker: color-mix(in srgb, var(--color-primary) 50%, transparent);
	--tec-color-button-primary: var(--color-primary);
	--tec-color-button-primary-hover: color-mix(in srgb, var(--color-primary) 80%, transparent);
	--tec-color-button-primary-active: color-mix(in srgb, var(--color-primary) 90%, transparent);
	--tec-color-button-primary-background: color-mix(in srgb, var(--color-primary) 7%, transparent);
	--tec-color-day-marker-current-month: var(--color-primary);
	--tec-color-day-marker-current-month-hover: color-mix(in srgb, var(--color-primary) 80%, transparent);
	--tec-color-day-marker-current-month-active: color-mix(in srgb, var(--color-primary) 90%, transparent);
	--tec-color-background-primary-multiday: color-mix(in srgb, var(--color-primary) 24%, transparent);
	--tec-color-background-primary-multiday-hover: color-mix(in srgb, var(--color-primary) 34%, transparent);
	--tec-color-background-primary-multiday-active: color-mix(in srgb, var(--color-primary) 34%, transparent);
	--tec-color-background-secondary-multiday: color-mix(in srgb, var(--color-primary) 24%, transparent);
	--tec-color-background-secondary-multiday-hover: color-mix(in srgb, var(--color-primary) 34%, transparent);
	--tec-color-background-events-bar-submit-button: var(--color-primary);
	--tec-color-background-events-bar-submit-button-hover: color-mix(in srgb, var(--color-primary) 80%, transparent);
	--tec-color-background-events-bar-submit-button-active: color-mix(in srgb, var(--color-primary) 90%, transparent);
}

/* A wide separator in a flex row fills only the space left over, so the heading and
 * button beside it keep their width until the row runs out of room. */
.is-layout-flex > .wp-block-separator.is-style-wide {
	flex: 1 1 0;
	min-width: var(--spacing-lg);
}

.is-layout-flex:has(> .wp-block-separator.is-style-wide) .wp-block-button__link {
	white-space: nowrap;
}

/* Mai gives every Read more style its small size except Link Button, which then
 * takes the full button size. */
.entry-more-link.button-link {
	--button-font-size: var(--button-small-font-size, 0.8rem);
}

/* Balanced line breaks, so paragraphs and headings don't end on one stray word. */
:is(h1, h2, h3, h4, h5, h6, p) {
	text-wrap: pretty;
}

/* A photo straight after a button row sat flush against the buttons. */
.entry-content > .wp-block-buttons + .wp-block-image {
	margin-block-start: var(--spacing-lg);
}

/* Every ad placed in content, wrapped by includes/ads.php. */
.vsh-sponsored {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xs);
	margin-block: var(--spacing-xl);
}

.vsh-sponsored__label {
	margin: 0;
	font-size: var(--font-size-sm);
	font-variant-caps: all-small-caps;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

/* Media & Text in content: space like a section, and the text lines up with the page edge
 * instead of carrying core's padding on both sides. Core stacks it below 600px. */
.entry-content > .wp-block-media-text {
	margin-block: var(--spacing-xxl);
}

.entry-content > .wp-block-media-text > .wp-block-media-text__content {
	padding-block: 0;
	padding-inline: var(--spacing-xl) 0;
}

.entry-content > .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
	padding-inline: 0 var(--spacing-xl);
}

@media (max-width: 600px) {
	.entry-content > .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding: var(--spacing-md) 0 0;
	}
}