/*
Theme Name: Maryland Humanities
Theme URI: https://github.com/The-Devoted/md-humanities
Author: The Devoted / Jenny Slaughter
Author URI: https://the-devoted.com/
Description: A custom block theme created especially for Maryland Humanities, based on the Frost theme by WP Engine.
Requires at least: 6.5
Tested up to: 6.5.2
Requires PHP: 7.0
Version: 1.0.9
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: mdhumanities
*/


/* Defaults
---------------------------------------- */

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

html {
	scroll-behavior: smooth;
}

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
	transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
}

b,
strong,
th {
	font-weight: var(--wp--custom--font-weight--semi-bold);
}

mark {
	background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 100%);
	background-position: 0 85%;
	background-repeat: repeat-x;
	background-size: 100% 15%;
}

/* -- Forms -- */

input,
select,
textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: var(--wp--custom--line-height--body);
	padding: 10px 20px;
	width: 100%;
}

input:focus,
textarea:focus {
	background-color: var(--wp--preset--color--neutral);
	outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
}

::placeholder {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.5;
}

/* Blocks
---------------------------------------- */

/* -- Code -- */

*:not(.wp-block-code) > code {
	background-color: var(--wp--preset--color--neutral);
	font-size: var(--wp--preset--font-size--small);
	padding: 5px 8px;
}

/* Utility
---------------------------------------- */

/* -- Box Shadow -- */

.is-style-shadow-light {
	box-shadow: var(--wp--preset--shadow--light);
}

.is-style-shadow-solid {
	box-shadow: var(--wp--preset--shadow--solid);
}

/* Media Queries
---------------------------------------- */

@media only screen and (min-width: 782px) {

	/* -- Utility -- */

	.is-style-hidden-large {
		display: none !important;
	}

}

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

	/* -- Utility -- */

	.is-style-hidden-mobile {
		display: none !important;
	}

}

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

	/* -- Columns -- */

	.is-style-columns-reverse {
		flex-direction: column-reverse;
	}

}

/* --------------------------------------- */
/* MDH Blocks
/* --------------------------------------- */

/* -- Footer -- */
/* -- Tweak the column order on small screens -- */

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

	.mdh--footer > .wp-block-columns > .wp-block-column:first-child {
		order: 1;
	}

	.mdh--footer > .wp-block-columns > .wp-block-column:nth-child(2) {
		order: 3;
	}

	.mdh--footer > .wp-block-columns > .wp-block-column:nth-child(3) {
		order: 2;
	}

	.mdh--footer > .wp-block-columns > .wp-block-column:nth-child(4) {
		order: 4;
	}
}


/* -- Carousel Nav Items -- */

.wp-block-cb-carousel-v2 {
	/* See https://wordpress.org/plugins/carousel-block/ for full var list. */
	/* Vars are defined in the Custom section of theme.json. */

/* Customizations for MDH */

	/* Emulate button style for nav arrows */
	& .cb-button-next,
	& .cb-button-prev {
		border: 3px solid var(--wp--preset--color--primary-default);
		background-color: var(--wp--preset--color--neutral-true-white);
		padding: 1.5rem;
	}

	/* Prevent buttons from overlaying content */
	& .cb-slide > .wp-block-group {
		padding-left: 3rem;
		padding-right: 3rem;
	}

	/* Option to relocate the nav arrows:
			nav-above = nav in top right corner.
			nav-below = nav in bottom left corner.
	*/
	&.mdh--carousel-nav-above {
		margin-top: calc(0.8rem + var(--wp--custom--carousel-block--mdh-nav-above-below-offset));
		& .cb-button-next,
		& .cb-button-prev {
			top: calc(var(--wp--custom--carousel-block--mdh-nav-above-below-offset) * -1);
			bottom: auto;
		}
		& .cb-button-prev {
			right: var(--wp--custom--carousel-block--mdh-nav-above-below-gap);
			left: auto;
		}
		& .cb-button-next {
			right: 0;
			left: auto;
		}
	}

	&.mdh--carousel-nav-below {
		margin-bottom: calc(2rem + var(--wp--custom--carousel-block--mdh-nav-above-below-offset));
		& .cb-button-next,
		& .cb-button-prev {
			top: auto;
			bottom: calc((var(--wp--custom--carousel-block--mdh-nav-above-below-offset) * -1) - var(--wp--custom--carousel-block--navigation-size));
		}
		& .cb-button-prev {
			right: auto;
			left: 0;
		}
		& .cb-button-next {
			right: auto;
			left: var(--wp--custom--carousel-block--mdh-nav-above-below-gap);
		}
	}
}

