/*
 * Header and footer for the plugin's front-end pages.
 *
 * Values from docs/design-tokens.md, so this sits alongside the live site
 * rather than looking like a different product. Loaded on every plugin page,
 * which is why the tokens are declared here as well as in landing.css — the
 * two files are independent and either can load alone.
 */

.sk-topbar,
.sk-footer {
	--sk-red: #dd3333;
	--sk-red-dark: #c02b2b;
	--sk-ink: #181b31;
	--sk-body: #646464;
	--sk-nav: #2a2a2a;
	--sk-wash: #eef2f4;
	--sk-line: #dfe5e9;

	--sk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, "Noto Sans", sans-serif;

	box-sizing: border-box;
	font-family: var(--sk-font);
}

.sk-topbar *,
.sk-footer * {
	box-sizing: border-box;
}

body.sk-body {
	margin: 0;
}

/* --- Header -------------------------------------------------------------- */

.sk-topbar {
	background: #fff;
	border-bottom: 1px solid var(--sk-line);
}

.sk-topbar-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1200px;
	padding: 0.9rem clamp(1rem, 4vw, 2rem);
}

.sk-topbar .sk-brand {
	display: inline-flex;
	text-decoration: none;
}

.sk-brand-logo {
	display: block;
	height: auto;
	max-height: 46px;
	width: auto;
}

/* Stands in for the logo until one is set: the wordmark in the brand colours. */
.sk-brand-mark {
	font-size: clamp(1.15rem, 3vw, 1.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.sk-brand-a {
	color: var(--sk-red);
}

.sk-brand-b {
	color: #1b3a6b;
}

.sk-nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.75rem, 2vw, 1.75rem);
}

.sk-topbar .sk-nav-link {
	color: var(--sk-nav);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.sk-topbar .sk-nav-link:hover {
	color: var(--sk-red);
}

.sk-topbar .sk-nav-cta {
	background: var(--sk-red);
	border-radius: 50px;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	padding: 0.7rem 1.6rem;
	text-decoration: none;
	white-space: nowrap;
}

.sk-topbar .sk-nav-cta:hover {
	background: var(--sk-red-dark);
}

/* --- Footer -------------------------------------------------------------- */

.sk-footer {
	background: #16181d;
	color: #b6bcc4;
	font-size: 15px;
	line-height: 1.8;
	margin-top: 0;
}

.sk-footer-inner {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: 1200px;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
}

@media (min-width: 760px) {
	.sk-footer-inner {
		grid-template-columns: repeat(3, 1fr);
	}
}

.sk-footer .sk-footer-head {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 1.1rem;
	padding-bottom: 0.7rem;
	position: relative;
}

.sk-footer .sk-footer-head::after {
	background: var(--sk-red);
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 34px;
}

.sk-footer .sk-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sk-footer .sk-footer-list li {
	margin-bottom: 0.45rem;
}

.sk-footer a {
	color: inherit;
	text-decoration: none;
}

.sk-footer a:hover {
	color: #fff;
}

.sk-footer-base {
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	font-size: 14px;
	padding: 1.25rem clamp(1rem, 4vw, 2rem);
	text-align: center;
}

.sk-footer-base p {
	margin: 0;
}