/**
 * Shared frontend button system.
 *
 * Primary: Scuba Tribe orange on navy text.
 * Secondary: navy outline on light surfaces, white outline on dark surfaces.
 */
:root {
	--st-button-orange: #f58220;
	--st-button-orange-hover: #ff963d;
	--st-button-navy: #082b45;
	--st-button-radius: 999px;
	--st-button-shadow: 0 10px 24px rgba(8, 43, 69, 0.16);
}

:is(
	.st-hero__button,
	.st-home__button,
	.st-dive-button,
	.st-course__button,
	.st-accommodation__button,
	.st-restaurant__button,
	.st-manta__button,
	.st-site-page__cta,
	.st-site-page__button,
	.st-site-page__highlight-button,
	.st-sites__cta,
	.st-why__cta,
	.st-day__cta,
	.st-faq__cta,
	.st-final-cta__button,
	.st-structured-page__cta a,
	.st-structured-page__cards a,
	.st-booking-email,
	.wp-block-button__link,
	.brxe-button,
	.gform_wrapper .gform_button,
	.gform_wrapper button[type="submit"],
	.gform_wrapper input[type="submit"]
) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 14px 28px;
	border: 1px solid var(--st-button-orange);
	border-radius: var(--st-button-radius);
	color: #fff;
	background: var(--st-button-orange);
	box-shadow: var(--st-button-shadow);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: color 200ms ease, background-color 200ms ease,
		border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

:is(
	.st-hero__button,
	.st-home__button,
	.st-dive-button,
	.st-course__button,
	.st-accommodation__button,
	.st-restaurant__button,
	.st-manta__button,
	.st-site-page__cta,
	.st-site-page__button,
	.st-site-page__highlight-button,
	.st-sites__cta,
	.st-why__cta,
	.st-day__cta,
	.st-faq__cta,
	.st-final-cta__button,
	.st-structured-page__cta a,
	.st-structured-page__cards a,
	.st-booking-email,
	.wp-block-button__link,
	.brxe-button,
	.gform_wrapper .gform_button,
	.gform_wrapper button[type="submit"],
	.gform_wrapper input[type="submit"]
):hover {
	border-color: var(--st-button-navy);
	color: var(--st-button-orange);
	background: var(--st-button-navy);
	box-shadow: 0 12px 28px rgba(8, 43, 69, 0.2);
	transform: translateY(-2px);
}

:is(
	.st-hero__button,
	.st-home__button,
	.st-dive-button,
	.st-course__button,
	.st-accommodation__button,
	.st-restaurant__button,
	.st-manta__button,
	.st-site-page__cta,
	.st-site-page__button,
	.st-site-page__highlight-button,
	.st-sites__cta,
	.st-why__cta,
	.st-day__cta,
	.st-faq__cta,
	.st-final-cta__button,
	.st-structured-page__cta a,
	.st-structured-page__cards a,
	.st-booking-email,
	.wp-block-button__link,
	.brxe-button,
	.gform_wrapper .gform_button,
	.gform_wrapper button[type="submit"],
	.gform_wrapper input[type="submit"]
):focus-visible {
	outline: 3px solid rgba(39, 198, 200, 0.72);
	outline-offset: 3px;
}

/* Secondary buttons on light surfaces. */
:is(
	.st-hero__button--secondary,
	.st-home__button.is-secondary,
	.st-home__button.is-text,
	.st-dive-button--ghost,
	.st-course__button--secondary,
	.st-accommodation__button.is-secondary,
	.st-accommodation__button.is-card-secondary,
	.st-restaurant__button.is-secondary,
	.st-manta__button.is-secondary,
	.st-site-page__cta--secondary,
	.st-site-page__button--secondary,
	.st-final-cta__button--secondary,
	.st-booking-email
) {
	border-color: var(--st-button-navy);
	color: var(--st-button-navy);
	background: transparent;
	box-shadow: none;
}

