/*
Theme Name: First Unitarian Congregational Society of Brooklyn
Theme URI: https://www.firstubrooklyn.org
Description: 
Version: 1.0
Author: Addicott Web
Author URI: https://www.wordpress-web-designer-raleigh.com/
*/


/* Root Variables */
:root {

	/* Typography */
	--font-body: "Mulish", sans-serif;
	--font-heading: "Mulish", sans-serif;

	/* Font Weights */
	--font-weight-thin: 100;
	--font-weight-extra-light: 200;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extra-bold: 800;
	--font-weight-black: 900;

	/* Base Typography */
	--body-font-size: 20px;
	--body-line-height: 1.5;
	--body-font-weight: var(--font-weight-light);

	--heading-font-weight: var(--font-weight-regular);
	--strong-font-weight: var(--font-weight-medium);

	/* Heading Sizes */
	--h1-font-size: 48px;
	--h1-line-height: 1.2;

	--h2-font-size: 36px;
	--h2-line-height: 1.25;

	--h3-font-size: 30px;
	--h3-line-height: 1.3;

	--h4-font-size: 24px;
	--h4-line-height: 1.4;

	--h5-font-size: 20px;
	--h5-line-height: 1.4;

	--h6-font-size: 18px;
	--h6-line-height: 1.4;
	
	/* Global Colors */
	--body-bg: #f6f6f6;
	--text-color: #222222;

	--heading-color: #222222;
	--h1-color: #fff;

	--link-color: #3d79bf;
	--link-hover-color: #3d79bf;

	--border-color: #cccccc;
	
	/* Spacing */
	--spacing-text: 20px;
	--spacing-heading: 30px;
	--section-spacing: 40px;

	/* Pagination */
	--pagination-color: #222222;
	--pagination-bg: transparent;
	--pagination-border: #cccccc;

	--pagination-hover-color: #ffffff;
	--pagination-hover-bg: #333333;
	--pagination-hover-border: #333333;

	--pagination-active-color: #ffffff;
	--pagination-active-bg: #333333;
	--pagination-active-border: #333333;

	/* Subpage Navigation */
	--subnav-font-size: 16px;
	--subnav-font-weight: var(--font-weight-regular);

	--subnav-bg: transparent;
	--subnav-link-bg: #f2f2f2;
	--subnav-link-color: #222222;

	--subnav-link-hover-bg: #333333;
	--subnav-link-hover-color: #ffffff;

	--subnav-link-active-bg: #333333;
	--subnav-link-active-color: #ffffff;

	--subnav-border-color: transparent;
	--subnav-border-radius: 0;

	--subnav-padding-y: 10px;
	--subnav-padding-x: 15px;
	
	--subnav-row-padding-top: 20px;
	--subnav-row-padding-bottom: 20px;
	
	--subnav-gap: 5px;
	
	/* Search Modal */
	--search-overlay-bg: rgba(0, 0, 0, 0.75);

	--search-modal-bg: #ffffff;

	--search-field-bg: #ffffff;
	--search-field-color: #222222;
	--search-field-border: #cccccc;
	--search-field-focus-border: #333333;

	--search-button-bg: #ab1b42;
	--search-button-color: #ffffff;
	--search-button-border: #ab1b42;

	--search-button-hover-bg: #ab1b42;
	--search-button-hover-color: #fff;
	--search-button-hover-border: #ab1b42;

	/* Search Results */
	--search-result-url-color: var(--text-color);
	
	/* Footer */
	--footer-color: #ffffff;

	--footer-font-family: var(--font-body);
	--footer-font-size: 18px;
	--footer-font-weight: var(--font-weight-light);

	--footer-heading-font-family: var(--font-heading);
	--footer-heading-font-weight: var(--font-weight-bold);
	--footer-heading-color: #ffffff;

	--footer-link-color: #ffffff;
	--footer-link-hover-color: #ffffff;
	
	/* Copyright */
	--copyright-color: #ffffff;

	--copyright-font-family: var(--font-body);
	--copyright-font-size: 14px;
	--copyright-font-weight: var(--font-weight-regular);

	--copyright-link-color: #ffffff;
	--copyright-link-hover-color: #ffffff;
}

/* Base styles */
body { background-color: var(--body-bg); color: var(--text-color); font-family: var(--font-body); font-size: var(--body-font-size); line-height: var(--body-line-height); font-weight: var(--body-font-weight); font-optical-sizing: auto; font-style: normal; }

/* Text */
p { margin: var(--spacing-text) 0 0; }
strong { font-weight: var(--strong-font-weight); }
em { font-style: italic; }
small { font-size: 0.75em; line-height: 1.5; font-weight: var(--font-weight-regular); }
blockquote { margin: var(--spacing-text) 0 0 30px; padding: 0; border: 0; }

/* Links */
a { color: var(--link-color); text-decoration: underline; }
a:hover,
a:focus { color: var(--link-hover-color); text-decoration: none; }

