/* Landing top bar — extracted from blocks/_shared/ssrp-lp-base.css for use on standalone landing-page templates. Keep in sync with the source. */

/* ==========================================================================
   LP-scoped tokens

   Every value resolves through site tokens defined on :root in
   assets/css/critical.min.css (loaded first in the editor + frontend).
   Hex fallbacks only fire when critical.min.css fails to load — never
   hardcode hex elsewhere in LP CSS.

   Values tuned to Figma node 1390-3470 (ssrp/course-marketing).
   ========================================================================== */
.ssrp-lp-body,
.ssrp-lp-topbar-host,
.editor-styles-wrapper {
	/* Containers — tuned to match .ssrp-marketing-page (live event-marketing
	   template). `--container-content` resolves to 1280px in critical.css. */
	--ssrp-lp-content-max: var(--container-content, 1280px);
	--ssrp-lp-content-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--ssrp-lp-topbar-height: 72px;

	/* Section rhythm — live reference applies 80px-top / 0-bottom to every
	   section so consecutive sections produce a single, predictable 80px gap.
	   We mirror that here. Blocks that need a tighter gap (trust-bar flush
	   under hero, etc.) override to 0. */
	--ssrp-lp-section-gap: clamp(3rem, 6vw, 5rem);        /* ≈ 48 → 80px */
	--ssrp-lp-section-gap-sm: clamp(1.5rem, 4vw, 2.5rem);

	/* Radii — Figma uses 30px for hero/footer, 20px for cards/banners,
	   9999px for pills, 8px for stat tiles. */
	--ssrp-lp-radius-sm: 0.5rem;        /* 8px — stat tiles, inputs */
	--ssrp-lp-radius: 1.25rem;          /* 20px — standard card */
	--ssrp-lp-radius-lg: 1.875rem;      /* 30px — hero, footer top */
	--ssrp-lp-radius-pill: 9999px;

	/* Motion */
	--ssrp-lp-transition: 200ms ease-out;

	/* Fonts — Barlow resolves through --font-primary in critical.min.css. */
	--ssrp-lp-font: var(--font-primary, 'Barlow', system-ui, sans-serif);

	/* Brand palette */
	--ssrp-lp-brand: var(--blue-500, #1995E2);
	--ssrp-lp-brand-soft: color-mix(in srgb, var(--ssrp-lp-brand) 12%, transparent);
	--ssrp-lp-brand-dark: var(--blue-400, #1a5fd1);
	--ssrp-lp-accent: var(--orange-500, #FD5212);
	--ssrp-lp-accent-soft: color-mix(in srgb, var(--ssrp-lp-accent) 12%, transparent);
	--ssrp-lp-cyan: #1EEBCD;            /* Figma Blue/Blue 3 — marquee band */

	/* Ink + surface */
	--ssrp-lp-ink: var(--gray-900, #030712);
	--ssrp-lp-ink-muted: var(--gray-700, #374151);
	--ssrp-lp-ink-soft: var(--gray-500, #6b7280);
	--ssrp-lp-surface: var(--gray-0, #ffffff);
	--ssrp-lp-surface-muted: var(--gray-50, #f8fafc);
	--ssrp-lp-border: var(--gray-200, #e5e7eb);
	--ssrp-lp-border-soft: var(--gray-100, #f3f4f6);

	/* Type scale — matches the live event-marketing template:
	     .ssrp-section-header h2 → 48px Barlow 400, line-height 120%,
	       letter-spacing -0.02em, color --gray-900.
	     .ssrp-headline-label    → uppercase eyebrow with 12px hexagon icon
	       in --accent-color (per-event-type, defaults blue-400 #2AACE2).
	   We resolve every value through tokens from critical.css so the LP
	   pages inherit any future site-wide refinements automatically. */
	--ssrp-lp-eyebrow-size: 0.875rem;                    /* 14px */
	--ssrp-lp-eyebrow-tracking: 0.06em;
	--ssrp-lp-heading-size: clamp(1.75rem, 4.5vw, 3rem); /* 28px → 48px */
	--ssrp-lp-heading-weight: var(--font-weight-regular, 400);
	--ssrp-lp-heading-leading: 1.2;                      /* 120% — matches ref */
	--ssrp-lp-heading-tracking: var(--letter-spacing-tight, -0.02em);
	--ssrp-lp-subhead-size: var(--font-size-18, 1.125rem);
	--ssrp-lp-subhead-leading: 1.65;

	/* Shadows */
	--ssrp-lp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--ssrp-lp-shadow-card: 0 12px 32px -12px rgb(15 23 42 / 0.18),
	                       0 2px 6px -2px rgb(15 23 42 / 0.08);
	--ssrp-lp-shadow-lift: 0 24px 48px -20px rgb(15 23 42 / 0.28),
	                       0 6px 16px -8px rgb(15 23 42 / 0.12);
}

/* Skip link — hidden until keyboard focus. */
.ssrp-lp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ssrp-lp-ink);
	color: #fff;
	padding: 0.75rem 1rem;
	z-index: 10000;
	text-decoration: none;
	border-radius: 0 0 var(--ssrp-lp-radius) 0;
}
.ssrp-lp-skip-link:focus {
	left: 0;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ==========================================================================
   Top bar — Figma floating dark pill. White logo + nav + actions, rounded
   pill outline. Sticky so it stays accessible on scroll. The negative
   margin-bottom pulls the hero underneath it so the menu overlaps the hero
   on initial page load.
   ========================================================================== */
.ssrp-lp-topbar {
	--ssrp-lp-topbar-outer: calc(var(--ssrp-lp-topbar-height) + 1.5rem);
	position: sticky;
	top: 0.75rem;
	z-index: 100;
	padding: 0.75rem var(--ssrp-lp-content-gutter);
	background: transparent;
	margin-bottom: calc(-1 * var(--ssrp-lp-topbar-outer));
}
section.ssrp-lp-section.ssrp-lp-section--hero.ssrp-lp-hero {
    padding-top: .5rem;
}
.ssrp-lp-topbar__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: calc(var(--ssrp-lp-content-max) + 2rem);
	margin: 0 auto;
	padding: 0.5rem 1.25rem 0.5rem 1.5rem;
	min-height: var(--ssrp-lp-topbar-height);
	background: var(--ssrp-lp-ink);
	color: var(--ssrp-lp-surface);
	border-radius: var(--ssrp-lp-radius-pill);
	box-shadow: var(--ssrp-lp-shadow-card);
}

.ssrp-lp-topbar__logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	text-decoration: none;
	color: var(--ssrp-lp-surface);
}

.ssrp-lp-topbar__logo img {
	max-height: 50px;
	width: auto;
	display: block;
}

.ssrp-lp-topbar__logo-fallback {
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
}

.ssrp-lp-topbar__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.ssrp-lp-topbar__nav ul {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

/* The site-wide list stylesheet adds a bottom margin to every <li> that leaks
   into the LP drawer when the main scripts.js bundle is kept (testimonials
   slider LPs). Zero it out so drawer + inline nav items stay tight. */
nav#ssrp-lp-topbar-drawer li,
.ssrp-lp-topbar__nav li {
	margin: 0;
}

.ssrp-lp-topbar__nav a {
	color: var(--ssrp-lp-surface);
	font-family: var(--ssrp-lp-font);
	font-weight: 500;
	text-decoration: none;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0.5rem 0.2rem;
	transition: opacity var(--ssrp-lp-transition);
	opacity: 0.9;
	white-space: nowrap;
}

.ssrp-lp-topbar__nav a:hover,
.ssrp-lp-topbar__nav a:focus {
	color: var(--ssrp-lp-surface);
	opacity: 1;
}

.ssrp-lp-topbar__actions {
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.ssrp-lp-topbar__nav + .ssrp-lp-topbar__actions {
	margin-left: 0;
}

.ssrp-lp-topbar__action-link {
	color: var(--ssrp-lp-surface);
	font-family: var(--ssrp-lp-font);
	font-weight: 500;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	padding: 0.5rem 0.75rem;
	border-radius: var(--ssrp-lp-radius-pill);
	opacity: 0.9;
	transition: opacity var(--ssrp-lp-transition), background-color var(--ssrp-lp-transition);
	white-space: nowrap;
}
.ssrp-lp-topbar__action-link:hover,
.ssrp-lp-topbar__action-link:focus {
	color: var(--ssrp-lp-surface);
	opacity: 1;
	background: rgb(255 255 255 / 0.08);
	text-decoration: none;
}

.ssrp-lp-topbar__cta.ssrp-lp-btn {
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
}

/* Mobile drawer toggle — hidden on desktop. */
.ssrp-lp-topbar__drawer-toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
}

.ssrp-lp-topbar__burger {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ssrp-lp-surface);
	position: relative;
}
.ssrp-lp-topbar__burger::before,
.ssrp-lp-topbar__burger::after {
	content: '';
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--ssrp-lp-surface);
}
.ssrp-lp-topbar__burger::before { top: -7px; }
.ssrp-lp-topbar__burger::after  { top: 7px; }

@media (max-width: 1100px) {
	.ssrp-lp-topbar__drawer-toggle {
		display: inline-flex;
		order: 3;
	}

	.ssrp-lp-topbar__nav {
		position: absolute;
		top: calc(100% + 0.5rem);
		left: var(--ssrp-lp-content-gutter);
		right: var(--ssrp-lp-content-gutter);
		background: var(--ssrp-lp-ink);
		color: var(--ssrp-lp-surface);
		border-radius: var(--ssrp-lp-radius);
		box-shadow: var(--ssrp-lp-shadow-card);
		padding: 1rem 1.25rem;
		display: none;
		order: 4;
		flex-basis: 100%;
	}
	.ssrp-lp-topbar__nav.is-open { display: block; }
	.ssrp-lp-topbar__nav ul {
		flex-direction: column;
		gap: 0.75rem;
	}

	.ssrp-lp-topbar__actions {
		order: 2;
		margin-left: auto;
		gap: 0.375rem;
	}
	.ssrp-lp-topbar__drawer-toggle { margin-left: 0.5rem; }

	/* Hide Dashboard/Sign-in text links on mobile — the drawer carries them instead. */
	.ssrp-lp-topbar__action-link {
		display: none;
	}

	/* Subtle separator above the auth link inside the drawer so it reads as a
	   distinct bucket from the anchor nav items. */
	.ssrp-lp-topbar__nav-auth {
		margin-top: 0.5rem !important;
		padding-top: 0.75rem;
		border-top: 1px solid rgb(255 255 255 / 0.1);
	}
}

/* Desktop: drawer is never visible, but the auth link inside the drawer is
   still part of the markup (screen reader still sees it). Hide it there so
   we don't duplicate the desktop action-link version. */
@media (min-width: 1101px) {
	.ssrp-lp-topbar__nav-auth { display: none; }
}

/* ==========================================================================
   Buttons — Figma pill style. Default is solid ink (black) with uppercase
   label + arrow; primary variant uses brand blue; ghost for low-emphasis.
   ========================================================================== */
.ssrp-lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	font-family: inherit;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: var(--ssrp-lp-radius-pill);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
	transition:
		background-color var(--ssrp-lp-transition),
		border-color var(--ssrp-lp-transition),
		color var(--ssrp-lp-transition),
		box-shadow var(--ssrp-lp-transition),
		transform 120ms ease-out;
}

.ssrp-lp-btn:focus-visible {
	outline: 3px solid var(--ssrp-lp-brand);
	outline-offset: 2px;
}

.ssrp-lp-btn:active {
	transform: translateY(1px);
}

/* Default / secondary — solid ink (Figma's most common CTA). */
.ssrp-lp-btn,
.ssrp-lp-btn--secondary {
	background: var(--ssrp-lp-ink);
	color: var(--ssrp-lp-surface);
	border-color: var(--ssrp-lp-ink);
}
.ssrp-lp-btn:hover,
.ssrp-lp-btn:focus,
.ssrp-lp-btn--secondary:hover,
.ssrp-lp-btn--secondary:focus {
	background: #000;
	border-color: #000;
	color: var(--ssrp-lp-surface);
	text-decoration: none;
}

/* Primary — brand blue. */
.ssrp-lp-btn--primary {
	background: var(--ssrp-lp-brand);
	color: var(--ssrp-lp-surface);
	border-color: var(--ssrp-lp-brand);
}
.ssrp-lp-btn--primary:hover,
.ssrp-lp-btn--primary:focus {
	background: var(--ssrp-lp-brand-dark);
	border-color: var(--ssrp-lp-brand-dark);
	color: var(--ssrp-lp-surface);
	text-decoration: none;
}

/* Ghost / outline. */
.ssrp-lp-btn--ghost {
	background: transparent;
	color: var(--ssrp-lp-ink);
	border-color: var(--ssrp-lp-border);
}
.ssrp-lp-btn--ghost:hover,
.ssrp-lp-btn--ghost:focus {
	background: var(--ssrp-lp-surface);
	color: var(--ssrp-lp-ink);
	border-color: var(--ssrp-lp-ink);
	text-decoration: none;
}

/* Inverse ghost — used on ink backgrounds. */
.ssrp-lp-btn--ghost-invert {
	background: transparent;
	color: var(--ssrp-lp-surface);
	border-color: rgb(255 255 255 / 0.4);
}
.ssrp-lp-btn--ghost-invert:hover,
.ssrp-lp-btn--ghost-invert:focus {
	background: rgb(255 255 255 / 0.12);
	border-color: var(--ssrp-lp-surface);
	color: var(--ssrp-lp-surface);
}

.ssrp-lp-btn--lg {
	padding: 1.125rem 2rem;
	font-size: 1rem;
}

.ssrp-lp-btn--block {
	display: flex;
	width: 100%;
}

/* Arrow affordance — Figma CTAs carry a trailing arrow. */
.ssrp-lp-btn--arrow::after {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.3 5.3a1 1 0 0 1 1.4 0l5.3 5.3a1 1 0 0 1 0 1.4l-5.3 5.3a1 1 0 0 1-1.4-1.4L17.6 13H4a1 1 0 0 1 0-2h13.6l-3.3-3.3a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.3 5.3a1 1 0 0 1 1.4 0l5.3 5.3a1 1 0 0 1 0 1.4l-5.3 5.3a1 1 0 0 1-1.4-1.4L17.6 13H4a1 1 0 0 1 0-2h13.6l-3.3-3.3a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform 150ms ease-out;
}
.ssrp-lp-btn--arrow:hover::after,
.ssrp-lp-btn--arrow:focus::after {
	transform: translateX(2px);
}