:is(
	.st-hero__button--secondary,
	.st-home__button.is-secondary,
	.st-home__button.is-text,
	.st-dive-button--ghost,
	.st-course__button--secondary,
	.st-accommodation__button.is-secondary,
	.st-accommodation__button.is-card-secondary,
	.st-restaurant__button.is-secondary,
	.st-manta__button.is-secondary,
	.st-site-page__cta--secondary,
	.st-site-page__button--secondary,
	.st-final-cta__button--secondary,
	.st-booking-email
):hover {
	border-color: var(--st-button-navy);
	color: #fff;
	background: var(--st-button-navy);
	box-shadow: 0 10px 24px rgba(8, 43, 69, 0.14);
}

/* Reference white outline treatment on dark and photographic surfaces. */
:is(
	.st-hero,
	.st-dive-hero,
	.st-dive-final,
	.st-final-cta,
	.st-site-page__hero,
	.st-site-page__final-cta
) :is(
	.st-hero__button--secondary,
	.st-dive-button--ghost,
	.st-final-cta__button--secondary,
	.st-site-page__cta--secondary,
	.st-site-page__button--secondary,
	.st-booking-email
) {
	border-color: rgba(255, 255, 255, 0.82);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: none;
}

:is(
	.st-hero,
	.st-dive-hero,
	.st-dive-final,
	.st-final-cta,
	.st-site-page__hero,
	.st-site-page__final-cta
) :is(
	.st-hero__button--secondary,
	.st-dive-button--ghost,
	.st-final-cta__button--secondary,
	.st-site-page__cta--secondary,
	.st-site-page__button--secondary,
	.st-booking-email
):hover {
	border-color: #fff;
	color: var(--st-button-navy);
	background: #fff;
}

/* Compact actions keep the same visual language inside cards and lists. */
:is(
	.st-dive-text-link,
	.st-structured-page__cards a,
	.st-site-page__highlight-button
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 44px;
	margin-top: auto;
	padding: 10px 20px;
	border: 1px solid var(--st-button-orange);
	border-radius: var(--st-button-radius);
	color: #fff;
	background: var(--st-button-orange);
	box-shadow: 0 7px 18px rgba(8, 43, 69, 0.12);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: color 200ms ease, background-color 200ms ease,
		border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

:is(
	.st-dive-text-link,
	.st-structured-page__cards a,
	.st-site-page__highlight-button
):hover {
	border-color: var(--st-button-navy);
	color: var(--st-button-orange);
	background: var(--st-button-navy);
	box-shadow: 0 9px 22px rgba(8, 43, 69, 0.17);
	transform: translateY(-1px);
}

:is(
	.st-dive-text-link,
	.st-structured-page__cards a,
	.st-site-page__highlight-button
):focus-visible {
	outline: 3px solid rgba(39, 198, 200, 0.72);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	:is(
		.st-hero__actions,
		.st-dive-actions,
		.st-final-cta__actions,
		.st-site-page__final-cta-actions,
		.st-course__actions,
		.st-course__booking-actions,
		.st-accommodation__actions,
		.st-manta__actions
	) > :is(a, button, input[type="submit"]) {
		width: 100%;
	}

	:is(
		.st-dive-text-link,
		.st-structured-page__cards a,
		.st-booking-email,
		.st-site-page__highlight-button
	) {
		align-self: stretch;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(
		.st-hero__button,
		.st-home__button,
		.st-dive-button,
		.st-course__button,
		.st-accommodation__button,
		.st-restaurant__button,
		.st-manta__button,
		.st-site-page__cta,
		.st-site-page__button,
		.st-site-page__highlight-button,
		.st-sites__cta,
		.st-why__cta,
		.st-day__cta,
		.st-faq__cta,
		.st-final-cta__button,
		.st-structured-page__cta a,
		.st-structured-page__cards a,
		.wp-block-button__link,
		.brxe-button,
		.gform_wrapper .gform_button,
		.gform_wrapper button[type="submit"],
		.gform_wrapper input[type="submit"]
	) {
		transition: none;
	}
}