/*
 * Design tokens, copied verbatim from https://yvegroup.com.au/ 's compiled
 * theme.12.css (YOOtheme Pro / UIkit) - measured with DevTools + grep, not
 * approximated. See plans/yvegroup-migration-plan.md section 0.4.
 *
 * No code was copied from the compromised Joomla source; only these
 * numeric/colour VALUES were read off the live, uncompromised production
 * site and the theme's own markup/CSS below is written from scratch.
 */

:root {
	/* Colour */
	--yve-primary: #64ccc9;          /* links, .uk-tile-primary, .uk-card-primary */
	--yve-primary-button: #55c7c4;   /* .uk-button-primary */
	--yve-primary-button-hover: #49c3c0;
	--yve-secondary: #888b8d;        /* .uk-tile-secondary / secondary text */
	--yve-secondary-button: #7e8183; /* .uk-button-secondary */
	--yve-body-text: #333132;
	--yve-heading-text: #000;
	--yve-muted-link: #a1a0ad;
	--yve-tile-muted-bg: #f2f2f2;    /* newsletter band */
	--yve-white: #fff;
	--yve-shadow-color: 136, 139, 141; /* rgba base used by card shadows */

	/* Type */
	--yve-font: "Open Sans", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
	--yve-font-size: 16px;
	--yve-line-height: 1.55;

	/* Layout */
	--yve-container-max: 1200px;
	--yve-container-pad: 15px;
	--yve-radius-button: 3px;
	--yve-radius-image: 8px;

	/* Breakpoints (UIkit defaults, matched on live) */
	--yve-bp-s: 640px;
	--yve-bp-m: 960px;
	--yve-bp-l: 1200px;
	--yve-bp-xl: 1600px;
}

/* ---------------------------------------------------------- reset/base */

html {
	font-family: var(--yve-font);
	font-size: var(--yve-font-size);
	font-weight: 300;
	line-height: var(--yve-line-height);
	background: var(--yve-white);
	color: var(--yve-body-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--yve-white);
	color: var(--yve-body-text);
}

a {
	color: var(--yve-primary);
	text-decoration: none;
}
a:hover {
	color: var(--yve-primary-button-hover);
	text-decoration: underline;
}

::selection {
	background: var(--yve-secondary);
	color: #fff;
}

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

/* --------------------------------------------------------- headings */
/* Exact scale measured on live: h1-h6 raw tags AND .uk-h1-.uk-h6 utility
   classes carry identical rules there, so one ruleset covers both. */

h1, .uk-h1,
h2, .uk-h2,
h3, .uk-h3,
h4, .uk-h4,
h5, .uk-h5,
h6, .uk-h6 {
	margin: 0 0 20px 0;
	color: var(--yve-heading-text);
}
* + h1, * + .uk-h1,
* + h2, * + .uk-h2,
* + h3, * + .uk-h3,
* + h4, * + .uk-h4,
* + h5, * + .uk-h5,
* + h6, * + .uk-h6 {
	margin-top: 40px;
}

h1, .uk-h1 { font-size: 37.4px; line-height: 1.2; font-weight: 300; letter-spacing: -.05rem; }
h2, .uk-h2 { font-size: 27.2px; line-height: 1.3; font-weight: 400; letter-spacing: -.05rem; }
h3, .uk-h3 { font-size: 24px;   line-height: 1.4; font-weight: 700; letter-spacing: -.05rem; }
h4, .uk-h4 { font-size: 20px;   line-height: 1.4; font-weight: 700; letter-spacing: -.05rem; }
h5, .uk-h5 { font-size: 18px;   line-height: 1.4; font-weight: 700; }
h6, .uk-h6 { font-size: 15px;   line-height: 1.4; font-weight: 700; }

@media (min-width: 1200px) {
	h1, .uk-h1 { font-size: 44px; }
	h2, .uk-h2 { font-size: 32px; }
}

p { margin: 0 0 20px 0; }
p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- container */

.uk-container {
	box-sizing: content-box;
	max-width: var(--yve-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--yve-container-pad);
	padding-right: var(--yve-container-pad);
}
@media (min-width: 640px) {
	.uk-container { padding-left: 30px; padding-right: 30px; }
}
@media (min-width: 960px) {
	.uk-container { padding-left: 40px; padding-right: 40px; }
}
.uk-container-xsmall { max-width: 750px; }
.uk-container-small  { max-width: 900px; }
.uk-container-large  { max-width: 1400px; }
.uk-container-expand { max-width: none; }

