/* =========================
	Jacy Services — Single Source of Truth
	Includes: Site chrome theme/components
========================= */

:root{
	/* Core theme */
	--bg:			hsla(0, 0%, 12%, 1);			/* #1e1e1e */
	--panel:			hsla(0, 0%, 15%, 1);			/* #262626 */
	--text:			hsla(0, 0%, 95%, 1);			/* #f2f2f2 */
	--muted:			hsla(0, 0%, 71%, 1);			/* #b5b5b5 */
	--accent:		hsla(209, 100%, 65%, 1);			/* #4aa3ff */

	/* Site chrome sizing */
	--masthead-h:		120px;
	--masthead-h-sm:	80px;

	--underbar-pad-y:	6px;
	--underbar-pad-x:	12px;

	/* App button styling */
	--btn-bg:			hsla(0, 0%, 15%, 1);
	--btn-bg-hover:		hsla(0, 0%, 17%, 1);
	--btn-border:		hsla(0, 0%, 100%, 0.14);
	--btn-text:		hsla(0, 0%, 95%, 1);

	/* If you EVER see a mystery line, flip this to 0 quickly */
	--kill-bottom-borders:	1;
}

*{
	box-sizing: border-box;
}

html, body{
	height: 100%;
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
				 "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/* ============================================================
	Site chrome: masthead + underbar
============================================================ */

.pageFrame{
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* Masthead (banner) */
@media (max-width: 600px){
	.masthead{
		height: var(--masthead-h-sm);
		flex: 0 0 var(--masthead-h-sm);
	}
}

.masthead{
	flex: 0 0 var(--masthead-h);
	height: var(--masthead-h);
	position: relative;
	z-index: 50;

	background-color: #000;
	cursor: pointer;
	
	overflow: hidden;
	width: 100%;
	align-self: stretch;

	/* Safari stability... */
	background-origin: content-box;
	background-clip: content-box;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);

	animation: mastShad 5s infinite ease-in-out;

	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0px;
}

/* Base masthead rotator layers (real <img> = no Safari paint-gap) */
.masthead-rotimg{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: auto;
	display: block;

	opacity: 0;
	transition: opacity 100ms ease;

	z-index: 55;
}

.masthead-rotimg.is-front{
	opacity: 1;
}

.masthead-hit{
	-webkit-appearance: none;
	appearance: none;

	position: absolute;
	inset: 0;

	border: 0;
	padding: 0;
	margin: 0;

	background: transparent;	/* no base image here */

	cursor: pointer;
	z-index: 70;
}

.masthead-hit.is-glow{
	background-image: url("/masthead/JacyMastHeadGlowing.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 100%;
}

/* Banner animation */
@keyframes mastShad{
	0%	{ box-shadow: 0px 0px 0px hsla(0, 0%, 0%, 0); }
	50%	{ box-shadow: 0px 10px 20px hsla(0, 0%, 0%, 0.75); }
	100%	{ box-shadow: 0px 0px 0px hsla(0, 0%, 0%, 0); }
}

@keyframes textShad{
	50%{
		text-shadow: 0px 1px 10px hsla(0, 0%, 0%, 0.25);
	}
}

/* Under-banner bar (CTA + app buttons) */
.underBar{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;

	padding: var(--underbar-pad-y) var(--underbar-pad-x);
	background: var(--bg);

	z-index: 40; /* below masthead (50) */
}

/* hard-kill any accidental bottom borders (your “mystery HR” insurance) */
.underBar,
.appButtons{
	border-bottom: calc(var(--kill-bottom-borders) * 0px) solid transparent;
	box-shadow: none;
	outline: none;
}

.underLeft{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* CTA text (currently unused per your last note, but kept) */
.masthead-left{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
}

@media (max-width: 480px){
	.nothing2See{
		font-size: 26px;
		margin-top: 8px;
	}
}

.nothing2See{
	cursor: pointer;
	user-select: none;

	position: absolute;
	left: 50%;
	top: 100%;
	margin-top: 12px;
	transform: translateX(-50%);

	font: 40px Arial, sans-serif;
	font-weight: bold;
	line-height: 1.05;
	text-align: center;

	color: hsla(0, 0%, 100%, 1);
	animation: textShad 5s infinite ease-in-out;

	z-index: 60;
}

.nothing2See::before{
	content: attr(data-text);
	position: absolute;
	inset: 0;
	z-index: -1;
	color: hsla(0, 0%, 100%, 1);
	pointer-events: none;
}

/* App buttons row */
.appButtons{
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

/* App buttons — emboss + drop (light top-left) */
.appBtn{
	display: inline-block;
	text-decoration: none;

	border: 1px solid var(--btn-border);
	background: var(--btn-bg);
	color: var(--btn-text);

	padding: 6px 10px;
	border-radius: 8px;

	cursor: pointer;
	font: inherit;
	font-size: 14px;
	line-height: 1;
	user-select: none;

	box-shadow:
		inset 1px 1px 0 hsla(0, 0%, 100%, 0.10),
		inset -1px -1px 0 hsla(0, 0%, 0%, 0.35),
		2px 2px 6px hsla(0, 0%, 0%, 0.55);

	transition:
		box-shadow 80ms ease,
		transform 80ms ease,
		background 120ms ease;
}

.appBtn:hover{
	background: var(--btn-bg-hover);
}

/* mouseDown = pressed: hide drop shadow */
.appBtn:active{
	box-shadow:
		inset 2px 2px 4px hsla(0, 0%, 0%, 0.55),
		inset -1px -1px 0 hsla(0, 0%, 100%, 0.06);
	transform: translateY(1px);
}

.wrap{
	max-width: 1000px;
	margin: 0 auto;
	padding: 48px 24px;
}

h1{
	font-size: 34px;
	margin: 0 0 8px 0;
	font-weight: 700;
	letter-spacing: 0.2px;
}

.tagline{
	color: var(--muted);
	font-size: 16px;
	margin-bottom: 40px;
}

.panel{
	background: var(--panel);
	border-radius: 14px;
	padding: 28px;
	margin-bottom: 20px;
}

.panel h2{
	margin: 0 0 10px 0;
	font-size: 20px;
	font-weight: 600;
}

.panel p{
	margin: 0 0 14px 0;
	color: var(--muted);
	line-height: 1.5;
}

.panel a{
	display: inline-block;
	margin-top: 6px;
	color: var(--accent);
	text-decoration: none;
	font-weight: 500;
}

.panel a:hover{
	text-decoration: underline;
}

/* Keep panel links from going purple/blue when visited */
.panel a:visited{
	color: var(--accent);
}

footer{
	margin-top: 48px;
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}

/* Brand header (layout overrides are in cadcursor.css) */
.site-header{
	margin-bottom: 28px;
}

.brand{
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--text);
}

.brand:hover{
	opacity: 0.92;
}

.brand-icon{
	width: 42px;
	height: 42px;
	flex-shrink: 0;
}

.brand-text{
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1;
}

/* Forms */
.formGroup{
	margin: 14px 0 14px 0;
}

label{
	display: block;
	font-size: 13px;
	color: var(--muted);
	margin: 0 0 6px 0;
}

input[type="email"],
input[type="text"]{
	width: 100%;
	padding: 11px 12px;
	font-size: 15px;
	color: var(--text);
	background: hsla(0, 0%, 11%, 1);			/* #1b1b1b */
	border: 1px solid hsla(0, 0%, 23%, 1);		/* #3a3a3a */
	border-radius: 10px;
	outline: none;
}

input::placeholder{
	color: hsla(0, 0%, 49%, 1);				/* #7c7c7c */
}

input:focus{
	border-color: var(--accent);
	box-shadow: 0 0 0 3px hsla(209, 100%, 65%, 0.18);
}

/* Button row */
.buttonRow{
	margin-top: 18px;
	display: flex;
	gap: 12px;
	align-items: center;
}

.btnPrimary{
	appearance: none;
	border: 0;
	background: var(--accent);
	color: hsla(209, 49%, 6%, 1);				/* #081018 */
	font-weight: 700;
	font-size: 15px;
	padding: 10px 16px;
	border-radius: 10px;
	cursor: pointer;
}

.btnPrimary:hover{
	filter: brightness(1.05);
}

.btnPrimary:disabled{
	opacity: 0.55;
	cursor: default;
	filter: none;
}

/* Status message */
.msg{
	margin-top: 14px;
	font-size: 14px;
	color: var(--muted);
	white-space: pre-wrap;
}

.msg.ok	{ color: hsla(136, 58%, 76%, 1); }	/* #9fe3b0 */
.msg.err	{ color: hsla(40, 100%, 71%, 1); }	/* #ffd36a */