/* Peekaboo Panel - front end styles */

.pkb-wrap {
	--pkb-tx: calc(100% + 40px);
	--pkb-ty: 0px;
	--pkb-tab-ty: 0px;
	--pkb-ease: cubic-bezier(.22, .9, .3, 1);
	--pkb-speed: .45s;
}

/* ---------- The panel ---------- */

.pkb-wrap .pkb-panel {
	position: fixed;
	z-index: 2147482000;
	box-sizing: border-box;
	width: min(var(--pkb-w, 360px), calc(100vw - 24px));
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	padding: 30px 24px 24px;
	background: var(--pkb-bg, #fff);
	color: var(--pkb-text, #222);
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
	visibility: hidden;
	opacity: 1;
	transform: translate3d(var(--pkb-tx), var(--pkb-ty), 0);
	transition: transform var(--pkb-speed) var(--pkb-ease), opacity var(--pkb-speed) ease, visibility 0s linear var(--pkb-speed);
}

.pkb-wrap.pkb-has-shadow .pkb-panel {
	box-shadow: 0 18px 50px rgba(0, 0, 0, .22), 0 4px 14px rgba(0, 0, 0, .12);
}

.pkb-wrap .pkb-panel:focus { outline: none; }

/* Sides */
.pkb-side-right .pkb-panel {
	right: 0;
	border-radius: var(--pkb-radius) 0 0 var(--pkb-radius);
}
.pkb-side-left {
	--pkb-tx: calc(-100% - 40px);
}
.pkb-side-left .pkb-panel {
	left: 0;
	border-radius: 0 var(--pkb-radius) var(--pkb-radius) 0;
}

/* Heights */
.pkb-pos-top .pkb-panel { top: 24px; }
.pkb-pos-middle { --pkb-ty: -50%; --pkb-tab-ty: -50%; }
.pkb-pos-middle .pkb-panel { top: 50%; }
.pkb-pos-bottom .pkb-panel { bottom: 24px; }
.pkb-pos-full .pkb-panel {
	top: 0;
	bottom: 0;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	border-radius: 0 !important;
}

/* Custom height (content scrolls inside if it is taller) */
.pkb-fixed-height .pkb-panel {
	height: min(var(--pkb-h), calc(100vh - 32px));
	height: min(var(--pkb-h), calc(100dvh - 32px));
}

/* Animations */
.pkb-anim-fade { --pkb-tx: 40px; }
.pkb-anim-fade.pkb-side-left { --pkb-tx: -40px; }
.pkb-anim-fade .pkb-panel { opacity: 0; }

/* Open state */
.pkb-wrap.pkb-open { --pkb-tx: 0px; }
.pkb-wrap.pkb-open .pkb-panel {
	visibility: visible;
	opacity: 1;
	transition: transform var(--pkb-speed) var(--pkb-ease), opacity var(--pkb-speed) ease, visibility 0s;
}
.pkb-wrap.pkb-anim-bounce.pkb-open .pkb-panel {
	--pkb-speed: .6s;
	transition-timing-function: cubic-bezier(.34, 1.56, .64, 1), ease, linear;
}

/* ---------- Close button ---------- */

.pkb-wrap .pkb-close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pkb-text, #222);
	font: 400 26px/34px Arial, Helvetica, sans-serif;
	text-align: center;
	opacity: .65;
	cursor: pointer;
	box-shadow: none;
	transition: opacity .2s, background .2s;
}
.pkb-wrap .pkb-close:hover,
.pkb-wrap .pkb-close:focus-visible {
	opacity: 1;
	background: rgba(128, 128, 128, .15);
	color: var(--pkb-text, #222);
}

/* ---------- Side tab ---------- */

.pkb-wrap .pkb-tab {
	position: fixed;
	z-index: 2147481999;
	top: 50%;
	margin: 0;
	padding: 16px 10px;
	border: 0;
	background: var(--pkb-accent, #008B8B);
	color: var(--pkb-accent-text, #fff);
	font: 700 15px/1.2 Arial, Helvetica, sans-serif;
	letter-spacing: .03em;
	writing-mode: vertical-rl;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
	transition: transform .35s var(--pkb-ease), filter .2s;
	text-transform: none;
	min-height: 0;
	line-height: 1.2;
}
.pkb-wrap .pkb-tab:hover { filter: brightness(1.08); }
.pkb-wrap .pkb-tab span { display: inline-block; }

.pkb-side-right .pkb-tab {
	right: 0;
	border-radius: 10px 0 0 10px;
	transform: translate(0, var(--pkb-tab-ty));
}
.pkb-side-left .pkb-tab {
	left: 0;
	border-radius: 0 10px 10px 0;
	transform: translate(0, var(--pkb-tab-ty));
}
.pkb-side-left .pkb-tab span { transform: rotate(180deg); }

.pkb-pos-top .pkb-tab { top: 25%; }
.pkb-pos-bottom .pkb-tab { top: auto; bottom: 20%; }
.pkb-pos-middle .pkb-tab,
.pkb-pos-full .pkb-tab { top: 50%; }
.pkb-pos-full { --pkb-tab-ty: -50%; }

.pkb-side-right.pkb-open .pkb-tab { transform: translate(110%, var(--pkb-tab-ty)); }
.pkb-side-left.pkb-open .pkb-tab { transform: translate(-110%, var(--pkb-tab-ty)); }

/* ---------- Dimmed background ---------- */

.pkb-wrap .pkb-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147481998;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s, visibility 0s linear .35s;
}
.pkb-wrap.pkb-open .pkb-overlay {
	opacity: 1;
	visibility: visible;
	transition: opacity .35s, visibility 0s;
}

/* ---------- Content ---------- */

.pkb-panel .pkb-inner > *:first-child { margin-top: 0; }
.pkb-panel .pkb-inner > *:last-child { margin-bottom: 0; }

.pkb-panel .pkb-headline {
	margin: 0 0 12px;
	padding: 0 26px 0 0;
	color: var(--pkb-head, #222);
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
}

.pkb-panel p { margin: 0 0 12px; color: inherit; }
.pkb-panel h1, .pkb-panel h2, .pkb-panel h3, .pkb-panel h4 { color: var(--pkb-head, #222); }
.pkb-panel img { max-width: 100%; height: auto; }
.pkb-panel a { color: var(--pkb-accent, #008B8B); }

.pkb-panel .pkb-text,
.pkb-panel .pkb-embed { color: inherit; }
.pkb-panel .pkb-video + .pkb-text,
.pkb-panel .pkb-banner + .pkb-text,
.pkb-panel .pkb-text + .pkb-embed { margin-top: 14px; }

/* Buttons and forms pick up the accent color */
.pkb-panel .pkb-button,
.pkb-panel .wp-block-button__link,
.pkb-panel input[type="submit"],
.pkb-panel button[type="submit"],
.pkb-panel .pkb-embed button:not(.pkb-close) {
	display: inline-block;
	box-sizing: border-box;
	padding: 11px 22px;
	border: 0;
	border-radius: 50px;
	background: var(--pkb-accent, #008B8B);
	color: var(--pkb-accent-text, #fff);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: filter .2s, transform .2s;
}
.pkb-panel input[type="submit"],
.pkb-panel button[type="submit"] { width: 100%; }
.pkb-panel .pkb-button:hover,
.pkb-panel input[type="submit"]:hover,
.pkb-panel button[type="submit"]:hover {
	filter: brightness(1.1);
	color: var(--pkb-accent-text, #fff);
}

.pkb-panel input[type="text"],
.pkb-panel input[type="email"],
.pkb-panel input[type="tel"],
.pkb-panel input[type="url"],
.pkb-panel input[type="number"],
.pkb-panel select,
.pkb-panel textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 8px;
	background: #fff;
	color: #222;
	font-size: 16px;
}

/* Video */
.pkb-panel .pkb-video {
	position: relative;
	padding-top: 56.25%;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}
.pkb-panel .pkb-video iframe,
.pkb-panel .pkb-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.pkb-type-video .pkb-panel { padding-top: 40px; }

/* Banner ad */
.pkb-type-image .pkb-panel { padding: 40px 12px 12px; }
.pkb-panel .pkb-banner img { display: block; width: 100%; border-radius: max(0px, calc(var(--pkb-radius) - 8px)); }
.pkb-panel .pkb-banner-link { display: block; transition: transform .2s; }
.pkb-panel .pkb-banner-link:hover { transform: scale(1.015); }

/* Latest posts */
.pkb-panel .pkb-posts { list-style: none; margin: 0; padding: 0; }
.pkb-panel .pkb-post {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid rgba(128, 128, 128, .25);
}
.pkb-panel .pkb-post:first-child { border-top: 0; padding-top: 0; }
.pkb-panel .pkb-post-thumb { flex: 0 0 64px; }
.pkb-panel .pkb-post-thumb img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
}
.pkb-panel .pkb-post-body { flex: 1; min-width: 0; }
.pkb-panel .pkb-post-title {
	display: block;
	color: var(--pkb-head, #222);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
}
.pkb-panel .pkb-post-title:hover { color: var(--pkb-accent, #008B8B); }
.pkb-panel .pkb-post-excerpt { margin: 4px 0 4px; font-size: 14px; opacity: .85; }
.pkb-panel .pkb-more { font-size: 14px; font-weight: 700; text-decoration: none; }

/* Single featured post */
.pkb-panel .pkb-single-thumb img { display: block; width: 100%; border-radius: 10px; margin-bottom: 12px; }
.pkb-panel .pkb-single-title { margin: 0 0 8px; font-size: 19px; line-height: 1.3; }
.pkb-panel .pkb-single-title a { color: var(--pkb-head, #222); text-decoration: none; }

/* ---------- [peekaboo] shortcode trigger ---------- */

a.pkb-trigger-button {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 50px;
	background: var(--pkb-accent, #008B8B);
	color: var(--pkb-accent-text, #fff) !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: filter .2s;
}
a.pkb-trigger-button:hover { filter: brightness(1.1); }

/* ---------- Devices ---------- */

@media (max-width: 767px) {
	.pkb-desktop-only { display: none !important; }
}
@media (min-width: 768px) {
	.pkb-mobile-only { display: none !important; }
}

@media (max-width: 600px) {
	.pkb-wrap .pkb-panel {
		width: min(var(--pkb-w, 360px), calc(100vw - 16px));
		max-height: calc(100vh - 16px);
		max-height: calc(100dvh - 16px);
		padding: 28px 18px 18px;
	}
	.pkb-pos-top .pkb-panel { top: 8px; }
	.pkb-pos-bottom .pkb-panel { bottom: 8px; }
	.pkb-wrap .pkb-tab { font-size: 13px; padding: 12px 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.pkb-wrap { --pkb-speed: .01s; }
	.pkb-wrap.pkb-anim-bounce.pkb-open .pkb-panel { --pkb-speed: .01s; }
}

@media print {
	.pkb-wrap { display: none !important; }
}

/* ---------- Handy content helpers (used by the Design Pack) ---------- */

.pkb-panel .pkb-center { text-align: center; }
.pkb-panel .pkb-small { font-size: 13px; opacity: .75; }
.pkb-panel .pkb-kicker {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 10px;
	border-radius: 30px;
	background: var(--pkb-accent, #008B8B);
	color: var(--pkb-accent-text, #fff);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.pkb-panel .pkb-big {
	margin: 4px 0 8px;
	color: var(--pkb-accent, #008B8B);
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}
.pkb-panel .pkb-code {
	margin: 10px 0 14px;
	padding: 12px;
	border: 2px dashed var(--pkb-accent, #008B8B);
	border-radius: 10px;
	background: rgba(128, 128, 128, .08);
	font: 800 22px/1.2 Menlo, Consolas, monospace;
	letter-spacing: .12em;
	text-align: center;
}
.pkb-panel ul.pkb-checks { list-style: none; margin: 0 0 14px; padding: 0; }
.pkb-panel ul.pkb-checks li { position: relative; margin: 6px 0; padding-left: 26px; }
.pkb-panel ul.pkb-checks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pkb-accent, #008B8B);
	color: var(--pkb-accent-text, #fff);
	font-size: 11px;
	font-weight: 800;
	line-height: 18px;
	text-align: center;
}
.pkb-panel .pkb-button.pkb-wide { display: block; width: 100%; text-align: center; }
.pkb-panel .pkb-button + .pkb-button { margin-top: 8px; }
.pkb-panel .pkb-button-outline {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0 0;
	padding: 10px 18px;
	border: 2px solid var(--pkb-accent, #008B8B);
	border-radius: 50px;
	color: var(--pkb-accent, #008B8B);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}
.pkb-panel .pkb-button-outline:hover { background: var(--pkb-accent, #008B8B); color: var(--pkb-accent-text, #fff); }
.pkb-panel .pkb-emoji { font-size: 40px; line-height: 1; margin: 0 0 8px; }
.pkb-panel .pkb-date {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(128, 128, 128, .1);
	font-weight: 700;
}