/*
Theme Name: Vipac Engineers & Scientists
Template: twentytwentyfour
Author: Meredith Adams
Description: Child theme of Twenty Twenty-Four for Vipac Engineers & Scientists, Ltd.
Version: 1.0.0
*/

/* Branding */

header .wp-block-site-logo {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 218px;
	height: auto;
}

.home header .wp-block-site-logo, .page-template-page-wide header .wp-block-site-logo {
	width: 280px;
	height: auto;
	transition: width 0.5s ease;
}

.home header .wp-block-site-logo::after, .page-template-page-wide header .wp-block-site-logo::after {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 3.3;
	background-color: #eb1d2d;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	margin-top: -1px;
	transition: clip-path 0.5s ease;
}

.home header.shrink .wp-block-site-logo, .page-template-page-wide header.shrink .wp-block-site-logo {
	width: 218px;
}

.home header.shrink .wp-block-site-logo::after, .page-template-page-wide header.shrink .wp-block-site-logo::after {
	clip-path: polygon(0 0, 50% 0, 100% 0);
}

/* Buttons & Pills */

.wp-block-buttons::after {
	content: "";
	display: inline-block;
	height: 50px;
	aspect-ratio: 0.3;
	background-color: #eb1d2d;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
	margin-left: -12px;
}

a.wp-element-button:hover {
	color: #fff !important;
	text-decoration: underline;
}

.is-style-pill a {
	border-radius: 0;
	font-size: 1rem;
	line-height: 1.6;
}

.is-style-pill a:hover {
	color: #fff;
	background-color: #808285;
}

/* Header */

header {
	position: sticky;
	top: 0;
	z-index: 100;
}

header a:hover {
	color: #eb1d2d !important;
}

.is-style-secondary-nav li a {
	color: inherit;
	font-size: 1rem !important;
}

.is-style-secondary-nav li::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 45px;
	background-image: url(https://www.vipac.com.au/dev/wp-content/uploads/2025/09/chevron-w.png);
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 1rem;
	vertical-align: middle;
}

.is-style-secondary-nav li:last-child::after {
	content: "";
	display: none;
}

