/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* Enquiry forms inside the slide-in popups (Ninja Forms on the navy panel) */
.w-popup-box .nf-form-title h3 {
	position: relative;
	font-size: 1.6rem;
	letter-spacing: 0.12em;
	margin-bottom: 1.8rem;
	padding-bottom: 1rem;
}
.w-popup-box .nf-form-title h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: var(--color-content-secondary);
}
.w-popup-box .nf-form-cont .nf-field-container {
	margin-bottom: 1.1rem;
}
.w-popup-box .nf-form-cont .nf-field-label label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.75);
}
.w-popup-box .nf-form-cont .ninja-forms-req-symbol {
	color: var(--color-content-secondary);
}
.w-popup-box .nf-form-cont .nf-field-element input:not([type="submit"]):not([type="button"]),
.w-popup-box .nf-form-cont .nf-field-element textarea,
.w-popup-box .nf-form-cont .nf-field-element select {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--site-border-radius);
	box-shadow: none;
	color: #fff;
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.w-popup-box .nf-form-cont .nf-field-element input:not([type="submit"]):not([type="button"]):focus,
.w-popup-box .nf-form-cont .nf-field-element textarea:focus,
.w-popup-box .nf-form-cont .nf-field-element select:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--color-content-secondary);
	box-shadow: 0 0 0 3px rgba(253, 197, 44, 0.25);
	outline: none;
}
.w-popup-box .nf-form-cont .nf-field-element select option {
	color: #000;
}
/* Keep browser autofill on-brand instead of white/yellow boxes */
.w-popup-box .nf-form-cont .nf-field-element input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	box-shadow: 0 0 0 1000px #24405d inset;
	caret-color: #fff;
}
.w-popup-box .nf-form-cont .nf-error .nf-field-element input,
.w-popup-box .nf-form-cont .nf-error .nf-field-element textarea,
.w-popup-box .nf-form-cont .nf-error .nf-field-element select {
	border-color: #ff9a8a;
}
.w-popup-box .nf-form-cont .nf-error-msg {
	color: #ffb4a8;
	font-size: 13px;
}
.w-popup-box .nf-form-cont input[type="submit"] {
	width: 100%;
	margin-top: 0.4rem;
}
.w-popup-box .nf-form-cont .nf-response-msg:not(:empty) {
	padding: 1rem 1.2rem;
	border-left: 4px solid var(--color-content-secondary);
	background: rgba(255, 255, 255, 0.07);
	border-radius: var(--site-border-radius);
}

/* Training dropdown: same panel behaviour as the Shop dropdown
   (the matching #menu-item-52 rules are in Theme Options > Custom CSS) */
.w-nav.type_desktop .menu-item-53 .w-nav-list.level_2 {
	left: 50% !important;
	right: auto !important;
	background: #ffffff !important;
	color: #000000 !important;
}
li#menu-item-53 {
	position: relative;
}
li#menu-item-53 ul.w-nav-list.level_2 {
	width: fit-content;
	transform: translateX(-50%);
	left: 50%;
	height: auto;
	overflow-y: hidden;
}
@media (max-width: 1112px) {
	li#menu-item-53 ul.w-nav-list.level_2 {
		width: 100%;
		transform: translateX(0);
	}
}

/* Consistent side gutter: WPBakery's stylesheet is loaded on pages built with it but not on
   templated pages (services, products, case studies...). It pulls rows 15px outside the content
   width and pads every column 15px back in, so bordered boxes ended up 15px wider on pages than
   everywhere else. Switch both off so every page uses the same gutter as the header and hero. */
.g-cols.vc_row,
.g-cols.vc_inner {
	margin-left: 0;
	margin-right: 0;
}
.g-cols > .vc_column_container > .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
}

/* Training dropdown: the Shop dropdown's breadcrumb columns without the tab row.
   One column per menu level; the .shop-menu rules themselves come from the Shop dropdown block. */
