/* Base + layout — tokens in tokens.css */

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

/*
 * rem scale (1rem = 10px) only on front-end — see class .dsa-rem-root on <html>.
 * Do not set 62.5% on bare html: Gutenberg iframe loads theme CSS and rem breaks.
 */
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
}

html.dsa-rem-root {
	font-size: 62.5%;
}

body {
	margin: 0;
	background: var(--bg-body);
	color: var(--text-body);
	font-size: var(--text-m);
	line-height: 1.6;
	font-family: var(--font-body);
}

a {
	color: var(--primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--primary-l-1);
}

img {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	color: var(--text-title);
	line-height: 1.15;
	font-weight: 800;
}

/* All page h1 titles — one scale site-wide (max 4.8rem); do not set font-size on h1 classes */
h1 {
	font-size: var(--text-3xl);
}

h2 {
	font-size: var(--text-2xl);
}

h3,
h4,
h5,
h6 {
	font-weight: 700;
}

h3 {
	font-size: var(--text-xl);
}

/* Shell widths → layout.css */

/* Header Canvas plugin (.service-header) — fixed bar */
body.has-service-header .site-main {
	padding-top: 80px;
}

body.has-service-header.admin-bar .site-main {
	padding-top: calc(80px + 32px);
}

/* Front page: hero under transparent header (full viewport) */
body.has-service-header.is-front-page-hero .site-main {
	padding-top: 0;
}

body.has-service-header.is-front-page-hero.admin-bar .site-main {
	padding-top: 0;
}

body.has-service-header.is-entry-hero .site-main {
	padding-top: 0;
}

body.has-service-header.is-entry-hero.admin-bar .site-main {
	padding-top: 0;
}

@media (max-width: 782px) {
	body.has-service-header.admin-bar .site-main {
		padding-top: calc(80px + 46px);
	}

	body.has-service-header.is-front-page-hero.admin-bar .site-main {
		padding-top: 0;
	}

	body.has-service-header.is-entry-hero.admin-bar .site-main {
		padding-top: 0;
	}
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg-surface);
	border-bottom: 1px solid var(--border-primary);
	box-shadow: var(--shadow-xs);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding-block: var(--space-xs);
}

.site-brand {
	font-size: var(--text-l);
	font-weight: 700;
	color: var(--text-title);
	text-decoration: none;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	color: var(--text-body);
	text-decoration: none;
	font-size: var(--text-s);
}

.site-nav a:hover,
.site-nav .current-menu-item > a {
	color: var(--primary);
}

.site-section {
	padding-block: var(--space-section);
}

.entry {
	margin-bottom: var(--space-xl);
}

.entry__title {
	margin: 0 0 var(--space-s);
}

.entry__title a {
	color: var(--text-title);
	text-decoration: none;
}

.entry__title a:hover {
	color: var(--primary);
}

.entry__excerpt {
	color: var(--text-body);
	opacity: 0.9;
}

.entry__content > * + * {
	margin-top: var(--space-s);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-s);
	border: none;
	border-radius: var(--radius-s);
	background: var(--primary);
	color: var(--text-title);
	font-size: var(--text-s);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow-s);
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.btn:hover,
.entry__content .single-post__btn:hover,
.dsa-popup__close:hover,
.dsa-footer__social:hover {
	background: var(--primary-hover);
	box-shadow: var(--shadow-interactive-hover);
	color: var(--text-title);
}

.service-card:hover,
.case-card:hover,
.service-key-facts__card:hover,
.team-single__service-link:hover {
	box-shadow: var(--shadow-interactive-hover);
}

.card {
	padding: var(--space-m);
	border-radius: var(--radius-m);
	background: var(--bg-surface);
	border: 1px solid var(--border-primary);
	box-shadow: var(--shadow-m);
}

.grid {
	display: grid;
	gap: var(--space-m);
}

.grid--2 {
	grid-template-columns: var(--columns-2);
}

.grid--3 {
	grid-template-columns: var(--columns-3);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: var(--space-xs);
	left: var(--space-xs);
	z-index: 200;
	width: auto;
	height: auto;
	padding: var(--space-2xs) var(--space-s);
	clip: auto;
	background: var(--primary);
	color: var(--text-title);
}

@media (max-width: 1024px) {
	.grid--3 {
		grid-template-columns: var(--columns-2);
	}
}

@media (max-width: 768px) {
	.site-header__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.grid--2,
	.grid--3 {
		grid-template-columns: var(--columns-1);
	}

	h2 {
		font-size: var(--text-xl);
	}
}