/*
 * Demos panel: a sticky trigger on the right edge and a slide-in panel that
 * lists every demo. Shared by canvaswp.com and the preview network, so every
 * colour is stated here rather than inherited from whichever design hosts it.
 */

.cw-demos-trigger {
	position: fixed;
	right: 0;
	top: 50%;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .875rem .625rem;
	border: 0;
	/* The button is rotated a half turn below, so its physical right edge is
	   the one that faces away from the screen edge. Round that one. */
	border-radius: 0 .625rem .625rem 0;
	background: #1669d9;
	color: #fff;
	font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 -12px 28px -12px rgba(22, 105, 217, .7);
	writing-mode: vertical-rl;
	transform: translateY(-50%) rotate(180deg);
	transition: background-color .15s ease, right .15s ease;
}
.cw-demos-trigger i {
	font-size: 1rem;
	transform: rotate(90deg);
}
.cw-demos-trigger:hover,
.cw-demos-trigger:focus-visible {
	background: #0b57d0;
	color: #fff;
}
.cw-demos-trigger:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 3px;
}
.cw-demos-trigger[aria-expanded="true"] {
	right: -4rem;
}

.cw-demos-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9995;
	background: rgba(33, 37, 41, .55);
	opacity: 0;
	transition: opacity .25s ease;
}
.cw-demos-backdrop.is-open {
	opacity: 1;
}

.cw-demos-panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9996;
	display: flex;
	flex-direction: column;
	width: min(600px, 100vw);
	height: 100vh;
	height: 100dvh;
	background: #fff;
	color: #212529;
	color-scheme: light;
	font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
	box-shadow: -24px 0 64px -32px rgba(33, 37, 41, .5);
	transform: translateX(100%);
	transition: transform .28s ease;
}
.cw-demos-panel.is-open {
	transform: translateX(0);
}
.cw-demos-panel[hidden],
.cw-demos-backdrop[hidden] {
	display: none;
}

.cw-demos-panel__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem 1rem 1.5rem;
	border-bottom: 1px solid #e3e8ef;
}
.cw-demos-panel__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-left: auto;
}
.cw-demos-panel__eyebrow {
	font-size: var(--t-2xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #212529;
}
/* Shown on the preview network only: the way back to canvaswp.com from a demo. */
.cw-demos-panel__home {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
	font-size: var(--t-xs);
	font-weight: 600;
	line-height: 1;
	color: #0b57d0;
	text-decoration: none;
	white-space: nowrap;
}
.cw-demos-panel__home i {
	font-size: var(--t-sm);
}
.cw-demos-panel__home:hover,
.cw-demos-panel__home:focus-visible {
	color: #0b57d0;
	text-decoration: underline;
}
.cw-demos-panel__home:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 3px;
}
.cw-demos-panel__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #e3e8ef;
	border-radius: 50%;
	background: #fff;
	color: #212529;
	font-size: 1rem;
	cursor: pointer;
}
.cw-demos-panel__close:hover,
.cw-demos-panel__close:focus-visible {
	background: #212529;
	border-color: #212529;
	color: #fff;
}
.cw-demos-panel__close:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 3px;
}

.cw-demos-panel__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 1.5rem 1.5rem 2.5rem;
}
.cw-demos-panel__loading,
.cw-demos-panel__error {
	margin: 0;
	color: #5f6b7a;
	font-size: var(--t-sm);
}
.cw-demos-panel__error a {
	color: #0b57d0;
}

.cw-demos-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin-bottom: 1.5rem;
}
.cw-demos-panel__intro {
	flex: 1 1 18rem;
}
.cw-demos-panel__title {
	margin: 0 0 .375rem;
	font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
	font-style: normal;
	font-size: var(--t-2xl);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: #212529;
	text-wrap: balance;
}
.cw-demos-panel__sub,
.cw-demos-panel .portfolio-desc > span,
.cw-demos-panel__buy {
	font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
}
.cw-demos-panel__sub {
	margin: 0;
	max-width: 42ch;
	font-size: var(--t-sm);
	line-height: 1.55;
	color: #5f6b7a;
}
.cw-demos-panel__buy {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.125rem;
	border-radius: .5rem;
	background: #1669d9;
	color: #fff;
	font-size: var(--t-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease;
}
.cw-demos-panel__buy:hover,
.cw-demos-panel__buy:focus-visible {
	background: #0b57d0;
	color: #fff;
}
.cw-demos-panel__buy:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 3px;
}

/* The catalogue's own card, restated so a dark host design cannot recolour it. */
.cw-demos-panel .portfolio-item {
	margin: 0;
}
.cw-demos-panel .portfolio-image {
	overflow: hidden;
	border-radius: .5rem;
	background: #f8f9fa;
}
.cw-demos-panel .portfolio-image img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .3s ease;
}
.cw-demos-panel .portfolio-item:hover .portfolio-image img {
	transform: scale(1.03);
}
.cw-demos-panel .portfolio-desc {
	padding: 1rem 0 0;
}
.cw-demos-panel .portfolio-desc h3 {
	margin: 0 0 .125rem;
	font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
	font-style: normal;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}
.cw-demos-panel .portfolio-desc h3 a {
	color: #212529;
	text-decoration: none;
}
.cw-demos-panel .portfolio-desc h3 a:hover {
	color: #0b57d0;
}
.cw-demos-panel .portfolio-desc > span {
	display: block;
	font-size: var(--t-xs);
	color: #5f6b7a;
}

html.cw-demos-open {
	overflow: hidden;
}

@media (max-width: 767.98px) {
	.cw-demos-trigger {
		top: auto;
		right: 1rem;
		bottom: 1.25rem;
		padding: .875rem 1.125rem;
		border-radius: 2rem;
		box-shadow: 0 12px 28px -12px rgba(22, 105, 217, .7);
		writing-mode: horizontal-tb;
		transform: none;
	}
	.cw-demos-trigger i {
		transform: none;
	}
	.cw-demos-trigger[aria-expanded="true"] {
		right: 1rem;
		opacity: 0;
		pointer-events: none;
	}
	.cw-demos-panel__bar {
		padding: .875rem 1rem;
	}
	.cw-demos-panel__eyebrow {
		white-space: nowrap;
	}
	.cw-demos-panel__actions {
		gap: .75rem;
	}
	.cw-demos-panel__home {
		font-size: var(--t-2xs);
	}
	.cw-demos-panel__body {
		padding: 1.25rem 1rem 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cw-demos-trigger,
	.cw-demos-backdrop,
	.cw-demos-panel,
	.cw-demos-panel .portfolio-image img {
		transition: none;
	}
}

@media print {
	.cw-demos-trigger,
	.cw-demos-backdrop,
	.cw-demos-panel {
		display: none;
	}
}