/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

/*
 * Bahai.org.au site styles, moved verbatim from the top of the customised Salient 8.0 style.css.
 */

.tribute-card-deck {
	max-width: 1000px;
	margin: auto;
	padding-bottom: 50px;
	overflow: auto;
}

.tribute-card-column {
	position: relative;
	display: block; 
	width: 33%;
	float: left;
}

.tribute-card {
	width: 100%;
	padding: 20px 20px;
	min-height: 120px;
}

.tribute-card h5 {
	font-size: 17px!important;
	font-weight: 500!important;
	line-height: 20px!important;
}

.tribute-card-date {
	font-size: 16px;
	font-family: 'Playfair Display';
	font-style: italic;
	color: #009999;
}

.bicentenary-cta-block {
	display:flex;
	margin-top:30px;
	justify-content: center;
	flex-wrap: wrap;
}

.bicentenary-cta-primary {
	font-weight: 600;
	padding: 8px 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
	background: #fff;
	border: 2px solid #fff;
	color: #009999;
	font-size: 13px;
	flex-basis: 300px;
	margin: 5px;
	text-align: center;
}

.bicentenary-cta-secondary {
	font-weight: 600;
	padding: 8px 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
	background: transparent;
	border: 2px solid #fff;
	color: #fff;
	font-size: 13px;
	flex-basis: 300px;
	margin: 5px;
	text-align: center;
}

.bicentenary-cta-primary:hover, .bicentenary-cta-secondary:hover {
	background: #ececec;
	color: #000;
	border: 2px solid #ececec;
}

.page-id-1991 #breadcrumbs {
	display:none!important;
}

.page-id-1991 .footer-cta-section {
	display:none!important;
}

.bicentenary-title {
	font-style: normal!important;
    	text-transform: uppercase!important;
    	letter-spacing: 3px!important;
    	font-size: 18px!important;
	font-weight: 400;
}


.bicentenary-title-bab {
	text-shadow: 0 0 9px #777;
}


.bicentenary-subtitle {
	font-family: 'Playfair Display', serif;
	font-size: 70px;
	font-weight: 300;
	text-transform: capitalize!important;
	padding-top:25px!important;
	display:block;
}

.bicentenary-subtitle:after {
    content: '1817—2017';
    position: relative;
    margin-top: 55px;
    display: block;
	text-shadow: 0 0 9px #777;
    font-size: 0.4em;
}

.bicentenary-subtitle-bab {
	font-family: 'Playfair Display', serif;
	font-size: 70px;
	font-weight: 300;
	text-transform: capitalize!important;
	padding-top:25px!important;
	text-shadow: 0 0 9px #777;
	display:block;
}

.bicentenary-subtitle-bab:after {
    content: '1819—2019';
    position: relative;
    margin-top: 55px;
    display: block;
    font-size: 0.4em;
}

.event-card {
	margin: 10px 10px 5px 0;
	padding: 0;
	position: relative;
	border: 1px solid #e2e2e2;
	background: #fff!important;
	float:left;
	display:block;
	flex-basis: 290px;
}

.event-card-tab {
	display: flex;
  	flex-wrap: wrap;
	justify-content: center;
}


@media only screen and (max-width: 690px) and (min-width: 1px) {


	.tribute-card-column {
		width: 100%;
	}

	.bicentenary-title {
		font-size:14px!important;
		display:block;
		margin-top:-60px;
	}

	.bicentenary-subtitle {
		font-size: 40px!important;
		padding-top:15px!important;
	}

	.bicentenary-subtitle:after {
		margin-top:30px;
	}


	.event-card {
		margin: 5px 0px!important;
	}

	.ui-tabs-nav li a {
		padding: 4px 8px!important;
		font-size: 0.65em!important;
		border-right: 1px solid rgba(0,0,0,0.06)!important;
	}

}

.event-card-community {
	display: block;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #e2e2e2;
    padding: 5px 15px!important;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #717171;
    background: #f8f8f8!important;
}

.event-card-body {
	padding: 15px!important;
	position: relative;
	display:block;
	width: 100%;
}

.event-card h5 {
	font-size: 0.9em!important;
	line-height: 1.2em!important;
	color: #333;
	font-weight: 600!important;
	margin-bottom:18px;
}

.event-card-time, .event-card-location {
	font-size: 0.7em;
	color: #666;
	font-weight: 500;
	line-height: 1em;
    	margin-top: 15px;
	display: flex;
	align-items: center;
}

.event-card icon {
	margin-top: 5px;
	margin-right:8px;
	width: auto;
	height: auto;
	font-size: 13px;
	color: #acacac;
	line-height: 14px!important;
}

.event-card .fa-map-marker {
	margin-left: 1.5px;
    	margin-right: 10.5px;
}

