/**
 * Practice Protect — theme popups and notice bars.
 *
 * Loaded only on pages where a popup or bar exists, and written without any
 * Tailwind utilities so nothing here can be stripped by the theme's purge pass.
 * Everything an editor can change is a custom property set inline on the
 * wrapper by PPTheme\Popups\Renderer.
 */

:root {
	--pp-bar-h: 44px;
}

@media (max-width: 767px) {
	:root {
		--pp-bar-h: 56px;
	}
}

/* Closed by default; Alpine adds .pp-popup--open. Driving this with a class
   rather than x-show keeps it off Alpine 3.3.3's x-show + x-transition path,
   which could leave a popup open with no way to close it. */
.pp-popup {
	display: none;
}

.pp-popup--open {
	display: flex;
}

.pp-popup__close.is-hidden {
	display: none;
}

html.pp-locked {
	overflow: hidden;
}

/* Device targeting only ever hides — a rule that forces an element visible
   would beat the inline display AlpineJS uses to keep a popup closed. */

@media (min-width: 768px) {
	.pp-hide-desktop {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.pp-hide-mobile {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Popup
 * ------------------------------------------------------------------------ */

.pp-popup {
	position: fixed;
	inset: 0;
	z-index: 99998;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	font-family: "Moderat", ui-sans-serif, system-ui, sans-serif;
}

.pp-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--pp-overlay, 0.6));
}

.pp-popup__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--pp-width, 560px);
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--pp-bg, #fff);
	color: var(--pp-text, #000b6e);
	border-radius: var(--pp-radius, 8px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.pp-popup--top {
	align-items: flex-start;
	padding-top: 6vh;
}

.pp-popup--bottom {
	align-items: flex-end;
	padding-bottom: 6vh;
}

.pp-popup--bottom-right,
.pp-popup--bottom-left {
	align-items: flex-end;
	padding: 1.25rem;
}

.pp-popup--bottom-right {
	justify-content: flex-end;
}

.pp-popup--bottom-left {
	justify-content: flex-start;
}

.pp-popup__close {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	color: currentColor;
	background: transparent;
	border: 0;
	border-radius: 50%;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.pp-popup__close:hover,
.pp-popup__close:focus-visible {
	opacity: 1;
	background: rgba(127, 127, 127, 0.15);
}

.pp-popup__body {
	padding: 2.25rem;
}

.pp-popup__layout--left,
.pp-popup__layout--right {
	display: flex;
	gap: 1.75rem;
	align-items: center;
}

.pp-popup__layout--right {
	flex-direction: row-reverse;
}

.pp-popup__layout--left .pp-popup__media,
.pp-popup__layout--right .pp-popup__media {
	flex: 0 0 40%;
}

.pp-popup__layout--top .pp-popup__media {
	margin-bottom: 1.5rem;
}

.pp-popup__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--pp-radius, 8px) / 2);
}

.pp-popup__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}

.pp-popup__heading {
	margin: 0 0 0.75rem;
	font-family: "GT America Extended", "Moderat", sans-serif;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 700;
	color: inherit;
}

.pp-popup__text {
	font-size: 16px;
	line-height: 1.6;
}

.pp-popup__text p:last-child {
	margin-bottom: 0;
}

.pp-popup__form {
	margin-top: 1.25rem;
}

.pp-popup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.pp-popup__footnote {
	margin: 1.25rem 0 0;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.65;
}

@media (max-width: 640px) {
	.pp-popup__body {
		padding: 1.5rem;
	}

	.pp-popup__layout--left,
	.pp-popup__layout--right {
		display: block;
	}

	.pp-popup__layout--left .pp-popup__media,
	.pp-popup__layout--right .pp-popup__media {
		margin-bottom: 1.25rem;
	}

	.pp-popup__heading {
		font-size: 20px;
	}
}

/* Buttons — shared by popups and bars */

.pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.4rem;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--pp-accent, #000b6e);
	border-radius: 6px;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.pp-btn--primary {
	background: var(--pp-accent, #000b6e);
	color: var(--pp-accent-text, #fff);
}

.pp-btn--secondary {
	background: transparent;
	color: var(--pp-accent, #000b6e);
}

.pp-btn--text {
	padding: 0.7rem 0;
	border-color: transparent;
	background: transparent;
	color: var(--pp-accent, #000b6e);
	text-decoration: underline;
}

.pp-btn:hover {
	opacity: 0.85;
}

.pp-popup .pp-btn,
.pp-popup .pp-btn:hover,
.pp-bar .pp-bar__cta,
.pp-bar .pp-bar__cta:hover {
	text-decoration: none;
}

/* Transitions — pure CSS, keyed off .pp-popup--open. */

.pp-popup__overlay,
.pp-popup__panel {
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.pp-popup__overlay {
	opacity: 0;
}

.pp-popup--open .pp-popup__overlay {
	opacity: 1;
}

.pp-popup--fade .pp-popup__panel {
	opacity: 0;
}

.pp-popup--zoom .pp-popup__panel {
	opacity: 0;
	transform: scale(0.94);
}

.pp-popup--slide .pp-popup__panel {
	opacity: 0;
	transform: translateY(24px);
}

.pp-popup--open .pp-popup__panel {
	opacity: 1;
	transform: none;
}

.pp-popup--none .pp-popup__overlay,
.pp-popup--none .pp-popup__panel {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.pp-popup__overlay,
	.pp-popup__panel {
		transition: opacity 0.15s ease;
		transform: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Notice bar
 * ------------------------------------------------------------------------ */

html.pp-bar-top {
	margin-top: var(--pp-bar-h);
}

.pp-bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: var(--pp-bar-h);
	padding: 0.5rem 2.75rem;
	background: var(--pp-bg, #000b6e);
	color: var(--pp-text, #fff);
	font-family: "Moderat", ui-sans-serif, system-ui, sans-serif;
	font-size: var(--pp-size, 15px);
	line-height: 1.35;
}

.pp-bar--top {
	top: 0;
}

.pp-bar--bottom {
	bottom: 0;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}

.pp-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	width: 100%;
}

.pp-bar--left .pp-bar__inner {
	justify-content: flex-start;
}

.pp-bar--split .pp-bar__inner {
	justify-content: space-between;
}

.pp-bar__icon {
	flex: 0 0 auto;
}

.pp-bar__message p {
	margin: 0;
}

.pp-bar__message a {
	color: inherit;
	text-decoration: underline;
}

.pp-bar__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 1rem;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background: var(--pp-accent, #ffd600);
	color: var(--pp-accent-text, #000b6e);
	border-radius: 4px;
	transition: opacity 0.2s ease;
}

.pp-bar__cta:hover {
	opacity: 0.85;
}

.pp-bar__close {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 50%;
	opacity: 0.65;
	cursor: pointer;
}

.pp-bar__close:hover,
.pp-bar__close:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 767px) {
	.pp-bar {
		padding: 0.5rem 2.25rem;
		font-size: calc(var(--pp-size, 15px) - 2px);
	}

	.pp-bar--split .pp-bar__inner {
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
 * Trigger links inside editor content
 * ------------------------------------------------------------------------ */

.pp-trigger {
	cursor: pointer;
}

/* The class is doubled on purpose. Editor content sits inside rules like
   `div.defaultText a { text-decoration: underline }` (0,1,2), which would
   otherwise underline the button — this is (0,2,0) and wins on class count,
   without reaching for !important. */
.pp-trigger.pp-trigger--primary,
.pp-trigger.pp-trigger--secondary {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.4rem;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid #000b6e;
	border-radius: 6px;
}

.pp-trigger.pp-trigger--primary:hover,
.pp-trigger.pp-trigger--secondary:hover,
.pp-trigger.pp-trigger--primary:focus,
.pp-trigger.pp-trigger--secondary:focus {
	text-decoration: none;
}

.pp-trigger--primary {
	background: #000b6e;
	color: #fff;
}

.pp-trigger--secondary {
	background: transparent;
	color: #000b6e;
}