/* JD Shell 0.2.0 - THE STAGE (same model as Art by Innovation's theatre)
 *
 * The 3840x2160 design canvas is stretched to the whole browser window.
 * Two image layers are FIXED to the window and never scroll:
 *
 *     background   z1    .jd-bg           full canvas, behind everything
 *     page         z5    .jd-content      the opening; the ONLY part that scrolls
 *     shell        z10   .jd-shell-layer  the frame, opening cut out
 *     chrome       z20   header / footer  logo, menu, footer text on the frame
 *
 * Both images use the same fit (--jd-fit, default 100% 100%), so they stay
 * lined up at every window shape.
 *
 * Units (all settings are design pixels):
 *   --ux  one design pixel ACROSS  (100vw / 3840)  -> left, width
 *   --uy  one design pixel DOWN    (100vh / 2160)  -> top, height
 *   --uf  the smaller of the two                   -> text sizes
 * Numbers come from Appearance > Customize > JD Shell (inline :root vars).
 */

*, *::before, *::after { box-sizing: border-box; }

:root { --jd-ab: 0px; }                       /* WordPress admin bar height */
body.admin-bar { --jd-ab: 32px; }
.jd-frame {
	--ux: calc(100vw / 3840);
	--uy: calc((100vh - var(--jd-ab)) / 2160);
	--uf: min(var(--ux), var(--uy));
}
@supports (height: 100dvh) {
	.jd-frame { --uy: calc((100dvh - var(--jd-ab)) / 2160); }
}

/* The page itself never scrolls; the opening does. */
@media (min-width: 901px) {
	html, body { height: 100%; overflow: hidden; }
}

