/*
Theme Name:   Islander Engineering
Theme URI:    https://www.islanderengineering.com/
Description:  Divi child theme for Islander Engineering.
Author:       Trapeze
Author URI:   https://www.trapeze.ca
Template:     Divi
Version:      1.0.0
Text Domain:  islander-engineering
*/

/* ---- Partner logo marquee -------------- */
.ie-marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ie-marquee .ie-marquee-track {
	width: max-content !important;
	max-width: none !important;
	animation: ie-marquee 45s linear infinite;
}
.ie-marquee:hover .ie-marquee-track,
.ie-marquee:focus-within .ie-marquee-track {
	animation-play-state: paused;
}
.ie-marquee-track > .ie-marquee-set {
	flex: 0 0 auto;
	width: max-content !important;
	max-width: none !important;
}
.ie-marquee-set > .et_pb_module {
	flex: 0 0 auto;
	margin: 0 !important;
}
@keyframes ie-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
body.et-fb .ie-marquee .ie-marquee-track {
	animation: none; /* hold still while editing in the Visual Builder */
}

/* ---- Full-screen menu ---------- */
/* Opened and closed by js/islander.js, which also sets the two custom properties:
   --ie-header-height (overlay content starts below the Site Header) and
   --ie-menu-origin (the circle grows out of the menu button). */