/* Optional class to hide carousel nav on small screens */
@media only screen and (max-width: 781px) {
	.wp-block-cb-carousel-v2.mdh--carousel-hide-nav-mobile .cb-button-next,
	.wp-block-cb-carousel-v2.mdh--carousel-hide-nav-mobile .cb-button-prev {
		display: none;
	}

	.wp-block-cb-carousel-v2.wp-block-cb-carousel-v2.mdh--carousel-hide-nav-mobile .cb-slide > .wp-block-group {
		padding: 0;
	}
}

/* --------------------------------------- */
/* Events Calendar Plugin -  Style Overrides

Although MT does provide a "skeleton styles" option (see link below), but it
isn't compatible with FSE sites. Should the plugin be updated to be compatible
with modern WordPress, as it is now 2025 and FSE has been in practice since
2022, this block of overrides may become superfluous and can be deleted.

/* Skeleton Styles details: /*
https://theeventscalendar.com/knowledgebase/basic-template-settings/#h-default-stylesheet-used-for-events-templates
/* --------------------------------------- */

.tribe-events-view {
	background-color: unset !important;
}

.tribe-common section {
	border: unset !important;
	margin: unset !important;
}

.tribe-events .tribe-events-l-container {
	min-height: unset !important;
	padding-bottom: unset !important;
	padding-top: unset !important;
}

.tribe-common .tribe-common-l-container {
	padding-left: unset !important;
	padding-right: unset !important;
}

.tribe-common .tribe-common-l-container {
	margin-left: unset !important;
	margin-right: unset !important;
	max-width: unset !important;
	width: unset !important;
}

