/* ######################### Global styles ######################### */

:root {
	--primary-green: #425932; /* St. Dunstan's Green */
	--secondary-green: #A8B99C; /* Lighter highlight green */
	--pale-green: #e3f2d8; /* Very pale green */
	--ssp-podcast-list-gap: 2em; /* Gap between episode tiles for podcast episode list */
	--ssp-podcast-list-article-margin-bottom: 0; /* Padding under episode blocks */
} /* Defines CSS variables */

.page-content, .entry-content, .single .entry-title, .entry-summary, .entry-footer, .post-navigation, .posts-navigation, .comments-wrapper, .respond-wrapper, body.page:not(.archive) .entry-title {
    width: 1300px;
} /* Sets screen width */

a {
	text-decoration: underline;
} /* Adds an underline to all links for accessibility purposes */

a:hover, a:focus, a:active {
	color: var(--primary-green);
} /* Changes link color on mouseover/active state */

p {
	margin-bottom: 1em;
} /* Reduces spacing between paragraphs */

.entry-content .wp-block-button .wp-block-button__link {
	background-color: var(--primary-green);
	font-size: 1em;
} /* Sets button color and font size */

.entry-content .wp-block-button .wp-block-button__link:hover {
	background-color: var(--secondary-green);
} /* Sets button color when hovered over */

.contact-info-wrapper a {
	text-decoration: none;
} /* Removes the underline from the contact info in the top header bar */

.wp-block-image img, .wp-block-media-text__media img, #sbi_images img, .wpnbha.image-alignleft .post-has-image .post-thumbnail img {
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,0.07);
} /* Sets all images to have subtly rounded corners to soften the page appearance slightly, and adds a subtle border for light-background images */

.wp-block-image.no-border img {
	border: none;
} /* Allows for overriding the border */

.wp-block-column.has-background {
	padding: 1em;
} /* Adds padding inside columns that have a background color */

.wp-block-column.has-background p:last-of-type {
	margin-bottom: 0;
} /* Removes spacing on last paragraph inside columns */

.wp-block-table.is-style-stripes table {
	margin-bottom: 0;
} /* Removes bottom margin so that the bottom border aligns correctly to the bottom of the table */

:where(.is-layout-grid) {
    gap: 3em;
} /* Adds a larger gap to Grid elements */

/* ######################### Header ######################### */

.contact-info-area {
	margin-bottom: 1em;
	padding: 8px 10px;
	background-color: var(--pale-green);
} /* Adds a margin under the contact info bar so the logo isn't squished up against it, and tightens up the padding inside the bar */

.contact-info-area span a, .contact-info-wrapper > span:last-of-type {
	padding: 0 10px;
} /* Sets padding for contact info items in the top header bar */

.site-header, .page.no-featured-image .site-header, .single.no-featured-image .site-header {
    border-bottom: 1px solid #ddd;
} /* Adds a subtle border under the navigation to visually separate it from the page */

.header-wrapper {
	padding: 0;
} /* Removes padding on the header */
	
.site-header {
	padding-bottom: 0;
} /* Removes padding on the bottom of the header */

/* ######################### Navigation ######################### */

.main-navigation.toggled ul a {
	color: #4B4B4B;
} /* Makes the drop-down nav more readable */

.main-navigation.toggled ul ul a {
	background-color: #828282;
	color: white;
} /* Makes the drop-down nav more readable */

.main-navigation.toggled ul ul li.current-menu-item {
	background-color: var(--secondary-green);
	color: white;
} /* Makes the current page in a drop-down more readable */

.main-navigation li:hover>a {
	background-color: var(--secondary-green);
} /* Sets the hover state to a light green so it's easy to tell when you're hovering over a nav link */

.main-navigation.toggled li:hover>a, .main-navigation.toggled li a:hover {
	color: white;
} /* Sets the hover state color to white so it's easier to read */

/* ######################### Footer ######################### */

.widget-area {
	padding-bottom: 0;
	border-top: 1px solid #ddd;
} /* Removes extra spacing in footer and adds a subtle border to separate it from the page */

.widget-area .widget-column {
	width: 100%;
} /* Overrides the partial-width footer sections */

.widget.widget_block.widget_text, .widget.widget_block.widget_text p {
	margin: 0;
} /* Removes extra spacing in footer */

/* ######################### Homepage ######################### */

.post-45 .entry-title {
	display: none;
} /* Hides the title on only the homepage */

.post-45 .entry-header {
	padding: 0;
} /* Changes the top padding under the navigation on only the homepage */

.post-45 .wp-block-cover.alignfull {
	height: 34vh;
} /* Decreases the height of the video */