.shop-menu-wrap {
	--shop-cols: 2;
}
.shop-menu-wrap:has(.sub-menu .sub-menu) {
	--shop-cols: 3;
}
.shop-menu-wrap:has(.sub-menu .sub-menu .sub-menu) {
	--shop-cols: 4;
}
@media (min-width: 1113px) {
	.shop-menu-wrap {
		min-width: calc(var(--shop-cols) * 14.75 * clamp(12px, 0.7vw, 17px) + 32px);
	}
}

/* Footer: every menu link white, including nested items (which otherwise take the dark body link colour) */
.l-footer .w-menu a {
	color: #fff;
}
.no-touch .l-footer .w-menu a:hover {
	color: var(--main-hover-color, var(--color-content-secondary));
}

/* Header dropdowns: close instantly, so two panels never overlap and flash while the mouse
   moves from one menu item to the next. Opening keeps its animation. */
.w-nav.type_desktop .w-nav-item.level_1:not(:hover):not(.opened) > .w-nav-list.level_2 {
	transition: none;
}
/* Shop and Training panels unfold like the other dropdowns, instead of only fading */
@media (min-width: 1113px) {
	.w-nav.type_desktop li#menu-item-52:not(:hover):not(.opened) > ul.w-nav-list.level_2,
	.w-nav.type_desktop li#menu-item-53:not(:hover):not(.opened) > ul.w-nav-list.level_2 {
		transform: scaleY(0) translateX(-50%);
	}
	/* Same function list as the closed state, so the browser can animate between them */
	.w-nav.type_desktop li#menu-item-52:hover > ul.w-nav-list.level_2,
	.w-nav.type_desktop li#menu-item-52.opened > ul.w-nav-list.level_2,
	.w-nav.type_desktop li#menu-item-53:hover > ul.w-nav-list.level_2,
	.w-nav.type_desktop li#menu-item-53.opened > ul.w-nav-list.level_2 {
		transform: scaleY(1) translateX(-50%);
	}
}

/* About page team: cards with a "View profile" button opening the full bio in a popup.
   Spacing follows the rest of the site: 33px on desktops/laptops, 16px from the 1112px tablet breakpoint down. */
.team-card > .vc_column-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.team-card .team-name {
	margin-bottom: 0.3rem;
}
.team-card .team-role {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-content-faded);
}
.team-card .w-popup {
	margin-top: auto;
	padding-top: 1.2rem;
}
.team-card .w-popup-trigger {
	width: 100%;
	white-space: nowrap;
	padding-left: 0.8em;
	padding-right: 0.8em;
}
@media (max-width: 1112px) {
	.team-grid.g-cols {
		--columns-gap: 16px !important;
	}
}
/* Phones: one card per row, capped and centred so the photo doesn't fill the screen on larger phones.
   Done here rather than with the row's mobile columns, as 1 column there makes the theme stack it on tablets too. */
