/**
 * Skins for the two Service Category archive sections whose markup belongs to
 * classic Elementor widgets, where global classes cannot reach: the FAQ
 * accordion and the related-projects carousel.
 *
 * FAQ accordion
 * -------------
 *
 * The FAQ list is a Loop Grid whose loop item is Elementor's classic accordion
 * widget with a single item, so its markup is the widget's own -- global
 * classes cannot reach inside it. These rules are the one place the design
 * system is expressed as raw CSS; every value is a design token
 * (`var(--…)` from the kit) rather than a literal, per §2 of rcce-design.md.
 *
 * Scoped to .rcce-faq-item, the CSS class set on the accordion widget.
 */

.rcce-faq-item .elementor-accordion .elementor-accordion-item {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 250ms, box-shadow 250ms;
}

.rcce-faq-item .elementor-accordion .elementor-accordion-item:hover {
    border-color: rgba(13, 139, 179, 0.35);
    box-shadow: 0 12px 28px -8px rgba(11, 37, 58, 0.08);
}

.rcce-faq-item .elementor-accordion .elementor-tab-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin: 0;
    padding: var(--s-5) var(--s-6);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--body), sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--navy);
    transition: color 250ms;
}

.rcce-faq-item .elementor-accordion .elementor-tab-title .elementor-accordion-title {
    flex: 1 1 auto;
    font: inherit;
    color: inherit;
    text-decoration: none;
}

.rcce-faq-item .elementor-accordion .elementor-tab-title.elementor-active {
    color: var(--brand);
}

/* The chevron is drawn here rather than set as the widget's icon: the widget's
   icon control is Font Awesome, and this site uses no icon fonts (§ rule 8). */
.rcce-faq-item .elementor-accordion .elementor-tab-title::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-block-start: -4px;
    border-inline-end: 2px solid var(--brand);
    border-block-end: 2px solid var(--brand);
    transform: rotate(45deg);
    transition: transform 250ms;
}

.rcce-faq-item .elementor-accordion .elementor-tab-title.elementor-active::after {
    margin-block-start: 4px;
    transform: rotate(-135deg);
}

.rcce-faq-item .elementor-accordion .elementor-accordion-title:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.rcce-faq-item .elementor-accordion .elementor-tab-content {
    padding: var(--s-4) var(--s-6) var(--s-5);
    border-block-start: 1px solid var(--line-subtle);
    font-family: var(--body), sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-muted);
}

.rcce-faq-item .elementor-accordion .elementor-tab-content > :first-child {
    margin-block-start: 0;
}

.rcce-faq-item .elementor-accordion .elementor-tab-content > :last-child {
    margin-block-end: 0;
}

.rcce-faq-item .elementor-accordion .elementor-tab-content p {
    margin-block: 0 var(--s-3);
}

.rcce-faq-item .elementor-accordion .elementor-tab-content ul,
.rcce-faq-item .elementor-accordion .elementor-tab-content ol {
    margin: 0 0 var(--s-3);
    padding-inline-start: var(--s-5);
}

.rcce-faq-item .elementor-accordion .elementor-tab-content li {
    margin-block-end: var(--s-1);
}

.rcce-faq-item .elementor-accordion .elementor-tab-content a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 767px) {
    .rcce-faq-item .elementor-accordion .elementor-tab-title {
        padding: var(--s-4) var(--s-5);
        font-size: 16px;
    }

    .rcce-faq-item .elementor-accordion .elementor-tab-content {
        padding: var(--s-4) var(--s-5);
    }
}


/**
 * Related-content carousels (projects, testimonials).
 *
 * A category holding fewer items than the carousel shows slides has nothing
 * to scroll, and the arrows become dead controls sitting over the first card.
 * Two states to catch: Swiper initialised and marking them `swiper-button-lock`,
 * and Swiper never initialising at all (a single slide), where no state class is
 * added and the wrapper has to be read instead.
 *
 * Both selectors deliberately repeat Elementor's own `.swiper ~ ...` shape:
 * `.elementor-element .swiper ~ .elementor-swiper-button{display:inline-flex}`
 * in e-swiper.css is three classes and loads after this file, so anything at or
 * below that specificity loses the tie -- Swiper's own
 * `.swiper-button-lock{display:none}` included, which is why the arrows show at
 * all. Scoped to this carousel, so the homepage's arrows are untouched.
 */

