/*
 * Component styles - header/nav, hero slideshow, interior hero, footer,
 * off-canvas mobile menu. Layered on top of tokens.css.
 */

/* ---------------------------------------------------------------- header */

.tm-header-mobile,
.tm-header {
	background: #fff;
	position: relative;
	z-index: 100;
}

.uk-navbar-container {
	background: #fff;
}

.uk-navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 80px;
}

.uk-navbar-left,
.uk-navbar-right,
.uk-navbar-center {
	display: flex;
	align-items: center;
}

.uk-logo {
	display: inline-flex;
}

.uk-navbar-nav {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}
.uk-navbar-nav > li {
	position: relative;
}
.uk-navbar-nav > li > a {
	display: block;
	padding: 0 16px;
	line-height: 80px;
	color: var(--yve-body-text);
	font-weight: 500;
	white-space: nowrap;
}
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.yve-drop-open > a {
	color: var(--yve-primary);
	text-decoration: none;
}

/* wp_nav_menu()'s default walker emits .menu-item-has-children / .sub-menu,
   not UIkit's .uk-parent / .uk-drop - target the real WP markup. */
.uk-navbar-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	padding: 12px 0;
	margin: 0;
	list-style: none;
	display: none;
	z-index: 200;
}
.yve-drop-open > .sub-menu {
	display: block;
}
.uk-navbar-nav .sub-menu li a {
	display: block;
	padding: 8px 20px;
	color: var(--yve-body-text);
	line-height: 1.4;
	white-space: nowrap;
}
.uk-navbar-nav .sub-menu li a:hover {
	color: var(--yve-primary);
	background: #f7f7f7;
	text-decoration: none;
}

.yve-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--yve-body-text);
	margin-left: 12px;
}
.yve-social-icon:hover { color: var(--yve-primary); }

/* sticky - adds a shadow only; the header is already opaque, so nothing
   about the background changes on scroll (matches live). */
.yve-sticky-wrap.uk-navbar-sticky .uk-navbar-container {
	box-shadow: 1px 1px 10px 0 #888b8d;
}
@media (min-width: 960px) {
	.yve-sticky-wrap.uk-navbar-sticky {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
}

/* --------------------------------------------------------- mobile header */

.uk-navbar-toggle {
	background: none;
	border: none;
	padding: 10px;
	cursor: pointer;
}
.yve-hamburger {
	display: block;
	width: 24px;
}
.yve-hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--yve-body-text);
	margin: 5px 0;
}

.yve-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 1000;
}
.yve-offcanvas[hidden] { display: none; }
.yve-offcanvas-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
}
.yve-offcanvas-bar {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 85%;
	max-width: 320px;
	background: #fff;
	padding: 60px 24px 24px;
	overflow-y: auto;
}
.yve-offcanvas-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.yve-offcanvas .uk-nav-default {
	list-style: none;
	margin: 0;
	padding: 0;
}
.yve-offcanvas .uk-nav-default > li > a {
	display: block;
	padding: 10px 0;
	color: var(--yve-body-text);
	font-weight: 500;
	border-bottom: 1px solid #eee;
}
.yve-offcanvas .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 8px 16px;
}
.yve-offcanvas .sub-menu li a {
	display: block;
	padding: 6px 0;
	color: var(--yve-secondary);
	font-size: 14px;
	border-bottom: none;
}
body.yve-offcanvas-open { overflow: hidden; }

/* ------------------------------------------------------------- hero band */

.yve-hero-section {
	position: relative;
	overflow: hidden;
}

/* Height is owned by the CONTAINER, never by the active slide.
   Live runs uk-slideshow="ratio: 16:6; minHeight: 300", which resolves to a
   fixed pixel height on .uk-slideshow-items and absolutely positions every
   item inside it - so the band never changes size as slides advance.
   Reproducing that here matters: an earlier version promoted the active
   slide to position:relative, which made the band as tall as whichever
   caption happened to be showing. Slide 1 ("A true one-stop shop.") is one
   line, slide 2 is three, so the hero visibly grew on the first advance. */