.is-style-secondary-nav li.staff-link a::before {
	content: "";
	display: inline-block;
	width: 12px;
	aspect-ratio: 1;
	background-image: url(https://www.vipac.com.au/dev/wp-content/uploads/2025/08/avatar.png);
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 0.5rem;
}

.request-a-quote ul {
	list-style-type: none;
	display: inline-block;
	padding: 0;
}

.request-a-quote ul li::before {
	content: "";
	display: inline-block;
	width: 20px;
	aspect-ratio: 1;
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: top;
	margin-top: 5.5px;
	margin-right: 22px;
}
.request-a-quote ul li:first-child::before { background-image: url(https://www.vipac.com.au/dev/wp-content/uploads/2025/08/phone.png); }
.request-a-quote ul li:last-child::before { background-image: url(https://www.vipac.com.au/dev/wp-content/uploads/2025/08/email.png); }

/* Extras - Banners Underline */

.vipac-hero-overlay h1, .wp-block-cover h2 {
	opacity: .95;
	filter: drop-shadow(5.5px 5.5px 2.75px rgba(0, 0, 0, 0.6));
	line-height: 1.6; /* REVIEW ME */
	text-decoration: underline;
	text-decoration-color: #eb1d2d;
	text-underline-offset: 1.2rem;
	padding-bottom: 1.375rem;
}

/* Extras - Homepage Polygon */

.home main::before, .swiper-slide::before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	aspect-ratio: 1;
	margin: 8rem 0 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url(https://www.vipac.com.au/dev/wp-content/uploads/2025/08/polygon.png);
}
.home main::before { z-index: -1; } /* Under the content. */
.swiper-slide::before { z-index: 1; } /* Over the image. */
.vipac-hero-overlay h1, .vipac-hero-overlay h2, .vipac-hero-btn {position: relative; z-index: 100;} /* Over the before/polygon. */

/* Extras - Breadcrumbs */

.vipac-breadcrumbs, .vipac-breadcrumbs a {
	font-size: 1rem;
	line-height: 1.2;
	color: #808285;
	text-transform: uppercase;
	text-align: right;
}

.vipac-breadcrumbs a:hover {
	color: #eb1d2d;
}

/* Extras - Services Bar */

.services-bar + .services-bar {
	margin-top: -2.5%;
}

.services-thumb {
	display: inline-block;
	background-color: #f1f2f2;
	width: 11%;
	aspect-ratio: 0.83;
	min-width: 150px;
	max-width: 250px;
	clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
	overflow: hidden;
	font-size: 1rem;
	line-height: 1.3rem;
}

.services-thumb div {
	display: block;
	margin: 50% 12% 0;
	transform: translate(0%, -38%);
	padding: 0;
	text-align: center;
}

.services-thumb img {
	display: inline-block;
	width: 30%;
	margin-bottom: 0.2rem;
}

.pg-g15 {background: #d9d9d9;}
.pg-g30 {background: #bcbec0;}
.pg-g60 {background: #808285;}
.pg-g95 {background: #333132;}
.pg-red {background: #eb1d2d;}

a.services-thumb {
	text-decoration-line: none;
}

a.services-thumb:hover {
	text-decoration-line: underline;
}

a.st-def:hover, a.st-spa:hover {
	color: #fff;
}

/* Extras - Breakout Box & Quote */

.breakout-box::before, .breakout-box::after {
	content: "";
	display: block;
	position: absolute;
	width: 153px;
	aspect-ratio: 3.3;
	background-color: #f1f2f2;
	z-index: 1;
}

.breakout-box::before {
	margin: -1px 50% auto 50%;
	transform: translate(-50%, 0%);
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.breakout-box::after {
	margin: 42px 50% auto 50%;
	transform: translate(-50%, -88px);
	clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

.wp-block-column {height: 100% !important;}

.breakout-box .wp-block-cover {
	height: 100%;
}

/* Extras - Timeline (Start to Finish) */

.timeline {
	padding: 0 1rem;
}

.timeline div {
	border-left: 1px solid red;
	padding: 0 0 1rem 1rem;
}

hr.timeline {
	margin-top: 0 !important;
}

/* Page - About Us */

.about-timeline figure::before {
	content: "";
	display: inline-block;
	position: absolute;
	margin-top: 2.75rem;
	height: 97px;
	width: 32px;
	background-color: #f1f2f2;
}
.about-timeline figure:nth-child(odd)::before {
	margin-left: 50%;
	transform: translate(-26px, 0);
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.about-timeline figure:nth-child(even)::before {
	margin-left: -1px;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.heading-with-lines {
  position: relative; /* Essential for positioning pseudo-elements */
  text-align: center; /* Centers the heading if desired */
  overflow: hidden; /* Hides any overflow from the lines */
}

.overview li {
	list-style-image: url(https://www.vipac.com.au/dev/wp-content/uploads/2025/09/chevron-r.png);
}

/* Extras - Query Loops of Posts/Pages */

.blog-home-query-loop li {
	background-color: white;
}

.blog-home-query-loop img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
}

.taxonomy-category a, .taxonomy-job_category a {
	font-size: 1rem;
}

.is-style-pill a {
	margin-bottom: 0.3rem;
}

.wp-block-read-more:hover {
	text-decoration: underline;
}

.archive-query-loop img {
	clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);
}

.wp-block-query-no-results, .wp-block-query-no-results p  {
	margin: 0;
	padding: 0;
}

/* Extras - Archive Sidebar */

.wp-block-categories-list li {
	margin: 0;
}

.wp-calendar-table caption {
	font-weight: bold;
	margin-bottom: 1rem;
}

.wp-calendar-table a {
	font-weight: bold;
}

.wp-calendar-nav a {
	font-size: 1rem !important;
	text-transform: uppercase;
}

/* Footer */

.wp-block-navigation__container.is-vertical {
	gap: 0 !important;
}

footer a:hover {
	color: #eb1d2d !important;
}


/* Forms */

.wpcf7 {
	margin: 0;
}

form p {
	margin: 1rem 0 0;
}

.form-fifty {
	display: grid;
	grid-template-columns: auto auto;
	gap: 1rem;
}

.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	margin-top: 0.3438rem;
}

input, select, textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 1rem;
	font-family: inherit;
	font-size: 1.2rem;
	line-height: 1.6rem;
	resize: vertical;
	border: 1px solid #bcbec0;
	border-radius: 0 !important;
}

.wpcf7-radio {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 1rem;
}

.wpcf7-radio .wpcf7-list-item {margin: 0;}
.wpcf7-radio .wpcf7-list-item label {
	display: block;
	margin: 0;
	padding: 1rem;
	border: 1px dotted #bcbec0;
}

.wpcf7-radio .wpcf7-list-item input {
	display: inline-block;
	width: auto;
}


.wpcf7-radio .wpcf7-list-item label:hover {
	color: #fff;
	background-color: #808285;
}

.wpcf7-radio .wpcf7-list-item label:has(input[type="radio"]:checked)  {
	color: #fff;
	background-color: #eb1d2d;
}

.wpcf7-submit {
	width: 30%;
	margin: 0 50%;
	transform: translate(-50%, 0);
	background-color: #eb1d2d;
	color: #fff;
	border: 0;
	cursor: pointer;
}

.wpcf7-submit:hover {
	text-decoration: underline;
}

.wpcf7-spinner {
	margin: 0 50%;
	transform: translate(-50%, 0);
	display: none;
}

button {
	border-radius: 0 !important;
}

/* 404 Buttons */

.error-buttons::after {
	display: none;
}

.error-buttons a img {
	width: 70px !important;
	aspect-ratio: 1;
	vertical-align: middle;
}

.error-buttons a div {
	display: inline-block;
	width: 60%;
	padding-left: 1rem;
	vertical-align: middle;
}

.is-style-outline a:hover {
	background-color: #808285 !important;
}

/* Tables */

.wp-block-calendar th {
	background-color: #808285;
}

.scope-table .wp-block-columns, .scope-table div div {
	font-size: 0.8rem;
	line-height: 1.2rem;
}

.scope-table ul {
	list-style: none;
	padding: 0;
}

/* Staff Profile Button Fix */
.single-staff_profile .wp-block-buttons::after{
	display: none !important;
}

/* MOBILE BREAK POINTS */
/* Reccommended: 
	max-width:640px - Large Phones/Tablets
	max-width:768px - Tablets
	max-width:1024px - Laptops
	max-width:1280px - Desktops
	max-width:1536px - Large Screens
	
	Reminder:
	min-width = When the viewport width is equal to or greater than the specified value. 
	max-width = when the viewport width is equal to or less than the specified value. */

/* DESKTOPS+ */

@media screen and (min-width: 1536px) {
	.hide-me {
		display:none !important;
	}

	/* Services Bar */
	.services-bar-mobile {
		display: none;
	}

	.error404 .wp-block-search {
		width: 25%;
	}
}

/* LAPTOPS- */

@media screen and (max-width: 1535px) {
	.hide-me-mobile {
		display:none;
	}

	/* Header - Site Logo */
	.wp-block-site-logo {
		width: 18.5vw !important;
		min-width: 130px;
		height: auto;
	}
	
	/* Home - Polygon */
	.home main::before, .swiper-slide::before {
			display:none;
	}

	/* Home - Introduction */
	.full-vw-mobile .wp-block-column {
			flex-basis:100% !important;
	}

	/* Services Bar */
	.services-bar-desktop {
		display: none;
	}
	.services-thumb {
		clip-path: none;
	}

	/* Breakout Boxes */
	.breakout-box::before, .breakout-box::after {
		display: none;
	}
	.breakout-box .wp-block-group {
		padding-left: 12vw !important;
	}
	
	/* Footer */
	footer .is-content-justification-right {
		justify-content: flex-start;
	}

	/* Extras - Query Loops of Posts/Pages */
	.columns-3 {
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}

	/* Extras - Services Grids/Thumbnail Boxes */
	.services-grids {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

}

/* TABLETS- */

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

	/* Buttons & Pills */
	.wp-block-buttons::after, div.wp-block-button::after {
		height: 43.25px !important;
	}

	/* Breadcrumbs */
	.vipac-breadcrumbs {
		display: none;
	}

	/* RHS Column Fix */
	.page-template .entry-content .wp-block-column {
		padding: 0 0 5.5vh !important;
		border: 0 !important;
	}
	.blog .wp-block-column, .job_listing-template .wp-block-column, .archive .wp-block-column {
		padding: 0 !important;
		border: 0 !important;
	}
	.archive .mobile-padding {padding: 2.75rem !important;}

	/* Cover Blocks Headlines */
	.wp-block-cover h2 {
		line-height: 1.8;
		text-underline-offset: 0.6rem;
	}
	.has-xx-large-font-size {
		font-size: 3rem !important;
	}

	/* About Us */
	.about-timeline {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.about-timeline figure:nth-child(odd)::before {
		margin-left: 100%;
	}

	/* Services Page - Overview */
	.overview div {
		padding: 0 !important;
		margin-bottom: 5.5vh;
	}
	.overview .has-base-2-background-color {
		padding: 2.75rem !important;
	}

	/* Contact Form */
	.wpcf7-radio {
		grid-template-columns: auto;
	}

	/* Extras - Query Loops of Posts/Pages */
	.columns-3, .vipac-related-grid {
		grid-template-columns:repeat(1, minmax(0, 1fr));
	}

	/* Archive Featured Images */
	.archive-query-loop img {
		clip-path: none;
	}
}