/*
 * Full grid + icon styles. Copied verbatim from
 * `inc/class-services-feature-block.php` so the archive uses the same
 * layout / colour palette / responsive breakpoints as the front-page
 * feature block.
 */
.services-page-header                                           { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6rem 1rem; background-size: cover; background-repeat: no-repeat; }
.services-page-header h1,
.services-page-header p                                         { color: var(--color-light); }
.section-services-wrapper                                       { display: flex; flex-direction: column; align-items: center; width: 100%; background-color: var(--color-light-blue); padding: 6vw 1rem; min-height: 200px; color: var(--color-light); }
/*
 * (Removed: `.section-services-block__section-title` — the
 * block no longer renders per-trade `<h2>` titles; the chip row
 * tells the visitor which trade they're viewing.)
 */
.section-services-block                                         { display: flex; justify-content: center; width: 100%; max-width: 1200px; }
.section-services-wrapper__title                                { text-align: center; color: var(--color-dark); font-size: 3rem; margin-bottom: 50px; }
.section-services-wrapper__excerpt                              { text-align: center; color: var(--color-dark); font-size: 1.5rem; max-width: 60ch; margin: 0.5rem auto 0 auto; }
/*
 * The original CPT archive placed the chip row inside
 * `.section-services-wrapper` directly above the block. Scoped to
 * that legacy wrapper so it doesn't accidentally add a 3rem gap
 * between the unified services index chip row and the first trade
 * section (which now sit in different dark bands).
 */
.section-services-wrapper > .services-category-index + .section-services-block { padding-top: 3rem; }
.section-services-block__services                               { display: grid; grid-template-columns: repeat(auto-fill, minmax(46%, 1fr)); gap: 2rem; row-gap: 5rem; width: 100%; }
.section-services-block__services-icon                          { display: flex; justify-content: center; align-items: center; position: relative; max-width: 100px; width: 100%; margin: auto auto -3rem 2rem; padding: 10px; border-radius: 50%; aspect-ratio: 1/1; position: relative; z-index: 2; background-color: var(--color-accent); color: var(--color-light); transition: 0.2s background-color ease; }
.section-services-block__services-icon span                     { font-size: 1.5rem; font-family: var(--font-heading); font-weight: bolder; }
.section-services-block__services-icon:after                    { content: ""; position: absolute; inset: -15px; background-color: var(--color-light); z-index: -1; border-radius: inherit; border: 1px solid var(--color-accent); opacity: 0.2; }
.section-services-block__services-icon:has(img)                 { padding: 0; }
.section-services-block__services-icon img                      { max-width: 100%; width: 100%; height: 100%; aspect-ratio: 1/1; filter: brightness(0) invert(1); transition: 0.2s filter ease; }
.section-services-block__services-icon svg                      { width: 100%; height: 100%; }
.section-services-block__services-icon svg,
.section-services-block__services-icon svg *                    { fill: var(--color-light) !important; transition: 0.2s fill ease; }
.section-services-block__services-item                          { display: flex; flex-direction: column; }
.section-services-block__services-item__content                 { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; position: relative; background-color: var(--color-light); padding: 6rem 2rem 75px 2rem; border-radius: 7px; z-index: 1; }
.section-services-block__services-item__content:after           { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-accent-hover); z-index: -1; transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease; }
.section-services-block__services-item__content:hover:after     { transform: scaleY(1); }
.section-services-block__services-item__content-title           { color: var(--color-text); margin: 0 0 10px 0; font-size: 1.5rem; }
.section-services-block__services-item__content-title a         { text-decoration: none; color: inherit; }
.section-services-block__services-item__content-title,
.section-services-block__services-item__content-excerpt         { text-align: left; }
.section-services-block__services-item__content-excerpt         { margin-bottom: 0; color: var(--color-text); }
.section-services-block__services-item__content-button          { text-align: left; }
.section-services-block__services-item__content-link            { text-align: left; font-weight: bolder; color: var(--color-accent) }
.section-services-block__services-item__content > *             { position: relative; z-index: 1; }
.section-services-all-button                                    { grid-column: 1 / -1; margin: 50px auto 0 auto; max-width: 280px; display: block; }

/*
 * When the grid has an odd number of cards, the trailing card lands
 * alone in a half-width track with a wide empty cell beside it.
 * Target that orphaned last card (3rd, 5th, 7th, …) and span it
 * across the full grid so it sits centered and full-width.
 *
 * `:last-child:nth-child(odd)` matches the last child of any parent
 * when it is the 3rd, 5th, 7th … child. With the current
 * `minmax(46%, 1fr)` grid that's exactly the orphan case.
 */
.section-services-block__services-item:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 600px; width: 100%; margin: 0 auto; }

