/**
 * JSCodex base components (front end + editor iframe).
 *
 * Markup comes from jscodex-base-plugin helpers (Buttons, Media). Every value
 * is a custom property with a preset fallback, so child themes restyle by
 * overriding variables instead of selectors:
 *
 *   :root { --jsc-button--radius: 4px; --jsc-button--bg: var(--wp--preset--color--contrast); }
 *   .my-hero { --jsc-button--bg: var(--wp--preset--color--base); }
 */

/* Screen reader text (icon-only buttons, "((hidden))" button text). */
.sr-only {
	position: absolute;

	overflow: hidden;

	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;

	white-space: nowrap;

	clip-path: inset(50%);
}

/* Rich text: no outer margins on the first/last child of WYSIWYG content. */
.is-text > :first-child {
	margin-block-start: 0;
}

.is-text > :last-child {
	margin-block-end: 0;
}

/* Buttons
   ========================================================================== */

.jsc-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jsc-buttons--gap, var(--wp--preset--spacing--40, 1rem));
	align-items: center;
	justify-content: var(--jsc-buttons--justify, flex-start);
}

.jsc-button {
	--_bg: var(--jsc-button--bg, var(--wp--preset--color--primary-500, #000));
	--_bg-hover: var(--jsc-button--bg-hover, var(--wp--preset--color--primary-700, #333));
	--_fg: var(--jsc-button--fg, var(--wp--preset--color--base, #fff));

	display: inline-flex;
	gap: var(--jsc-button--gap, 0.5em);
	align-items: center;
	justify-content: center;

	padding-block: var(--jsc-button--padding-block, 0.75em);
	padding-inline: var(--jsc-button--padding-inline, 1.5em);
	border: var(--jsc-button--border-width, 2px) solid var(--_bg);
	border-radius: var(--jsc-button--radius, 999px);

	font-family: var(--jsc-button--font-family, var(--wp--preset--font-family--body, inherit));
	font-size: var(--jsc-button--font-size, var(--wp--preset--font-size--medium, 1rem));
	font-weight: var(--jsc-button--font-weight, 600);
	line-height: 1.2;
	color: var(--_fg);
	text-decoration: none;

	background-color: var(--_bg);

	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.jsc-button:where(:hover, :focus-visible) {
	border-color: var(--_bg-hover);
	color: var(--_fg);
	background-color: var(--_bg-hover);
}

.jsc-button:focus-visible {
	outline: 2px solid var(--jsc-button--focus, currentcolor);
	outline-offset: 3px;
}

.jsc-button--secondary {
	--_bg: var(--jsc-button-secondary--bg, var(--wp--preset--color--secondary-500, #444));
	--_bg-hover: var(--jsc-button-secondary--bg-hover, var(--wp--preset--color--secondary-700, #222));
	--_fg: var(--jsc-button-secondary--fg, var(--wp--preset--color--base, #fff));
}

.jsc-button--outlined {
	border-color: var(--_bg);
	color: var(--_bg);
	background-color: transparent;
}

.jsc-button--outlined:where(:hover, :focus-visible) {
	border-color: var(--_bg);
	color: var(--_fg);
	background-color: var(--_bg);
}

.jsc-button__icon {
	flex: none;

	width: var(--jsc-button--icon-size, 1.25em);
	height: var(--jsc-button--icon-size, 1.25em);

	background-color: currentcolor;

	mask: var(--_icon) center / contain no-repeat;
}

.jsc-button--icon-only {
	padding: var(--jsc-button--padding-block, 0.75em);
}

/* Paginator (JsCodex\Archive\Paginator)
   ========================================================================== */

.jsc-paginator {
	display: flex;
	gap: var(--jsc-paginator--gap, var(--wp--preset--spacing--30, 0.75rem));
	align-items: center;
	justify-content: var(--jsc-paginator--justify, center);
}

.jsc-paginator__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jsc-paginator--gap, var(--wp--preset--spacing--20, 0.5rem));
	align-items: center;

	margin: 0;
	padding: 0;

	list-style: none;
}

.jsc-paginator__page,
.jsc-paginator__control,
.jsc-paginator__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: var(--jsc-paginator--size, 2.5rem);
	height: var(--jsc-paginator--size, 2.5rem);
	border-radius: var(--jsc-paginator--radius, 999px);

	color: var(--jsc-paginator--fg, currentcolor);
	text-decoration: none;
}

.jsc-paginator__page:where(:hover, :focus-visible),
.jsc-paginator__control:where(a):where(:hover, :focus-visible) {
	background-color: var(--jsc-paginator--bg-hover, var(--wp--preset--color--neutral-100, #efefef));
}

.jsc-paginator__page:focus-visible,
.jsc-paginator__control:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

.jsc-paginator__page--current {
	color: var(--jsc-paginator--current-fg, var(--wp--preset--color--base, #fff));
	background-color: var(--jsc-paginator--current-bg, var(--wp--preset--color--primary-500, #000));
}

.jsc-paginator__control[aria-disabled="true"] {
	opacity: 0.4;
}

.jsc-paginator__icon {
	width: 1.25em;
	height: 1.25em;
	background-color: currentcolor;
	mask: var(--jsc-paginator--icon, var(--icon-forward, none)) center / contain no-repeat;
}

.jsc-paginator__control--prev .jsc-paginator__icon {
	transform: scaleX(-1);
}

/* Media
   ========================================================================== */

.jsc-picture {
	display: block;
}

.jsc-picture img {
	display: block;
	max-width: 100%;
	height: auto;
}

.jsc-video {
	display: block;
	max-width: 100%;
}

.jsc-media-bg {
	position: absolute;
	z-index: var(--jsc-media-bg--z, 0);
	inset: 0;
	overflow: hidden;
}

.jsc-media-bg .jsc-picture,
.jsc-media-bg img,
.jsc-media-bg .jsc-video {
	width: 100%;
	height: 100%;
}

.jsc-media-bg img,
.jsc-media-bg .jsc-video {
	object-fit: cover;
	object-position: var(--jsc-media-bg--position, center);
}

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

	.jsc-button {
		transition: none;
	}
}