.rcce-carousel .swiper ~ .elementor-swiper-button.swiper-button-lock,
.rcce-carousel:has( .swiper:not( .swiper-initialized ) ) .swiper ~ .elementor-swiper-button {
    display: none;
}


/**
 * Swiper does not initialise at all when a category holds a single item, so the
 * lone slide stretches the full 1200px of the wrap -- one enormous cropped image
 * where every other card on the site is a third of a row. Give it the width it
 * would have had as one of three, and centre it, so a category with one project
 * or one review still reads as a card rather than a banner.
 *
 * The 22px is the carousel's own slide spacing (`image_spacing_custom`).
 */

.rcce-carousel:has( .swiper:not( .swiper-initialized ) ) .swiper-wrapper {
    justify-content: center;
    gap: 22px;
}

.rcce-carousel:has( .swiper:not( .swiper-initialized ) ) .swiper-slide {
    flex: 0 1 calc( ( 100% - 44px ) / 3 );
}

@media (max-width: 1024px) {
    .rcce-carousel:has( .swiper:not( .swiper-initialized ) ) .swiper-slide {
        flex-basis: calc( ( 100% - 22px ) / 2 );
    }
}

@media (max-width: 767px) {
    .rcce-carousel:has( .swiper:not( .swiper-initialized ) ) .swiper-slide {
        flex-basis: 100%;
    }
}

/**
 * Room for the hover lift.
 *
 * The cards rise 5px and cast a 40px shadow on hover, but `.swiper` clips to
 * its own box and a card's top edge sits exactly on that boundary — so the lift
 * is sliced off, taking the card's top border and rounded corners with it.
 *
 * Pad the clip box and pull the padding straight back out with a matching
 * negative margin: the cards stay exactly where they were, the section's
 * spacing is unchanged, and the lift now has somewhere to go. Vertical only —
 * horizontal padding would widen the visible strip and let the next slide peek
 * into it once a category has more items than the carousel shows.
 */

.rcce-carousel .swiper {
    padding-block: 24px 28px;
    margin-block: -24px -28px;
}

/**
 * ...and a second clip box in the un-initialised state. Elementor hides the
 * slides that overflow before Swiper takes over with
 * `.swiper:not(.swiper-initialized) > .swiper-wrapper{overflow:hidden}` — and a
 * category with a single item never initialises, so that rule stays for good and
 * clips the lift again, this time at the wrapper. Same trick, same numbers, so
 * the card still rests exactly where it did.
 *
 * Padding rather than `overflow: visible`: if the carousel's script never runs
 * on a category with several items, the wrapper should still be the thing that
 * contains them.
 */

.rcce-carousel .swiper:not( .swiper-initialized ) > .swiper-wrapper {
    padding-block: 24px 28px;
    margin-block: -24px -28px;
}

/**
 * Loop Grid pagination (Blog Archive, Projects Archive)
 * -----------------------------------------------------
 *
 * The page numbers are the classic Loop Grid's own markup
 * (nav.elementor-pagination > a.page-numbers / span.current), so no global
 * class reaches them. Out of the box they were bare kit-link-coloured digits,
 * flush left. Skinned as square buttons in the c-btn family: outlined like
 * c-btn--ghost at rest, solid brand for the current page.
 */

.elementor-widget-loop-grid .elementor-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--s-2);
    margin-block-start: var(--s-7);
}

.elementor-widget-loop-grid .elementor-pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding-inline: var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(11, 37, 58, 0.04);
    font-family: var(--body), sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--navy);
    text-decoration: none;
    transition: all 250ms;
}

.elementor-widget-loop-grid .elementor-pagination a.page-numbers:hover,
.elementor-widget-loop-grid .elementor-pagination a.page-numbers:focus-visible {
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: 0 12px 28px -8px rgba(11, 37, 58, 0.08);
    transform: translateY(-2px);
}

.elementor-widget-loop-grid .elementor-pagination .page-numbers.current {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--surface);
    box-shadow: 0 4px 14px rgba(13, 139, 179, 0.25);
}

/* "…" when there are many pages: text, not a button. */
.elementor-widget-loop-grid .elementor-pagination .page-numbers.dots {
    min-width: auto;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--ink-muted);
}