/* Prevent side-scrolling overflow */
/* (Layout controlled by existing wp tools) */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-row,
.tribe-events .tribe-events-header,
.tribe-common .tribe-common-g-row--gutters {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.tribe-events .tribe-events-calendar-list__event-wrapper {
	flex: auto !important;
}

/* Use correct font for headings */
.tribe-common .tribe-common-h1,
.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h4,
.tribe-common .tribe-common-h5,
.tribe-common .tribe-common-h6,
.tribe-common .tribe-common-h7,
.tribe-common .tribe-common-h8 {
	font-family: var(--wp--preset--font-family--secondary) !important;
}


/* Override Variables */

/* This is - to my (JCS) knowledge - the full The Events Calendar (TEC)
variables list. These have all been appended with !important so they are able to
override the inline variable definitions from the plugin's full styles. BUT not
every variable has been reset from the original TEC value. I've put the full set
here, instead of *just* the currently-overwritten ones, to streamline the
process of additional de-theming.
*/

:root {
	--tec-color-text-events-title-day: var(--tec-color-text-events-title) !important;
	--tec-color-text-events-title-latest-past: var(--tec-color-text-events-title) !important;
	--tec-color-text-event-title-list: var(--tec-color-text-events-title) !important;
	--tec-color-text-events-title-month-multiday: var(--tec-color-text-events-title) !important;
	--tec-color-text-events-title-widget-list: var(--tec-color-text-events-title) !important;
	--tec-color-text-secondary-event-date-month: var(--tec-color-text-secondary-event-date) !important;
	--tec-color-text-secondary-event-date-month-mobile: var(--tec-color-text-secondary-event-date-month) !important;
	--tec-color-text-day-of-week-month: var(--tec-color-text-secondary) !important;
	--tec-color-day-marker-month: var(--tec-color-text-primary) !important;
	--tec-color-day-marker-month-hover: var(--tec-color-text-primary-hover) !important;
	--tec-color-day-marker-month-active: var(--tec-color-text-primary-active) !important;
	--tec-color-day-marker-current-month: var(--tec-color-day-marker-month) !important;
	--tec-color-day-marker-current-month-hover: var(--tec-color-day-marker-month-hover) !important;
	--tec-color-day-marker-current-month-active: var(--tec-color-day-marker-month-active) !important;
	--tec-color-day-marker-past-month: var(--tec-color-text-primary) !important;
	--tec-color-day-marker-past-month-hover: var(--tec-color-day-marker-past-month) !important;
	--tec-color-day-marker-past-month-active: var(--tec-color-day-marker-past-month) !important;
	--tec-color-text-day-of-week-week: var(--tec-color-text-secondary) !important;
	--tec-border-radius-month-multiday: 9.5px !important;
	--tec-color-border-secondary-month-grid: var(--tec-color-border-secondary) !important;
	--tec-color-border-active-month-grid-hover: var(--tec-color-border-active) !important;
	--tec-color-background-month-grid: #0000 !important;
	--tec-color-background-tooltip: var(--tec-color-background) !important;
	--tec-color-text-events-bar-input: var(--tec-color-text-primary) !important;
	--tec-color-text-events-bar-input-placeholder: var(--tec-color-text-secondary) !important;
	--tec-opacity-events-bar-input-placeholder: var(--tec-opacity-default) !important;
	--tec-color-border-events-bar: var(--tec-color-border-secondary) !important;
	--tec-color-background-events-bar: var(--tec-color-background) !important;
	--tec-color-background-view-selector: var(--tec-color-background-events-bar) !important;
	--tec-color-background-view-selector-tabs: var(--tec-color-background-view-selector) !important;
	--tec-color-background-view-selector-list-item-hover: var(--tec-color-background-secondary) !important;
	--tec-color-background-subscribe-list-item-hover: var(--tec-color-background-secondary) !important;
	--tec-color-text-view-selector-list-item: var(--tec-color-text-primary) !important;
	--tec-color-text-view-selector-list-item-hover: var(--tec-color-accent-secondary-hover) !important;
	--tec-color-background-search-container: var(--tec-color-background-events-bar) !important;
	--tec-color-text-events-bar-submit-button: var(--tec-color-background) !important;
	--tec-color-text-events-bar-submit-button-active: var(--tec-color-text-events-bar-submit-button) !important;
	--tec-color-text-events-bar-submit-button-hover: var(--tec-color-text-events-bar-submit-button) !important;
	--tec-color-background-events-bar-submit-button: var(--tec-color-button-primary) !important;
	--tec-color-background-events-bar-submit-button-hover: var(--tec-color-button-primary-hover) !important;
	--tec-color-background-events-bar-submit-button-active: var(--tec-color-button-primary-active) !important;
	--tec-color-icon-events-bar: var(--tec-color-icon-primary) !important;
	--tec-color-icon-events-bar-active: var(--tec-color-icon-active) !important;
	--tec-color-icon-events-bar-hover: var(--tec-color-icon-hover) !important;

	--tec-border-radius-default: 0 !important;
	--tec-border-width-week-event: 2px !important;
	--tec-box-shadow-default: 0 2px 5px 0 var(--tec-color-box-shadow) !important;
	--tec-box-shadow-tooltip: 0 2px 12px 0 var(--tec-color-box-shadow) !important;
	--tec-box-shadow-card: 0 1px 6px 2px var(--tec-color-box-shadow) !important;
	--tec-box-shadow-multiday: 16px 6px 6px -2px var(--tec-color-box-shadow-secondary) !important;

	/* Forms */
	--tec-form-color-background: var(--tec-color-background) !important;
	--tec-form-color-border-default: var(--tec-color-text-primary) !important;
	--tec-form-color-border-active: var(--tec-color-accent-secondary) !important;
	--tec-form-color-border-secondary: var(--tec-color-border-tertiary) !important;
	--tec-form-color-accent-primary: var(--tec-color-accent-primary) !important;
	--tec-form-box-shadow-default: var(--tec-box-shadow-default) !important;

	/* Opacities */
	--tec-opacity-background: 0.07 !important;
	--tec-opacity-select-highlighted: 0.3 !important;
	--tec-opacity-icon-hover: 0.8 !important;
	--tec-opacity-icon-active: 0.9 !important;
	--tec-opacity-default: 1 !important;

	/* Transitions */
	--tec-transition: all 0.2s ease !important;
	--tec-transition-background-color: background-color 0.2s ease !important;
	--tec-transition-color-border-color: color 0.2s ease, border-color 0.2s ease !important;
	--tec-transition-transform: transform 0.2s ease !important;
	--tec-transition-border-color: border-color 0.2s ease !important;
	--tec-transition-color: color 0.2s ease !important;
	--tec-transition-opacity: opacity 0.2s ease !important;

	/* Typography */
	--tec-font-family-sans-serif: var(--wp--preset--font-family--primary) !important;
	--tec-font-weight-regular: 400 !important;
	--tec-font-weight-bold: 700 !important;
	--tec-font-size-0: 11px !important;
	--tec-font-size-1: 12px !important;
	--tec-font-size-2: 14px !important;
	--tec-font-size-3: 16px !important;
	--tec-font-size-4: 18px !important;
	--tec-font-size-5: 20px !important;
	--tec-font-size-6: 22px !important;
	--tec-font-size-7: 24px !important;
	--tec-font-size-8: 28px !important;
	--tec-font-size-9: 32px !important;
	--tec-font-size-10: 42px !important;
	--tec-line-height-0: 1.38 !important;
	--tec-line-height-1: 1.42 !important;
	--tec-line-height-2: 1.5 !important;
	--tec-line-height-3: 1.62 !important;

	/* Spacing */
	--tec-grid-gutter: 48px !important;
	--tec-grid-gutter-negative: calc(var(--tec-grid-gutter) * -1) !important;
	--tec-grid-gutter-half: calc(var(--tec-grid-gutter) / 2) !important;
	--tec-grid-gutter-half-negative: calc(var(--tec-grid-gutter-half) * -1) !important;
	--tec-grid-gutter-small: 42px !important;
	--tec-grid-gutter-small-negative: calc(var(--tec-grid-gutter-small) * -1) !important;
	--tec-grid-gutter-small-half: calc(var(--tec-grid-gutter-small) / 2) !important;
	--tec-grid-gutter-small-half-negative: calc(var(--tec-grid-gutter-small-half) * -1) !important;
	--tec-grid-gutter-page: 42px !important;
	--tec-grid-gutter-page-small: 19.5px !important;
	--tec-grid-width-default: 1176px !important;
	--tec-grid-width-min: 320px !important;
	--tec-grid-width: calc(var(--tec-grid-width-default) + var(--tec-grid-gutter-page) * 2) !important;
	--tec-grid-width-1-of-2: 50% !important;
	--tec-grid-width-1-of-3: 33.333% !important;
	--tec-grid-width-1-of-4: 25% !important;
	--tec-grid-width-1-of-5: 20% !important;
	--tec-grid-width-1-of-7: 14.285% !important;
	--tec-grid-width-1-of-8: 12.5% !important;
	--tec-grid-width-1-of-9: 11.111% !important;
	--tec-spacer-0: 4px !important;
	--tec-spacer-1: 8px !important;
	--tec-spacer-2: 12px !important;
	--tec-spacer-3: 16px !important;
	--tec-spacer-4: 20px !important;
	--tec-spacer-5: 24px !important;
	--tec-spacer-6: 28px !important;
	--tec-spacer-7: 32px !important;
	--tec-spacer-8: 40px !important;
	--tec-spacer-9: 48px !important;
	--tec-spacer-10: 56px !important;
	--tec-spacer-11: 64px !important;
	--tec-spacer-12: 80px !important;
	--tec-spacer-13: 96px !important;
	--tec-spacer-14: 160px !important;

	/* Z-Index */
	--tec-z-index-spinner-container: 100 !important;
	--tec-z-index-views-selector: 30 !important;
	--tec-z-index-dropdown: 30 !important;
	--tec-z-index-events-bar-button: 20 !important;
	--tec-z-index-search: 10 !important;
	--tec-z-index-filters: 9 !important;
	--tec-z-index-scroller: 7 !important;
	--tec-z-index-week-event-hover: 5 !important;
	--tec-z-index-map-event-hover: 5 !important;
	--tec-z-index-map-event-hover-actions: 6 !important;
	--tec-z-index-multiday-event: 5 !important;
	--tec-z-index-multiday-event-bar: 2 !important;

	/* Colors */
	--tec-color-text-primary: var(--wp--preset--color--contrast) !important;
	--tec-color-text-primary-light: var(--wp--preset--color--neutral-dark) !important;
	--tec-color-text-secondary: var(--wp--preset--color--neutral-dark) !important;
	--tec-color-text-disabled: var(--wp--preset--color--neutral-light) !important;
	--tec-color-text-events-title: var(--tec-color-text-primary) !important;
	--tec-color-text-event-title: var(--tec-color-text-events-title) !important;
	--tec-color-text-event-date: var(--tec-color-text-primary) !important;
	--tec-color-text-secondary-event-date: var(--tec-color-text-secondary) !important;
	--tec-color-icon-primary: #5d5d5d !important;
	--tec-color-icon-primary-alt: #757575 !important;
	--tec-color-icon-secondary: #bababa !important;
	--tec-color-icon-active: #141827 !important;
	--tec-color-icon-disabled: #d5d5d5 !important;
	--tec-color-icon-focus: var(--wp--preset--color--primary-default) !important;
	--tec-color-icon-error: #da394d !important;
	--tec-color-event-icon: #141827 !important;
	--tec-color-event-icon-hover: var(--wp--preset--color--primary-default) !important;
	--tec-color-accent-primary: var(--wp--preset--color--primary-default) !important;
	--tec-color-accent-primary-hover: var(--wp--preset--color--primary-dark) !important;
	--tec-color-accent-primary-active: var(--wp--preset--color--primary-dark) !important;
	--tec-color-accent-primary-background: #334aff12 !important;
	--tec-color-accent-secondary: #141827 !important;
	--tec-color-accent-secondary-hover: #141827cc !important;
	--tec-color-accent-secondary-active: #141827e6 !important;
	--tec-color-accent-secondary-background: #14182712 !important;
	--tec-color-button-primary: var(--tec-color-accent-primary) !important;
	--tec-color-button-primary-hover: var(--tec-color-accent-primary-hover) !important;
	--tec-color-button-primary-active: var(--tec-color-accent-primary-active) !important;
	--tec-color-button-primary-background: var(--tec-color-accent-primary-background) !important;
	--tec-color-button-secondary: var(--tec-color-accent-secondary) !important;
	--tec-color-button-secondary-hover: var(--tec-color-accent-secondary-hover) !important;
	--tec-color-button-secondary-active: var(--tec-color-accent-secondary-active) !important;
	--tec-color-button-secondary-background: var(--tec-color-accent-secondary-background) !important;
	--tec-color-link-primary: var(--tec-color-text-primary) !important;
	--tec-color-link-accent: var(--tec-color-accent-primary) !important;
	--tec-color-link-accent-hover: var(--wp--preset--color--primary-dark) !important;
	--tec-color-border-default: #d5d5d5 !important;
	--tec-color-border-secondary: #e4e4e4 !important;
	--tec-color-border-tertiary: #7d7d7d !important;
	--tec-color-border-hover: #5d5d5d !important;
	--tec-color-border-active: #141827 !important;
	--tec-color-background: #fff !important;
	--tec-color-background-events: #0000 !important;
	--tec-color-background-transparent: #fff9 !important;
	--tec-color-background-secondary: #f7f6f6 !important;
	--tec-color-background-messages: #14182712 !important;
	--tec-color-background-secondary-hover: #f0eeee !important;
	--tec-color-background-error: #da394d14 !important;
	--tec-color-box-shadow: rgba(#000, 0.14) !important;
	--tec-color-box-shadow-secondary: rgba(#000, 0.1) !important;
	--tec-color-scroll-track: rgba(#000, 0.25) !important;
	--tec-color-scroll-bar: rgba(#000, 0.5) !important;
	--tec-color-background-primary-multiday: #334aff3d !important;
	--tec-color-background-primary-multiday-hover: #334aff57 !important;
	--tec-color-background-secondary-multiday: #1418273d !important;
	--tec-color-background-secondary-multiday-hover: #14182757 !important;
	--tec-color-accent-primary-week-event: #334aff1a !important;
	--tec-color-accent-primary-week-event-hover: #334aff33 !important;
	--tec-color-accent-primary-week-event-featured: #334aff0a !important;
	--tec-color-accent-primary-week-event-featured-hover: #334aff24 !important;
	--tec-color-background-secondary-datepicker: var(--tec-color-background-secondary) !important;
	--tec-color-accent-primary-background-datepicker: var(--tec-color-accent-primary-background) !important;
}


/* Event Feed Customization */

/* The TEC Events List block does not offer style control in FSE within the
block. We use these styles to customize the feed's look to match our design.
This is distinct from the above styles that unset Tribe's separate designs and
revert back to the MDH base. */

/* Should the plugin be updated in the future to either honor the "Skeleton
Styles" flag, or drop the inline stylesheet (see notes above), these !important
flags can be removed, because they are gross. */


/* Apply this class to a containing element via "Additional CSS Classes" in
block options pane. */
.mdh--tribe-event-feed {

	& .tribe-events-widget {
		margin-bottom: 0;

		/* Headline for Widget "Upcoming Events" */
		& .tribe-common-h6 {
			font-family: var(--wp--preset--font-family--primary) !important;
			font-size: var(--wp--preset--font-size--x-large);
			font-weight: var(--wp--custom--font-weight--semi-bold);
		}

		/* Event Rows */
		& .tribe-events-widget-events-list__event-row {
			border-top: 1px var(--wp--preset--color--neutral-light) solid;
			padding-top: var(--wp--preset--spacing--small);
			padding-bottom: var(--wp--preset--spacing--small);
			margin-bottom: 0 !important;

			&:last-child {
				padding-bottom: 0;
			}
		}

		/* Event Headline */
		& .tribe-events-widget-events-list__event-title {
			font-family: var(--wp--preset--font-family--primary) !important;
			font-size: var(--wp--preset--font-size--large);
			font-weight: var(--wp--custom--font-weight--semi-bold);
			& a {
				text-decoration: none;
			}
		}



		/* Hide "View Calendar" link and use WP blocks for this purpose (button
		groups, text links, etc). */
		.tribe-events-widget-events-list__view-more {
			display: none;
		}
	}
}