.event-card-description {
	font-size: 0.8em;
    font-weight: 300;
    line-height: 1.35em;
    padding-top: 10px!important;
}

.event-card-additional-details {
	font-size: 0.65em;
	font-style: italic;
	line-height: 1.3em;
	padding: 15px 0 0!important;
	display: block;
}

.event-card-cta {
	display:block;
	padding-top:10px!important;
	font-weight: 600;
	font-size: 12px;
}




@media only screen and (max-width: 1000px) and (min-width: 1px) {

.single .heading-title {
    padding-bottom:20px!important;
    margin-bottom:30px!important;
}

.video-texture {
    display: block!important;
}
.media-releases-main-content {
    width: 100%!important;
    margin: auto;
    padding: 0px!important;
    float: none!important;
}

.media-releases-main-content article.post .content-inner .post-featured-img img {
    border: 1px solid #E6E6E6;
}

.media-releases-main-content article.post .content-inner .post-featured-img img {
    height: 100px!important;
    margin-left: 20px!important;
}

.single article.post .content-inner .post-featured-img img{
    height: 180px!important;
    width: auto;
    float: right;
    border: 1px solid #c6c6c6;
    margin-left: 10px!important;
    margin-top: 5px;
}
}

@media only screen and (min-width: 1001px) {

.media-releases-main-content {
    float:right;
    width: 73%!important;
    padding: 0 90px 0 30px!important;

}
}

.media-releases-main-content article.post .content-inner .post-featured-img img {
    height: 180px;
    width: auto;
    margin-bottom: 15px!important;
    float: right;
    margin-left: 15px;
    border: 1px solid #E6E6E6;
}

.single article.post .content-inner .post-featured-img img{
    margin-bottom: 10px!important;
    height: 260px;
    width: auto;
    float: right;
    border: 1px solid #c6c6c6;
    margin-left: 25px;
    margin-top: 5px;
}

@media only screen and (max-width: 690px) {
.container article.post .post-header h2 {
    font-size: 22px!important;
    line-height: 26px!important;
}

.single article.post .content-inner .post-featured-img img{
    margin-bottom: 10px!important;
    height: auto!important;
    width: 100%;
    float: none;
    border: 1px solid #c6c6c6;
    margin-left: 0!important;
    margin-top: 0;
}

.media-releases-main-content article.post .content-inner .post-featured-img img {
    height: auto!important;
    width: 100%!important;
    margin-bottom: 15px!important;
    float: none;
    margin-left: 0!important;
    border: 1px solid #E6E6E6;
}
}

/*
 * Bahai.org.au fixes for Salient 18 (the site's custom CSS and footer markup were written for Salient 8).
 */

/* Breadcrumb: the Theme Options custom CSS floats it right at 74.5% width. In Salient 8 the page
   columns were floats too, so it sat above the content column. Salient 18 rows are flex
   containers, which shrink to fit beside a float, so put the rows back where they were. */
@media only screen and (min-width: 1000px) {
	/* Salient 18 adds top padding to the breadcrumb; Salient 8 had none. */
	html body[data-bg-header].page .main-content > .row > #breadcrumbs.yoast {
		padding-top: 0;
	}
	/* Rows after the breadcrumb start below it... */
	.main-content > .row > #breadcrumbs.yoast ~ .wpb_row {
		clear: both;
	}
	/* ...except a side-menu row (1/4 + 3/4), which uses the old float layout so the menu
	   sits level with the breadcrumb and the text starts below it. */
	.main-content > .row > #breadcrumbs.yoast + .wpb_row:has(> .row_col_wrap_12 > .vc_col-sm-3:first-child + .vc_col-sm-9:last-child) {
		clear: none;
	}
	.main-content > .row > #breadcrumbs.yoast + .wpb_row:has(> .row_col_wrap_12 > .vc_col-sm-3:first-child + .vc_col-sm-9:last-child) > .row_col_wrap_12 {
		display: block;
	}
	.main-content > .row > #breadcrumbs.yoast + .wpb_row:has(> .row_col_wrap_12 > .vc_col-sm-3:first-child + .vc_col-sm-9:last-child) > .row_col_wrap_12::after {
		content: "";
		display: table;
		clear: both;
	}
	.main-content > .row > #breadcrumbs.yoast + .wpb_row:has(> .row_col_wrap_12 > .vc_col-sm-3:first-child + .vc_col-sm-9:last-child) > .row_col_wrap_12 > .wpb_column {
		float: left;
	}
}

/* Side accordion menu (jQuery Vertical Accordion Menu, "grey" skin): Salient 18's text-column
   list styles add bullets, indents and link spacing the skin doesn't expect. The link colour
   also needs an ID selector to beat the Theme Options rule (#dc_jqaccordion_widget-s1-item ul a). */
