/**
 * Global stylesheet: design tokens, base elements, layout, header, footer.
 *
 * Values mirror the previous Astra configuration so the migration is visually
 * lossless. Mobile-first: unprefixed rules are the small-screen case.
 */

/* -------------------------------------------------------------------------
 * 1. Design tokens
 * ---------------------------------------------------------------------- */

:root {
	/* Palette (was Astra global-color-palette). */
	--dk-primary: #30c7b5;
	--dk-primary-dark: #00ac97;
	--dk-ink: #14261c;
	--dk-body: #4f5655;
	--dk-surface: #f3f6f3;
	--dk-white: #ffffff;
	--dk-black: #000000;
	--dk-muted: #4b4f58;
	--dk-surface-alt: #f6f7f8;
	--dk-border: #e6e6e6;
	--dk-header-bg: #eeeeee;
	--dk-header-border: #eaeaea;

	/* Typography. */
	--dk-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--dk-font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--dk-font-size-base: 15px;
	--dk-line-height: 1.7;

	--dk-h1: 35px;
	--dk-h2: 30px;
	--dk-h3: 20px;
	--dk-h4: 20px;
	--dk-h5: 18px;
	--dk-h6: 15px;

	/* Layout. */
	--dk-container: 1200px;
	--dk-gutter: 20px;
	--dk-header-height: 70px;
	--dk-section-space: 3rem;

	/* Motion + elevation. */
	--dk-radius: 0px;
	--dk-transition: 0.2s ease-in-out;
	--dk-shadow: 0 2px 12px rgba(20, 38, 28, 0.08);
	--dk-focus: 2px solid var(--dk-primary-dark);
}

@media (min-width: 768px) {
	:root {
		--dk-h1: 60px;
		--dk-h2: 35px;
		--dk-h3: 22px;
		--dk-section-space: 4rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--dk-h1: 90px;
		--dk-h2: 40px;
		--dk-h3: 24px;
		--dk-section-space: 5rem;
	}
}

/* -------------------------------------------------------------------------
 * 2. Base
 * ---------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--dk-white);
	color: var(--dk-body);
	font-family: var(--dk-font-body);
	font-size: var(--dk-font-size-base);
	font-weight: 400;
	line-height: var(--dk-line-height);
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	color: var(--dk-ink);
	font-family: var(--dk-font-heading);
	font-weight: 700;
	line-height: 1.25;
}

h1 { font-size: var(--dk-h1); }
h2 { font-size: var(--dk-h2); }
h3 { font-size: var(--dk-h3); }
h4 { font-size: var(--dk-h4); }
h5 { font-size: var(--dk-h5); }
h6 { font-size: var(--dk-h6); }

p {
	margin: 0 0 1.5em;
}

/* Astra set `a,a:focus,a:hover,a:visited{text-decoration:none}` site-wide. */
a {
	color: var(--dk-primary-dark);
	text-decoration: none;
	text-underline-offset: 0.2em;
	transition: color var(--dk-transition);
}

a:hover,
a:focus {
	color: var(--dk-ink);
}


img,
picture,
video,
canvas,
svg,
iframe {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

ul,
ol {
	padding-left: 1.25em;
}

blockquote {
	margin: 0 0 1.5em;
	padding-left: 1.25em;
	border-left: 3px solid var(--dk-primary);
	font-style: italic;
}

code,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	padding: 1rem;
	overflow-x: auto;
	background: var(--dk-surface-alt);
}

table {
	width: 100%;
	margin-bottom: 1.5em;
	border-collapse: collapse;
}

th,
td {
	padding: 0.6em 0.8em;
	border: 1px solid var(--dk-border);
	text-align: left;
}

hr {
	height: 1px;
	margin: var(--dk-section-space) 0;
	border: 0;
	background: var(--dk-border);
}

/* -------------------------------------------------------------------------
 * 3. Accessibility helpers
 * ---------------------------------------------------------------------- */

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

.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--dk-ink);
	color: var(--dk-white);
	font-weight: 600;
	text-decoration: none;
	transition: top var(--dk-transition);
}

.skip-link:focus {
	top: 8px;
	color: var(--dk-white);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--dk-focus);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 4. Layout
 * ---------------------------------------------------------------------- */

.dk-container {
	width: 100%;
	max-width: var(--dk-container);
	margin-inline: auto;
	padding-inline: var(--dk-gutter);
}

.dk-site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.dk-main {
	flex: 1 0 auto;
}

.dk-content-area {
	padding-block: var(--dk-section-space);
}

