/**
 * Button chrome + styles: Yellow (fill/default), Blue, Outline, Underline.
 * Colours come from colour-mode tokens (and theme.json for default fill).
 */

.wp-block-button .wp-element-button,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-decoration: none;
	border-style: solid;
	border-width: 0;
	border-radius: 2px;
	box-sizing: border-box;
	transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-button .wp-element-button:hover,
.wp-block-button .wp-block-button__link:hover {
	background-color: #d4a600;
}

.wp-block-button .wp-element-button:focus,
.wp-block-button .wp-block-button__link:focus {
	box-shadow: 0 0 0 3px #2375D1;
}

.wp-block-button .wp-element-button::after,
.wp-block-button .wp-block-button__link::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

/* —— Blue —— */
.wp-block-button.is-style-blue .wp-element-button,
.wp-block-button.is-style-blue .wp-block-button__link,
.wp-block-button.is-style-button-alt .wp-element-button,
.wp-block-button.is-style-button-alt .wp-block-button__link {
	background-color: var(--sohk--color--button-blue-background);
	color: var(--sohk--color--button-blue-text);
	border-color: transparent;
}

.wp-block-button.is-style-blue .wp-element-button:hover,
.wp-block-button.is-style-blue .wp-block-button__link:hover {
	background-color: #1B5FAD;
}

.wp-block-button.is-style-blue .wp-element-button:focus,
.wp-block-button.is-style-blue .wp-block-button__link:focus {
	box-shadow: 0 0 0 3px #EBB700;
}

/* —— Outline —— */
.wp-block-button.is-style-outline .wp-element-button,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--sohk--color--button-outline-text) !important;
	border-width: 1px;
	border-color: var(--sohk--color--button-outline-border) !important;
	/* Match filled button box size with the 2px border. */
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
}

.wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(235, 183, 0, 0.10) !important;
}

.wp-block-button.is-style-outline .wp-element-button:focus,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	box-shadow: 0 0 0 3px #2375D1;
	border-color: transparent !important;
}

.is-style-mode-blue .wp-block-button.is-style-outline .wp-element-button::after,
.is-style-mode-blue .wp-block-button.is-style-outline .wp-block-button__link::after {
	background-color: var(--wp--preset--color--slate);
}
.is-style-mode-yellow .wp-block-button.is-style-outline .wp-element-button::after,
.is-style-mode-yellow .wp-block-button.is-style-outline .wp-block-button__link::after {
	background-color: var(--wp--preset--color--white);
}
.is-style-mode-yellow .wp-block-button.is-style-outline .wp-element-button:hover,
.is-style-mode-yellow .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgb(31 92 237 / 10%) !important;
}



/* —— Underline —— */
.wp-block-button.is-style-underline .wp-element-button,
.wp-block-button.is-style-underline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--sohk--color--button-underline-text) !important;
	border: 0 !important;
	border-radius: 0;
	padding: 8px 0 !important;
	gap: 8px;
	box-shadow: none !important;
}

.wp-block-button.is-style-underline .wp-element-button::after,
.wp-block-button.is-style-underline .wp-block-button__link::after {
	display: none;
}

.wp-block-button.is-style-underline .wp-element-button,
.wp-block-button.is-style-underline .wp-block-button__link {
	position: relative;
}

.wp-block-button.is-style-underline .wp-element-button::before,
.wp-block-button.is-style-underline .wp-block-button__link::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px;
	height: 2px;
	background-color: var(--sohk--color--button-underline-line);
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 220ms ease;
}

.wp-block-button.is-style-underline .wp-element-button:hover::before,
.wp-block-button.is-style-underline .wp-element-button:focus-visible::before,
.wp-block-button.is-style-underline .wp-block-button__link:hover::before,
.wp-block-button.is-style-underline .wp-block-button__link:focus-visible::before {
	transform: scaleX(0);
	transform-origin: right;
}

.wp-block-button.is-style-underline .wp-element-button:focus::before {
	background-color: transparent !important;
}
.wp-block-button.is-style-underline .wp-element-button:focus {
	box-shadow: 0 0 0 3px var(--wp--preset--color--blue) !important;
}

.wp-block-details.is-style-underline > summary {
	display: inline-block;
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sohk--color--button-underline-text);
	font-family: var(--wp--preset--font-family--now, "Now", sans-serif);
	font-size: var(--wp--preset--font-size--button, 0.875rem);
	font-weight: 900;
	letter-spacing: 0.078em;
	line-height: 1.11;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
	box-shadow: none;
}

.wp-block-details.is-style-underline > summary::-webkit-details-marker,
.wp-block-details.is-style-underline > summary::marker {
	display: none;
	content: "";
}

.wp-block-details.is-style-underline > summary::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px;
	height: 2px;
	background-color: var(--sohk--color--button-underline-line);
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 220ms ease;
}

.wp-block-details.is-style-underline > summary:hover::before,
.wp-block-details.is-style-underline > summary:focus-visible::before {
	transform: scaleX(0);
	transform-origin: right;
}

.wp-block-details.is-style-underline > summary:focus {
	outline: none;
}

.wp-block-details.is-style-underline > summary:focus::before {
	background-color: transparent;
}



/* Text-link CTAs in coloured paragraphs (existing pattern). */
.has-text-color.wp-block-paragraph a strong {
	display: inline-block;
	position: relative;
}

.has-text-color.wp-block-paragraph a strong::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--sohk--color--button-underline-line, var(--wp--preset--color--yellow));
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 220ms ease;
}

.has-text-color.wp-block-paragraph a strong:hover::after,
.has-text-color.wp-block-paragraph a strong:focus-visible::after {
	transform: scaleX(0);
	transform-origin: right;
}

/* —— Read More → Secondary (blue) —— */
.wp-block-read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: fit-content;
	box-sizing: border-box;
	text-decoration: none;
	border-style: solid;
	border-width: 0;
	border-radius: 2px;
	border-color: transparent;
	background-color: var(--sohk--color--button-blue-background);
	color: var(--sohk--color--button-blue-text);
	padding: 22px;
	font-family: var(--wp--preset--font-family--now, "Now", sans-serif);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 900;
	letter-spacing: 0.078em;
	line-height: 1.11;
	text-transform: uppercase;
	transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-read-more:hover {
	background-color: #1b5fad;
	color: var(--sohk--color--button-blue-text);
	text-decoration: none;
}

.wp-block-read-more:focus {
	box-shadow: 0 0 0 3px #ebb700;
	text-decoration: none;
}

.wp-block-read-more::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}