.post-45 .wp-block-cover.alignfull h2 {
	font-size: 3em;
	text-shadow: 0 0 25px black;
	text-align: left;
	margin-left: 16px;
} /* Makes the text overlay larger and easier to read */

.post-45 .wp-block-cover .wp-block-cover__inner-container {
	position: absolute;
	bottom: 10%;
} /* Fixes text overlay placement */

/* ######################### Calendar & Events ######################### */

.tribe-events .tribe-events-calendar-month__mobile-events-icon--event {
	background-color: var(--primary-green);
} /* Sets the dot on mobile calendar view to green */

.tribe-events .tribe-events-calendar-month__day-cell--selected {
	background-color: var(--primary-green);
} /* Sets the cell of the selected day to green */

.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum {
	color: white
} /* Sets the number of the selected day to white */

.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__mobile-events-icon--event {
	background-color: white;
} /* Sets the dot on the selected day to white */

.tribe-common .tribe-common-c-btn-border {
	background-color: var(--primary-green);
	border: none;
	color: white;
} /* Sets the Subscribe to Calendar button's colors */

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover {
	background-color: var(--secondary-green);
	color: black;
} /* Sets the Subscribe to Calendar button's hover state colors */

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__list {
	background-color: var(--secondary-green);
} /* Sets the dropdown's background color */

table tbody > tr:nth-child(odd) > th, table tbody > tr:nth-child(odd) > td {
	background-color: #f5f5f5;
} /* Makes the zebra striping on the calendar month view more subtle */

.tribe-common .tribe-common-h8 {
	font-size: 0.85em;
} /* Makes the calendar event names larger */

.tribe-events-calendar-month__calendar-event-datetime {
	font-size: 0.75em;
} /* Makes the calendar event times larger */

.tribe-events .tribe-events-calendar-month__multiday-event-wrapper+.tribe-events-calendar-month__calendar-event, .tribe-events .tribe-events-calendar-month__calendar-event, .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__multiday-event-wrapper {
	margin-bottom: 0.75em;
} /* Adds spacing between calendar events */

.tribe-events-widget {
	margin-bottom: 0!important;
} /* Removes spacing under homepage events block */

.tribe-events-widget-events-list__header-title.tribe-common-h6.tribe-common-h--alt {
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	margin-top: 1em;
} /* Adjusts the size and placement of the Upcoming Events block's header on the homepage */

.tribe-events-widget span.tribe-events-widget-events-list__event-date-tag-month, .tribe-events-widget .tribe-events-widget-events-list__event-datetime-wrapper time.tribe-events-widget-events-list__event-datetime {
	font-size: 14px;
} /* Fixes tiny font size */

.tribe-events-widget .tribe-events-widget-events-list__event-title, .tribe-events-widget-events-list__event-title .tribe-common-h7, .tribe-common--breakpoint-medium.tribe-events-widget .tribe-events-widget-events-list__event-title {
	font-size: 18px!important;
} /* Fixes huge font size */

.tribe-events-widget .tribe-events-widget-events-list__event-row {
	margin-right: var(--tec-spacer-3);
} /* Adds spacing so the text doesn't run off the right */

.tribe-events-widget-events-list__view-more {
	display: none;
} /* Hides the built-in "View Calendar" button so we can have a properly styled Wordpress button */

.tribe-events-single-event-description .jp-relatedposts {
	display: none!important;
} /* Hides "Related sermons" on the Events pages */

abbr.tribe-events-abbr.tribe-events-start-date.published.dtstart {
	border-bottom: none;
	cursor: auto;
	text-decoration: none;
} /* Removes helptext styling from dates */

/* ######################### Forms ######################### */

.wp-block-jetpack-contact-form .wp-block-jetpack-button .wp-block-button__link {
    min-height: 0px!important;
    padding: 9px 18px!important;
} /* Fixes button appearance on forms */

/* ######################### Floating "Give" button ######################### */

.buttonizer-group-0-0-1 {
	top: 216px!important;
	position: absolute!important;
} /* Moves it down so it doesn't cover the contact info bar on mobile */

/* ######################### Pages ######################### */

.entry-thumbnail {
	max-width: 1300px;
	min-height: 100px;
	height: 20vh!important;
	margin: 1em auto 0 auto;
	border-radius: 5px;
} /* Fixes styling on the featured images of content pages */

.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
	padding: 0;
} /* Fixes media & text block spacing */

.wp-block-media-text.is-stacked-on-mobile figure {
	padding-bottom: 2em;
} /* Fixes media & text block spacing */

/* ######################### Podcast ######################### */

.castos-player {
	margin-bottom: 0.5em;
} /* Adds spacing under the player */

.podcast_meta p {
	margin-bottom: 0;
} /* Removes spacing between podcast metadata and speaker line in feed */