.yve-slideshow {
	position: relative;
}
.yve-slideshow-items {
	position: relative;
	aspect-ratio: 16 / 6;
	min-height: 300px;
}
.yve-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.2s ease-in-out, visibility 0s linear 1.2s;
	display: flex;
	align-items: center;
}
.yve-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1.2s ease-in-out, visibility 0s linear 0s;
}
.yve-slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 100%);
}
.yve-slide-inner {
	position: relative;
	width: 100%;
	z-index: 2;
}
/* uk-width-2xlarge (750px) on live, not 640px, and the caption is centred
   in the band rather than sitting against the container edge.
   flex-shrink must be allowed (a fixed-width flex item would otherwise push
   the band wider than the viewport on phones) and min-width:0 lets it
   actually shrink below its content's intrinsic width. */
.yve-slide-card {
	background: rgba(100, 204, 201, .8);
	padding: 30px 30px;
	box-sizing: border-box;
	flex: 0 1 750px;
	min-width: 0;
	max-width: 100%;
	color: #fff;
	text-align: center;
}
.yve-slide-card h1 { color: #fff; }

.yve-slide-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: rgba(255, 255, 255, .3);
	border: none;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	display: none;
}
.yve-slide-prev { left: 20px; }
.yve-slide-next { right: 20px; }
@media (min-width: 960px) and (hover: hover) {
	.yve-slide-nav { display: block; }
}
.yve-slide-nav:hover { background: rgba(255, 255, 255, .5); }

/* ------------------------------------------------- case studies band */
/* Dark tile-primary panel (Joomla module id 116) shown on every About Us
   and Capabilities page plus Case Studies itself - matches the live
   rgba(51,49,50,.86) scrim over the same decorative SVG used elsewhere. */

.yve-case-studies-band {
	background-color: #333132;
	background-image: url('../images/yootheme/home-bg-yve-02.svg');
	background-size: cover;
	background-position: top right;
	padding: 60px 0;
	color: #fff;
}
.yve-case-studies-band h3 {
	color: #fff;
}
/* No margin-top rule here on purpose: .uk-grid already carries -40px
   (cancelling the +40px it puts on every item, to fix multi-row card
   stagger). Setting ANY margin-top on this class - even 0 - at this
   specificity overrides that base rule (site.css loads after tokens.css),
   reintroducing the overlap. The 30px gap under "More YVE Case Studies"
   comes from the <h3> margin instead - see the heading rule above. */
.yve-case-studies-slider .uk-card-primary {
	background-color: #64ccc9;
}

/* --------------------------------------------------------- interior hero */

.yve-interior-hero {
	background-color: #ccc;
	background-size: cover;
	background-position: center;
	padding-top: 500px;
	padding-bottom: 0;
	position: relative;
}
.yve-hero-card {
	position: relative;
	top: -150px;
	z-index: 1;
	margin-bottom: -150px;
}
@media (max-width: 640px) {
	/* The live site is not responsive here either (fixed 500px padding).
	   This clamp is an additive fix, not a faithfulness break: it prevents
	   an unusable amount of empty space on small screens while keeping the
	   same visual treatment. */
	.yve-interior-hero { padding-top: 220px; }
	.yve-hero-card { top: -80px; margin-bottom: -80px; }
}

/* ------------------------------------------- builder grid/list content */
/* Renders extract.py's <ul class="yve-grid yve-grid-grid"><li
   class="yve-grid-item"> output (the Capabilities "We specialise in" tiles,
   and any other grid_item/list_item builder content) as the grey icon-card
   grid the live site actually shows - confirmed against the live markup:
   uk-card-secondary, 100x100 icon, title, small meta text, 4-up desktop. */

