/* ── Slider prev/next navigation ─────────────────────────────────── */
.slider-nav {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	padding: 20px var(--containerPaddingX) 0;
}

.slider-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(249, 248, 245, 0.35);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.2s, opacity 0.2s;
	flex-shrink: 0;
}

.slider-nav__btn svg path {
	fill: #F9F8F5;
}

.slider-nav__prev svg {
	transform: scaleX(-1);
	display: block;
}

.slider-nav__btn:disabled {
	opacity: 0.25;
	cursor: default;
}

.slider-nav__btn:not(:disabled):hover {
	border-color: #F9F8F5;
}

/* Dark buttons for light-background sections (e.g. gallery) */
.slider-nav--on-light .slider-nav__btn {
	border-color: rgba(30, 34, 21, 0.3);
}

.slider-nav--on-light .slider-nav__btn svg path {
	fill: #1E2215;
}

.slider-nav--on-light .slider-nav__btn:not(:disabled):hover {
	border-color: #1E2215;
}

.gallery-slider-wrap {
	width: 100%;
}

/* Accessibility retagging (div → h1/h2) must not change the look: undo the
   browser's default heading size/weight so these render exactly as the old
   <div>s did. :where() keeps specificity at 0, so the classes' own
   font-size/font-weight rules still win. */
:where(h1.homep__hero__text__title, h2.section-header__title, h2.faq__section__question) {
	font-size: inherit;
	font-weight: inherit;
}