@media (max-width: 830px) {
	.team-grid.g-cols {
		grid-template-columns: 100% !important;
	}
	.team-grid > .team-card {
		width: 100%;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Profile popup: navy photo panel beside the bio; only the bio scrolls */
.team-popup .w-popup-box-content {
	display: grid;
	grid-template-columns: clamp(220px, 30%, 340px) minmax(0, 1fr);
}
.team-popup .team-photo {
	display: flex;
	flex-direction: column;
	padding: 33px;
	background: var(--color-content-primary);
	border-bottom: 4px solid var(--color-content-secondary);
}
.team-popup .team-photo p {
	margin: 0;
}
.team-popup .team-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--site-border-radius);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.team-popup .team-bio {
	max-height: 80dvh;
	overflow-y: auto;
	padding: 33px 33px 0;
	font-size: 16px;
	line-height: 1.75;
}
.team-popup .team-name {
	position: relative;
	font-size: 2rem;
	line-height: 1.2;
	margin: 0 3rem 0 0;
	padding: 0 0 1rem;
}
.team-popup .team-name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: var(--color-content-secondary);
}
.team-popup .team-role {
	display: inline-block;
	margin: 1.2rem 0 1.6rem;
	padding: 0.4em 0.9em;
	border-radius: 999px;
	background: var(--color-content-secondary);
	color: var(--color-content-primary);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.team-popup .team-bio p:last-child {
	margin-bottom: 0;
}
/* Long bios: the opening paragraph reads as an intro, optional h3 subheadings break up the rest */
.team-popup .team-role + p {
	font-size: 18px;
	line-height: 1.65;
	font-weight: 500;
	color: var(--color-content-primary);
}
.team-popup .team-bio h3 {
	margin: 2rem 0 0.6rem;
	padding: 0 0 0 0.7rem;
	border-left: 3px solid var(--color-content-secondary);
	font-size: 14px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-content-primary);
}
/* Fade at the bottom of the scrolling bio, so it's clear there's more to read.
   It sits after the text (and doubles as the bottom padding), so it's gone once the reader reaches the end. */
.team-popup .team-bio::after {
	content: "";
	display: block;
	position: sticky;
	bottom: 0;
	height: 33px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
	pointer-events: none;
}
/* Optional "at a glance" list under the photo: <ul class="team-facts"><li><strong>Value</strong> label</li></ul> */
.team-popup .team-facts {
	display: grid;
	gap: 0.8rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	line-height: 1.35;
}
.team-popup .team-facts li {
	margin: 0;
	padding: 0 0 0 0.75rem;
	border-left: 2px solid var(--color-content-secondary);
}
.team-popup .team-facts strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}
.team-popup .w-popup-box-h > .w-popup-closer {
	top: 16px;
	inset-inline-end: 16px;
	width: 2.6rem;
	height: 2.6rem;
	font-size: 1.1rem;
	line-height: 2.6rem;
	border-radius: 50%;
	background: var(--color-content-bg-alt);
	color: var(--color-content-primary);
	opacity: 1;
	transition: background-color 0.2s;
}
.no-touch .team-popup .w-popup-box-h > .w-popup-closer:hover,
.team-popup .w-popup-box-h > .w-popup-closer:focus-visible {
	background: var(--color-content-secondary);
}

/* Tablets: wider popup, 16px spacing */
@media (max-width: 1112px) {
	.team-popup .w-popup-box {
		max-width: 90%;
	}
	.team-popup .team-photo {
		padding: 16px;
	}
	.team-popup .team-bio {
		padding: 16px 16px 0;
	}
	.team-popup .team-bio::after {
		height: 16px;
	}
	.team-popup .team-name {
		font-size: 1.75rem;
	}
	.team-popup .w-popup-box-h > .w-popup-closer {
		top: 8px;
		inset-inline-end: 8px;
	}
}
/* Phones: one column with the site's 16px side gutter; photo and facts side by side above the bio,
   and the whole popup scrolls instead of the bio */
@media (max-width: 830px) {
	.team-popup.w-popup-wrap {
		padding: 16px 0;
	}
	.team-popup .w-popup-box {
		max-width: calc(100% - 32px);
	}
	.team-popup .w-popup-box-content {
		grid-template-columns: minmax(0, 1fr);
	}
	.team-popup .team-photo {
		display: grid;
		grid-template-columns: clamp(96px, 34%, 200px) minmax(0, 1fr);
		gap: 16px;
		align-items: start;
		padding-right: 3.5rem;
	}
	.team-popup .team-facts {
		gap: 0.6rem;
		margin: 0;
	}
	.team-popup .team-bio {
		max-height: none;
		overflow: visible;
		padding: 16px;
	}
	.team-popup .team-bio::after {
		display: none;
	}
	.team-popup .team-name {
		font-size: 1.5rem;
		margin-right: 0;
	}
	.team-popup .team-role + p {
		font-size: 16px;
	}
}