/**
 * Event101 - Shared public marketing design system.
 * Loaded on all body.event101-public-marketing pages (via shell dependency).
 * Scoped with body.event101-public-marketing for predictable cascade over per-page CSS.
 *
 * Typography: lighter headings, refined heroes, consistent buttons and in-content links.
 */

/* --- Shared tokens (reference only; each page keeps its own --e101-*- variables) --- */
body.event101-public-marketing {
	--e101-pm-slate: #111827;
	--e101-pm-accent: #58e28a;
	--e101-pm-muted: #6b7280;
	--e101-pm-hero-eyebrow: rgba(255, 255, 255, 0.82);
	--e101-pm-hero-lede: rgba(255, 255, 255, 0.88);
	--e101-pm-heading-weight: 600;
	--e101-pm-heading-strong: 650;
	--e101-pm-hero-title-max: clamp(1.65rem, 3.8vw, 2.35rem);
	--e101-pm-hero-padding-y: clamp(2.35rem, 4.5vw, 3.75rem);
	--e101-pm-hero-padding-x: clamp(1.15rem, 3.5vw, 2.75rem);
	--e101-pm-hero-padding-bottom: clamp(2.65rem, 5vw, 4rem);
}

/* --- Dark hero rhythm (full-bleed marketing heroes) --- */
body.event101-public-marketing .e101-ph-hero,
body.event101-public-marketing .e101-pa-hero,
body.event101-public-marketing .e101-pt-hero,
body.event101-public-marketing .e101-ps-hero,
body.event101-public-marketing .e101-pea-hero,
body.event101-public-marketing .e101-psd-hero,
body.event101-public-marketing .e101-pr-hero,
body.event101-public-marketing .e101-pp-hero {
	padding: var(--e101-pm-hero-padding-y) var(--e101-pm-hero-padding-x) var(--e101-pm-hero-padding-bottom);
	margin-bottom: clamp(2.25rem, 4vw, 3rem);
}

/* Eyebrow / kicker: one system across pages */
body.event101-public-marketing .e101-ph-hero__eyebrow,
body.event101-public-marketing .e101-pa-hero__eyebrow,
body.event101-public-marketing .e101-pt-hero__eyebrow,
body.event101-public-marketing .e101-ps-hero__eyebrow,
body.event101-public-marketing .e101-pea-hero__eyebrow,
body.event101-public-marketing .e101-psd-hero__eyebrow,
body.event101-public-marketing .e101-pr-hero__eyebrow,
body.event101-public-marketing .e101-pp-hero__eyebrow {
	margin: 0 0 0.65rem;
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--e101-pm-accent);
	line-height: 1.35;
}

body.event101-public-marketing .e101-ph-hero__eyebrow {
	color: rgba(88, 226, 138, 0.95);
}

/* Hero H1: refined weight, readable line-height, capped size on small screens */
body.event101-public-marketing .e101-ph-hero .e101-ph-hero__title,
body.event101-public-marketing .e101-pa-hero .e101-pa-hero__title,
body.event101-public-marketing .e101-pt-hero .e101-pt-hero__title,
body.event101-public-marketing .e101-ps-hero .e101-ps-hero__title,
body.event101-public-marketing .e101-pea-hero .e101-pea-hero__title,
body.event101-public-marketing .e101-psd-hero .e101-psd-hero__title,
body.event101-public-marketing .e101-pr-hero .e101-pr-hero__title,
body.event101-public-marketing .e101-pp-hero .e101-pp-hero__title {
	font-weight: var(--e101-pm-heading-strong);
	letter-spacing: -0.03em;
	line-height: 1.14;
	max-width: 22ch;
	font-size: var(--e101-pm-hero-title-max);
	text-shadow: none;
	color: #ffffff;
}

/* Homepage headline stays full width */
body.event101-public-marketing .e101-ph-hero .e101-ph-hero__title {
	max-width: none;
}

@media (max-width: 480px) {
	body.event101-public-marketing {
		--e101-pm-hero-title-max: clamp(1.45rem, 6.2vw, 1.85rem);
	}
}

/* Hero subcopy */
body.event101-public-marketing .e101-ph-hero .e101-ph-hero__lede,
body.event101-public-marketing .e101-pa-hero .e101-pa-hero__lede,
body.event101-public-marketing .e101-pt-hero .e101-pt-hero__lede,
body.event101-public-marketing .e101-ps-hero .e101-ps-hero__lede,
body.event101-public-marketing .e101-pea-hero .e101-pea-hero__lede,
body.event101-public-marketing .e101-psd-hero .e101-psd-hero__lede,
body.event101-public-marketing .e101-pr-hero .e101-pr-hero__lede,
body.event101-public-marketing .e101-pp-hero .e101-pp-hero__lede {
	font-weight: 400;
	line-height: 1.58;
	color: var(--e101-pm-hero-lede);
	max-width: 40rem;
}

/* In-hero primary actions on dark (resources, training, etc.) */
body.event101-public-marketing .e101-pt-hero .e101-pt-btn--primary,
body.event101-public-marketing .e101-pr-hero .e101-pr-btn--primary,
body.event101-public-marketing .e101-pea-hero .e101-pea-btn--primary,
body.event101-public-marketing .e101-psd-hero .e101-psd-btn--primary {
	font-weight: 600;
}

