/*
 * BAR Theme — core/button block styles
 * Five variants registered via register_block_style() in inc/blocks.php.
 * Selectors target .wp-block-button.is-style-bar-* > .wp-block-button__link
 * to override WP's inline border-radius with sufficient specificity.
 */

/* ---------------------------------------------------------------------------
 * Shared base — applied to all bar button variants
 * --------------------------------------------------------------------------- */
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-bar-secondary .wp-block-button__link,
.wp-block-button.is-style-bar-dark     .wp-block-button__link,
.wp-block-button.is-style-bar-accent   .wp-block-button__link,
.wp-block-button.is-style-bar-ghost    .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: clamp(17px, 4vw, 20px);
	line-height: 1.5;
	padding: 10px 24px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

/* Hover lift for all bar buttons */
.wp-block-button:hover .wp-block-button__link,
.wp-block-button.is-style-bar-secondary:hover .wp-block-button__link,
.wp-block-button.is-style-bar-dark:hover     .wp-block-button__link,
.wp-block-button.is-style-bar-accent:hover   .wp-block-button__link {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button .wp-block-button__link,
	.wp-block-button.is-style-bar-secondary .wp-block-button__link,
	.wp-block-button.is-style-bar-dark     .wp-block-button__link,
	.wp-block-button.is-style-bar-accent   .wp-block-button__link,
	.wp-block-button.is-style-bar-ghost    .wp-block-button__link {
		transition: none;
	}

	.wp-block-button:hover .wp-block-button__link,
	.wp-block-button.is-style-bar-secondary:hover .wp-block-button__link,
	.wp-block-button.is-style-bar-dark:hover     .wp-block-button__link,
	.wp-block-button.is-style-bar-accent:hover   .wp-block-button__link {
		transform: none;
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------------------
 * Default (= Primary) — white bg, emerald text, top-left corner blown out
 * Radius: 20 8 8 8 — "corner rotates" to top-left for a leading button
 * --------------------------------------------------------------------------- */
.wp-block-button .wp-block-button__link {
	background-color: #ffffff;
	color: #104246;
	border: 1px solid #e6e6e6;
	border-radius: 20px 8px 8px 8px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wp-block-button:hover .wp-block-button__link,
.wp-block-button .wp-block-button__link:focus-visible {
	background-color: #bbdee7;
	border-color: #bbdee7;
	color: #104246;
}

/* ---------------------------------------------------------------------------
 * Secondary — outline, top-right corner blown out
 * Radius: 8 20 8 8 — corner rotates to top-right, "responding" to Primary
 * --------------------------------------------------------------------------- */
.wp-block-button.is-style-bar-secondary .wp-block-button__link {
	background-color: transparent;
	color: #104246;
	border: 2px solid #104246;
	border-radius: 8px 20px 8px 8px !important;
	box-shadow: none;
}

.wp-block-button.is-style-bar-secondary:hover .wp-block-button__link,
.wp-block-button.is-style-bar-secondary .wp-block-button__link:focus-visible {
	background-color: #104246;
	color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * Dark — filled emerald, pill shape
 * Radius: 20 8 20 8 — standard pill / nav CTA pattern
 * --------------------------------------------------------------------------- */
.wp-block-button.is-style-bar-dark .wp-block-button__link {
	background-color: #104246;
	color: #ffffff;
	border: none;
	border-radius: 20px 8px 20px 8px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wp-block-button.is-style-bar-dark:hover .wp-block-button__link,
.wp-block-button.is-style-bar-dark .wp-block-button__link:focus-visible {
	background-color: #397767;
	color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * Accent (submit) — washed light emerald bg, used for form submit
 * Radius: 20 8 20 8 — same pill pattern
 * --------------------------------------------------------------------------- */
.wp-block-button.is-style-bar-accent .wp-block-button__link {
	background-color: #bbdee7;
	color: #104246;
	border: none;
	border-radius: 20px 8px 20px 8px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wp-block-button.is-style-bar-accent:hover .wp-block-button__link,
.wp-block-button.is-style-bar-accent .wp-block-button__link:focus-visible {
	background-color: #1097a6;
	color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * Ghost — transparent with white border, for use on dark/emerald backgrounds
 * Radius: 20 8 20 8 — pill pattern
 * --------------------------------------------------------------------------- */
.wp-block-button.is-style-bar-ghost .wp-block-button__link {
	background-color: transparent;
	color: #ffffff;
	border: 1.5px solid #ffffff;
	border-radius: 20px 8px 20px 8px !important;
	box-shadow: none;
}

.wp-block-button.is-style-bar-ghost:hover .wp-block-button__link,
.wp-block-button.is-style-bar-ghost .wp-block-button__link:focus-visible {
	background-color: #ffffff;
	color: #104246;
}

/* ---------------------------------------------------------------------------
 * Focus visible — consistent across all variants
 * --------------------------------------------------------------------------- */
.wp-block-button .wp-block-button__link:focus-visible,
.wp-block-button.is-style-bar-secondary .wp-block-button__link:focus-visible,
.wp-block-button.is-style-bar-dark     .wp-block-button__link:focus-visible,
.wp-block-button.is-style-bar-accent   .wp-block-button__link:focus-visible,
.wp-block-button.is-style-bar-ghost    .wp-block-button__link:focus-visible {
	outline: 3px solid #1097a6;
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Mobile — full-width stacking inside core/buttons group
 * --------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.wp-block-buttons .wp-block-button .wp-block-button__link,
	.wp-block-buttons .wp-block-button.is-style-bar-secondary .wp-block-button__link,
	.wp-block-buttons .wp-block-button.is-style-bar-dark     .wp-block-button__link,
	.wp-block-buttons .wp-block-button.is-style-bar-accent   .wp-block-button__link,
	.wp-block-buttons .wp-block-button.is-style-bar-ghost    .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------------
 * Adjacent buttons — the corners that face a neighbour take the small (8px)
 * radius; only the outermost corners keep the blown-out 20px. (Client snag:
 * "the inside corners between the 2 buttons should be the smaller radius".)
 *
 * The `link-side` rules below only ever touch a corner that faces a sibling,
 * so they are safe to apply in both orientations at once:
 *   • horizontal row  → squash the left/right corners between buttons
 *   • vertical stack  → squash the top/bottom corners between buttons
 * Horizontal rules apply to any non-vertical group; vertical rules are scoped
 * to groups that actually stack (is-vertical, phones, and the hero/cta panels
 * which set flex-direction:column at their own breakpoints).
 * --------------------------------------------------------------------------- */

/* Horizontal row: inner (facing) corners */
.wp-block-buttons:not(.is-vertical) > .wp-block-button:not(:last-child) > .wp-block-button__link {
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

.wp-block-buttons:not(.is-vertical) > .wp-block-button:not(:first-child) > .wp-block-button__link {
	border-top-left-radius: 8px !important;
	border-bottom-left-radius: 8px !important;
}

/* Explicit vertical orientation: inner (facing) corners */
.wp-block-buttons.is-vertical > .wp-block-button:not(:last-child) > .wp-block-button__link {
	border-bottom-left-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

.wp-block-buttons.is-vertical > .wp-block-button:not(:first-child) > .wp-block-button__link {
	border-top-left-radius: 8px !important;
	border-top-right-radius: 8px !important;
}

/* Phones: every button group stacks full-width, so treat as vertical. */
@media (max-width: 480px) {
	.wp-block-buttons > .wp-block-button:not(:last-child) > .wp-block-button__link {
		border-bottom-left-radius: 8px !important;
		border-bottom-right-radius: 8px !important;
	}

	.wp-block-buttons > .wp-block-button:not(:first-child) > .wp-block-button__link {
		border-top-left-radius: 8px !important;
		border-top-right-radius: 8px !important;
	}
}