.dk-layout {
	display: grid;
	gap: var(--dk-section-space);
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.dk-layout--with-sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

/* Pages built in a page builder must not be boxed by the theme. */
.dk-content-area--unwrapped {
	padding-block: 0;
}

.dk-content-area--unwrapped > .dk-container {
	max-width: none;
	padding-inline: 0;
}

/* -------------------------------------------------------------------------
 * 5. Buttons and form controls
 * ---------------------------------------------------------------------- */

/*
 * Button styling mirrors Astra's global button preset exactly:
 * 15px/45px padding, uppercase, weight 500, line-height 1em, square corners,
 * and — importantly — the label stays --dk-ink on hover rather than turning
 * white, which is what Astra did.
 */
.dk-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	display: inline-block;
	padding: 15px 45px;
	border: 0;
	border-radius: var(--dk-radius);
	background-color: var(--dk-primary);
	color: var(--dk-ink);
	font-family: inherit;
	font-size: var(--dk-font-size-base);
	font-weight: 500;
	line-height: 1em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--dk-transition), color var(--dk-transition);
}

.dk-button:hover,
.dk-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="reset"]:hover {
	background-color: var(--dk-primary-dark);
	color: var(--dk-ink);
}

.dk-button--ghost {
	background-color: transparent;
	box-shadow: inset 0 0 0 2px var(--dk-primary);
	color: var(--dk-ink);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--dk-border);
	border-radius: var(--dk-radius);
	background: var(--dk-white);
	color: var(--dk-body);
	font-family: inherit;
	font-size: var(--dk-font-size-base);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--dk-primary-dark);
}

/* -------------------------------------------------------------------------
 * 6. Site header
 * ---------------------------------------------------------------------- */

.dk-header {
	position: relative;
	z-index: 100;
	background-color: var(--dk-header-bg);
	border-bottom: 1px solid var(--dk-header-border);
}

.dk-header__bar {
	display: flex;
	min-height: var(--dk-header-height);
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.dk-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.dk-branding img,
.dk-branding .custom-logo {
	width: auto;
	max-width: 140px;
	height: auto;
}

.dk-branding__title {
	margin: 0;
	font-size: 20px;
}

.dk-branding__title a {
	color: var(--dk-ink);
	text-decoration: none;
}

.dk-branding__tagline {
	margin: 0;
	font-size: 13px;
}

.dk-header__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 1rem;
}

/* Primary navigation (desktop). */
.dk-nav--primary {
	display: none;
}

.dk-nav__list {
	display: flex;
	margin: 0;
	padding: 0;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
}

/* Astra: menu links --ast-global-color-3, hover/current --ast-global-color-0. */
.dk-nav__list a {
	display: block;
	padding: 0.6rem 0.85rem;
	color: var(--dk-body);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

/* Top-level items stay on one line; only the mobile panel is allowed to wrap. */
.dk-nav--primary .dk-nav__list {
	flex-wrap: nowrap;
}

.dk-nav--primary .dk-nav__list > .dk-nav__item > .dk-nav__link {
	white-space: nowrap;
}

.dk-nav__list a:hover,
.dk-nav__list a:focus,
.dk-nav__list .current-menu-item > a,
.dk-nav__list .current_page_item > a,
.dk-nav__list .current-menu-ancestor > a,
.dk-nav__list .current_page_ancestor > a {
	color: var(--dk-primary);
}

.dk-nav__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.dk-nav__toggle {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.dk-nav__toggle svg {
	width: 12px;
	height: 8px;
	transition: transform var(--dk-transition);
	fill: currentColor;
}

.dk-nav__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.dk-nav__submenu {
	flex-basis: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.dk-nav--primary {
		display: block;
		flex: 1 1 auto;
	}

	/* Centre the menu between the logo and the social icons, as Astra did. */
	.dk-nav--primary .dk-nav__list {
		justify-content: center;
	}

	.dk-nav__submenu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		display: none;
		min-width: 220px;
		background: var(--dk-white);
		box-shadow: var(--dk-shadow);
		border-top: 2px solid var(--dk-primary);
	}

	.dk-nav__submenu a {
		padding: 0.7rem 1rem;
		color: var(--dk-ink);
	}

	.dk-nav__item:hover > .dk-nav__submenu,
	.dk-nav__item:focus-within > .dk-nav__submenu,
	.dk-nav__submenu.is-open {
		display: block;
	}
}

/* Social icons. */
.dk-social {
	display: flex;
	margin: 0;
	padding: 0;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
}

/*
 * Astra filled every social glyph with --ast-global-color-0 and switched to
 * white on hover, overriding the per-network brand colours. Matching that.
 */
.dk-social a {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--dk-primary);
}

