/*
	WordPress Breakpoints
		small:  600px;
		medium: 782px;
		large: 960px;
		xlarge: 1280px;
		xxlarge:  1440px;

	Use the breakpoints in the following format:

	@media (min-width: 960px) {
		Your styles here
	}
*/

:root {
	/* Colors */
	--color-text: var(--wp--preset--color--text, #000000);
	--color-text-inverse: var(--wp--preset--color--text-inverse, #ffffff);

	--color-primary: var(--wp--preset--color--primary, #003e6d);
	--color-secondary: var(--wp--preset--color--secondary, #ee00ff);
	--color-contrast: var(--wp--preset--color--contrast, #241f31);

	--color-bg-primary: var(--wp--preset--color--bg-primary, #800009);
	--color-bg-secondary: var(--wp--preset--color--bg-secondary, #f1f1f1);

	--color-transparent: var(--wp--preset--color--transparent, transparent);

	/* Font Families */
	--font-family-system: var(
		--wp--preset--font-family--system,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		'Helvetica Neue',
		Arial,
		sans-serif
	);
	--font-family-serif: var(
		--wp--preset--font-family--serif,
		Georgia,
		'Times New Roman',
		Times,
		serif
	);
	--font-family-monospace: var(
		--wp--preset--font-family--monospace,
		Menlo,
		Monaco,
		Consolas,
		'Liberation Mono',
		'Courier New',
		monospace
	);
	--font-family-lora: var(--wp--preset--font-family--lora, 'Lora', serif);

	/* Font Sizes */
	--font-size-extra-small: var(--wp--preset--font-size--extra-small, 0.8rem);
	--font-size-small: var(--wp--preset--font-size--small, 1rem);
	--font-size-medium: var(--wp--preset--font-size--medium, 1.125rem);
	--font-size-large: var(--wp--preset--font-size--large, 1.5rem);
	--font-size-x-large: var(--wp--preset--font-size--x-large, 2.0625rem);
	--font-size-xx-large: var(--wp--preset--font-size--xx-large, 2.75rem);
	--font-size-xxx-large: var(--wp--preset--font-size--xxx-large, 3.5rem);

	/* Spacing */
	--spacing-10: var(--wp--preset--spacing--10, 0.25rem);
	--spacing-20: var(--wp--preset--spacing--20, 0.5rem);
	--spacing-30: var(--wp--preset--spacing--30, 0.75rem);
	--spacing-40: var(--wp--preset--spacing--40, 1rem);
	--spacing-50: var(--wp--preset--spacing--50, 1.5rem);
	--spacing-60: var(--wp--preset--spacing--60, 2rem);
	--spacing-70: var(--wp--preset--spacing--70, 2.25rem);
	--spacing-80: var(--wp--preset--spacing--80, 2.75rem);
	--spacing-90: var(--wp--preset--spacing--90, 3rem);
	--spacing-100: var(--wp--preset--spacing--100, 3.5rem);
	--spacing-110: var(--wp--preset--spacing--110, 4.75rem);
	--spacing-120: var(--wp--preset--spacing--120, 6rem);
	--spacing-130: var(--wp--preset--spacing--130, 7rem);
	--spacing-140: var(--wp--preset--spacing--140, 7.5rem);

	/* Layout Sizes */
	--content-size: var(--wp--style--global--content-size, 800px);
	--wide-size: var(--wp--style--global--wide-size, 1200px);
}

.popovers-wrapper {
	display: none;
}

.glossary-term {
	cursor: pointer;
	/* Reset underline on the wrapper so it only applies to the text span */
	background: none !important;
	text-decoration: none !important;

	&:focus-visible,
	&:has(:focus-visible) {
		outline: 2px solid var(--wp--preset--color--secondary, red);
		outline-offset: 2px;
		border-radius: 2px;
	}

	/* Hide the default focus outline on the button itself since the term shows it */
	.glossary-tooltip-btn:focus,
	.glossary-tooltip-btn:focus-visible {
		outline: none;
		box-shadow: none;
	}
}

.glossary-term-text {
	color: inherit;
	text-decoration: none;
	background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 200 10%27%3E%3Crect x=%270%27 y=%270%27 width=%27200%27 height=%2710%27 rx=%275%27 ry=%275%27 fill=%27%23FFCC00%27/%3E%3C/svg%3E")
		no-repeat 0 100% / 100% 0.25em;
	padding: 0;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.glossary-term-wrapper {
	white-space: nowrap;
}

.glossary-tooltip-btn {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	cursor: pointer;
	top: 2px;
	left: 2px;
	line-height: 1;

	img {
		display: block;
	}

	&:focus-visible {
		outline: 2px solid var(--wp--preset--color--secondary, red);
		outline-offset: 2px;
		border-radius: 50%;
	}
}
.glossary-popover {
	--popover-background: #fff;
	--popover-border-color: var(--wp--preset--color--secondary, red);
	--popover-border-width: 1px;
	--popover-triangle-size: 10px;
	--popover-triangle-size-inner: calc(
		var(--popover-triangle-size) - var(--popover-border-width)
	);

	display: none;
	position: absolute;
	background: var(--popover-background);
	border: var(--popover-border-width) solid var(--popover-border-color);
	padding: var(--spacing-40);
	max-width: 600px;
	word-wrap: break-word;
	z-index: 999;

	&:focus {
		outline: none;
	}

	&.glossary-popover-visible {
		display: block;
	}

	.glossary-popover-close {
		position: absolute;
		top: var(--spacing-20);
		right: var(--spacing-20);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		background: none;
		border: none;
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
		color: var(--color-primary);

		&:hover {
			color: var(--color-secondary);
		}

		&:focus-visible {
			outline: 2px solid var(--wp--preset--color--secondary, red);
			outline-offset: 2px;
			border-radius: 2px;
		}
	}

	.glossary-popover-header {
		font-weight: bold;
		padding-right: 32px;
		padding-top: var(--spacing-40);
	}

	.glossary-popover-content {
		padding-top: var(--spacing-40);
	}

	&::after {
		content: '';
		position: absolute;
		bottom: calc(-1 * var(--popover-triangle-size));
		left: 50%;
		transform: translateX(-50%);
		border-width: var(--popover-triangle-size) var(--popover-triangle-size)
			0;
		border-style: solid;
		border-color: var(--popover-border-color) transparent transparent
			transparent;
	}

	&::before {
		content: '';
		position: absolute;
		bottom: calc(-1 * var(--popover-triangle-size-inner));
		left: 50%;
		transform: translateX(-50%);
		border-width: var(--popover-triangle-size-inner)
			var(--popover-triangle-size-inner) 0;
		border-style: solid;
		border-color: var(--popover-background) transparent transparent
			transparent;
		z-index: 1;
	}

	&.glossary-popover-below {
		&::after {
			bottom: auto;
			top: calc(-1 * var(--popover-triangle-size));
			border-width: 0 var(--popover-triangle-size)
				var(--popover-triangle-size);
			border-color: transparent transparent var(--popover-border-color)
				transparent;
		}

		&::before {
			bottom: auto;
			top: calc(-1 * var(--popover-triangle-size-inner));
			border-width: 0 var(--popover-triangle-size-inner)
				var(--popover-triangle-size-inner);
			border-color: transparent transparent var(--popover-background)
				transparent;
		}
	}
}