html, body {
	margin: 0;
	background: var(--jd-page-color, #111);
	color: #eee;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.jd-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: #000; color: #fff; padding: 8px 12px;
}
.jd-skip:focus { left: 8px; top: 8px; }

.jd-frame { position: relative; width: 100%; }

/* ---------- The two fixed image layers ---------- */
.jd-bg, .jd-shell-layer {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	top: var(--jd-ab);
	pointer-events: none;
}
.jd-bg {
	z-index: 1;
	background: var(--jd-bg) center / var(--jd-fit) no-repeat, var(--jd-page-color, #111);
}
.jd-shell-layer {
	z-index: 10;
	background: var(--jd-shell) center / var(--jd-fit) no-repeat;
}
/* Cut the opening out of the shell: header 200, footer 160, sides 20 on the
   3840x2160 canvas, as percentages so it tracks the stretch exactly. */
.jd-shell-layer.jd-cut {
	clip-path: polygon(evenodd,
		0 0, 100% 0, 100% 100%, 0 100%, 0 0,
		0.5208% 9.2593%, 0.5208% 92.5926%, 99.4792% 92.5926%, 99.4792% 9.2593%, 0.5208% 9.2593%);
}

/* ---------- Header: top 200px of the shell image ---------- */
.jd-header {
	position: fixed;
	z-index: 20;
	left: 0; right: 0;
	top: var(--jd-ab);
	height: calc(200 * var(--uy));
}

.jd-logo {
	position: absolute;
	left:   calc(var(--jd-logo-x) * var(--ux));
	top:    calc(var(--jd-logo-y) * var(--uy));
	width:  calc(var(--jd-logo-w) * var(--ux));
	height: calc(var(--jd-logo-h) * var(--uy));
	display: flex;
	align-items: center;
}
.jd-logo .custom-logo-link { display: flex; align-items: center; width: 100%; height: 100%; }
.jd-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.jd-site-title {
	color: var(--jd-title-color);
	font-size: calc(var(--jd-title-size) * var(--uf));
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.jd-menubar {
	position: absolute;
	left:   calc(var(--jd-menu-x) * var(--ux));
	top:    calc(var(--jd-menu-y) * var(--uy));
	width:  calc(var(--jd-menu-w) * var(--ux));
	height: calc(var(--jd-menu-h) * var(--uy));
	background: var(--jd-menu-bg);
	display: flex;
	align-items: center;
	padding: 0 calc(40 * var(--uf));
	z-index: 10;
}
.jd-menubar .jd-menu {
	list-style: none; margin: 0; padding: 0;
	width: 100%;
	display: flex;
	justify-content: var(--jd-menu-align);
	gap: calc(var(--jd-menu-gap) * var(--uf));
}
.jd-menubar .jd-menu li { position: relative; }
.jd-menubar .jd-menu a {
	color: var(--jd-menu-color);
	font-family: var(--jd-menu-font);
	font-size: calc(var(--jd-menu-size) * var(--uf));
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}
.jd-menubar .jd-menu a:hover, .jd-menubar .jd-menu a:focus,
.jd-menubar .jd-menu .current-menu-item > a { color: var(--jd-menu-hover); }

/* One level of drop-down. */
.jd-menubar .jd-menu .sub-menu {
	display: none;
	position: absolute; left: 0; top: 100%;
	list-style: none; margin: 0;
	padding: calc(20 * var(--uf)) calc(30 * var(--uf));
	min-width: calc(500 * var(--uf));
	background: var(--jd-menu-bg);
	box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.jd-menubar .jd-menu .sub-menu li { padding: calc(8 * var(--uf)) 0; }
.jd-menubar .jd-menu li:hover > .sub-menu,
.jd-menubar .jd-menu li:focus-within > .sub-menu { display: block; }

/* JD Card Nav in the menu bar: the plugin draws the cards, the bar only
   positions them. The bar keeps its box; the card row sits inside it. */
.jd-menubar.has-card-nav { padding: 0; background: transparent; }
.jd-menubar.has-card-nav .jdcn { height: 100%; display: flex; align-items: center; }

/* ---------- The opening: the only part of the page that scrolls ---------- */
.jd-content {
	position: fixed;
	z-index: 5;
	left:   calc(20 * var(--ux));
	right:  calc(20 * var(--ux));
	top:    calc(var(--jd-ab) + 200 * var(--uy));
	bottom: calc(160 * var(--uy));
	border-radius: calc(var(--jd-radius) * var(--uf));
	background: var(--jd-tint, transparent);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.35) transparent;
	display: grid;
	align-items: stretch;
}
.jd-layout-home .jd-content { grid-template-columns: var(--jd-home-left) 1fr var(--jd-home-right); }
.jd-layout-page .jd-content { grid-template-columns: var(--jd-page-left) 1fr; }

.jd-col {
	position: relative;
	min-width: 0;
	padding: calc(var(--jd-col-pad) * var(--uf));
}
.jd-rail { background: var(--jd-rail-tint); }

/* Content typography, scaled with the frame. */
.jd-center, .jd-rail { font-size: calc(34 * var(--uf)); line-height: 1.55; }
.jd-entry-title { font-size: calc(80 * var(--uf)); margin: 0 0 calc(30 * var(--uf)); color: var(--jd-title-color); }
.jd-widget-title { font-size: calc(44 * var(--uf)); margin: 0 0 calc(16 * var(--uf)); color: var(--jd-title-color); }
.jd-widget { margin-bottom: calc(40 * var(--uf)); }
.jd-center a, .jd-rail a { color: var(--jd-menu-color); }
.jd-center img { max-width: 100%; height: auto; }

/* ---------- Footer: bottom 160px of the shell image ---------- */
.jd-footer {
	position: fixed;
	z-index: 20;
	left: 0; right: 0; bottom: 0;
	height: calc(160 * var(--uy));
}
.jd-footer-box {
	position: absolute;
	left:   calc(var(--jd-footer-x) * var(--ux));
	top:    calc(var(--jd-footer-y) * var(--uy));
	width:  calc(var(--jd-footer-w) * var(--ux));
	height: calc(var(--jd-footer-h) * var(--uy));
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: var(--jd-footer-align);
	color: var(--jd-footer-color);
	font-size: calc(var(--jd-footer-size) * var(--uf));
}
.jd-footer-box a { color: inherit; }
.jd-footer-menu {
	list-style: none; margin: 0 0 calc(8 * var(--uf)); padding: 0;
	display: flex; gap: calc(50 * var(--uf));
	justify-content: var(--jd-footer-align);
}

/* ---------- Layout guides (Customize > Layouts > Show layout guides) ---------- */
.jd-guides .jd-col { outline: calc(4 * var(--uf)) dashed rgba(255, 230, 0, .7); outline-offset: calc(-4 * var(--uf)); }
.jd-guides .jd-col::before {
	content: attr(data-guide);
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	color: #ffe600;
	font-size: calc(60 * var(--uf));
	white-space: nowrap;
	pointer-events: none;
}
.jd-guides .jd-logo, .jd-guides .jd-menubar, .jd-guides .jd-footer-box {
	outline: calc(4 * var(--uf)) dashed rgba(0, 255, 255, .8);
}

/* ---------- Small screens: the frame math makes text unreadable, so relax it ---------- */
@media (max-width: 900px) {
	/* Phones: the stage math makes text unreadable, so the page scrolls normally.
	   The background stays fixed behind it; the shell art moves onto the
	   header and footer bands. */
	.jd-shell-layer { display: none; }
	.jd-bg { top: 0; background-size: cover, auto; }
	.jd-header {
		position: relative; top: auto;
		height: auto;
		display: flex; flex-direction: column; align-items: center;
		gap: 10px; padding: 12px 16px;
		background: var(--jd-shell) center top / cover no-repeat;
	}
	.jd-logo, .jd-menubar { position: static; width: auto; height: auto; }
	.jd-logo img { max-height: 56px; }
	.jd-site-title { font-size: 28px; }
	.jd-menubar { padding: 8px 12px; width: 100%; }
	.jd-menubar .jd-menu { flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
	.jd-menubar .jd-menu a { font-size: 16px; }
	.jd-menubar .jd-menu .sub-menu { position: static; box-shadow: none; padding: 4px 0 0 12px; min-width: 0; }
	.jd-menubar .jd-menu .sub-menu li { padding: 2px 0; }

	.jd-content {
		position: relative; z-index: 5;
		left: auto; right: auto; top: auto; bottom: auto;
		margin: 6px; min-height: 60vh; border-radius: 8px;
		overflow: visible;
	}
	.jd-layout-home .jd-content,
	.jd-layout-page .jd-content { grid-template-columns: 1fr; }
	.jd-layout-home .jd-center { order: -1; }
	.jd-col { padding: 16px; }
	.jd-center, .jd-rail { font-size: 16px; }
	.jd-entry-title { font-size: 26px; margin-bottom: 12px; }
	.jd-widget-title { font-size: 19px; }
	.jd-widget { margin-bottom: 16px; }

	.jd-footer { position: relative; z-index: 20; height: auto; background: var(--jd-shell) center bottom / cover no-repeat; }
	.jd-footer-box { position: static; width: auto; height: auto; padding: 14px 16px; font-size: 14px; }
	.jd-footer-menu { flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; }
	.jd-guides .jd-col::before { font-size: 14px; }
}