/*
Theme Name: Subversive
Theme URI: https://www.dissidentchoir.com
Author: Subverse LLC
Author URI: https://dissidentchoir.com
Description: Subversive
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.0
Version: 2.6.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: subversive
Tags:
*/

/* Defaults
---------------------------------------- */

html {
	scroll-behavior: smooth;
}

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
	transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
}

b,
strong,
th {
	font-weight: var(--wp--custom--font-weight--medium);
}

mark {
	background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 100%);
	background-position: 0 85%;
	background-repeat: repeat-x;
	background-size: 100% 15%;
}

.no-margin-top {
	margin-top: 0 !important;
}

/* Buttons
---------------------------------------- */

/* Motion for every button: a spring on hover, a squish on press and a ripple
   from the centre. Values come from the btn tokens in theme.json
   (settings.custom.btn); an sbvrs-btn--* class on any ancestor overrides them.
   Colours and shadows live in theme.json.

   Every transition runs on the button's own duration, so the glow and colour
   land with the motion instead of trailing it. Only scale and translate
   spring; the rest decelerate from a fast start, so they leave the first
   frame with the scale rather than a frame behind it.

   will-change keeps each button on its own layer, so Chrome never redraws it
   when a scale ends. Without it the label is re-rendered at its new size in
   one step and visibly jumps, most of all next to an icon. */

.wp-element-button,
.wp-block-button__link {
	overflow: hidden;
	position: relative;
	will-change: scale, translate;
	transition:
		scale var(--sbvrs-btn-duration, var(--wp--custom--btn--duration)) var(--sbvrs-btn-easing, var(--wp--custom--btn--easing)),
		translate var(--sbvrs-btn-duration, var(--wp--custom--btn--duration)) var(--sbvrs-btn-easing, var(--wp--custom--btn--easing)),
		box-shadow var(--sbvrs-btn-duration, var(--wp--custom--btn--duration)) cubic-bezier(0, 0, 0.2, 1),
		color var(--sbvrs-btn-duration, var(--wp--custom--btn--duration)) cubic-bezier(0, 0, 0.2, 1);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	scale: var(--sbvrs-btn-hover-scale, var(--wp--custom--btn--hover-scale));
}

.wp-element-button:active,
.wp-block-button__link:active {
	scale: var(--sbvrs-btn-press-scale, var(--wp--custom--btn--press-scale));
	translate: 0 1px;
}

/* Ripple: rests fully grown and transparent. On press it snaps to a dot with
   no transition, so on release it expands and fades from the centre. */
.wp-element-button::after,
.wp-block-button__link::after {
	aspect-ratio: 1;
	background: currentColor;
	border-radius: 50%;
	content: "";
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transition:
		opacity var(--sbvrs-btn-ripple-duration, var(--wp--custom--btn--ripple-duration)) ease-out,
		scale var(--sbvrs-btn-ripple-duration, var(--wp--custom--btn--ripple-duration)) ease-out;
	translate: -50% -50%;
	width: 150%;
}

.wp-element-button:active::after,
.wp-block-button__link:active::after {
	opacity: var(--sbvrs-btn-ripple-opacity, var(--wp--custom--btn--ripple-opacity));
	scale: 0;
	transition-duration: 0s;
}

/* Header
---------------------------------------- */

#site-header {
	z-index: 100;
}

/* Media Queries
---------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	html {
		scroll-behavior: auto;
	}

	/* The clamp above makes the change instant; a size jump is still motion */
	.wp-element-button:is(:hover, :active),
	.wp-block-button__link:is(:hover, :active) {
		scale: none;
	}
}