.yve-content ul.yve-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	list-style: none;
	margin: 30px 0;
	padding: 0;
}
@media (min-width: 960px) {
	.yve-content ul.yve-grid-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.yve-content li.yve-grid-item {
	background-color: var(--yve-secondary);
	color: #fff;
	padding: 30px;
	text-align: center;
	border-radius: 0;
	/* Source order is title, meta, image (extract.py always emits image
	   last); live shows image, title, meta - reorder visually with flex
	   rather than touching the extraction pipeline again. */
	display: flex;
	flex-direction: column;
}
.yve-content li.yve-grid-item h3 {
	order: 2;
	color: #fff;
	font-size: 18px;
	margin: 16px 0 4px;
}
.yve-content li.yve-grid-item p.yve-grid-item-meta {
	order: 3;
	color: #fff;
	opacity: .85;
	font-size: 13px;
	margin: 0;
}
.yve-content li.yve-grid-item figure {
	order: 1;
	margin: 0;
	display: flex;
	justify-content: center;
}
.yve-content li.yve-grid-item figure img {
	width: 100px;
	height: 100px;
	object-fit: contain;
}

/* ------------------------------------------------- capability statement */
/* Full-bleed rounded image with a white panel sitting ON it at centre-right
   (live: .uk-position-center-right.uk-position-large > .uk-overlay-default,
   panel width uk-width-xlarge = 600px, 50px position margin @m). */

.yve-capability-cta {
	position: relative;
	overflow: hidden;
}
.yve-capability-cta > img {
	display: block;
	width: 100%;
	height: auto;
}
.yve-capability-panel {
	background: rgba(255, 255, 255, .9);
	padding: 30px;
	box-sizing: border-box;
}
@media (min-width: 960px) {
	.yve-capability-panel {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		margin: 50px;
		width: 600px;
		max-width: calc(100% - 100px);
	}
}
.yve-capability-panel h3 {
	text-transform: uppercase;
}
/* Below @m the panel drops under the image rather than covering it - live is
   not responsive here, but overlaying a 600px panel on a phone-width image
   makes the button unreadable. Additive fix, same visual treatment. */
@media (max-width: 959px) {
	.yve-capability-cta { border-radius: var(--yve-radius-image); }
	.yve-capability-panel .uk-button-large {
		font-size: 18px;
		line-height: 50px;
		padding: 0 24px;
	}
}

/* ------------------------------------------------------------- counters */
/* uk-grid-match stretches each column; align the inner panel to the TOP so
   the four numbers share a baseline even when a title wraps to two lines. */

.yve-counters > div { align-items: flex-start; }
.yve-counters .uk-panel { width: 100%; }
.yve-counters .uk-h1 { line-height: 1.2; }
/* Live: h2.el-counter has uk-margin-small-top, the h3 title keeps the
   theme's 40px "* + heading" top margin, and the meta line sits directly
   under the title with no gap. */
.yve-counters .uk-h1 { margin-top: 10px; }
.yve-counters h3.uk-h4 { margin-top: 20px !important; }
.yve-counters div.uk-h4 { margin-top: 0 !important; }

/* --------------------------------------------------------- service cards */
/* Under uk-grid-match the column is a flex box; the card must fill its
   height (flow-root alone leaves it at content height, which is why the
   three cards used to end at three different depths). Content is centred
   the way live centres it. */

.uk-grid-match .uk-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
}
.uk-grid-match .uk-card > img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

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

.yve-card-grid { margin-top: 0; }
/* Live serves these at width="120" inside a 750px centred grid. */
.yve-logo-strip > div { align-items: center; }
.yve-logo-strip .uk-panel { width: 100%; }
.yve-logo-strip img {
	width: 120px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}

/* ------------------------------------------------------------------ forms */

.yve-form {
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
}
.yve-form-row {
	margin-bottom: 16px;
}
.yve-form-row label {
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
}
.yve-form input[type="text"],
.yve-form input[type="email"],
.yve-form input[type="tel"],
.yve-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-family: var(--yve-font);
	font-size: 15px;
}
/* Newsletter: live lays this out as a 2-column grid (First/Last on row 1,
   then Phone+Company in the left column and Email+Submit in the right),
   full width of the muted tile - not a single row of 5 squeezed inputs. */
.yve-form-inline {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px 30px;
	max-width: none;
}
@media (min-width: 768px) {
	.yve-form-inline {
		grid-template-columns: 1fr 1fr;
	}
}
.yve-form-inline .yve-form-row {
	margin-bottom: 0;
}
/* Placeholders carry the labels on live, so the <label>s are visually
   hidden but kept for screen readers. */
.yve-form-inline label.uk-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.yve-form-inline button[type="submit"] {
	justify-self: start;
}

/* -------------------------------------------------------------- pagination */

.yve-pagination {
	text-align: center;
}
.yve-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 2px;
	border: 1px solid #eee;
	border-radius: 3px;
	color: var(--yve-body-text);
}
.yve-pagination .page-numbers.current {
	background: var(--yve-primary);
	color: #fff;
	border-color: var(--yve-primary);
}

/* wide tables (Capabilities data tables) scroll in their own container
   rather than the whole page - additive accessibility fix, live has none. */
.yve-content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}