/* ==========================================================================
   CBP Andwisco — [andwis_block]
   Tabbed list on desktop (xxl+), single-open accordion on mobile.
   Bootstrap 5 is assumed to be present on the page.
   ========================================================================== */

.andwis-block .andwis-items {
	position: relative;
}

/* The wrapper element exists only as a grid host on desktop. */
.andwis-item {
	display: block;
}


.andwis-block h2 {
	font-size: clamp(1.42rem, calc(1.07rem + 1.77vw), 2.44rem);
	font-weight: 600;
	margin-bottom: 1rem;
}
.andwis-block h3 {
	font-size: clamp(1.13rem, calc(0.97rem + 0.76vw), 1.56rem);
	font-weight: 600;
	margin-bottom: 0.75rem;
}

/* Brand colours for the "andwis." wordmark in the heading.
   Defined here (rather than inline) because wp_kses' safecss filter
   strips inline style values, and these are not guaranteed to exist
   in the active theme's colour palette. */
.andwis-block .andwis-brand {
	color: hsl(126, 40%, 18%);
}
.andwis-block .andwis-brand__dot {
	color: hsl(155, 100%, 34%);
}

/* --------------------------------------------------------------------------
   Trigger (icon + title)
   -------------------------------------------------------------------------- */
.andwis-item__trigger {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1rem 1.25rem;
	margin: 0;
	background-color: hsl(126, 40%, 18%);
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	text-align: left;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.andwis-item:first-child .andwis-item__trigger {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.andwis-item__trigger:hover,
.andwis-item__trigger:focus-visible {
	/* background-color: rgba(0, 0, 0, 0.04); */
	background-color: hsl(127deg, 45%, 78%);
	color: #000;
}

.andwis-item__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.andwis-item__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
}

.andwis-item__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.andwis-item__title {
	flex: 1 1 auto;
	font-weight: 700;
	line-height: 1.2;
}

/* Chevron — only visible in accordion (mobile) mode. */
.andwis-item__chevron {
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.andwis-item__trigger[aria-expanded="true"] .andwis-item__chevron {
	transform: rotate(-135deg);
}

/* --------------------------------------------------------------------------
   Detail panel
   -------------------------------------------------------------------------- */
.andwis-item__panel {
	position: relative;
	overflow: hidden;
	padding: 1.25rem 1.5rem;
	background-color: hsl(127deg, 45%, 78%);
}

.andwis-item__panel[hidden] {
	display: none;
}

.andwis-item__watermark {
	position: absolute;
	right: -1rem;
	bottom: -1rem;
	width: 11rem;
	max-width: 55%;
	height: auto;
	opacity: 0.15;
	pointer-events: none;
	z-index: 0;
}

.andwis-item__body {
	position: relative;
	z-index: 1;
}

.andwis-item__title-lg {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.andwis-item__subtitle {
	margin-top: 0.25rem;
	font-weight: 600;
	opacity: 0.85;
}

.andwis-item__content {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* .andwis-item__content p:last-child {
	margin-bottom: 0;
} */

.andwis-item__link a {
	color: #000;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease;
}
.andwis-item__link a:hover,
.andwis-item__link a:focus-visible {
	border-color: currentColor;
}

/* Empty state — hidden on mobile (accordion needs no placeholder). */
.andwis-items__empty {
	display: none;
}

/* --------------------------------------------------------------------------
   Desktop (xxl ≥ 1400px): left-tabbed list + single detail column
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
	.andwis-block .andwis-items {
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: start;
		gap: 0.5rem .5rem;
	}

	/* Let triggers and panels become direct grid participants. */
	.andwis-item {
		display: contents;
	}

	/* All triggers stack in column 1. */
	.andwis-item__trigger {
		grid-column: 1;
	}

	.andwis-item__chevron {
		display: none;
	}

	/* Active trigger highlight. */
	.andwis-item__trigger[aria-expanded="true"] {
		/* background-color: rgba(0, 0, 0, 0.06); */
		background-color: hsl(127deg, 45%, 78%);
		color: #000;
	}

	/* All panels + the empty state share the single right-hand area,
	   overlapping. They are absolutely positioned inside their grid area
	   (column 2) so they do NOT contribute to row sizing — the trigger
	   list in column 1 alone defines the height of the block. Only the
	   active panel is visible (others use [hidden] / display:none). */
	.andwis-item__panel,
	.andwis-items__empty {
		position: absolute;
		inset: 0;
		grid-column: 2;
	}

	/* Empty state visible until a service is selected. */
	.andwis-items__empty {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2rem;
		text-align: center;
		color: rgba(0, 0, 0, 0.5);
		border: 1px dashed rgba(0, 0, 0, 0.2);
		border-radius: 0.5rem;
	}

	.andwis-items.has-active .andwis-items__empty {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Reveal animation (respecting reduced-motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.andwis-item__panel:not([hidden]) .andwis-item__body {
		animation: andwis-fade-in 0.25s ease both;
	}
}

@keyframes andwis-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}