/**
 * Base styles — typography, links, buttons, forms.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--gr-font-body);
	font-size: var(--gr-font-size-base);
	font-weight: 400;
	line-height: var(--gr-line-height-base);
	color: var(--gr-color-text);
	background-color: var(--gr-color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--gr-color-primary);
	text-decoration: none;
	transition: color var(--gr-transition);
}

a:hover,
a:focus {
	color: var(--gr-color-secondary);
}

/* Headings — Fraunces */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: var(--gr-font-heading);
	font-weight: 700;
	color: var(--gr-color-heading);
	line-height: var(--gr-line-height-tight);
	letter-spacing: var(--gr-letter-spacing-heading);
	margin: 0 0 0.5em;
}

h1,
.h1 {
	font-size: clamp(2.5rem, 5vw + 1rem, var(--gr-font-size-3xl));
	line-height: 0.94;
}

h2,
.h2 {
	font-size: clamp(2rem, 3vw + 1rem, var(--gr-font-size-2xl));
	line-height: 1.06;
}

h3,
.h3 {
	font-size: clamp(1.5rem, 2vw + 0.75rem, var(--gr-font-size-xl));
	line-height: 1.15;
}

h4,
.h4 {
	font-size: var(--gr-font-size-lg);
	line-height: var(--gr-line-height-snug);
}

h5,
.h5 {
	font-family: var(--gr-font-body);
	font-size: var(--gr-font-size-base);
	font-weight: 700;
	line-height: var(--gr-line-height-base);
	letter-spacing: normal;
}

h6,
.h6 {
	font-family: var(--gr-font-body);
	font-size: var(--gr-font-size-xs);
	font-weight: 600;
	line-height: var(--gr-line-height-base);
	letter-spacing: var(--gr-letter-spacing-label);
	text-transform: uppercase;
	color: var(--gr-color-secondary);
}

p {
	margin: 0 0 1em;
}

.entry-content > *:last-child,
.site-main > *:last-child {
	margin-bottom: 0;
}

/* Labels / overlines */
.gr-label {
	display: inline-block;
	font-family: var(--gr-font-body);
	font-size: var(--gr-font-size-xs);
	font-weight: 600;
	line-height: var(--gr-line-height-base);
	letter-spacing: var(--gr-letter-spacing-label);
	text-transform: uppercase;
	color: var(--gr-color-secondary);
}

/* Buttons */
.btn,
button,
input[type="submit"],
input[type="button"],
.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: var(--gr-btn-padding-y) var(--gr-btn-padding-x);
	border: 0;
	border-radius: var(--gr-btn-radius);
	font-family: var(--gr-font-body);
	font-size: var(--gr-btn-font-size);
	font-weight: var(--gr-btn-font-weight);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--gr-transition),
		color var(--gr-transition),
		border-color var(--gr-transition),
		box-shadow var(--gr-transition),
		transform var(--gr-transition);
}

.btn--primary,
button.btn--primary,
input[type="submit"] {
	background-color: var(--gr-color-primary);
	color: var(--gr-color-white);
}

.btn--primary:hover,
.btn--primary:focus,
button.btn--primary:hover,
input[type="submit"]:hover {
	background-color: var(--gr-color-secondary);
	color: var(--gr-color-white);
}

.btn--accent {
	background-color: var(--gr-color-accent);
	color: var(--gr-color-primary);
}

.btn--accent:hover,
.btn--accent:focus {
	background-color: var(--gr-color-primary);
	color: var(--gr-color-white);
}

.btn--outline {
	background-color: transparent;
	color: var(--gr-color-primary);
	border: 1px solid var(--gr-color-border-strong);
}

.btn--outline:hover,
.btn--outline:focus {
	background-color: var(--gr-color-primary);
	color: var(--gr-color-white);
	border-color: var(--gr-color-primary);
}

.btn--ghost {
	background-color: var(--gr-color-bg-soft);
	color: var(--gr-color-primary);
}

.btn--ghost:hover,
.btn--ghost:focus {
	background-color: var(--gr-color-primary);
	color: var(--gr-color-white);
}

.btn--pill {
	border-radius: var(--gr-radius-pill);
}

/* Forms */
label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
	color: var(--gr-color-heading);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--gr-color-border-strong);
	border-radius: var(--gr-radius-sm);
	background-color: var(--gr-color-white);
	color: var(--gr-color-text);
	font-family: var(--gr-font-body);
	font-size: var(--gr-font-size-base);
	line-height: var(--gr-line-height-base);
	transition: border-color var(--gr-transition), box-shadow var(--gr-transition);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--gr-color-secondary);
	box-shadow: 0 0 0 3px rgba(145, 110, 255, 0.15);
}

textarea {
	min-height: 140px;
	resize: vertical;
}

/* Tags / pills */
.gr-tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: var(--gr-radius-pill);
	background-color: var(--gr-color-bg-soft);
	color: var(--gr-color-primary);
	font-size: var(--gr-font-size-base);
	font-weight: 500;
	transition: background-color var(--gr-transition), color var(--gr-transition);
}

.gr-tag:hover {
	background-color: var(--gr-color-primary);
	color: var(--gr-color-white);
}

/* Cards */
.gr-card {
	background-color: var(--gr-color-bg-card);
	border: 1px solid var(--gr-color-border);
	border-radius: var(--gr-radius-md);
	box-shadow: var(--gr-shadow-card);
}

/* Utility */
.gr-container {
	width: 100%;
	max-width: var(--gr-container-max);
	margin-inline: auto;
	padding-inline: var(--gr-container-padding);
}

.gr-section {
	padding-block: var(--gr-section-spacing);
}

.gr-section--soft {
	background-color: var(--gr-color-bg-soft);
}

.gr-text-center {
	text-align: center;
}

.gr-text-muted {
	color: var(--gr-color-text-muted);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--gr-color-bg);
	border-radius: var(--gr-radius-sm);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--gr-color-heading);
	display: block;
	font-size: var(--gr-font-size-base);
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}