/*
 * caffeinated-helper / sliders.css
 *
 * Fixes for Qode (Archicon) Swiper-based sliders on the site:
 *  1. Allow nav arrows to render OUTSIDE the swiper container (the theme
 *     applies overflow: hidden which clips anything that overflows).
 *  2. Hide pagination dots site-wide on Qode swipers.
 *  3. Add a soft fade on the left/right edges so any partial slide cutoff
 *     during transitions looks intentional instead of clipped.
 *
 * Targeting is scoped to .qodef-swiper-container so we don't touch other
 * sliders (Elementor background slideshow, Slider Revolution, etc.).
 */

/* ---------------------------------------------------------------
 * 1. Nav arrows outside the slider.
 *    The .qodef-swiper-container has overflow: hidden, so we wrap arrows
 *    in a parent that does NOT clip and position them in that parent.
 *    We rely on the .qodef-swiper-container being inside an
 *    .elementor-widget-container (or .qodef-shortcode parent) which has
 *    visible overflow by default.
 * ------------------------------------------------------------ */

.qodef-swiper-container {
	/* Add space on the sides for the absolute-positioned arrows. */
	padding-left: 0;
	padding-right: 0;
}

/* Promote the relative anchoring point to the widget container so the
 * absolute-positioned arrows aren't clipped. */
.elementor-widget-container:has(.qodef-swiper-container),
.qodef-shortcode:has(.qodef-swiper-container) {
	position: relative;
	overflow: visible;
}

/* Relocated nav arrows — placed below the slider via JS DOM relocation.
 * Anchored to the slider's widget container (overflow:visible) so they aren't
 * clipped by the slider's own overflow:hidden. */