.podcast_meta {
	margin-bottom: 3em;
} /* Adds spacing under podcast metadata in feed and single posts */

.wp-block-query-pagination.is-layout-flex {
	justify-content: center;
} /* Centers the pagination on the feed */

.wp-block-query-pagination.is-layout-flex .page-numbers {
	padding: 0 0.25em;
} /* Adds spacing between page links */

.podcast .entry-content > *[class^="wp-block-"] {
	margin-bottom: 18px;
} /* Resets the margin under headings on podcast episode pages */

div#jp-relatedposts h3.jp-relatedposts-headline {
	font-size: 1em;
	width: 100%;
} /* Fixes styling for "You may also enjoy" headline above related episodes */

div#jp-relatedposts div.jp-relatedposts-items p {
	font-size: inherit;
	line-height: inherit;
} /* Resets font details for the Related Episodes section on individual episode pates */

#post-45 .podcast img {
	border-radius: 5px;
	display: block;
	margin: 0 auto 0.5em auto;
} /* Softens the corners of the podcast thumbnails on the homepage feed, and centers them on smaller screens */

#post-45 .podcast .wp-block-post-date, #post-45 .podcast .wp-block-post-terms {
	text-align: center;
	font-size: 0.85em;
}

#post-45 .podcast h3 {
	font-size: 1.1em;
	text-align: center;
	margin-top: 0.25em;
} /* Centers the podcast episode titles in the homepage feed */

#post-45 .ssp-podcast-list__pagination {
	display: none;
} /* Hides the "Older/Newer Posts" links in the homepage feed */

/* ######################### Media Queries ######################### */

@media (min-width: 497px) { /* All screens larger than 500px */
	
	.buttonizer-group-0-0-1 {
		top: 190px!important;
	} /* Repositions it for medium screens */
	
}

@media (min-width: 500px) { /* All screens larger than 500px */
	
	.style-pack-modern .menu-toggle {
		margin-top: 1em;
	} /* Fixes spacing around the menu toggle on medium screens */
	
}

@media (min-width: 600px) { /* All screens larger than 500px */
	
	.hentry {
		margin-bottom: 0;
	} /* Removes spacing under the header */

	.homepage-mission {
		font-size: 1.25em;
	} /* Sets mission statement font size */
	
	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		padding-left: 8%;
	} /* Adds spacing between text and image in media & text block, image on left */
	
	.wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
		padding-left: 0%;
		padding-right: 8%;
	} /* Adds spacing between text and image in media & text block, image on right */
	
}

@media (max-width: 768px) { /* All screens smaller than 768px wide */
	
	.contact-info-area span {
		margin: 0 3px;
	} /* Sets margin for contact info items in the top header bar */
	
	.site-branding .custom-logo, .custom-logo-link {
		display: block;
		margin: 0 auto;
	} /* Centers the logo */
	
	.style-pack-modern .menu-toggle {
		margin: 1em auto 0 auto;
	} /* Centers the navigation menu toggle */
	
}

@media (min-width: 768px) { /* All screens larger than 768px wide */
	
	.menu-wrapper {
		margin: 1em auto;
	} /* Adds spacing around the navigation on larger screens */

	.homepage-mission {
		font-size: 1.5em;
	} /* Sets mission statement font size */
	
	.tribe-events-widget-events-list__events {
		display: flex;
	} /* Switches to a horizontal layout for upcoming events */
	
	.events-container {
		width: 95%;
		max-width: 1300px;
	} /* Extends the upcoming events section across the full page content area */
	
	.tribe-events-widget .tribe-events-widget-events-list__event-row {
		flex-basis: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
	} /* Sets each upcoming event to 1/5 width of total container, and changes the inside elements to stack vertically */
	
	.tribe-events-widget .tribe-events-widget-events-list__event-row .tribe-common-g-col {
		text-align: center;
		margin-top: 0.5em;
	} /* Centers the event title and date/time */
	
	.buttonizer-group-0-0-1 {
		top: 70px!important;
		position: fixed!important;
	} /* Repositions it for medium-large screens */
	
}

@media (min-width: 1000px) { /* All screens larger than 1000px wide */
	
	.post-45 .wp-block-cover.alignfull {
		height: 45vh;
	} /* Decreases the height of the homepage video */
	
	.post-45 .wp-block-cover.alignfull .wp-block-cover__inner-container {
		max-width: 100%;
	} /* Overrides the width limitation on the homepage video text */
	
	.post-45 .wp-block-cover.alignfull h2 {
		text-align: center;
	} /* Center-aligns the homepage video text */
	
}

@media (min-width: 1200px) { /* All screens larger than 1200px wide */
	
	.buttonizer-group-0-0-1 {
		top: 34px!important;
	} /* Repositions it for large screens */
	
}