html body .dcjq-accordion ul,
html body .dcjq-accordion li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#ajax-content-wrap .dcjq-accordion ul.sidebar-menu li a {
	padding: 10px 15px 10px 35px;
	color: #333;
}

/* Acknowledgement of Country: Salient 18 prints it inside the footer container, which already
   provides the side spacing the old 95px padding was for. */
#footer-outer .footer-acknowledgement {
	max-width: none;
	padding: 0 5px;
}

/* Home page slider: the darkening texture over the photos. Salient 18's slider plugin ships a much
   lighter grid.png (about 5% darker vs 40%), which made the slide text hard to read; use the old one. */
.nectar-slider-wrap .video-texture.active_texture {
	background-image: url('img/slider-texture-grid.png');
}

/* "Spiritual Life" / "Building Vibrant Communities" photo band (partials/footer-sections.php). */
.abc-cta-pair {
	display: flex;
	flex-wrap: wrap;
}
.abc-cta {
	box-sizing: border-box;
	flex: 1 1 50%;
	min-width: 320px;
	height: 514px;
	padding: 10% calc(10% + 15px) 0;
	background-size: cover;
	background-position: center;
	background-color: #252525;
}
.abc-cta__box {
	padding: 57px 15% 74px;
	text-align: center;
}
.abc-cta__box h4 {
	font-size: 28px;
	line-height: 28px;
	margin: 0 0 7px;
}
.abc-cta__box p {
	padding-bottom: 0;
}
.abc-cta__box--teal {
	background-color: rgba(0, 153, 153, 0.75);
}
.abc-cta__box--blue {
	background-color: rgba(88, 133, 221, 0.75);
}

/* "Connect with Baha'is" band. */
.abc-connect {
	background-color: #ededed;
	padding: 70px 90px;
}
.abc-connect h3 {
	font-size: 32px;
	line-height: 32px;
	font-weight: 500;
	margin-bottom: 7px;
}
@media only screen and (max-width: 690px) {
	.abc-connect {
		padding: 50px 20px;
	}
}

/* Footer: hide the 4th widget column ("Subscribe to news releases"; its form no longer exists).
   The Customizer CSS that hid it targets classes Salient 8 added with JavaScript. */
#footer-widgets .row > .col:nth-child(4) {
	display: none;
}

/* Media Releases list (child index.php): the old template printed posts full width with a small
   teal "Read more"; Salient 18 puts them in a 3/4 column beside an empty sidebar. */
.media-releases-main-content .post-area {
	width: 100%;
	margin-right: 0;
	padding-right: 0;
}
.media-releases-main-content #sidebar {
	display: none;
}
.media-releases-main-content article.post .content-inner {
	padding-bottom: 50px;
	margin-bottom: 50px;
}
.media-releases-main-content article.post .post-header h2 {
	margin-bottom: 2px;
}
.media-releases-main-content article.post .more-link span {
	background-color: #009999;
	font-size: 12px;
	font-weight: 700;
	padding: 10px 12px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
}

/* Contact form Submit button: teal like the rest of the site (Salient 18 defaults it to dark grey,
   teal only on hover), and lined up with the Turnstile box above it. The Customizer CSS adds a
   15px left margin that made up for an offset in Salient 8's layout, which Salient 18 doesn't have. */
#ajax-content-wrap .wpcf7 .wpcf7-submit {
	background-color: #009999;
	margin-left: 0;
}
#ajax-content-wrap .wpcf7 .wpcf7-submit:hover {
	background-color: #008888; /* same as the community lookup "Go" button */
}

/* Text blocks: Salient 18 removes the space under the last paragraph of a text block
   (.row .col p:last-child), so consecutive text blocks and the photo grids after them touched.
   Salient 8 kept it; put it back for page-builder text blocks in the page content. */
.main-content .row .col .wpb_text_column p:last-child {
	padding-bottom: var(--nectar-paragraph-bottom-spacing, 28px);
}

/* Old WPBakery image grids (functions.php: abc_child_classic_image_grid): square photos filling
   the column, 4 per row on desktop, 3 on tablet, 2 on phone. */
#ajax-content-wrap .abc-image-grid__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#ajax-content-wrap .abc-image-grid__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#ajax-content-wrap .abc-image-grid__list a {
	display: block;
}
#ajax-content-wrap .abc-image-grid__list img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	transition: opacity 0.2s;
}
#ajax-content-wrap .abc-image-grid__list a:hover img {
	opacity: 0.85;
}
@media only screen and (max-width: 999px) {
	#ajax-content-wrap .abc-image-grid__list {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media only screen and (max-width: 690px) {
	#ajax-content-wrap .abc-image-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Media releases: show only the date under the title, as before. */
.single-post #single-below-header .meta-author,
.single-post #single-below-header .meta-category,
.single-post #single-meta .meta-comment-count {
	display: none;
}