/* Elementor Content Links */
.elementor-widget-text-editor a,
.elementor-tab-content a { text-decoration: underline !important; }
.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus,
.elementor-tab-content a:hover,
.elementor-tab-content a:focus { text-decoration: none !important; }

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 { font-family: var(--font-heading); font-weight: var(--heading-font-weight); color: var(--heading-color); font-optical-sizing: auto; font-style: normal; }

h1 { margin: 0; font-size: var(--h1-font-size); line-height: var(--h1-line-height); color: var(--h1-color); }

	/* Landscape phones and portrait tablets */
	/* Portrait phones and smaller */
	@media (max-width: 767px) {
	h1 { font-size: var(--h2-font-size); line-height: var(--h2-line-height); }
	}

h2 { margin: var(--spacing-heading) 0 0; font-size: var(--h2-font-size); line-height: var(--h2-line-height); }
h3 { margin: var(--spacing-heading) 0 0; font-size: var(--h3-font-size); line-height: var(--h3-line-height); }
h4 { margin: var(--spacing-heading) 0 0; font-size: var(--h4-font-size); line-height: var(--h4-line-height); }
h5 { margin: var(--spacing-heading) 0 0; font-size: var(--h5-font-size); line-height: var(--h5-line-height); }
h6 { margin: var(--spacing-heading) 0 0; font-size: var(--h6-font-size); line-height: var(--h6-line-height); }


/* Content lists */
.content ul { list-style: disc; margin: var(--spacing-text) 0 0 30px; padding: 0; }
.content ol { list-style: decimal; margin: var(--spacing-text) 0 0 30px; padding: 0; }
.content ul li,
.content ol li { margin-bottom: 10px; padding-left: 10px; }
.content ul ul { list-style: circle; margin: 10px 0 10px 30px; }
.content ol ol { list-style: lower-alpha; margin: 10px 0 10px 30px; }

/* Images */
img { max-width: 100%; height: auto; }
.alignnone { display: block; margin: var(--spacing-text) 0 0; }
.aligncenter { display: block; margin: var(--spacing-text) auto 0; }
.alignright { float: right; margin: 5px 0 20px 25px; }
.alignleft { float: left; margin: 5px 25px 20px 0; }

	@media (max-width: 767.98px) {
	.alignright,
	.alignleft,
	.aligncenter { float: none; display: block; margin: var(--spacing-text) auto 0; }
	}

iframe,
object,
embed { max-width: 100%; }

/* Section Spacing */
.content { padding-top: var(--section-spacing); padding-bottom: var(--section-spacing); }

/* Post Summaries */
.post-summary { margin-bottom: var(--section-spacing); }
.post-summary-title { margin-top: 0; }
.post-summary-title a { color: inherit; text-decoration: none; }
.post-summary-title a:hover,
.post-summary-title a:focus { color: var(--link-hover-color); }
.post-summary-image img { display: block; width: 100%; height: auto; }
.post-summary-date { margin-top: 5px; font-size: 14px; line-height: 1.5; }
.post-summary-excerpt p:first-child { margin-top: 15px; }

/* Pagination */
.navigation.pagination { display: flex; justify-content: center; width: 100%; margin-top: calc(var(--section-spacing) * 2); margin-bottom: var(--section-spacing); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.navigation.pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; background-color: var(--pagination-bg); border: 1px solid var(--pagination-border); color: var(--pagination-color); text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus { background-color: var(--pagination-hover-bg); border-color: var(--pagination-hover-border); color: var(--pagination-hover-color); }
.navigation.pagination .page-numbers.current { background-color: var(--pagination-active-bg); border-color: var(--pagination-active-border); color: var(--pagination-active-color); }
.navigation.pagination .prev,
.navigation.pagination .next { width: auto; padding: 0 16px; }
.navigation.pagination .dots { border-color: transparent; }

	/* Small Mobile */
	@media (max-width: 575.98px) {
	.navigation.pagination .nav-links { gap: 4px; }
	.navigation.pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; 	}
	}