/* --- Section headings (in-page, not hero) --- */
body.event101-public-marketing .e101-ph .e101-ph-section__title,
body.event101-public-marketing .e101-pa .e101-pa-section__title,
body.event101-public-marketing .e101-pt .e101-pt-section__title,
body.event101-public-marketing .e101-ps .e101-ps-section__title,
body.event101-public-marketing .e101-pea .e101-pea-section__title,
body.event101-public-marketing .e101-psd .e101-psd-section__title,
body.event101-public-marketing .e101-pr .e101-pr-section__title,
body.event101-public-marketing .e101-pp .e101-pp-section__title {
	font-weight: var(--e101-pm-heading-weight);
	letter-spacing: -0.02em;
	line-height: 1.28;
}

/* --- Auth (marketing shell) --- */
body.event101-public-marketing .e101-auth__aside-title,
body.event101-public-marketing .e101-auth__title {
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

body.event101-public-marketing .e101-auth__aside-lede,
body.event101-public-marketing .e101-auth__lead {
	line-height: 1.58;
}

/* --- Primary / outline / ghost buttons (shortcode CTAs) --- */
body.event101-public-marketing .e101-ph-btn--primary,
body.event101-public-marketing .e101-pa-btn--primary,
body.event101-public-marketing .e101-pt-btn--primary,
body.event101-public-marketing .e101-ps-btn--primary,
body.event101-public-marketing .e101-pea-btn--primary,
body.event101-public-marketing .e101-psd-btn--primary,
body.event101-public-marketing .e101-pr-btn--primary,
body.event101-public-marketing .e101-pp-btn--primary {
	font-weight: 600;
	border-radius: 10px;
}

body.event101-public-marketing .e101-ph-btn--outline,
body.event101-public-marketing .e101-pa-btn--outline,
body.event101-public-marketing .e101-pt-btn--outline,
body.event101-public-marketing .e101-ps-btn--outline,
body.event101-public-marketing .e101-pea-btn--outline,
body.event101-public-marketing .e101-psd-btn--outline,
body.event101-public-marketing .e101-pr-btn--outline,
body.event101-public-marketing .e101-pp-btn--outline {
	font-weight: 600;
	border-radius: 10px;
}

body.event101-public-marketing .e101-ph-btn--ghost,
body.event101-public-marketing .e101-pa-btn--ghost,
body.event101-public-marketing .e101-pt-btn--ghost,
body.event101-public-marketing .e101-ps-btn--ghost,
body.event101-public-marketing .e101-pea-btn--ghost,
body.event101-public-marketing .e101-psd-btn--ghost,
body.event101-public-marketing .e101-pr-btn--ghost,
body.event101-public-marketing .e101-pp-btn--ghost {
	font-weight: 600;
}

/* Shell header buttons */
body.event101-public-marketing .e101-ph-shell-btn--primary,
body.event101-public-marketing .e101-ph-shell-btn--ghost {
	font-weight: 600;
}

body.event101-public-marketing .e101-ph-shell-header__wordmark {
	font-weight: 650;
	letter-spacing: 0.01em;
}

/* --- In-content text links (not primary CTAs) --- */
body.event101-public-marketing .e101-ph a:not([class*="btn"]):not([class*="shell-btn"]),
body.event101-public-marketing .e101-pa a:not([class*="btn"]),
body.event101-public-marketing .e101-pt a:not([class*="btn"]),
body.event101-public-marketing .e101-ps a:not([class*="btn"]),
body.event101-public-marketing .e101-pea a:not([class*="btn"]),
body.event101-public-marketing .e101-psd a:not([class*="btn"]),
body.event101-public-marketing .e101-pr a:not([class*="btn"]),
body.event101-public-marketing .e101-pp a:not([class*="btn"]) {
	color: var(--e101-pm-slate);
	text-decoration: underline;
	text-decoration-color: rgba(88, 226, 138, 0.55);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	font-weight: 500;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

body.event101-public-marketing .e101-ph a:not([class*="btn"]):not([class*="shell-btn"]):hover,
body.event101-public-marketing .e101-pa a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-pt a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-ps a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-pea a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-psd a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-pr a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-pp a:not([class*="btn"]):hover {
	color: #0f172a;
	text-decoration-color: var(--e101-pm-accent);
}

body.event101-public-marketing .e101-ph-hero a:not([class*="btn"]),
body.event101-public-marketing .e101-pa-hero a:not([class*="btn"]),
body.event101-public-marketing .e101-pt-hero a:not([class*="btn"]),
body.event101-public-marketing .e101-ps-hero a:not([class*="btn"]),
body.event101-public-marketing .e101-pea-hero a:not([class*="btn"]),
body.event101-public-marketing .e101-psd-hero a:not([class*="btn"]),
body.event101-public-marketing .e101-pr-hero a:not([class*="btn"]),
body.event101-public-marketing .e101-pp-hero a:not([class*="btn"]) {
	color: #ffffff;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}

body.event101-public-marketing .e101-ph-hero a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-pa-hero a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-pt-hero a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-ps-hero a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-pea-hero a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-psd-hero a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-pr-hero a:not([class*="btn"]):hover,
body.event101-public-marketing .e101-pp-hero a:not([class*="btn"]):hover {
	color: #ffffff;
	text-decoration-color: var(--e101-pm-accent);
}

body.event101-public-marketing .e101-ph a:focus-visible,
body.event101-public-marketing .e101-pa a:focus-visible,
body.event101-public-marketing .e101-pt a:focus-visible,
body.event101-public-marketing .e101-ps a:focus-visible,
body.event101-public-marketing .e101-pea a:focus-visible,
body.event101-public-marketing .e101-psd a:focus-visible,
body.event101-public-marketing .e101-pr a:focus-visible,
body.event101-public-marketing .e101-pp a:focus-visible {
	outline: 2px solid var(--e101-pm-accent);
	outline-offset: 2px;
	border-radius: 2px;
}