/* =========================================================================
 * Sabbath Clock — full-screen closure modal.
 *
 * Background/text colours are inlined per-instance from the admin settings
 * (see Sabbath_Clock::render_modal). This file only owns layout, type,
 * pointer-event suppression, and animation.
 * ========================================================================= */

.sabbath-clock {
	position: fixed;
	inset: 0;
	z-index: 2147483647;       /* sit above absolutely everything */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	pointer-events: auto;
	cursor: default;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: sabbathClockFade .25s ease-out;
}

@keyframes sabbathClockFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.sabbath-clock__inner {
	max-width: 720px;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

/* Masked logo — actual fill colour is set inline (the inline <style>
 * block in render_modal sets background-color to the configured text
 * colour). Size only here. */
.sabbath-clock__logo {
	width: clamp(180px, 28vw, 360px);
	height: clamp(64px, 10vw, 110px);
	display: block;
}

/* Brand "Tuckers" font on the closure message. Elementor's kit already
 * defines an @font-face for Tuckers, so we just name it here and let the
 * fallback chain catch any environment where the font hasn't loaded yet
 * (e.g. font file blocked, console preview). !important defeats the
 * site's .elementor-kit-NN h2 typography rule so the size + family stick. */
h2.sabbath-clock__title,
.sabbath-clock h2.sabbath-clock__title {
	font-family: "Tuckers", "Brush Script MT", cursive !important;
	/* Target 100px on desktop, scale down sensibly on tablet/mobile so it
	 * still fits in the viewport without horizontal scroll. */
	font-size: clamp(44px, 8vw, 100px) !important;
	font-weight: 400 !important;     /* Tuckers is a script — heavy weight crushes it */
	line-height: 1.15 !important;
	margin: 0 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Lock the underlying page so nothing behind the modal is reachable.
 * Body class is added by the inline script in render_modal. */
html.sabbath-locked,
body.sabbath-locked {
	overflow: hidden !important;
	height: 100vh !important;
}
body.sabbath-locked > *:not(.sabbath-clock):not(style):not(script) {
	pointer-events: none !important;
	user-select: none !important;
	-webkit-user-select: none !important;
}

/* Mobile: tighten gaps so the larger title doesn't push the logo off-screen. */
@media (max-width: 600px) {
	.sabbath-clock__inner { gap: 16px; }
}