/*
 * Gandhi Cranes – front-end fixes (loaded by mu-plugins/gandhi-frontend-fixes.php).
 * Each block is numbered to match README.md. Selectors are scoped to the exact
 * page / Elementor element so nothing else on the site is affected.
 * Brand colours: navy #173e62, tan #bda588.
 */

/* Utility ------------------------------------------------------------------ */
.gc-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.gc-hidden {
	display: none !important;
}

/* 1. Page banners that loaded their image from the theme vendor's demo server
 *    (demo2wpopal.b-cdn.net now answers 403, so the banner showed plain black).
 *    Use the same banner image as every other inner page.                     */
.post-type-archive-osf_portfolio .page-title-bar,
.tax-osf_portfolio_cat .page-title-bar,
.page-id-270 .page-title-bar {
	background-image: url(../../uploads/2024/05/breadcrum-darken-2.png);
}

/* 2. Footer "Useful Links": the icon class is misspelled ("fasopal-icon-…"),
 *    so every item had an empty 25px icon slot and sat out of line with the
 *    "Company Info" list next to it.                                            */
.elementor-icon-list-icon:has(> i.fasopal-icon-chevron-right) {
	display: none !important; /* Elementor's own rule sets display:flex with higher priority */
}

.elementor-icon-list-item:has(i.fasopal-icon-chevron-right) .elementor-icon-list-text {
	padding-left: 0;
	padding-inline-start: 0;
}

/* 3. Social icons that have no link (footer). They are hidden only while they
 *    have no URL — add the real profile URL in Elementor and the icon returns. */
.elementor-social-icon:not([href]) {
	display: none;
}

.elementor-widget-social-icons:not(:has(a.elementor-social-icon[href])) {
	display: none;
}

/* 4. Footer "Newsletter" column has a heading but its signup form was removed.
 *    Hidden only while it contains no form — add a Mailchimp form and it returns. */
.elementor-element-b691749:not(:has(form)) {
	display: none;
}

/* 5. Equipment pages: "visit website" button that links to "#".              */
.breadcrumb-projects[href="#"],
.breadcrumb-projects[href=""] {
	display: none;
}

/* 6. Contact page map: remove the theme-demo hotspots ("Bangkok, Thailand",
 *    "Budapest, Hungary"…) and make the map open Google Maps (link added by JS). */
.page-id-341 .elementor-element-59c0f27 .opal-image-hotspots-main-icons {
	display: none !important;
}

.gc-map-link {
	display: block;
	position: relative;
	cursor: pointer;
}

.gc-map-link:focus-visible {
	outline: 3px solid #bda588;
	outline-offset: 3px;
}

.gc-map-cta {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 8px 14px;
	background: #173e62;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	border-radius: 2px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: background-color 0.2s ease;
}

.gc-map-link:hover .gc-map-cta,
.gc-map-link:focus-visible .gc-map-cta {
	background: #bda588;
}

/* 7. Our Accomplishments (page 270): certificates were stacked one per row at
 *    random sizes (page was ~15,000px tall, narrow letters left-aligned with
 *    empty space beside them). Show them as an even, responsive grid; each one
 *    opens full size in the site's lightbox (link added by JS).                  */
.page-id-270 .elementor-element-a0ce35e > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	align-items: start;
}

.page-id-270 .elementor-element-a0ce35e .elementor-widget-image-box {
	width: 100%;
	max-width: none;
	margin: 0;
}

.page-id-270 .elementor-element-a0ce35e .elementor-image-box-wrapper,
.page-id-270 .elementor-element-a0ce35e .elementor-image-framed {
	width: 100%;
}

.page-id-270 .elementor-element-a0ce35e .elementor-image-box-img {
	display: block;
	width: 100% !important;
	margin: 0 !important;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e7e2da;
	box-shadow: 0 6px 18px rgba(23, 62, 98, 0.08);
}

.page-id-270 .elementor-element-a0ce35e .elementor-image-box-img a,
.page-id-270 .elementor-element-a0ce35e .elementor-image-box-img img {
	display: block;
	width: 100%;
	height: 100%;
}

.page-id-270 .elementor-element-a0ce35e .elementor-image-box-img img {
	object-fit: contain;
	transition: transform 0.3s ease;
}

.page-id-270 .elementor-element-a0ce35e .elementor-image-box-img a {
	cursor: zoom-in;
}

.page-id-270 .elementor-element-a0ce35e .elementor-image-box-img a:hover img,
.page-id-270 .elementor-element-a0ce35e .elementor-image-box-img a:focus-visible img {
	transform: scale(1.03);
}

.page-id-270 .elementor-element-a0ce35e .elementor-image-box-img a:focus-visible {
	outline: 3px solid #bda588;
	outline-offset: -3px;
}

@media (max-width: 1024px) {
	.page-id-270 .elementor-element-a0ce35e > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.page-id-270 .elementor-element-a0ce35e > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 8. Client logos on phones: 2 per row instead of 1 (Our Clients page was
 *    ~9,000px tall on mobile).                                                 */
@media (max-width: 767px) {
	.elementor-widget-opal-brand [data-elementor-columns-mobile="1"] > .column-item {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* 9. Phone numbers / e-mails turned into tap-to-call / mailto links by JS:
 *    keep the surrounding text style.                                          */
a.gc-autolink {
	color: inherit;
	text-decoration: none;
}

a.gc-autolink:hover,
a.gc-autolink:focus-visible {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.page-id-270 .elementor-element-a0ce35e .elementor-image-box-img img,
	.gc-map-cta {
		transition: none;
	}

	.page-id-270 .elementor-element-a0ce35e .elementor-image-box-img a:hover img,
	.page-id-270 .elementor-element-a0ce35e .elementor-image-box-img a:focus-visible img {
		transform: none;
	}
}