@media (max-width: 767px) {
    .elementor-widget-loop-grid .elementor-pagination {
        margin-block-start: var(--s-6);
    }

    .elementor-widget-loop-grid .elementor-pagination .page-numbers {
        min-width: 40px;
        height: 40px;
    }
}

/* Category card points: first N show, the rest toggle (assets/points.js).
   `.elementor` prefix: the list class's nested `li { display:flex }` and the
   theme's button reset both load later at equal specificity. */
.elementor .rcce-points li.rcce-more { display: none; }
.elementor .rcce-points.is-open li.rcce-more { display: flex; }
.elementor .rcce-points-toggle,
.elementor .rcce-points-toggle:hover,
.elementor .rcce-points-toggle:focus {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin-block-start: var(--s-3, 12px);
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--brand);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.elementor .rcce-points-toggle:hover,
.elementor .rcce-points-toggle:focus { color: var(--brand-hover); }
.elementor .rcce-points-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.elementor .rcce-points-toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 250ms;
}
.elementor .rcce-points-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

/* A Service with no excerpt / delivery note leaves an empty paragraph whose
   flex gap still opens a hole; drop it. */
.elementor [id^="service-"] p.e-paragraph-base:empty { display: none; }

/* A dynamic heading with nothing to print (e.g. a category with no hero tagline). */
.elementor .e-heading-base:empty { display: none; }

/* Category hero intro: first paragraph shows, the rest toggle (assets/points.js). */
.elementor .rcce-intro-more { display: none; }
.elementor .is-open > .rcce-intro-more { display: inline; }
.elementor .rcce-points-toggle.rcce-intro-toggle { align-self: flex-start; margin-block-start: 0; }

/*
 * "How We Investigate" and process sections (Service Category archive)
 * ---------------------------------------------------------------------
 *
 * Both lists come from term meta through the rcce-term-lines tag, so their
 * item count varies per category and they cannot be atomic elements.
 */

.elementor .rcce-method-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3) var(--s-6);
}

.elementor .rcce-method-list li {
    position: relative;
    padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 26px);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    font-family: var(--body), sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--navy);
}

/* Tick drawn with borders, as the FAQ chevron is: no icon fonts on this site. */
.elementor .rcce-method-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: var(--s-5);
    inset-block-start: calc(var(--s-4) + 4px);
    width: 6px;
    height: 11px;
    border-inline-end: 2px solid var(--brand);
    border-block-end: 2px solid var(--brand);
    transform: rotate(45deg);
}

.elementor .rcce-process-list {
    list-style: none;
    counter-reset: rcce-process;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-4);
}

.elementor .rcce-process-list li {
    counter-increment: rcce-process;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    font-family: var(--body), sans-serif;
}

.elementor .rcce-process-list li::before {
    content: counter(rcce-process, decimal-leading-zero);
    margin-block-end: var(--s-1);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--brand);
}

.elementor .rcce-process-list strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--navy);
}

.elementor .rcce-process-list span {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-muted);
}

@media (max-width: 1024px) {
    .elementor .rcce-process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .elementor .rcce-method-list,
    .elementor .rcce-process-list { grid-template-columns: minmax(0, 1fr); }
}

/* Service turnaround headline with more than one line (rcce-service-meta). */
.elementor .rcce-meta-lines {
    display: block;
    font-size: 20px;
    line-height: 1.4;
}

/*
 * Mobile tap targets (QA at 360/390/430 px)
 * -----------------------------------------
 *
 * Text-sized links/toggles grow to a ~44px tap area; the negative margins
 * cancel the padding so the visible layout does not move.
 */
@media (max-width: 767px) {
	.elementor .rcce-points-toggle,
	.elementor .rcce-points-toggle:hover,
	.elementor .rcce-points-toggle:focus {
		padding-block: 12px;
		margin-block: calc(var(--s-3, 12px) - 12px) -12px;
	}

	.elementor .rcce-points-toggle.rcce-intro-toggle { margin-block: -12px; }

	/* Homepage "See all reviews". */
	.elementor a[data-id="gr0c00d"] { padding-block: 12px; margin-block: -12px; }

	/* Footer legal menu (About / Projects / Contact). `body` outranks the
	   widget's own zero padding (.elementor-329 .elementor-element...). */
	body .elementor-329 .elementor-element.elementor-element-fd00861 .elementor-nav-menu--main .elementor-item { padding-block: 12px; }
}