/**
 * Theme Name:     Pacific Steel
 * Description:    Customized Construction child theme.
 *
 * Author:         Big Storm
 * Author URI:     https://greatbigstorm.com/
 *
 * Template:       construction
 *
 * Version:        1.0.20250220
 */


/*! - Theme Properties */

:root {
	--theme--color--green:        #637e47;
	--theme--color--bright-green: #4c852a;  /* used on links */
	--theme--color--light-gray:   #ebebeb;
	--theme--color--dark-gray:    #7a7a7a;

	--theme--h1--font-family: Coda, sans-serif;
	--theme--h1--font-size:   36px;
	--theme--h1--line-height: 42px;
	--theme--h1--font-weight: 400;

	--theme--h2--font-family: "Titillium Web", sans-serif;
	--theme--h2--font-size:   26px;
	--theme--h2--line-height: 30px;
	--theme--h2--font-weight: 800;

	--theme--vert--margin: 35px;
	--theme--col--pad:     15px;

	--theme--transition: all 0.2s ease;
}


/*! - WB Bakery Elements */

/* Tabs */

.vc_tta-tab {
	position: relative;
}

.vc_tta-tab::after {
	content: '';
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: inherit;
	pointer-events: none;
	transition: 0.2s all ease-in;
}
.vc_tta-tab.vc_active::after {
	opacity: 1;
}

.vc_tta.vc_general .vc_tta-tab .vc_tta-icon {
	display: block;
	line-height: 1;
	text-align: center;
}

.vc_tta.vc_general .vc_tta-tab .vc_tta-icon + .vc_tta-title-text:not(:empty):not(:first-child) {
	margin-left: 0;
}



/*! - Photo Cards */

.photo-card--header {
	background: var(--theme--color--light-gray);
}

.photo-card--photo {
	width:  100%;
	height: 300px;
}

.photo-card--photo img {
	width:  100%;
	height: 100%;
	object-fit: cover;
}

.photo-card--photo img.psteel--placeholder {
	object-fit: contain;
	padding: 15px;
}

.photo-card--title {
	margin: 0;
	padding: 28px;
	font: var(--theme--h2--font-weight)
	      var(--theme--h2--font-size)/var(--theme--h2--line-height)
	      var(--theme--h2--font-family);
	text-align: center;
	color: var(--theme--color--dark-gray);
}

.photo-card--title--subhead {
	display: block;
	font-size: 0.75em;
}

.photo-card--body {
	margin: var(--theme--vert--margin) 0;
}

.photo-card--body :last-child {
	margin-bottom: 0;
}



/*! - Banners */

.banner--photo-cards {
	display: flex;
	flex-wrap: wrap;
	margin: var(--theme--vert--margin) calc(-1 * var(--theme--col--pad));
}

.banner--photo-cards::before {
	content: "";
	display: block;
	margin: 0 var(--theme--col--pad) var(--theme--vert--margin);
	width: 100%;
	border-top: 2px solid var( --theme--color--green );
}

.banner--photo-cards > * {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 var(--theme--vert--margin);
	padding: 0 var(--theme--col--pad);
}

@media (min-width: 768px) {
	.banner--photo-cards > * {
		flex: 1;
		margin: 0;
		width: 33.3333%;
	}
}



/*! - Locations */

.location--title {
	font-family: var(--theme--h1--font-family);
	font-weight: var(--theme--h1--font-weight);
	color: var(--theme--color--green);
}

.location--details {
	margin-bottom: var(--theme--vert--margin);
}

@media (min-width: 768px) {
	.location--details {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.location--details--column {
		flex: 1 1 300px;
	}

	.location--details--special-hours-column {
		max-width: 50%;
	}
}

.location--non-public {
	padding-left: 1em;
	border-left: 4px solid currentColor;
}

.location--non-public--title {
	font-family: inherit;
	font-size: 1.125em;
	font-weight: bold;
	text-transform: uppercase;
	line-height: inherit;
	color: inherit;
}

.location--services--label {
	font-weight: 700;
}

.location--details--label {
	font-weight: 700;
	text-transform: uppercase;
}

.location--contact-link {
	margin: 0 0 1em;
}

.location--railcar-recycling {
	margin: 2em 0 0;
}

.location--hours {
	margin-bottom: 0.25em;
}

.location--hours--list {
	display: grid;
	grid-template-columns: minmax(auto, 1fr) minmax(max-content, 2fr);
	overflow: hidden;
	width: 100%;
	margin:  0;
	padding: 0;
}

.location--hours--day,
.location--hours--times {
	display: inline-block;
	float: left;
	margin: 0 0.5em 0.25em 0;
}
.location--hours--day {
	clear: both;
}

.location--map {
	margin-top: var(--theme--vert--margin);
}


/*! -- Single Location -- */

.single-psteel-location .header-middle.type-featured {
	background-position: center;
}



/*! - Shortcode: Locations Filter */

.locations-filter {
	display: inline-block;
	margin:  0;
	padding: 0;
	list-style: none;
}

.locations-filter--item {
	display: inline-block;
	margin:  0 1em 1em 0;
	padding: 0;
}
.locations-filter .locations-filter--item:last-child {
	margin: 0 0 1em 0;
}

.locations-filter--button {
	padding: 1em 1.5em;
	color: #fff;
	background: var(--theme--color--bright-green);
	border: 2px solid transparent;
	transition: var(--theme--transition);
}
.locations-filter--button.js-active {
	box-shadow: 0 0 0 1px #fff,
	            0 0 0 3px var(--theme--color--bright-green);
}
.locations-filter--button[disabled]:not( .js-active ),
.locations-filter--button.js-inactive {
	opacity: 0.7;
}
.locations-filter--button[disabled] {
	cursor: default;
}


/*! - Shortcode: Locations Cards */

.banner--locations-cards {
	display: flex;
	flex-wrap: wrap;
	margin: var(--theme--vert--margin) calc(-1 * var(--theme--col--pad));
}

.banner--locations-cards > * {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 var(--theme--vert--margin);
	padding: 0 var(--theme--col--pad);
}

@media (min-width: 768px) {
	.banner--locations-cards > * {
		width: 25%;
	}
	.wpb_text_column .banner--locations-cards > :last-child {
		margin-bottom: var(--theme--vert--margin);
	}
}

.banner--locations-cards .photo-card {
	height: 100%;
}

.banner--locations-cards .photo-card--header {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.banner--locations-cards .photo-card--title {
	flex: 1;
}



/*! - Shortcode: Locations List */

.locations-list {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.locations-list--item {
	display: block;
	margin: 0 0 0.25em;
	padding: 0;
}

.locations-list--item--subhead {
	display: block;
	margin-top: -0.5em;
	font-size: 0.85em;
}

/*! -- List Containers (via JS) */

.js-locations-list-container .wpb_wrapper {
	transition: opacity 0.2s ease;
}
.js-locations-list-container.js-inactive .wpb_wrapper {
	opacity: 0.4;
}