/* Theme vars, reset, and shared page-content styling (index.html/login.html) */

:root {
	--bg: #1b1c22;                    /* lh-background-color */
	--card: #25262b;                  /* lh-card-background */
	--card-alt: color-mix(in srgb, #dcdcdc 5%, #25262b);
	--hairline: rgb(47 48 53);        /* lh-border-color */
	--muted: #8c8c8c;                 /* lh-color-step-550 */
	--accent: #ffd740;                /* lh-color-primary */
	--accent-contrast: #2a2b30;       /* lh-color-primary-contrast */
	--danger: #ff4961;                /* lh-color-danger */
	--radius: 0.625rem;
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	background-color: var(--bg);
	color: #dcdcdc;
	font-family: Roboto, "Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Hide lahoco-* custom elements until upgraded: their layout/positioning
   comes from the component's own CSS module (fetched async), so before
   connectedCallback runs their light-dom content would flash unstyled. */
lahoco-layout:not(:defined),
lahoco-topbar:not(:defined),
lahoco-button:not(:defined),
lahoco-field:not(:defined),
lahoco-checkbox:not(:defined) {
	visibility: hidden;
}

.button-group {
	width: 100%;
	max-width: 340px;
	/* Fixed so the panel centers identically on index.html and login.html
	   regardless of which content (language tiles vs. access form) fills it. */
	min-height: 320px;
	text-align: center;
}

.logo {
	width: 168px;
	display: inline-block;
	margin-bottom: 30px;
}

.footer {
	margin: 34px 0 0;
	font-size: .62em;
	font-weight: 400;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .25);
}

/* ---------- Stacked layout on small screens ---------- */
@media screen and (max-width: 900px) {
	.logo {
		width: 148px;
	}
}