/*
 * Base typography, body, links, headings, buttons.
 *
 * Loaded after GeneratePress's stylesheets (dependency on 'generatepress-style'
 * in functions.php) so these rules win over the parent theme defaults.
 */

body {
	font-family: var(--ns-font-body);
	font-size: var(--ns-fs-body);
	line-height: 1.6;
	color: var(--ns-text);
	background-color: var(--ns-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ns-font-heading);
	color: var(--ns-text);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 var(--ns-space-4);
}

h1 { font-size: var(--ns-fs-h1); font-weight: 700; }
h2 { font-size: var(--ns-fs-h2); font-weight: 600; }
h3 { font-size: var(--ns-fs-h3); font-weight: 600; }

p {
	margin: 0 0 var(--ns-space-4);
}

a {
	color: var(--ns-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 120ms ease;
}
a:hover, a:focus {
	color: var(--ns-primary-hover);
}

/* Buttons (used by the footer CTA + can be applied anywhere via .btn) */
.btn,
.footer-cta__button {
	display: inline-block;
	padding: var(--ns-space-3) var(--ns-space-6);
	font-family: var(--ns-font-heading);
	font-size: var(--ns-fs-body);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: #fff;
	background-color: var(--ns-primary);
	border: 0;
	border-radius: var(--ns-radius);
	cursor: pointer;
	transition: background-color 120ms ease, transform 120ms ease;
}
.btn:hover, .btn:focus,
.footer-cta__button:hover, .footer-cta__button:focus {
	background-color: var(--ns-primary-hover);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.btn--ghost {
	background-color: transparent;
	color: var(--ns-primary);
	border: 1px solid var(--ns-primary);
}
.btn--ghost:hover, .btn--ghost:focus {
	background-color: var(--ns-primary);
	color: #fff;
}

/* Container — used inside sections that need to constrain content width */
.container,
.site-main > section > .container {
	max-width: var(--ns-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ns-space-6);
	padding-right: var(--ns-space-6);
}

/* Selection color matches brand */
::selection {
	background-color: var(--ns-primary);
	color: #fff;
}