/* PJ Maintenance — front page. Colors come from CSS variables set in settings. */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.pjmaint {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	font-family: var(--pjmaint-font);
	font-size: clamp(16px, 1rem + .2vw, 18px);
	line-height: 1.6;
	color: var(--pjmaint-text);
	background-color: var(--pjmaint-bg);
	background-image: linear-gradient(var(--pjmaint-overlay), var(--pjmaint-overlay)), var(--pjmaint-bg-image);
	background-size: auto, var(--pjmaint-bg-size);
	background-repeat: no-repeat, var(--pjmaint-bg-repeat);
	background-position: center, var(--pjmaint-bg-pos);
	-webkit-font-smoothing: antialiased;
}

.pjmaint .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pjmaint-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.pjmaint-main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(32px, 6vw, 80px) 20px;
}

.pjmaint-inner {
	width: 100%;
	max-width: 720px;
}

.valign-top .pjmaint-main { align-items: flex-start; padding-top: var(--pjmaint-top-space); }

.align-center .pjmaint-inner { text-align: center; }
.align-left .pjmaint-main { justify-content: flex-start; }
.align-left .pjmaint-inner { text-align: left; margin-left: clamp(0px, 6vw, 96px); }

.layout-card .pjmaint-inner {
	padding: clamp(28px, 5vw, 56px);
	background: var(--pjmaint-card);
	border-radius: 18px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
}

.pjmaint-inner > * + * { margin-top: 28px; }

.pjmaint-logo-wrap { line-height: 0; }

/* Space below the logo (the heading resets its own margin, so set it here). */
.pjmaint .pjmaint-inner > .pjmaint-logo-wrap + * { margin-top: var(--pjmaint-logo-space); }

.pjmaint-logo {
	display: inline-block;
	width: var(--pjmaint-logo-width);
	max-width: 100%;
	height: auto;
}

.pjmaint .pjmaint-heading {
	margin: 0;
	font-size: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.01em;
	color: inherit;
}

.pjmaint .pjmaint-tagline {
	margin: 12px 0 0;
	font-size: 1.2em;
	opacity: .85;
}

.pjmaint-heading + .pjmaint-tagline { margin-top: 12px; }

.pjmaint-content > :first-child { margin-top: 0; }
.pjmaint-content > :last-child { margin-bottom: 0; }
.pjmaint-content img { max-width: 100%; height: auto; }

.pjmaint a { color: var(--pjmaint-accent); }
.pjmaint a:focus-visible { outline: 2px solid var(--pjmaint-accent); outline-offset: 3px; border-radius: 4px; }

/* Countdown */
.pjmaint-countdown-label {
	margin: 0 0 12px;
	font-size: .8em;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pjmaint-accent);
}

.pjmaint-countdown-units {
	display: inline-grid;
	grid-template-columns: repeat(4, minmax(64px, 1fr));
	gap: clamp(8px, 2vw, 16px);
}

.pjmaint-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 8px 10px;
	border: 1px solid rgba(var(--pjmaint-text-rgb), .22);
	border-radius: 12px;
	background: rgba(var(--pjmaint-text-rgb), .06);
}

.pjmaint-num {
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pjmaint-unit-label {
	margin-top: 6px;
	font-size: .72em;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .75;
}

.pjmaint-countdown-done { display: none; margin: 0; font-weight: 600; }
.pjmaint-countdown.is-done .pjmaint-countdown-units,
.pjmaint-countdown.is-done .pjmaint-countdown-label { display: none; }
.pjmaint-countdown.is-done .pjmaint-countdown-done { display: block; }

/* Link buttons / cards */
.pjmaint-links {
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

.pjmaint-link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.pjmaint .pjmaint-link { color: inherit; }
.pjmaint-link-label { font-weight: 700; }
.pjmaint-link-desc { font-size: .85em; opacity: .85; }
.pjmaint-link-arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.2em; transition: transform .15s ease; }
.pjmaint-link:hover .pjmaint-link-arrow { transform: translate(4px, -50%); }

/* Buttons: a stacked column of accent-colored buttons (pill; rounder box with a description). */
.pjmaint-links.style-buttons {
	display: grid;
	gap: 12px;
	max-width: 460px;
}

.align-center .pjmaint-links.style-buttons { margin-left: auto; margin-right: auto; }

.pjmaint-links.style-buttons .pjmaint-link {
	padding: 14px 52px 14px 22px;
	text-align: left;
	color: var(--pjmaint-button-text);
	background: var(--pjmaint-accent);
	border-radius: 999px;
}

.pjmaint-links.style-buttons .pjmaint-link:has(.pjmaint-link-desc) { border-radius: 18px; }
.pjmaint-links.style-buttons .pjmaint-link-desc { color: var(--pjmaint-button-desc); opacity: var(--pjmaint-button-desc-opacity); }
.pjmaint-links.style-buttons .pjmaint-link:hover,
.pjmaint-links.style-buttons .pjmaint-link:focus-visible { background: var(--pjmaint-button-hover); }
.pjmaint-links.style-buttons .pjmaint-link:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .2); }

