/*
 * GMLx onboarding overrides for LittleLink
 * Brand reference: gmlx-brand skill (visual-identity.md)
 *
 * Brand colors:
 *   GMLx Blue   #005DA6  primary, headers, logo, body links
 *   GMLx Green  #009460  success accent, "first" badge
 *   GMLx Gray   #97989A  secondary text, dividers
 *   Body text   #1A1A1A
 *
 * Typography: Avenir Next > Aptos > Calibri (no Monotype license,
 * so we skip the bundled Open Sans @font-face and use the system chain).
 */

:root {
	--gmlx-blue: #005DA6;
	--gmlx-green: #009460;
	--gmlx-gray: #97989A;
	--gmlx-body: #1A1A1A;
	--gmlx-surface: #F4F5F6;
	--gmlx-border: #D1D2D4;

	/* Theme-aware tokens. These flip in dark mode so we don't have to
	   repeat color overrides on every text element below. */
	--gmlx-text: #1A1A1A;
	--gmlx-text-muted: #4a4a4a;
	--gmlx-link: #005DA6;
	--gmlx-link-hover: #004680;
	--gmlx-surface-card: #F4F5F6;
	--gmlx-border-soft: #D1D2D4;
}

:root.theme-dark {
	--gmlx-text: #ffffff;
	--gmlx-text-muted: #b3b3b3;
	--gmlx-link: #4DA3E6;
	--gmlx-link-hover: #7AB8FF;
	--gmlx-surface-card: #1f1f1f;
	--gmlx-border-soft: #2a2a2a;
}

@media (prefers-color-scheme: dark) {
	:root.theme-auto {
		--gmlx-text: #ffffff;
		--gmlx-text-muted: #b3b3b3;
		--gmlx-link: #4DA3E6;
		--gmlx-link-hover: #7AB8FF;
		--gmlx-surface-card: #1f1f1f;
		--gmlx-border-soft: #2a2a2a;
	}
}

/* Typography: use the GMLx fallback chain everywhere so we don't
   silently render in Open Sans (which is bundled by upstream but
   is not the GMLx brand face). */
html, body, h1, h2, h3, p, a, button, .button, summary, li {
	font-family: "Avenir Next", "Avenir", "Aptos", "Segoe UI", Calibri, system-ui, sans-serif;
}

body {
	color: var(--gmlx-text);
}

/* Logo lockup
   The GMLx wordmark is 4.67:1, so we can't use it as a square avatar.
   Render it at min-legible-digital width (160px) above the title with
   the brand's "half logo-height" clear space rule. The color variant
   is used in light mode; the all-white variant is used in dark mode
   (the color logo's gray subtitle is unreadable on near-black). */
.brand-logo {
	display: block;
	width: 14rem;            /* 224px on desktop */
	max-width: 80%;
	height: auto;
	margin: 0 auto var(--spacing-l, 2rem) auto;
}

.brand-logo--dark { display: none; }

:root.theme-dark .brand-logo--light { display: none; }
:root.theme-dark .brand-logo--dark { display: block; }

@media (prefers-color-scheme: dark) {
	:root.theme-auto .brand-logo--light { display: none; }
	:root.theme-auto .brand-logo--dark { display: block; }
}

@media (max-width: 34.375rem) {
	.brand-logo {
		width: 11rem;        /* 176px on phones */
	}
}

/* Headline + intro */
h1 {
	color: var(--gmlx-link);   /* GMLx blue in light, lighter blue in dark */
}

.container .intro {
	color: var(--gmlx-text);
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
}

/* App sections: each app gets its own block.
   We override the upstream privacy-page h2/section margins because this
   page reuses those selectors but with a different visual rhythm. */
.app-section {
	text-align: center;
	margin: 0 0 var(--spacing-xl, 3rem) 0;
	padding: var(--spacing-m, 1.5rem) 0 0 0;
	border-top: 1px solid var(--gmlx-border-soft);
}

.app-section:first-of-type {
	border-top: none;
	padding-top: 0;
}

.app-section h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--gmlx-text);
	margin: 0 0 var(--spacing-s, 1rem) 0;
}

.app-section h2 .step-number {
	color: var(--gmlx-link);
	font-weight: 800;
	margin-right: 0.35rem;
}

.app-section h2 .badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	background-color: var(--gmlx-green);
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	vertical-align: middle;
	margin-left: 0.5rem;
}

.app-section .app-blurb {
	color: var(--gmlx-text);
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 var(--spacing-m, 1.5rem) 0;
}

/* Setup steps collapsible */
.setup-steps {
	max-width: 18.75rem;     /* match the 300px button width */
	margin: 0.25rem auto 0 auto;
	text-align: left;
	border: 1px solid var(--gmlx-border-soft);
	border-radius: 0.5rem;
	background-color: var(--gmlx-surface-card);
}

.setup-steps summary {
	cursor: pointer;
	padding: 0.6rem 1rem;
	font-weight: 700;
	color: var(--gmlx-link);
	list-style: none;
	font-size: 0.95rem;
}

.setup-steps summary::-webkit-details-marker { display: none; }

.setup-steps summary::after {
	content: "+";
	float: right;
	font-weight: 700;
	color: var(--gmlx-link);
}

.setup-steps[open] summary::after { content: "\2013"; }   /* en dash */

.setup-steps[open] summary {
	border-bottom: 1px solid var(--gmlx-border-soft);
}

.setup-steps ol {
	margin: 0;
	padding: 0.75rem 1rem 0.75rem 2.25rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--gmlx-text);
}

.setup-steps ol li {
	margin-bottom: 0.5rem;
}

.setup-steps ol li:last-child { margin-bottom: 0; }

.setup-steps strong { color: var(--gmlx-text); font-weight: 700; }

/* Body link color: GMLx blue in light mode, brighter blue in dark mode */
a:not(.button) {
	color: var(--gmlx-link);
}
a:not(.button):hover {
	color: var(--gmlx-link-hover);
}

/* Footer */
footer {
	color: var(--gmlx-text-muted);
	font-size: 0.9rem;
}

footer .helpdesk {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--gmlx-text);
	font-weight: 600;
}

footer a:not(.button) {
	color: var(--gmlx-text-muted);
	text-decoration: underline;
}

footer a:not(.button):hover {
	color: var(--gmlx-link);
}

/* Verkada custom brand button (LittleLink doesn't ship one).
   Verkada's brand red on a black plate keeps it consistent with the
   appstore/playstore black-button family while staying recognizable. */
.button.button-verkada {
	--button-text: #FFFFFF;
	--button-background: #DA291C;
	--button-border: 1px solid #FFFFFF;
}