/* Fixed-width utilities - exact live values from theme-live.css. */
.uk-width-xlarge  { width: 600px; max-width: 100%; }
.uk-width-2xlarge { width: 750px; max-width: 100%; }
.uk-margin-auto { margin-left: auto !important; margin-right: auto !important; }

/* -------------------------------------------------------------- buttons */

.uk-button {
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	border: none;
	padding: 0 30px;
	vertical-align: middle;
	font-family: var(--yve-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 46px;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0;
	border-radius: var(--yve-radius-button);
	cursor: pointer;
	transition: .1s ease-in-out;
	transition-property: color, background-color, border-color, box-shadow;
}
.uk-button-primary {
	background-color: var(--yve-primary-button);
	color: #fff;
}
.uk-button-primary:hover,
.uk-button-primary:focus-visible {
	background-color: var(--yve-primary-button-hover);
	color: #fff;
	text-decoration: none;
}
.uk-button-secondary {
	background-color: var(--yve-secondary-button);
	color: #fff;
}
.uk-button-secondary:hover,
.uk-button-secondary:focus-visible {
	background-color: #6d6f71;
	color: #fff;
	text-decoration: none;
}
.uk-button-large {
	padding: 0 40px;
	line-height: 60px;
	font-size: 25px;
}
.uk-button-default {
	background: #fff;
	color: var(--yve-body-text);
	box-shadow: 3px 8px 16px 0 rgba(151, 151, 151, .2);
}
.uk-button-default:hover { color: var(--yve-primary); }

/* ----------------------------------------------------------------- cards */

.uk-card { position: relative; box-sizing: border-box; }
.uk-card-body { padding: 30px 30px; }
@media (min-width: 960px) {
	.uk-card-body { padding: 40px 40px; }
}
.uk-card-body.uk-padding-small { padding: 20px 20px; }
.uk-card-body.uk-padding-large { padding: 70px 70px; }

.uk-card-primary {
	background-color: var(--yve-primary);
	color: #fff;
	box-shadow: 5px 14px 25px 0 rgba(var(--yve-shadow-color), .25);
}
/* :not(.uk-button) - a card-scoped link-colour reset must not also paint
   the "Read more" button's own text, or it renders white-on-white (the
   button keeps its own white background per .uk-button-default). Found via
   screenshot diff against live: the Capabilities-children cards' buttons
   were blank white boxes with invisible text. */
.uk-card-primary a:not(.uk-button) { color: #fff; }
.uk-card-secondary {
	background-color: var(--yve-secondary);
	color: #fff;
	box-shadow: 5px 14px 25px 0 rgba(var(--yve-shadow-color), .25);
}
.uk-card-secondary a:not(.uk-button) { color: #fff; }
.uk-card-default {
	background: #fff;
	box-shadow: 3px 8px 16px 0 rgba(151, 151, 151, .2);
}
.uk-card-hover:hover { background-color: #51c6c2; }

.uk-border-rounded { border-radius: var(--yve-radius-image); overflow: hidden; }

/* ----------------------------------------------------------------- tiles */

.uk-tile {
	box-sizing: border-box;
	position: relative;
	padding: 40px 15px;
}
@media (min-width: 640px) { .uk-tile { padding-left: 30px; padding-right: 30px; } }
@media (min-width: 960px) { .uk-tile { padding: 70px 40px; } }
.uk-tile-muted { background-color: var(--yve-tile-muted-bg); }
.uk-tile-primary { background-color: var(--yve-primary); color: #fff; }
.uk-tile-primary a { color: #fff; }

.uk-link-muted,
.uk-link-muted a { color: var(--yve-muted-link); }
.uk-link-muted:hover { color: var(--yve-primary); }

/* Live: 20px/1.5, Open Sans 300, and it goes WHITE inside primary cards. */
.uk-text-lead {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 300;
	color: #000;
}
.uk-card-primary .uk-text-lead,
.uk-card-secondary .uk-text-lead,
.uk-tile-primary .uk-text-lead { color: #fff; }
.uk-text-normal { font-weight: 400; }

.uk-text-primary { color: var(--yve-primary); }
.uk-text-secondary { color: var(--yve-secondary); }
.uk-text-center { text-align: center; }
.uk-text-left { text-align: left; }

/* ---------------------------------------------------------------- grid */

/* UIkit's real row-gap trick: every item gets margin-top, and the container
   cancels it with an equal negative margin - so the first row sits flush
   and only ROWS AFTER THE FIRST get the gap. `.uk-grid > * + *` (margin-top
   on every sibling but the first) looks equivalent for a single row, but
   once items wrap onto multiple rows at a % width (e.g. 3-up case-study
   cards) it staggers each item down instead of only the second ROW -
   confirmed via screenshot: cards overlapped/stair-stepped instead of
   sitting in a clean 3-up row. */
.uk-grid {
	display: flex;
	flex-wrap: wrap;
	margin-top: -40px;
	margin-left: 0;
	padding: 0;
	list-style: none;
}
.uk-grid > * { box-sizing: border-box; width: 100%; padding-left: 20px; margin-top: 40px; }
.uk-grid-large > * { padding-left: 40px; }

/* uk-grid-match makes every column a flex box so its single child card
   stretches to the tallest row height - this is what keeps the 3 service
   cards (and the 4 counters) aligned on live regardless of copy length. */
.uk-grid-match > * { display: flex; flex-wrap: wrap; }
.uk-grid-match > * > * { width: 100%; }

.uk-grid-column-small { margin-left: -15px; }
.uk-grid-column-small > * { padding-left: 15px; }
.uk-grid-row-large > .uk-grid-margin { margin-top: 40px; }
@media (min-width: 960px) {
	.uk-grid-column-small { margin-left: -30px; }
	.uk-grid-column-small > * { padding-left: 30px; }
	.uk-grid-row-large > .uk-grid-margin { margin-top: 70px; }
}

@media (min-width: 640px) {
	.uk-child-width-1-2\@s > * { width: 50%; }
}
@media (min-width: 960px) {
	.uk-child-width-1-2\@m > * { width: 50%; }
	.uk-child-width-1-3\@m > * { width: 33.333%; }
	.uk-child-width-1-4\@m > * { width: 25%; }
	.uk-child-width-1-5\@m > * { width: 20%; }
}

/* -------------------------------------------------------------- sections */

.uk-section { box-sizing: border-box; padding-top: 40px; padding-bottom: 40px; position: relative; }
.uk-section-small  { padding-top: 20px; padding-bottom: 20px; }
.uk-section-large  { padding-top: 70px; padding-bottom: 70px; }
@media (min-width: 960px) {
	.uk-section-large { padding-top: 140px; padding-bottom: 140px; }
}
.uk-section-default { background: #fff; }
.uk-section-muted   { background: var(--yve-tile-muted-bg); }

/* --------------------------------------------------------------- utility */

.uk-text-right { text-align: right; }
@media (min-width: 960px) {
	.uk-text-left\@m   { text-align: left; }
	.uk-text-center\@m { text-align: center; }
}

/* Directional margin utilities. These were referenced by the homepage
   markup (service card titles/body, counter titles) but never defined, so
   those elements fell back to the generic "* + heading" 40px rule or to no
   spacing at all. Values match theme-live.css. */
.uk-margin        { margin-top: 20px; margin-bottom: 20px; }
.uk-margin-top    { margin-top: 20px !important; }
.uk-margin-bottom { margin-bottom: 20px !important; }
.uk-margin-small-top { margin-top: 10px !important; }
.uk-margin-small-bottom { margin-bottom: 10px !important; }
.uk-margin-medium  { margin-top: 40px; margin-bottom: 40px; }
.uk-margin-medium-top { margin-top: 40px !important; }
.uk-margin-remove-top { margin-top: 0 !important; }
.uk-margin-remove-bottom { margin-bottom: 0 !important; }
.uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
.uk-margin-medium  { margin-top: 40px; }
.uk-margin-large   { margin-top: 40px; }
@media (min-width: 960px) {
	.uk-margin-large { margin-top: 70px; }
}
.uk-margin-remove { margin: 0 !important; }
.uk-padding-remove-top { padding-top: 0 !important; }
.uk-padding-remove-bottom { padding-bottom: 0 !important; }
.uk-padding-remove-vertical { padding-top: 0 !important; padding-bottom: 0 !important; }
.uk-flex { display: flex; }
.uk-flex-center { justify-content: center; }
.uk-flex-middle { align-items: center; }
.uk-flex-between { justify-content: space-between; }
.uk-hidden\@m { }
.uk-visible\@m { display: none; }
@media (min-width: 960px) {
	.uk-hidden\@m { display: none !important; }
	.uk-visible\@m { display: block; }
}

.uk-position-relative { position: relative; }
.uk-position-center-right {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
.uk-overlay-default { background: rgba(255, 255, 255, .8); padding: 30px; }

/* accessibility - additive, the live site has none of this */

.yve-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: #000;
	color: #fff;
	padding: 12px 20px;
}
.yve-skip-link:focus {
	left: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #0057b8;
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}