/* =========================================================================
   Hosting Banner Popup — frontend.css
   Matches custom-site-theme color palette:
     primary-active : #f59e0b   primary-color : #d97706
     neutral-950    : #09090b   neutral-800   : #27272a
     neutral-600    : #61616a   neutral-400   : #ceced5
     neutral-200    : #f4f4f5   neutral-0     : #ffffff
   ========================================================================= */

/* --- variables ----------------------------------------------------------- */
.shb-popup {
	--shb-amber:        #f59e0b;
	--shb-amber-dim:    #d97706;
	--shb-dark:         #09090b;
	--shb-dark-2:       #27272a;
	--shb-mid:          #61616a;
	--shb-light:        #f4f4f5;
	--shb-white:        #ffffff;
	--shb-radius:       0.5rem;
	--shb-shadow:       0 24px 64px rgba(0, 0, 0, 0.55);
	--shb-transition:   0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- overlay ------------------------------------------------------------ */
.shb-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.shb-popup[hidden] {
	display: none;
}

.shb-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(9, 9, 11, 0.72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	cursor: pointer;
}

/* --- card --------------------------------------------------------------- */
.shb-popup__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 26rem;
	background: var(--shb-dark-2);
	border: 1px solid rgba(245, 158, 11, 0.2);
	border-radius: var(--shb-radius);
	box-shadow: var(--shb-shadow);
	overflow: hidden;
	animation: shb-slide-up var(--shb-transition) both;
}

@keyframes shb-slide-up {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* --- close button ------------------------------------------------------- */
.shb-popup__close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: rgba(9, 9, 11, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	color: var(--shb-light);
	cursor: pointer;
	transition: background var(--shb-transition), color var(--shb-transition);
}

.shb-popup__close:hover,
.shb-popup__close:focus-visible {
	background: var(--shb-amber);
	color: var(--shb-dark);
	outline: none;
}

.shb-popup__close svg {
	fill: currentColor;
	flex-shrink: 0;
}

/* --- server visual ------------------------------------------------------ */
.shb-popup__visual {
	position: relative;
	height: 7rem;
	background: linear-gradient(160deg, #111113 0%, #1c1c1f 60%, #111113 100%);
	border-bottom: 1px solid rgba(245, 158, 11, 0.15);
	overflow: hidden;
}

/* Canvas element drawn by JS */
.shb-popup__visual canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- body --------------------------------------------------------------- */
.shb-popup__body {
	padding: 1.25rem 1.4rem 1.5rem;
}

.shb-popup__eyebrow {
	margin: 0 0 0.45rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--shb-amber);
}

.shb-popup__headline {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--dm-serif-display, "Georgia", serif);
	font-size: clamp(1.2rem, 4vw, 1.5rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--shb-light);
}

.shb-popup__description {
	margin: 0 0 1.1rem;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--shb-mid);
}

/* --- CTA button --------------------------------------------------------- */
.shb-popup__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.65rem 1.2rem;
	background: var(--shb-amber);
	color: var(--shb-dark);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	border-radius: 0.25rem;
	border: none;
	cursor: pointer;
	transition: background var(--shb-transition), transform var(--shb-transition);
}

.shb-popup__cta:hover,
.shb-popup__cta:focus-visible {
	background: var(--shb-amber-dim);
	transform: translateY(-1px);
	outline: 2px solid var(--shb-amber);
	outline-offset: 2px;
}

.shb-popup__cta svg {
	fill: currentColor;
	flex-shrink: 0;
}

.shb-popup__disclosure {
	margin: 0.85rem 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--shb-mid);
}

.shb-popup__cta--placeholder {
	opacity: 0.55;
	pointer-events: none;
}