body:not(.et-fb) .ie-site-header {
	position: relative;
	z-index: 100000; /* logo and menu button stay above the overlay */
}
body:not(.et-fb) .ie-menu-overlay {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	height: 100vh;
	height: 100dvh;
	padding-top: var(--ie-header-height, 210px) !important;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	pointer-events: none;
	clip-path: circle(0 at var(--ie-menu-origin, calc(94% - 20px) 86px));
	transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.7s;
}
body:not(.et-fb) .ie-menu-overlay.ie-menu-open {
	visibility: visible;
	pointer-events: auto;
	clip-path: circle(150% at var(--ie-menu-origin, calc(94% - 20px) 86px));
	transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
}
body:not(.et-fb) .ie-nav-overlay .et-menu > li,
body:not(.et-fb) .ie-menu-contact > .et_pb_module {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
body:not(.et-fb) .ie-menu-open .ie-nav-overlay .et-menu > li,
body:not(.et-fb) .ie-menu-open .ie-menu-contact > .et_pb_module {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body:not(.et-fb) .ie-menu-open .ie-nav-overlay .et-menu > li:nth-child(1) { transition-delay: 0.25s; }
body:not(.et-fb) .ie-menu-open .ie-nav-overlay .et-menu > li:nth-child(2) { transition-delay: 0.3s; }
body:not(.et-fb) .ie-menu-open .ie-nav-overlay .et-menu > li:nth-child(3) { transition-delay: 0.35s; }
body:not(.et-fb) .ie-menu-open .ie-nav-overlay .et-menu > li:nth-child(4) { transition-delay: 0.4s; }
body:not(.et-fb) .ie-menu-open .ie-nav-overlay .et-menu > li:nth-child(5) { transition-delay: 0.45s; }
body:not(.et-fb) .ie-menu-open .ie-nav-overlay .et-menu > li:nth-child(6) { transition-delay: 0.5s; }
body:not(.et-fb) .ie-menu-open .ie-nav-overlay .et-menu > li:nth-child(7) { transition-delay: 0.55s; }
body:not(.et-fb) .ie-menu-open .ie-nav-overlay .et-menu > li:nth-child(n+8) { transition-delay: 0.6s; }
body:not(.et-fb) .ie-menu-open .ie-menu-contact > .et_pb_module { transition-delay: 0.6s; }

/* Keep the page behind the menu from scrolling while it is open. */
body:has(.ie-menu-open) {
	overflow: hidden;
}

/* Menu button: lines turn gold and the lower line shortens on hover; they cross into an X while open. */
.ie-hamburger svg {
	overflow: visible;
}
.ie-hamburger svg path {
	transition: stroke 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
	transform-box: fill-box;
	transform-origin: center;
}
.ie-hamburger:hover svg path,
.ie-hamburger a:focus-visible svg path {
	stroke: var(--gcid-primary-color, #c7a900);
}
.ie-hamburger:hover svg path:last-of-type,
.ie-hamburger a:focus-visible svg path:last-of-type {
	transform: translateX(8px) scaleX(0.6);
}
.ie-hamburger a[aria-expanded="true"] svg path {
	stroke: #fff;
}
.ie-hamburger:hover a[aria-expanded="true"] svg path,
.ie-hamburger a[aria-expanded="true"]:focus-visible svg path {
	stroke: var(--gcid-primary-color, #c7a900);
}
.ie-hamburger a[aria-expanded="true"] svg path:first-of-type {
	transform: translateY(7px) rotate(45deg) scaleX(0.9);
}
.ie-hamburger a[aria-expanded="true"] svg path:last-of-type {
	transform: translateY(-7px) rotate(-45deg) scaleX(0.9);
}

/* ---- Menu modules (overlay + footer) ---------- */
/* Divi swaps every Menu module for its own hamburger below 980px; these keep the full list instead. */
.ie-nav .et_pb_menu__wrap,
.ie-nav .et_pb_menu__menu,
.ie-nav .et-menu-nav {
	display: flex !important;
	width: 100%;
}
.ie-nav .et_mobile_nav_menu {
	display: none !important;
}
/* Follow the module's Text Alignment setting (Divi only applies it to the outer wrap below desktop). */
.ie-nav .et_pb_menu__menu,
.ie-nav .et-menu-nav,
.ie-nav .et-menu {
	justify-content: inherit !important;
}
.ie-nav .et-menu {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
.ie-nav .et-menu > li {
	margin: 0 !important;
	padding: 0 !important;
}
.ie-nav .et-menu > li > a {
	padding: 0 !important;
	opacity: 1 !important;
}
.ie-nav-overlay .et-menu {
	flex-direction: column;
	row-gap: 14px;
}
.ie-nav-footer .et-menu {
	column-gap: clamp(28px, 2.8vw, 48px);
	row-gap: 16px;
}
@media (max-width: 980px) {
	.ie-nav-footer .et-menu { column-gap: 36px; }
}
@media (max-width: 767px) {
	.ie-nav-footer .et-menu { column-gap: 24px; }
}

/* ---- Pop-ups (team bios, testimonials, service details) ---------- */
/* Each card (.ie-modal-card) holds its pop-up content (.ie-modal-content), hidden on the live site but
   editable in the builder (dashed outline). js/islander.js shows a copy of it in a dialog. */
body:not(.et-fb) .ie-modal-content {
	display: none !important;
}
body.et-fb .ie-modal-content {
	outline: 2px dashed rgba(199, 169, 0, 0.6);
	outline-offset: -2px;
}
.ie-modal-open,
.ie-modal-open a {
	cursor: pointer;
}
.ie-modal {
	width: min(780px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100dvh - 48px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--gcid-ie-offwhite, #faf8f3);
	box-shadow: 0 40px 90px -30px rgba(15, 30, 32, 0.6);
	overflow: hidden;
}
.ie-modal::backdrop {
	background: rgba(24, 40, 42, 0.72);
	backdrop-filter: blur(3px);
}
.ie-modal[open] { animation: ie-modal-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ie-modal[open]::backdrop { animation: ie-fade-in 0.35s ease; }
.ie-modal.ie-modal-closing { animation: ie-modal-out 0.25s ease forwards; }
.ie-modal.ie-modal-closing::backdrop { animation: ie-fade-out 0.25s ease forwards; }
@keyframes ie-modal-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
@keyframes ie-modal-out { to { opacity: 0; transform: translateY(12px); } }
@keyframes ie-fade-in { from { opacity: 0; } }
@keyframes ie-fade-out { to { opacity: 0; } }
.ie-modal-body {
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
body:not(.et-fb) .ie-modal .ie-modal-content {
	display: flex !important;
}
.ie-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--gcid-secondary-color, #274043);
	box-shadow: 0 4px 14px -6px rgba(15, 30, 32, 0.45);
	cursor: pointer;
	transition: color 0.3s ease, transform 0.3s ease;
}
.ie-modal-close:hover,
.ie-modal-close:focus-visible {
	color: var(--gcid-primary-color, #c7a900);
	transform: rotate(90deg);
}
html:has(.ie-modal[open]) {
	overflow: hidden;
}

/* ---- Gravity Forms (Contact Form) ---------- */
/* The Gravity Form module's preset styles fields, labels and button; these cover what it can't set. */
.ie-form .et_pb_gravity_form_embed .gform_wrapper .gfield_label {
	font-size: 14px; /* The module's Label Text size is not output (Divi 5.16). */
}
.ie-form .et_pb_gravity_form_embed .gfield_required {
	/* "(Required)" is read out by screen readers but not shown, as in the design. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.ie-form .et_pb_gravity_form_embed .gform_footer {
	justify-content: center;
}
.ie-form .et_pb_gravity_form_embed .gchoice {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ie-form .et_pb_gravity_form_embed .gchoice label {
	margin: 0;
}
.ie-form .et_pb_gravity_form_embed input[type="checkbox"] {
	appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border-radius: 3px;
	background: var(--gcid-ie-cream, #f5f0e6) center / 12px no-repeat;
	cursor: pointer;
}
.ie-form .et_pb_gravity_form_embed input[type="checkbox"]:checked {
	background-color: var(--gcid-secondary-color, #274043);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
.ie-form .et_pb_gravity_form_embed input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--gcid-secondary-color, #274043);
	outline-offset: 2px;
}
/* Errors: a short note above the form, red text under each field and a thin red outline on it. */
.ie-form .et_pb_gravity_form_embed .gform_wrapper .gform_validation_errors {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 0;
	border-left: 3px solid #b3261e;
	border-radius: 0 5px 5px 0;
	background: rgba(179, 38, 30, 0.06);
	box-shadow: none;
}
.ie-form .et_pb_gravity_form_embed .gform_validation_errors .gform_submission_error {
	padding: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #b3261e;
}
.ie-form .et_pb_gravity_form_embed .gform_wrapper .gform_validation_errors .gform-icon {
	display: none;
}
.ie-form .et_pb_gravity_form_embed .gform_wrapper .gfield_validation_message {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
}
.ie-form .et_pb_gravity_form_embed .gform_wrapper .gfield_error :is(input, textarea) {
	border: 0;
	box-shadow: inset 0 0 0 1px #b3261e;
}

/* ---- Project Spotlights carousel (Home) ---------------------- */
.ie-spotlight .ie-spotlight-caption {
	transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
}
.ie-spotlight .et_pb_group_carousel_slide:not(.et_pb_group_carousel_slide_active) .ie-spotlight-caption {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.ie-spotlight .et_pb_group_carousel_slide:not(.et_pb_group_carousel_slide_active) {
	cursor: pointer;
}
.ie-spotlight.ie-dragging,
.ie-spotlight.ie-dragging * {
	cursor: grabbing !important;
	user-select: none;
}
.ie-spotlight img {
	-webkit-user-drag: none;
	user-select: none;
}
.ie-spotlight .et_pb_group_carousel_arrow {
	top: 600px;
	transform: translateY(-50%);
	transition: color 0.3s ease, transform 0.3s ease;
}
.ie-spotlight .et_pb_group_carousel_arrow_prev { left: 15.5%; }
.ie-spotlight .et_pb_group_carousel_arrow_next { right: 15.5%; }
.ie-spotlight .et_pb_group_carousel_arrow:hover .et-pb-icon,
.ie-spotlight .et_pb_group_carousel_arrow:focus-visible .et-pb-icon {
	color: var(--gcid-primary-color, #c7a900) !important;
}
.ie-spotlight .et_pb_group_carousel_arrow_prev:hover { transform: translateY(-50%) translateX(-6px); }
.ie-spotlight .et_pb_group_carousel_arrow_next:hover { transform: translateY(-50%) translateX(6px); }
@media (max-width: 980px) {
	.ie-spotlight .et_pb_group_carousel_arrow { top: 200px; }
	.ie-spotlight .et_pb_group_carousel_arrow_prev { left: 2%; }
	.ie-spotlight .et_pb_group_carousel_arrow_next { right: 2%; }
}
@media (max-width: 767px) {
	.ie-spotlight .et_pb_group_carousel_arrow { top: 130px; }
}

/* ---- Project case studies ---------- */
.et-l--body .ie-project-content + .ie-project-photos {
	padding-top: 0;
}

/* ---- Reduced motion --------- */
@media (prefers-reduced-motion: reduce) {
	.et_animated {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.ie-marquee .ie-marquee-track { animation: none; }
	.ie-marquee { overflow-x: auto !important; }
	body:not(.et-fb) .ie-menu-overlay,
	body:not(.et-fb) .ie-menu-overlay *,
	.ie-hamburger svg path,
	.ie-spotlight .ie-spotlight-caption,
	.ie-modal-close {
		transition: none !important;
	}
	.ie-modal,
	.ie-modal::backdrop {
		animation: none !important;
	}
}