/* PartnerPay shared components: base, header, footer, buttons, badges, placeholders.
   Loaded only on PartnerPay layouts (body.pp-site). Values come from tokens.css. */

/* ---------- Base ---------- */
body.pp-site {
	margin: 0;
	background: var(--pp-paper);
	color: var(--pp-forest);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-body);
	line-height: var(--pp-lh-body);
	-webkit-font-smoothing: antialiased;
	text-align: left;
	/* Footer stays at the bottom on short pages (login) */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body.pp-site > main {
	flex: 1 0 auto;
}

.pp-site *,
.pp-site *::before,
.pp-site *::after {
	box-sizing: border-box;
}

:where(.pp-site) h1,
:where(.pp-site) h2,
:where(.pp-site) h3,
:where(.pp-site) h4 {
	font-family: var(--pp-font-display);
	font-weight: 600;
	letter-spacing: var(--pp-tracking-display);
	line-height: var(--pp-lh-tight);
	margin: 0 0 var(--pp-space-4);
}

:where(.pp-site) p {
	margin: 0 0 var(--pp-space-4);
	max-width: var(--pp-measure);
}

:where(.pp-site) a {
	color: inherit;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

:where(.pp-site) img,
:where(.pp-site) svg {
	max-width: 100%;
}

.pp-site :focus-visible {
	outline: none;
	box-shadow: var(--pp-focus);
	border-radius: var(--pp-radius-input);
}

.pp-site main:focus {
	outline: none;
}

.pp-container {
	width: 100%;
	max-width: var(--pp-container);
	margin: 0 auto;
	padding: 0 var(--pp-space-6);
}

@media (max-width: 480px) {
	.pp-container {
		padding: 0 var(--pp-space-4);
	}
}

.pp-skip {
	position: absolute;
	left: var(--pp-space-4);
	top: -100px;
	z-index: 100;
	padding: var(--pp-space-2) var(--pp-space-4);
	background: var(--pp-white);
	color: var(--pp-forest);
	border-radius: var(--pp-radius-pill);
	font-weight: 600;
}

.pp-skip:focus {
	top: var(--pp-space-4);
}

.pp-small {
	font-size: var(--pp-fs-small);
	color: var(--pp-moss);
}

/* Unconfirmed program term: deliberately loud until Thomas fills it in. */
.pp-placeholder {
	background: var(--pp-pending-bg);
	color: var(--pp-pending);
	font-weight: 600;
	padding: 0 0.2em;
	border-radius: 4px;
}

/* ---------- Buttons ---------- */
.pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.35rem;
	border: 1.5px solid transparent;
	border-radius: var(--pp-radius-pill);
	font-family: var(--pp-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Primary on dark / paper: lime fill, forest text */
.pp-btn--primary {
	background: var(--pp-lime);
	color: var(--pp-forest);
}

.pp-btn--primary:hover {
	background: var(--pp-lime-hover);
}

/* Secondary: outline, inherits the surface's text color */
.pp-btn--secondary {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

/* Forest fill: primary on lime and on light panels */
.pp-btn--forest,
.pp-btn--on-lime {
	background: var(--pp-forest);
	color: var(--pp-paper);
}

.pp-btn--forest:hover,
.pp-btn--on-lime:hover {
	background: var(--pp-pine);
}

/* Dark surfaces use the lime focus ring */
.pp-header--landing :focus-visible,
.pp-hero :focus-visible,
.pp-footer :focus-visible,
.pp-auth__intro :focus-visible {
	box-shadow: var(--pp-focus-on-dark);
}

.pp-band :focus-visible {
	box-shadow: 0 0 0 3px var(--pp-lime), 0 0 0 5px var(--pp-forest);
}

.pp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-3);
}

/* ---------- Status badges (landing legend + AffiliateWP badges) ----------
   AffiliateWP variants: success = paid/completed, warning = unpaid/partial,
   info = pending/processing, danger = rejected/failed, neutral = anything else. */
.pp-badge,
.pp-affiliate .affwp-badge {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	border-radius: var(--pp-radius-pill);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	background: var(--pp-neutral-bg);
	color: var(--pp-neutral);
	border: 0;
}

.pp-badge--paid,
.pp-affiliate .affwp-badge--success {
	background: var(--pp-paid-bg);
	color: var(--pp-paid);
}

.pp-badge--pending,
.pp-affiliate .affwp-badge--info {
	background: var(--pp-pending-bg);
	color: var(--pp-pending);
}

.pp-badge--error,
.pp-affiliate .affwp-badge--danger {
	background: var(--pp-error-bg);
	color: var(--pp-error);
}

.pp-badge--neutral,
.pp-affiliate .affwp-badge--warning,
.pp-affiliate .affwp-badge--neutral {
	background: var(--pp-neutral-bg);
	color: var(--pp-neutral);
}

/* ---------- Header ---------- */
.pp-header {
	position: relative;
	z-index: 10;
}

.pp-header--landing {
	background: var(--pp-forest);
	color: var(--pp-paper);
}

.pp-header--app {
	background: var(--pp-paper);
	color: var(--pp-forest);
	border-bottom: 1px solid var(--pp-rule);
}

.pp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-space-6);
	min-height: 76px;
	padding-top: var(--pp-space-3);
	padding-bottom: var(--pp-space-3);
}

.pp-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--pp-space-2);
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}

.pp-mark {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.pp-brand__word {
	font-family: var(--pp-font-display);
	font-weight: 600;
	font-size: 1.375rem;
	letter-spacing: var(--pp-tracking-display);
	line-height: 1;
}

.pp-nav {
	display: flex;
	align-items: center;
	gap: var(--pp-space-8);
}

.pp-nav__anchors {
	display: flex;
	gap: var(--pp-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-nav__anchors a {
	text-decoration: none;
	font-weight: 500;
	padding: var(--pp-space-1) 0;
}

.pp-nav__anchors a:hover {
	text-decoration: underline;
}

.pp-nav__actions {
	display: flex;
	gap: var(--pp-space-3);
}

@media (max-width: 820px) {
	.pp-nav__anchors {
		display: none;
	}
}

@media (max-width: 480px) {
	.pp-header__inner {
		gap: var(--pp-space-3);
	}

	.pp-brand__word {
		font-size: 1.125rem;
	}

	.pp-mark {
		width: 30px;
		height: 30px;
	}

	.pp-nav__actions {
		gap: var(--pp-space-2);
	}

	.pp-nav__actions .pp-btn {
		padding: 0.5rem 0.85rem;
		font-size: 0.9375rem;
	}

	/* One action in the header on phones; the hero carries both. */
	.pp-nav__actions .pp-btn--secondary {
		display: none;
	}
}

/* ---------- Footer ---------- */
.pp-footer {
	background: var(--pp-forest);
	color: var(--pp-paper);
	padding: var(--pp-space-12) 0;
	font-size: var(--pp-fs-small);
}

.pp-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-4) var(--pp-space-8);
}

.pp-footer__legal {
	margin: 0;
	color: var(--pp-moss-light);
}

.pp-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-6);
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
}

.pp-footer__links a {
	color: var(--pp-paper);
}

@media (max-width: 820px) {
	.pp-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.pp-footer__links {
		margin-left: 0;
	}
}