.section-services-block__services-item__content-button          { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); }

.section-services-block__services-item__content:hover .section-services-block__services-item__content-title,
.section-services-block__services-item__content:hover .section-services-block__services-item__content-excerpt,
.section-services-block__services-item__content:hover .section-services-block__services-item__content-link {
	color: var(--color-light);
}

.section-services-block__services-item:hover .section-services-block__services-icon {
	background-color: var(--color-light);
}

.section-services-block__services-item:hover .section-services-block__services-icon:after {
	background-color: transparent;
}

.section-services-block__services-item:hover .section-services-block__services-icon img {
	/* Recolour the PNG to black on hover so it matches the SVG. */
	filter: brightness(0);
}

.section-services-block__services-item:hover .section-services-block__services-icon span {
    color: var(--color-accent);
}

.section-services-block__services-item:hover .section-services-block__services-icon svg,
.section-services-block__services-item:hover .section-services-block__services-icon svg * {
	fill: #000 !important;
}

/*
 * Tab bar — sits at the top of the services section and shares the
 * dark gradient background with the grid. The
 * `.services-tabs.is-loading` modifier is toggled by the Interactivity
 * API while a tab is fetching its content; CSS uses it to dim the
 * content area so the busy state is visually obvious.
 */
.services-tabs                                                  { position: relative; }
.services-tabs.is-loading .section-services-block               { opacity: 0.5; transition: opacity 0.2s ease; }
/*
 * Pull the loading indicator out of the dimmed region's opacity
 * so the spinner itself stays at full strength while the content
 * area behind it dims.
 */
.services-tabs.is-loading .services-tabs__loading               { opacity: 1; }
.services-category-index                                        { padding: 0 1rem 2rem 1rem; }
.services-category-index__list                                  { list-style: none; margin: 0 auto; padding: 0; max-width: var(--content-width, 1200px); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.services-category-index__item a                                { display: inline-block; padding: 0.5rem 1.25rem; border-radius: 999px; background-color: rgba(255, 255, 255, 0.15); color: var(--color-light); text-decoration: none; font-weight: 600; letter-spacing: 0.02em; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer; }
.services-category-index__item a:hover,
.services-category-index__item a:focus-visible                  { background-color: var(--color-emergency); color: var(--color-light); outline: none; }
.services-category-index__item a.is-active                      { background-color: var(--color-emergency); color: var(--color-light); }

/*
 * Chip row inside the unified services index. The default
 * `.services-category-index` rule above assumes a dark parent
 * (the original CPT archive used `.section-services-wrapper` for
 * that). The new block pulls the chip row out of any dark band,
 * so it has to carry its own dark gradient — otherwise the
 * translucent white pills and `var(--color-light)` text disappear
 * against the page background.
 */
.section-services-index > .services-category-index              { background-color: var(--color-dark-bg, #000080); background-image: linear-gradient(120deg, var(--color-dark-bg, #000080), var(--color-dark, #000)); padding-top: 3rem; width: 100%; color: var(--color-light); }

/*
 * Loading indicator. Hidden by default; the Interactivity API flips
 * the `is-visible` class on the wrapper while `state.loading` is
 * true. CSS handles the show/hide so the JS only sets state, not
 * style.
 */
.services-tabs__loading                                         { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--color-light); background-color: rgba(11, 79, 108, 0.85); padding: 1rem 1.5rem; border-radius: 7px; pointer-events: none; z-index: 5; }
.services-tabs__loading.is-visible                              { display: flex; }
.services-tabs__loading-spinner                                 { width: 1.5rem; height: 1.5rem; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: var(--color-light); border-radius: 50%; animation: csl-tabs-spin 0.8s linear infinite; }
@keyframes csl-tabs-spin                                        { to { transform: rotate(360deg); } }

/* Error state — used when the REST request fails. */
.section-services-block__error                                  { color: var(--color-light); text-align: center; padding: 4rem 1rem; max-width: 60ch; margin: 0 auto; }
.section-services-block__error p                                { margin: 0; }
.section-services-block__empty                                  { color: var(--color-light); text-align: center; padding: 4rem 1rem; }

@media (max-width: 1200px) {
	.section-services-block__services { grid-template-columns: 1fr; }
}


/* Service Features Block */
#service-features-block .e-con-boxed                            { overflow: hidden; }
#service-features-block figure,
#service-features-block img                                     { display: block; width: 100%; max-width: 100%; margin: auto; aspect-ratio: 4/3; object-fit: cover; object-position: center center; }
#service-features-block h3                                      { margin: 15px auto; }
#service-features-block .elementor-image-box-description        { padding: 0 15px 15px 15px; }