/* Search Modal */
.modal-backdrop.show { opacity: 1; background-color: var(--search-overlay-bg); }
.search-modal .modal-dialog { max-width: 700px; }
.search-modal .modal-content { background-color: var(--search-modal-bg); border: 0; border-radius: 0; }
.search-modal .modal-body { position: relative; padding: 60px; }
.search-modal-close { position: absolute; top: 20px; right: 20px; }
.search-modal-title { margin: 0 0 25px; }
.search-form-inner { display: flex; align-items: stretch; width: 100%; }
.search-field { flex: 1; min-width: 0; padding: 15px 18px; background-color: var(--search-field-bg); color: var(--search-field-color); border: 1px solid var(--search-field-border); border-right: 0; border-radius: 0; font: inherit; }
.search-field:focus { outline: none; border-color: var(--search-field-focus-border); }
.search-field::placeholder { color: inherit; opacity: 0.6; }
.search-submit { flex-shrink: 0; padding: 15px 25px; background-color: var(--search-button-bg); color: var(--search-button-color); border: 1px solid var(--search-button-border); border-radius: 0; font: inherit; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.search-submit:hover,
.search-submit:focus { background-color: var(--search-button-hover-bg); color: var(--search-button-hover-color); border-color: var(--search-button-hover-border); }

	/* Small Mobile */
	@media (max-width: 575.98px) {
	.search-modal .modal-dialog { margin: 15px; }
	.search-modal .modal-body { padding: 50px 25px 30px; }
	.search-form-inner { flex-direction: column; gap: 10px; }
	.search-field { width: 100%; border-right: 1px solid var(--search-field-border); }
	.search-submit { width: 100%; }
	}

/* Search Results */
.search-results-list { list-style: none; margin: var(--section-spacing) 0 0; padding: 0; }
.search-results-list .search-result { margin-bottom: var(--section-spacing); padding: 0 0 var(--section-spacing); font-size: inherit; line-height: inherit; font-weight: inherit; border-bottom: 1px solid var(--border-color); list-style: none; }
.search-results-list .search-result:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.search-result-title { margin: 0; font-size: 24px; line-height: 1.4; font-weight: var(--font-weight-semibold); }
.search-result-title a { color: var(--link-color); text-decoration: underline; }
.search-result-title a:hover,
.search-result-title a:focus { color: var(--link-hover-color); text-decoration: none; }
.search-result-url { margin-top: 10px; color: var(--search-result-url-color); font-size: 16px; line-height: 1.5; font-weight: var(--font-weight-semibold); }
.search-result-excerpt { margin-top: 20px; }
.search-result-excerpt p { margin-top: 0; }

/*----- Start of Events Manager overrides -----*/

/* Allow event titles in month calendar to wrap */
.em.em-calendar .em-cal-event a,
.em.em-calendar .em-cal-event > div,
.em.em-calendar .em-cal-event { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; word-break: break-word; overflow-wrap: break-word; height: auto !important; line-height: 1.3; }

/* If titles are still clipped inside day cells */
.em.em-calendar .em-cal-day { overflow: visible; }

.em-calendar .em-cal-event,
.em-calendar .em-cal-event * { position: static !important; }

/* General Subpage Navigation */
.subpage-nav { margin: 0; padding: 0; }
.subpage-nav ul { margin: 0; padding: 0; list-style: none; }
.subpage-nav li { margin: 0; padding: 0; }

.subpage-nav a { display: block; color: var(--subnav-link-color); font-size: var(--subnav-font-size); font-weight: var(--subnav-font-weight); text-decoration: none; padding: 0; }
.subpage-nav a:hover,
.subpage-nav a:focus { text-decoration: underline; }

/* Option #2: Vertical Subpage Navigation */
.subpage-nav-vertical ul { display: block; margin-top: 20px; padding: 0; }
.subpage-nav-vertical li { display: block; width: 100%; margin: 0 0 var(--subnav-gap) 0; padding: 0; }
.subpage-nav-vertical li:last-child { margin-bottom: 0; }
.subpage-nav-vertical a { width: 100%; }

/* Page title bar */
.page-title { background: url('images/page-title-bg.jpg') center top no-repeat; background-size:cover; }
.page-title .row { padding-top: calc(var(--section-spacing) * 2); padding-bottom: calc(var(--section-spacing) * 2); }

	/* Tablet and below */
	@media (max-width: 991.98px) {
	.page-title .row { padding-top: var(--section-spacing); padding-bottom: var(--section-spacing); }
	}

/* Footer */
.footer { background: fixed url('images/footer-bg.jpg') center bottom no-repeat; background-size: cover; color: var(--footer-color); font-family: var(--footer-font-family); font-size: var(--footer-font-size); font-weight: var(--footer-font-weight); }
.footer .container > .row { padding-top: calc(var(--section-spacing) + var(--spacing-text)); padding-bottom: calc(var(--section-spacing) + var(--spacing-text)); }
.footer .container:first-child { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.footer h4 { color: var(--footer-heading-color); font-family: var(--footer-heading-font-family); font-weight: var(--footer-heading-font-weight); margin-top: 0; }
.footer a { color: var(--footer-link-color); text-decoration: none; }
.footer a:hover,
.footer a:focus { color: var(--footer-link-hover-color); text-decoration: underline; }
.footer ul { list-style: none; margin-top: var(--spacing-text); padding: 0; }
.footer ul li { display: inline; margin: 0 var(--spacing-text); padding: 0; }

	/* Tablet and below */
	@media (max-width: 991.98px) {
	.footer h4 { margin: var(--spacing-heading) 0 0; }
	}

/* Copyright */
.copyright { color: var(--copyright-color); font-family: var(--copyright-font-family); font-size: var(--copyright-font-size); font-weight: var(--copyright-font-weight); }
.copyright ul { margin-top: 0; padding: 0; }
.copyright ul li { margin: 0 var(--spacing-text) 0 0; padding: 0 var(--spacing-text) 0 0; border-right: 1px solid rgba(255, 255, 255, .2); font-size: var(--footer-font-size); font-weight: var(--footer-heading-font-weight); }
.copyright ul li:last-child { margin-right: 0; padding-right: 0; border-right: none; }
.copyright a { color: var(--copyright-link-color); text-decoration: none; }
.copyright a:hover,
.copyright a:focus { color: var(--copyright-link-hover-color); text-decoration: underline; }