.csh-relocated-arrow.swiper-button-prev,
.csh-relocated-arrow.swiper-button-next {
	position: absolute !important;
	bottom: 18px !important;
	top: auto !important;
	transform: none !important;
	z-index: 10;
	width: 40px !important;
	height: 40px !important;
	background: transparent;
	color: #1a1a1a !important;
	cursor: pointer;
	transition: opacity 0.15s ease;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Prev at the LEFT edge, next at the RIGHT edge of the slider area. */
.csh-relocated-arrow.swiper-button-prev {
	left: 0 !important;
	right: auto !important;
}
.csh-relocated-arrow.swiper-button-next {
	right: 0 !important;
	left: auto !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
	opacity: 0.6;
}

.csh-relocated-arrow::after,
.swiper-button-prev::after,
.swiper-button-next::after {
	font-family: swiper-icons, "swiper-icons";
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

/* Disabled / lock states (Swiper toggles these when at first/last slide
 * on non-loop sliders). */
.swiper-button-disabled,
.swiper-button-lock {
	opacity: 0.25 !important;
	pointer-events: none;
}

/* Reserve space for the arrows below the slider by adding bottom margin
 * to the slider itself, not the widget container. */
.qodef-swiper-container {
	margin-bottom: 70px;
}

/* ---------------------------------------------------------------
 * 2. Hide pagination dots on Qode + Qi swipers.
 * ------------------------------------------------------------ */
.qodef-swiper-container ~ .swiper-pagination,
.elementor-widget-container .qodef-swiper-container + .swiper-pagination,
.qodef-shortcode .swiper-pagination,
.qodef-swiper-container .swiper-pagination,
.qodef-qi-swiper-container ~ .swiper-pagination,
.qodef-qi-swiper-container .swiper-pagination,
.elementor-widget-qi_addons_for_elementor_image_slider .swiper-pagination,
.elementor-widget-qi_addons_for_elementor_image_slider .qodef-qi-swiper-pagination {
	display: none !important;
}

/* ---------------------------------------------------------------
 * 3. (No edge fade — it clipped leading characters on the leftmost
 *    slide. The spaceBetween fix + arrow relocation handle the
 *    partial-slide concern instead.)
 * ------------------------------------------------------------ */
.qodef-swiper-container {
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

/* Restore Swiper's spaceBetween as a visible margin between slides on every
 * multi-column Qode/Qi swiper. Archicon Core ships a
 * `margin-right: 0 !important` rule on article/span.qodef-e.swiper-slide;
 * without overriding it, slides pack edge-to-edge and the cards' right
 * edges are clipped (or a partial next-slide peek shows).
 *
 * Scoped with `:not(.qodef-col-num--1)` so single-slide carousels (e.g.
 * testimonials) skip this — their spaceBetween is already forced to 0
 * by sliders.js so they fill the container exactly. */
.qodef-swiper-container:not(.qodef-col-num--1) article.qodef-e.swiper-slide,
.qodef-swiper-container:not(.qodef-col-num--1) span.qodef-e.swiper-slide,
.qodef-qi-swiper-container:not(.qodef-col-num--1) article.qodef-e.swiper-slide,
.qodef-qi-swiper-container:not(.qodef-col-num--1) span.qodef-e.swiper-slide {
	margin-right: 20px !important;
}

/* No edge mask on the portfolio slider — the margin-right rule above makes
 * the right edge fit cleanly without needing a fade. */
.qodef-portfolio-list.qodef-swiper-container {
	-webkit-mask-image: none !important;
	        mask-image: none !important;
}

/* Blog slider (Related Articles on service pages): add visible spacing
 * between cards. Swiper packs slides edge-to-edge in the DOM and locks
 * each slide's box width via inline style, so we use padding-right with
 * border-box to carve a 20px gap inside each slide WITHOUT changing the
 * slide's outer width (which would break Swiper's positioning math). */
/* (Margin-right between blog slides is now covered by the generic
 * multi-column rule above — no specific .qodef-blog rule needed.) */

/* Elementor Image Carousel (Past Projects page): arrows live at the
 * bottom-left and bottom-right outside the slider, matching the site's
 * standard slider arrow placement. sliders.js relocates them out of the
 * overflow:hidden wrapper into the widget element. */
.elementor-widget-image-carousel {
	position: relative;
	padding-bottom: 56px;
}
.elementor-widget-image-carousel .csh-elem-carousel-arrow {
	position: absolute !important;
	top: auto !important;
	bottom: 8px !important;
	margin: 0 !important;
	width: 40px !important;
	height: 40px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	transform: none !important;
	z-index: 5;
}
.elementor-widget-image-carousel .csh-elem-carousel-arrow.elementor-swiper-button-prev {
	left: 0 !important;
	right: auto !important;
}
.elementor-widget-image-carousel .csh-elem-carousel-arrow.elementor-swiper-button-next {
	right: 0 !important;
	left: auto !important;
}
.elementor-widget-image-carousel .csh-elem-carousel-arrow svg {
	width: 24px;
	height: 24px;
	fill: #1a1a1a;
}
.elementor-widget-image-carousel .csh-elem-carousel-arrow:hover svg {
	fill: #837c01;
}
.elementor-widget-image-carousel .csh-elem-carousel-arrow.swiper-button-disabled {
	opacity: 0.25 !important;
	pointer-events: none;
}
/* No right-edge mask on the blog slider: with the margin-right rule above,
 * 4 cards fit exactly and there's no partial peek to hide. */
.qodef-blog.qodef-swiper-container {
	-webkit-mask-image: none !important;
	        mask-image: none !important;
}

/* Nav buttons we inject for the portfolio list (autoplay replaced with
 * manual nav). The widget container has the same height as the slider, so
 * the default `bottom: 18px` would overlap the card text. Position with
 * `top: 100%` so the arrows live in the slider's margin-bottom space. We
 * also override the chevron content to a Unicode glyph because the
 * swiper-icons font isn't always loaded on pages without native nav. */
.csh-nav-injected.swiper-button-prev,
.csh-nav-injected.swiper-button-next {
	top: calc(100% + 12px) !important;
	bottom: auto !important;
	margin: 0 !important;
}
/* Match the gallery arrow look: same swiper-icons font + ligature glyphs
 * ("prev" / "next" render as Swiper's built-in chevrons). */
.csh-nav-injected.swiper-button-prev::after,
.csh-nav-injected.swiper-button-next::after {
	display: block !important;
	font-family: swiper-icons, "swiper-icons" !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #1a1a1a !important;
}
.csh-nav-injected.swiper-button-prev::after { content: 'prev' !important; }
.csh-nav-injected.swiper-button-next::after { content: 'next' !important; }

/* Stop Qi's stylesheet from adding an extra margin-left on slides — Swiper
 * already handles inter-slide gap via inline margin-right (spaceBetween).
 * Without this, the visual gap doubles. */
.qodef-qi-swiper-container .swiper-slide {
	margin-left: 0 !important;
}

/* Subtle border + drop shadow so low-contrast images (e.g. white bathroom
 * on white page) have a clear visible edge against the page background. */
.qodef-qi-swiper-container .swiper-slide img {
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
}

/* No mask-image fade on Qi sliders — with centeredSlides off, the leading
 * slide sits flush against the left edge and the fade would cut into the
 * first image. */
.qodef-qi-swiper-container {
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

.elementor-widget-qi_addons_for_elementor_image_slider {
	position: relative;
	overflow: visible;
}
.elementor-widget-qi_addons_for_elementor_image_slider .swiper-button-prev,
.elementor-widget-qi_addons_for_elementor_image_slider .swiper-button-next {
	position: absolute;
	top: calc(100% + 18px);
	transform: none;
	z-index: 10;
	width: 40px;
	height: 40px;
}
.elementor-widget-qi_addons_for_elementor_image_slider .swiper-button-prev {
	left: calc(50% - 46px);
	right: auto;
}
.elementor-widget-qi_addons_for_elementor_image_slider .swiper-button-next {
	left: calc(50% + 6px);
	right: auto;
}
.qodef-qi-swiper-container {
	margin-bottom: 70px;
}

/* (Centering for the Slip Resistance coloured-box columns is now handled
 * by Elementor's own Container > Content Width: Boxed + Align Items: Center
 * settings, set directly on the page data — no CSS override needed.) */