.dk-social svg {
	width: 18px;
	height: 18px;
	fill: var(--dk-primary);
	transition: fill var(--dk-transition);
}

.dk-social a:hover svg,
.dk-social a:focus svg {
	fill: var(--dk-white);
}

/* Mobile navigation toggle + panel. */
.dk-nav-toggle {
	display: inline-flex;
	width: 40px;
	height: 40px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--dk-primary);
	border-radius: 2px;
	background: transparent;
	color: var(--dk-primary);
	cursor: pointer;
}

.dk-nav-toggle svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.dk-nav-toggle__close {
	display: none;
}

.dk-nav-toggle[aria-expanded="true"] .dk-nav-toggle__open {
	display: none;
}

.dk-nav-toggle[aria-expanded="true"] .dk-nav-toggle__close {
	display: block;
}

.dk-nav--mobile {
	display: none;
	padding-bottom: 1rem;
	border-top: 1px solid var(--dk-header-border);
}

.dk-nav--mobile.is-open {
	display: block;
}

.dk-nav--mobile .dk-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.dk-nav--mobile .dk-nav__item {
	justify-content: space-between;
	border-bottom: 1px solid var(--dk-header-border);
}

.dk-nav--mobile .dk-nav__link {
	flex: 1;
}

.dk-nav--mobile .dk-nav__list a {
	padding: 0.85rem 0.25rem;
}

.dk-nav--mobile .dk-nav__submenu {
	display: none;
	padding-left: 1rem;
}

.dk-nav--mobile .dk-nav__submenu.is-open {
	display: block;
}

@media (min-width: 1024px) {
	.dk-nav-toggle,
	.dk-nav--mobile {
		display: none;
	}
}

/* Header call to action (was the Astra "Get A Quote" below-header button). */
.dk-header__cta-bar {
	border-top: 1px solid var(--dk-header-border);
}

.dk-header__cta-bar .dk-container {
	display: flex;
	padding-block: 0.6rem;
	justify-content: flex-end;
}

/* Transparent header: overlays the first section, as Astra did on 46 pages. */
.dk-header--transparent {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background-color: transparent;
	border-bottom-color: transparent;
}

.dk-header--transparent .dk-nav__list > .dk-nav__item > .dk-nav__link,
.dk-header--transparent .dk-nav__list > .dk-nav__item > .dk-nav__toggle,
.dk-header--transparent .dk-branding__title a {
	color: var(--dk-white);
}

/*
 * These hover/current rules must match the specificity of the rule above,
 * otherwise the flat white declaration wins and the menu appears to have no
 * hover state at all.
 */
.dk-header--transparent .dk-nav__list > .dk-nav__item > .dk-nav__link:hover,
.dk-header--transparent .dk-nav__list > .dk-nav__item > .dk-nav__link:focus,
.dk-header--transparent .dk-nav__list > .dk-nav__item:hover > .dk-nav__link,
.dk-header--transparent .dk-nav__list > .dk-nav__item:hover > .dk-nav__toggle,
.dk-header--transparent .dk-nav__list > .current-menu-item > .dk-nav__link,
.dk-header--transparent .dk-nav__list > .current_page_item > .dk-nav__link,
.dk-header--transparent .dk-nav__list > .current-menu-ancestor > .dk-nav__link,
.dk-header--transparent .dk-nav__list > .current_page_ancestor > .dk-nav__link {
	color: var(--dk-primary);
}

/* Submenus sit on a white panel, so they keep the normal body colour. */
.dk-header--transparent .dk-nav__submenu a {
	color: var(--dk-body);
}

.dk-header--transparent .dk-nav__submenu a:hover,
.dk-header--transparent .dk-nav__submenu a:focus {
	color: var(--dk-primary);
}

.has-transparent-header .dk-main {
	padding-top: 0;
}