.shb-inline {
	--shb-inline-text: #09090b;
	--shb-inline-muted: #3f3f46;
	--shb-inline-disclosure: var(--wp--preset--color--neutral-600, #61616a);
	margin: 1.25rem 0 1.5rem;
	padding: 0;
}

body.is-style-dark .shb-inline,
body.default-mode-dark:not(.is-style-light):not(.is-style-system) .shb-inline,
.is-style-dark .shb-inline {
	--shb-inline-text: var(--wp--preset--color--neutral-0, #ffffff);
	--shb-inline-muted: var(--wp--preset--color--neutral-400, #ceced5);
	--shb-inline-disclosure: var(--wp--preset--color--neutral-400, #ceced5);
}

.shb-inline__link,
.shb-inline__card,
.shb-inline__image {
	display: block;
	width: 100%;
}

.shb-inline__card {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	gap: 1rem;
	align-items: stretch;
	padding: 1.25rem 1.35rem;
	border: 1px solid rgba(245, 158, 11, 0.18);
	background: linear-gradient(135deg, rgba(255, 250, 240, 0.98), rgba(255, 255, 255, 0.98));
	box-shadow: 0 14px 36px rgba(9, 9, 11, 0.08);
	text-decoration: none;
	color: var(--shb-inline-text);
}

.shb-inline__card:visited,
.shb-inline__card:hover,
.shb-inline__card:focus-visible {
	color: inherit;
	text-decoration: none;
}

body.is-style-dark .shb-inline__card,
body.default-mode-dark:not(.is-style-light):not(.is-style-system) .shb-inline__card,
.is-style-dark .shb-inline__card {
	background: linear-gradient(135deg, rgba(39, 39, 42, 0.98), rgba(9, 9, 11, 0.98));
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
	color: var(--shb-inline-text);
}

@media (prefers-color-scheme: dark) {
	body.is-style-system .shb-inline__card,
	body.default-mode-system:not(.is-style-light):not(.is-style-dark) .shb-inline__card {
		background: linear-gradient(135deg, rgba(39, 39, 42, 0.98), rgba(9, 9, 11, 0.98));
		box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
		color: var(--shb-inline-text);
	}

	body.is-style-system .shb-inline,
	body.default-mode-system:not(.is-style-light):not(.is-style-dark) .shb-inline {
		--shb-inline-text: var(--wp--preset--color--neutral-0, #ffffff);
		--shb-inline-muted: var(--wp--preset--color--neutral-400, #ceced5);
		--shb-inline-disclosure: var(--wp--preset--color--neutral-400, #ceced5);
	}

	body.is-style-system .shb-inline__disclosure,
	body.default-mode-system:not(.is-style-light):not(.is-style-dark) .shb-inline__disclosure {
		color: var(--shb-inline-disclosure);
	}

	body.is-style-system .shb-rail,
	body.default-mode-system:not(.is-style-light):not(.is-style-dark) .shb-rail {
		background: linear-gradient(180deg, rgba(39, 39, 42, 0.98), rgba(9, 9, 11, 0.98));
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
		color: var(--wp--preset--color--neutral-0, #ffffff);
	}
}

.shb-inline__visual {
	position: relative;
	min-height: 11rem;
	border: 1px solid rgba(245, 158, 11, 0.12);
	background: linear-gradient(145deg, rgba(12, 12, 14, 0.96), rgba(34, 34, 38, 0.96));
	overflow: hidden;
}

.shb-inline__visual canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.shb-inline__content {
	min-width: 0;
}

.shb-inline__eyebrow {
	margin: 0 0 0.45rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-active, #f59e0b);
}

.shb-inline__headline {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--dm-serif-display, "Georgia", serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.1;
	color: var(--shb-inline-text);
}

.shb-inline__description {
	margin: 0 0 1rem;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--shb-inline-muted);
	opacity: 0.86;
}

.shb-inline__button {
	display: inline-flex;
	align-items: center;
	padding: 0.65rem 1rem;
	background: var(--wp--preset--color--primary-active, #f59e0b);
	color: #09090b;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
}

.shb-rails {
	display: none;
}

@media (min-width: 1480px) {
	.shb-rails {
		display: block;
	}

	.shb-rail {
		--shb-rail-text: #09090b;
		position: fixed;
		top: 5.25rem;
		width: 170px;
		padding: 0.8rem;
		border: 1px solid rgba(245, 158, 11, 0.18);
		background: linear-gradient(180deg, rgba(255, 250, 240, 0.98), rgba(255, 255, 255, 0.98));
		box-shadow: 0 18px 40px rgba(9, 9, 11, 0.1);
		text-decoration: none;
		color: var(--shb-rail-text);
		z-index: 30;
	}

	.shb-rail:visited,
	.shb-rail:hover,
	.shb-rail:focus-visible {
		color: inherit;
		text-decoration: none;
	}

	body.is-style-dark .shb-rail,
	body.default-mode-dark:not(.is-style-light):not(.is-style-system) .shb-rail,
	.is-style-dark .shb-rail {
		--shb-rail-text: var(--wp--preset--color--neutral-0, #ffffff);
		background: linear-gradient(180deg, rgba(39, 39, 42, 0.98), rgba(9, 9, 11, 0.98));
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
		color: var(--shb-rail-text);
	}

	.shb-rail--left {
		left: max(20px, calc((100vw - 1240px) / 2 - 230px));
	}

	.shb-rail--right {
		right: max(20px, calc((100vw - 1240px) / 2 - 230px));
	}

	.shb-rail__visual {
		height: 150px;
		margin-bottom: 0.75rem;
		border: 1px solid rgba(245, 158, 11, 0.12);
		background: linear-gradient(145deg, rgba(12, 12, 14, 0.96), rgba(34, 34, 38, 0.96));
		overflow: hidden;
	}

	.shb-rail__visual canvas {
		display: block;
		width: 100%;
		height: 100%;
	}

	.shb-rail__eyebrow {
		margin: 0 0 0.35rem;
		font-size: 0.62rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--wp--preset--color--primary-active, #f59e0b);
	}

	.shb-rail__headline {
		margin: 0 0 0.75rem;
		font-family: var(--wp--preset--font-family--dm-serif-display, "Georgia", serif);
		font-size: 1.2rem;
		line-height: 1.05;
		color: var(--shb-rail-text);
	}

	.shb-rail__button {
		display: inline-flex;
		align-items: center;
		padding: 0.5rem 0.75rem;
		background: var(--wp--preset--color--primary-active, #f59e0b);
		color: #09090b;
		font-size: 0.8rem;
		font-weight: 700;
		line-height: 1;
	}

	/* JS dark-mode class for rails */
	.shb-rail.shb--is-dark {
		--shb-rail-text: #f4f4f5;
		background: linear-gradient(180deg, rgba(39, 39, 42, 0.98), rgba(9, 9, 11, 0.98)) !important;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
		color: #f4f4f5 !important;
	}

	.shb-rail.shb--is-dark .shb-rail__headline {
		color: #f4f4f5 !important;
	}
}

@media (max-width: 700px) {
	.shb-inline__card {
		grid-template-columns: 1fr;
	}

	.shb-inline__visual {
		min-height: 9rem;
	}
}

.shb-inline__image {
	height: auto;
	border: 1px solid rgba(245, 158, 11, 0.18);
	box-shadow: 0 14px 36px rgba(9, 9, 11, 0.14);
}

.shb-inline__disclosure {
	margin: 0.55rem 0 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--shb-inline-disclosure);
}

body.is-style-dark .shb-inline__disclosure,
body.default-mode-dark:not(.is-style-light):not(.is-style-system) .shb-inline__disclosure,
.is-style-dark .shb-inline__disclosure {
	color: var(--shb-inline-disclosure);
}

/* --- JS dark-mode class: explicit colours that beat any theme cascade -- */
.shb-inline.shb--is-dark .shb-inline__card {
	background: linear-gradient(135deg, rgba(39, 39, 42, 0.98), rgba(9, 9, 11, 0.98)) !important;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28) !important;
	color: #f4f4f5 !important;
}

.shb-inline.shb--is-dark .shb-inline__headline {
	color: #f4f4f5 !important;
}

.shb-inline.shb--is-dark .shb-inline__description {
	color: #ceced5 !important;
}

.shb-inline.shb--is-dark .shb-inline__disclosure {
	color: #a1a1aa !important;
}

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.shb-popup__card {
		animation: none;
	}

	.shb-popup__cta {
		transition: none;
	}
}