/* Buttons per row. Each row's buttons share the tallest one's height. */
.pjmaint-links li { display: flex; }
.pjmaint-links .pjmaint-link { flex: 1; }
.pjmaint-links.cols-1 { grid-template-columns: 1fr; }
.pjmaint-links.cols-2,
.pjmaint-links.cols-3,
.pjmaint-links.cols-4 { max-width: none; }
.pjmaint-links.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pjmaint-links.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pjmaint-links.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 3–4 per row need more room than the 720px text column: the column widens,
   while the heading and text keep their normal measure. */
.links-cols-3 .pjmaint-inner { max-width: 1080px; }
.links-cols-4 .pjmaint-inner { max-width: 1240px; }
.links-cols-3 .pjmaint-inner > :not(.pjmaint-links),
.links-cols-4 .pjmaint-inner > :not(.pjmaint-links) { max-width: 720px; }
.align-center.links-cols-3 .pjmaint-inner > :not(.pjmaint-links),
.align-center.links-cols-4 .pjmaint-inner > :not(.pjmaint-links) { margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
	.pjmaint-links.cols-3,
	.pjmaint-links.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.pjmaint-links.cols-2,
	.pjmaint-links.cols-3,
	.pjmaint-links.cols-4 { grid-template-columns: 1fr; }
}

/* Cards: side-by-side tiles. */
.pjmaint-links.style-cards {
	display: grid;
	gap: 14px;
}

.pjmaint-links.style-cards.cols-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.pjmaint-links.style-cards .pjmaint-link {
	height: 100%;
	padding: 20px;
	text-align: left;
	border: 1px solid rgba(var(--pjmaint-text-rgb), .22);
	border-radius: 14px;
	background: rgba(var(--pjmaint-text-rgb), .07);
}

.pjmaint-links.style-cards .pjmaint-link-label { padding-right: 22px; color: var(--pjmaint-accent); font-size: 1.05em; }
.pjmaint-links.style-cards .pjmaint-link-arrow { top: 21px; right: 16px; transform: none; color: var(--pjmaint-accent); }
.pjmaint-links.style-cards .pjmaint-link:hover .pjmaint-link-arrow { transform: translateX(4px); }
.pjmaint-links.style-cards .pjmaint-link:hover { background: rgba(var(--pjmaint-text-rgb), .13); transform: translateY(-2px); }

.pjmaint-link:focus-visible { outline: 2px solid var(--pjmaint-text); outline-offset: 3px; }

/* Social */
.pjmaint-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

.align-center .pjmaint-social { justify-content: center; }

.pjmaint-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pjmaint-text);
	transition: transform .15s ease, opacity .15s ease, background-color .15s ease;
}

.pjmaint-social svg {
	width: var(--pjmaint-icon-size);
	height: var(--pjmaint-icon-size);
	fill: currentColor;
}

.pjmaint-social.is-brand a { color: var(--pjmaint-brand); }

.pjmaint-social.shape-circle a,
.pjmaint-social.shape-rounded a {
	width: calc(var(--pjmaint-icon-size) * 2);
	height: calc(var(--pjmaint-icon-size) * 2);
	background: rgba(var(--pjmaint-text-rgb), .1);
}

.pjmaint-social.shape-circle a { border-radius: 50%; }
.pjmaint-social.shape-rounded a { border-radius: 25%; }

.pjmaint-social.is-brand.shape-circle a,
.pjmaint-social.is-brand.shape-rounded a {
	color: #fff;
	background: var(--pjmaint-brand);
}

.pjmaint-social a:hover { transform: translateY(-2px); opacity: .85; }

/* Footer */
.pjmaint-footer {
	padding: 20px;
	font-size: .85em;
	text-align: center;
	opacity: .8;
}

.align-left .pjmaint-footer { text-align: left; padding-left: calc(20px + clamp(0px, 6vw, 96px)); }
.pjmaint-footer p { margin: 0; }
.pjmaint-footer p + p { margin-top: 6px; }

/* Admin preview bar */
.pjmaint-preview-bar {
	position: sticky;
	top: 0;
	z-index: 10;
	padding: 8px 16px;
	font: 13px/1.4 system-ui, sans-serif;
	text-align: center;
	color: #fff;
	background: #1d2327;
}

.pjmaint-preview-bar a { color: #72aee6; margin-left: 8px; }

@media (max-width: 480px) {
	.pjmaint-countdown-units { grid-template-columns: repeat(4, 1fr); width: 100%; }
	.pjmaint-unit { padding: 10px 4px 8px; }
	.pjmaint-unit-label { font-size: .62em; letter-spacing: .04em; }
	.align-left .pjmaint-inner { margin-left: 0; }
	.align-left .pjmaint-footer { padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.pjmaint-social a,
	.pjmaint-link,
	.pjmaint-link-arrow { transition: none; }
	.pjmaint-link:hover { transform: none; }
	.pjmaint-social a:hover { transform: none; }
}