/* Header widget area. */
.dk-header__widgets .widget {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 7. Site footer
 * ---------------------------------------------------------------------- */

.dk-footer {
	background-color: var(--dk-ink);
	color: var(--dk-white);
	font-size: 15px;
}

.dk-footer a {
	color: var(--dk-white);
}

.dk-footer a:hover,
.dk-footer a:focus {
	color: var(--dk-primary);
}

.dk-footer h1,
.dk-footer h2,
.dk-footer h3,
.dk-footer h4,
.dk-footer h5,
.dk-footer h6,
.dk-footer__widget-title {
	color: var(--dk-white);
	font-size: var(--dk-h3);
}

/* <address> defaults to italic; Astra rendered these blocks upright. */
.dk-footer address {
	font-style: normal;
}

/* Astra indented footer submenu items by 20px (.widget_nav_menu ul ul li). */
.dk-footer .sub-menu {
	margin-top: 0.5rem;
}

.dk-footer .sub-menu li {
	padding-left: 20px;
}

.dk-footer__row {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	padding-block: 2.5rem;
}

.dk-footer__row + .dk-footer__row {
	padding-top: 0;
}

.dk-footer__row--bottom {
	padding-block: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	text-align: center;
}

.dk-footer__row ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Row 2's first column collapses when its widget area is empty. */
.dk-footer__col--regional:empty {
	display: none;
}

@media (min-width: 768px) {
	.dk-footer__col--regional:empty {
		display: block;
	}
}

.dk-footer__address-image {
	width: auto;
	max-width: 40px;
	height: auto;
	margin-bottom: 0.75rem;
}

.dk-footer__row li {
	margin-bottom: 0.5rem;
}

.dk-footer__copyright p {
	margin: 0;
}

@media (min-width: 768px) {
	.dk-footer__row--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dk-footer__row--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dk-footer__row--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	/* Astra used a "3-lheavy" grid: a wider first column. */
	.dk-footer__row--lheavy {
		grid-template-columns: 2fr 1fr 1fr;
	}

	.dk-footer__row--bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}
}

/* Footer icons use the same teal-to-white treatment as the header. */
.dk-footer .dk-social svg {
	fill: var(--dk-primary);
}

.dk-footer .dk-social a:hover svg,
.dk-footer .dk-social a:focus svg {
	fill: var(--dk-white);
}

/* -------------------------------------------------------------------------
 * 8. Widgets
 * ---------------------------------------------------------------------- */

.widget {
	margin-bottom: 2rem;
}

.widget__title {
	margin-bottom: 1rem;
	font-size: 18px;
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li {
	margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------
 * 9. Legacy colour classes
 *
 * Existing block content (footer HTML, imported pages) still references the
 * Astra palette slugs. Mapping them here keeps that content on-brand without
 * cluttering the editor colour picker with duplicate swatches.
 * ---------------------------------------------------------------------- */

.has-ast-global-color-0-color { color: var(--dk-primary); }
.has-ast-global-color-1-color { color: var(--dk-primary-dark); }
.has-ast-global-color-2-color { color: var(--dk-ink); }
.has-ast-global-color-3-color { color: var(--dk-body); }
.has-ast-global-color-4-color { color: var(--dk-surface); }
.has-ast-global-color-5-color { color: var(--dk-white); }
.has-ast-global-color-6-color { color: var(--dk-black); }
.has-ast-global-color-7-color { color: var(--dk-muted); }
.has-ast-global-color-8-color { color: var(--dk-surface-alt); }

.has-ast-global-color-0-background-color { background-color: var(--dk-primary); }
.has-ast-global-color-1-background-color { background-color: var(--dk-primary-dark); }
.has-ast-global-color-2-background-color { background-color: var(--dk-ink); }
.has-ast-global-color-3-background-color { background-color: var(--dk-body); }
.has-ast-global-color-4-background-color { background-color: var(--dk-surface); }
.has-ast-global-color-5-background-color { background-color: var(--dk-white); }
.has-ast-global-color-6-background-color { background-color: var(--dk-black); }
.has-ast-global-color-7-background-color { background-color: var(--dk-muted); }
.has-ast-global-color-8-background-color { background-color: var(--dk-surface-alt); }

/* Elementor global colour variables, previously supplied by Astra. */
:root {
	--ast-global-color-0: var(--dk-primary);
	--ast-global-color-1: var(--dk-primary-dark);
	--ast-global-color-2: var(--dk-ink);
	--ast-global-color-3: var(--dk-body);
	--ast-global-color-4: var(--dk-surface);
	--ast-global-color-5: var(--dk-white);
	--ast-global-color-6: var(--dk-black);
	--ast-global-color-7: var(--dk-muted);
	--ast-global-color-8: var(--dk-surface-alt);
}

/* -------------------------------------------------------------------------
 * 10. WordPress core alignment classes
 * ---------------------------------------------------------------------- */

.alignleft {
	float: left;
	margin: 0 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	max-width: 1400px;
	margin-inline: auto;
}

.alignfull {
	max-width: none;
}

.wp-caption-text,
.wp-element-caption {
	margin-top: 0.5em;
	font-size: 13px;
	text-align: center;
}

.sticky .dk-card__title::before {
	content: "\2605\00a0";
	color: var(--dk-primary);
}