/*
Theme Name:     Pro Design
Theme URI:      n/a
Template:       kadence
Author:         Pro Author
Author URI:     n/a
Description:    Child Theme Description
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/
a.arrow-button .kb-svg-icon-wrap svg{
	transition: all 0.3s ease-in-out;
}
a.arrow-button:hover .kb-svg-icon-wrap svg{
	transform: translateX(5px);
}

/* ─── DMA Button Style ────────────────────────────────────────────────────
 *
 * Applies the DMA button look (thick bottom border + gradient fill on hover)
 * to any Kadence Advanced Buttons block.
 *
 * HOW TO USE:
 *   Block editor → Advanced Buttons block → Advanced tab →
 *   Additional CSS Class(es) → type one of the classes below.
 *
 * CLASSES:
 *   dma-button-style          Red button on a white background (default)
 *   dma-button-style dma-btn-on-grey   Same but starts from a grey background
 *   dma-button-style dma-btn-on-red    White/ghost version for use on red backgrounds
 *                                      (hover fills a faint 15% white tint)
 *   dma-button-style dma-btn-fill-white  Same white/ghost start, but hover
 *                                      fills solid white with red text
 * ─────────────────────────────────────────────────────────────────────── */

/* Works whether the class is on the outer wrapper div OR the button span.
 * Using .kt-button (always present on Kadence buttons) raises specificity to
 * 0,3,0 so we beat Kadence's per-button-ID rules even when both use !important. */
.dma-button-style .kb-button.kt-button,
.kb-button.kt-button.dma-button-style {
	display: inline-block !important;
	border-top: 2px solid #e4002b !important;
	border-right: 2px solid #e4002b !important;
	border-left: 2px solid #e4002b !important;
	border-bottom: 7px solid #e4002b !important;
	border-radius: 3px !important;
	padding: 4px 24px !important;
	font-family: "mr-eaves-modern", sans-serif !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #007b8a !important;
	background-color: transparent !important;
	background-image: linear-gradient(to bottom, #fff 50%, #e4002b 50%) !important;
	background-size: 100% 200% !important;
	background-position: 0 0 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-position 0.5s ease-in-out, color 0.5s ease-in-out !important;
}

.dma-button-style .kb-button.kt-button:hover,
.dma-button-style .kb-button.kt-button:focus-visible,
.kb-button.kt-button.dma-button-style:hover,
.kb-button.kt-button.dma-button-style:focus-visible {
	background-position: 0 100% !important;
	color: #fff !important;
	border-color: #e4002b !important;
}

/* Modifier: grey background — gradient starts from grey */
.dma-button-style.dma-btn-on-grey .kb-button.kt-button,
.kb-button.kt-button.dma-button-style.dma-btn-on-grey {
	background-image: linear-gradient(to bottom, #ebebeb 50%, #e4002b 50%) !important;
}

/* Modifier: red background — white ghost version */
.dma-button-style.dma-btn-on-red .kb-button.kt-button,
.kb-button.kt-button.dma-button-style.dma-btn-on-red {
	border-top-color: #fff !important;
	border-right-color: #fff !important;
	border-left-color: #fff !important;
	border-bottom-color: #fff !important;
	color: #fff !important;
	background-image: linear-gradient(to bottom, transparent 50%, rgba(255,255,255,0.15) 50%) !important;
}
.dma-button-style.dma-btn-on-red .kb-button.kt-button:hover,
.kb-button.kt-button.dma-button-style.dma-btn-on-red:hover {
	background-position: 0 100% !important;
	color: #fff !important;
}

/* Modifier: white border/text at rest, solid white fill + red text on hover */
.dma-button-style.dma-btn-fill-white .kb-button.kt-button,
.kb-button.kt-button.dma-button-style.dma-btn-fill-white {
	border-top-color: #fff !important;
	border-right-color: #fff !important;
	border-left-color: #fff !important;
	border-bottom-color: #fff !important;
	color: #fff !important;
	background-image: linear-gradient(to bottom, transparent 50%, #fff 50%) !important;
}
.dma-button-style.dma-btn-fill-white .kb-button.kt-button:hover,
.dma-button-style.dma-btn-fill-white .kb-button.kt-button:focus-visible,
.kb-button.kt-button.dma-button-style.dma-btn-fill-white:hover,
.kb-button.kt-button.dma-button-style.dma-btn-fill-white:focus-visible {
	background-position: 0 100% !important;
	color: #e4002b !important;
	border-color: #fff !important;
}

/* ─── Kadence Advanced Gallery (Fluid Carousel) — "Arrows: Outside" fix ──
 * Kadence Blocks 3.7.8's own CSS for the Outside arrow positions expects
 * the carousel root to carry `kb-slider-group-arrows` (plural) with
 * `.splide`/`.kb-splide` as a DESCENDANT. What the Fluid Carousel type
 * actually renders (confirmed on the About page's slider, kt-blocks-carousel
 * splide ... kb-slider-group-arrow kb-slider-arrow-position-outside-bottom
 * kb-splide, all on ONE element) is `kb-slider-group-arrow` — singular —
 * with .splide/.kb-splide on that same element, not a descendant. Kadence's
 * selectors never match either mismatch, so the arrows silently fall back
 * to their default centered-over-the-slide position regardless of the
 * Outside setting. This isn't anything in our own theme code — verified via
 * an isolated reproduction using only Kadence's own compiled CSS — it's a
 * markup/CSS mismatch inside Kadence Blocks itself for this gallery type.
 * Re-implements just the position math those rules were meant to apply,
 * scoped to the classes actually present, so it only affects carousels
 * using an Outside arrow position (nothing else on the site is touched).
 */
.kt-blocks-carousel.kb-slider-arrow-position-outside-bottom .splide__arrows,
.kt-blocks-carousel.kb-slider-arrow-position-outside-top .splide__arrows {
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
}
.kt-blocks-carousel.kb-slider-arrow-position-outside-bottom .splide__arrows {
	top: auto;
	bottom: -2rem;
}
.kt-blocks-carousel.kb-slider-arrow-position-outside-top .splide__arrows {
	top: -2rem;
	bottom: auto;
}
.kt-blocks-carousel.kb-slider-arrow-position-outside-bottom-left .splide__arrows,
.kt-blocks-carousel.kb-slider-arrow-position-outside-bottom-right .splide__arrows,
.kt-blocks-carousel.kb-slider-arrow-position-outside-top-left .splide__arrows,
.kt-blocks-carousel.kb-slider-arrow-position-outside-top-right .splide__arrows {
	position: absolute;
	top: auto;
}
.kt-blocks-carousel.kb-slider-arrow-position-outside-bottom-left .splide__arrows  { left: 1rem;  bottom: -4rem; }
.kt-blocks-carousel.kb-slider-arrow-position-outside-bottom-right .splide__arrows { right: 1rem; bottom: -4rem; }
.kt-blocks-carousel.kb-slider-arrow-position-outside-top-left .splide__arrows     { left: 1rem;  top: -4rem; bottom: auto; }
.kt-blocks-carousel.kb-slider-arrow-position-outside-top-right .splide__arrows    { right: 1rem; top: -4rem; bottom: auto; }

.kt-blocks-carousel[class*="kb-slider-arrow-position-outside"] .splide__arrow {
	position: static;
	top: auto;
	transform: none;
}

/* Service single pages: the CTA row's decorative SVG is absolutely
   positioned off the right edge (right:-180px, per-block CSS on the
   "service" CPT content) so it can peek past the column on desktop —
   on mobile that same offset pushes it past the viewport, causing
   horizontal scroll. */
.single-service .cta-section {
	overflow: hidden;
}