/*
Theme Name:   Vivli Europe
Description:  Child theme of vivli22 for the Vivli Europe website. Overrides the header (logo, tagline, utility links) and adds Vivli Europe styles.
Template:     vivli22
Version:      0.1.0
Text Domain:  vivli-europe
*/

/* Brand colours sampled from the Vivli Europe logo */
:root {
	--ve-navy: #014b6e;
	--ve-yellow: #eee935;
	--ve-blue: #009bdb;
	--ve-teal: #01a49f;
	--ve-light: #f3f7f9;
}

/* ---------- Header: logo ---------- */
#branding #site_logo .ve-logo img {
	display: block;
	height: 90px;
	width: auto;
}

/* ---------- Header: tagline bar ---------- */
#tagline.ve-tagline .content_wrapper {
	color: var(--ve-navy);
}

/* ---------- Header: utility links ---------- */
.ve-utility {
	text-align: right;
	font-size: 13px;
	padding: 6px 0;
}
.ve-utility ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ve-utility li {
	display: inline-block;
	margin-left: 18px;
}
.ve-utility a {
	color: var(--ve-navy);
	text-decoration: none;
}
.ve-utility a:hover {
	text-decoration: underline;
}

/* ---------- Main menu: Get involved button ---------- */
#access .menu-button > a {
	background: var(--ve-yellow);
	color: var(--ve-navy) !important;
	border-radius: 4px;
	padding-left: 16px !important;
	padding-right: 16px !important;
	font-weight: 700;
}
#access .menu-button > a:hover {
	background: var(--ve-navy);
	color: #fff !important;
}

/* ---------- Home hero ---------- */
.ve-hero {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 48px 0;
}
.ve-hero__text {
	flex: 1 1 55%;
}
.ve-hero__title {
	color: var(--ve-navy);
	font-size: 42px;
	line-height: 1.15;
	margin: 0 0 16px;
}
.ve-hero__subtitle {
	color: var(--ve-teal);
	font-size: 20px;
	line-height: 1.4;
	margin: 0 0 28px;
}
.ve-hero__map {
	flex: 1 1 45%;
	text-align: center;
}
.ve-hero__map img {
	max-width: 100%;
	height: auto;
}
.ve-btn {
	display: inline-block;
	background: var(--ve-navy);
	color: #fff !important;
	padding: 12px 24px;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none !important;
}
.ve-btn:hover {
	background: var(--ve-blue);
}

/* ---------- Home excerpts ---------- */
.ve-home-excerpts h2 {
	color: var(--ve-navy);
	border-top: 4px solid var(--ve-yellow);
	padding-top: 24px;
	margin-top: 40px;
}
/* The three "How we work" items sit side by side as cards.
   Each h3 and the paragraph after it form one card. */
.ve-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 20px 0;
}
.ve-card {
	background: var(--ve-light);
	border-left: 4px solid var(--ve-teal);
	padding: 20px;
}
.ve-card h3 {
	color: var(--ve-navy);
	font-size: 18px;
	margin: 0 0 10px;
}
.ve-card p {
	margin: 0;
}

/* ---------- Phone widths ---------- */
@media (max-width: 800px) {
	.ve-hero {
		flex-direction: column;
		padding: 24px 0;
	}
	.ve-hero__title {
		font-size: 30px;
	}
	.ve-cards {
		grid-template-columns: 1fr;
	}
	.ve-utility {
		text-align: center;
	}
	#branding #site_logo .ve-logo img {
		height: 56px;
	}
}

/* ---------- Desktop: keep utility links out of the menu's way ---------- */
@media (min-width: 1201px) {
	#header .ve-utility {
		position: absolute;
		top: 0;
		right: 0;
		padding: 2px 0;
	}
}

/* ---------- Full menu bar from 960px wide ----------
   vivli22 collapses the main menu into a "Menu" button below 1201px.
   These rules keep the full menu bar at the top, beside the logo,
   down to 960px, matching vivli22's desktop header.
   "html body" raises priority, because vivli22's stylesheet loads after this one. */
@media (min-width: 960px) and (max-width: 1200px) {
	html body #header_wrapper {
		height: 90px;
		position: relative;
		z-index: 1000;
	}
	html body #header {
		position: relative;
		height: 112px;
		padding: 12px 20px 0;
	}
	html body #header #branding {
		position: absolute;
		top: 12px;
		left: 20px;
		width: auto;
	}
	html body #access #mobile_menu_icon {
		display: none !important;
	}
	html body #header #access {
		float: right;
		width: auto;
		margin-top: 40px;
		background: none;
		font-size: 16px;
	}
	html body #access #menu-main-nav.sf-menu {
		display: block !important;
		float: right;
		width: auto;
		margin-left: 0;
		background: none;
	}
	html body #access #menu-main-nav.sf-menu > li {
		float: left;
		position: relative;
		margin: 0 0 0 18px;
		height: 38px;
		line-height: 38px;
		font-size: 17px;
	}
	html body #access #menu-main-nav.sf-menu > li > a {
		color: rgb(3, 57, 90);
		text-transform: none;
		padding: 0;
		background: none;
	}
	html body #access #menu-main-nav.sf-menu > li.menu-button > a {
		background: var(--ve-yellow);
		color: var(--ve-navy);
		padding: 0 16px;
	}
	html body #header .ve-utility {
		position: absolute;
		top: 0;
		right: 20px;
		padding: 2px 0;
	}
}

/* ---------- Home: hide the template's page-title banner ---------- */
body.page-id-17280 #section_title_wrapper {
	display: none;
}

/* ---------- Button row (Get involved section) ---------- */
.ve-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}
.ve-btn--outline {
	background: transparent;
	color: var(--ve-navy) !important;
	border: 2px solid var(--ve-navy);
	padding: 10px 22px;
}
.ve-btn--outline:hover {
	background: var(--ve-navy);
	color: #fff !important;
}

/* =========================================================
   Vivli Europe page design (pages tagged with the ve-page body class)
   ========================================================= */

/* Body text: smaller, darker, shorter lines */
.ve-page #bottom_content p,
.ve-page #bottom_content li {
	font-size: 16px;
	line-height: 1.7;
	color: #2b3d47;
}
.ve-page #bottom_content .content_wrapper > p,
.ve-page #bottom_content .content_wrapper > ul {
	max-width: 760px;
}

/* Sections become alternating bands */
.ve-page #bottom_content {
	padding: 0 !important;
}
.ve-page #bottom_content .bottom_content_area {
	padding: 64px 20px;
}
.ve-page #bottom_content .bottom_content_area:nth-of-type(even) {
	background: var(--ve-light);
}

/* Section titles get a small yellow rule above them */
.ve-page #bottom_content .bottom_content_area h2 {
	font-size: 32px;
	line-height: 1.2;
	color: var(--ve-navy);
	margin: 0 0 24px;
}
.ve-page #bottom_content .bottom_content_area h2::before {
	content: "";
	display: block;
	width: 48px;
	height: 5px;
	background: var(--ve-yellow);
	margin-bottom: 16px;
}
.ve-page #bottom_content .bottom_content_area h3 {
	font-size: 20px;
	line-height: 1.3;
	color: var(--ve-navy);
	margin: 0 0 8px;
}

/* Lead paragraph: the opening line of a section, larger */
.ve-page #bottom_content p.ve-lead {
	font-size: 22px;
	line-height: 1.5;
	color: var(--ve-navy);
	max-width: 820px;
	margin-bottom: 24px;
}

/* Callout: a short key sentence pulled out of the flow */
.ve-page #bottom_content .ve-callout {
	border-left: 6px solid var(--ve-yellow);
	background: #fff;
	padding: 20px 28px;
	margin: 32px 0;
	max-width: 760px;
	box-shadow: 0 2px 12px rgba(1, 75, 110, 0.08);
}
.ve-page #bottom_content .ve-callout p {
	font-size: 24px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--ve-navy);
	margin: 0;
}

/* Checklist: bullet lists become ticked items in two columns */
.ve-page #bottom_content ul.ve-checklist {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	max-width: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}
.ve-page #bottom_content ul.ve-checklist li {
	position: relative;
	background: #fff;
	border: 1px solid #dde7ec;
	border-radius: 6px;
	padding: 20px 20px 20px 60px;
	margin: 0;
}
.ve-page #bottom_content ul.ve-checklist li::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 22px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ve-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* Fact box: a short statement set apart */
.ve-page #bottom_content .ve-factbox {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--ve-navy);
	border-radius: 8px;
	padding: 28px 32px;
	max-width: 820px;
}
.ve-page #bottom_content .ve-factbox::before {
	content: "NL";
	flex: 0 0 auto;
	font-weight: 800;
	font-size: 18px;
	color: var(--ve-navy);
	background: var(--ve-yellow);
	border-radius: 50%;
	width: 52px;
	height: 52px;
	line-height: 52px;
	text-align: center;
}
.ve-page #bottom_content .ve-factbox p {
	color: #fff;
	font-size: 19px;
	line-height: 1.55;
	margin: 0;
}

/* Profile card: photo beside name, role and bio */
.ve-page #bottom_content .ve-profile {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 36px;
	align-items: start;
	background: #fff;
	border-radius: 8px;
	padding: 32px;
	box-shadow: 0 2px 16px rgba(1, 75, 110, 0.08);
}
.ve-page #bottom_content .ve-profile__photo img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	float: none !important;
	margin: 0 !important;
}
.ve-page #bottom_content .ve-profile__body h3 {
	font-size: 26px;
	margin-bottom: 4px;
}
.ve-page #bottom_content .ve-profile__body p.ve-role {
	color: var(--ve-teal);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 16px;
}

/* Key dates strip (EHDS) */
.ve-page #bottom_content .ve-keydates {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	max-width: 760px;
	margin: 28px 0 32px;
}
.ve-page #bottom_content .ve-keydate {
	background: var(--ve-navy);
	border-radius: 8px;
	padding: 20px 24px;
}
.ve-page #bottom_content .ve-keydate strong {
	display: block;
	color: var(--ve-yellow);
	font-size: 26px;
	line-height: 1.2;
	margin-bottom: 4px;
}
.ve-page #bottom_content .ve-keydate span {
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
}

/* Pillars (How we work): numbered blocks, heading left, text right */
.ve-page #bottom_content .ve-pillars {
	counter-reset: pillar;
}
.ve-page #bottom_content .ve-pillar {
	counter-increment: pillar;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 40px;
	padding: 40px 0;
	border-top: 1px solid #dde7ec;
}
.ve-page #bottom_content .ve-pillar:first-child {
	border-top: 0;
	padding-top: 0;
}
.ve-page #bottom_content .ve-pillar__head::before {
	content: "0" counter(pillar);
	display: block;
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	color: var(--ve-teal);
	margin-bottom: 12px;
}
.ve-page #bottom_content .ve-pillar__head h3 {
	font-size: 24px;
}
.ve-page #bottom_content .ve-pillar__body p:first-child {
	font-size: 19px;
	line-height: 1.55;
	color: var(--ve-navy);
	font-weight: 600;
}

/* Offer cards (How we work) */
.ve-page #bottom_content .ve-offers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-top: 8px;
}
.ve-page #bottom_content .ve-offer {
	background: #fff;
	border-top: 5px solid var(--ve-teal);
	border-radius: 6px;
	padding: 24px;
	box-shadow: 0 2px 12px rgba(1, 75, 110, 0.06);
}
.ve-page #bottom_content .ve-offer:nth-child(2) { border-top-color: var(--ve-blue); }
.ve-page #bottom_content .ve-offer:nth-child(3) { border-top-color: var(--ve-navy); }
.ve-page #bottom_content .ve-offer:nth-child(4) { border-top-color: var(--ve-yellow); }
.ve-page #bottom_content .ve-offer p {
	font-size: 15px;
	margin: 0;
}

/* Phone widths */
@media (max-width: 800px) {
	.ve-page #bottom_content .bottom_content_area {
		padding: 40px 16px;
	}
	.ve-page #bottom_content p.ve-lead {
		font-size: 19px;
	}
	.ve-page #bottom_content .ve-callout p {
		font-size: 20px;
	}
	.ve-page #bottom_content .ve-profile,
	.ve-page #bottom_content .ve-pillar,
	.ve-page #bottom_content .ve-keydates {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.ve-page #bottom_content .ve-profile__photo {
		max-width: 200px;
	}
}

/* ---------- Page design fixes ---------- */
/* vivli22 sets section padding with higher priority */
.ve-page #bottom_content .bottom_content_area {
	padding-top: 64px !important;
	padding-bottom: 64px !important;
}
/* Copy carries inline font-weight and colour on spans; let the design win */
.ve-page #bottom_content .ve-callout p span {
	font-weight: inherit !important;
}
.ve-page #bottom_content .ve-keydate span {
	display: block;
	color: #fff !important;
}
/* Offer cards: three per row, the last row stretches to fill */
.ve-page #bottom_content .ve-offers {
	display: flex;
	flex-wrap: wrap;
}
.ve-page #bottom_content .ve-offer {
	flex: 1 1 calc(33.333% - 20px);
	min-width: 240px;
}
@media (max-width: 800px) {
	.ve-page #bottom_content .bottom_content_area {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}
/* The editor drops plain spans, so key-date labels sit directly in the box */
.ve-page #bottom_content .ve-keydate {
	color: #fff !important;
	font-size: 15px;
	line-height: 1.4;
}
.ve-page #bottom_content .bottom_content_area {
	margin: 0 !important;
}

/* ---------- Our team: matching photo shape, spacing between cards ---------- */
.ve-page #bottom_content .ve-profile + .ve-profile {
	margin-top: 24px;
}
.ve-page #bottom_content .ve-profile__photo img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
}
.ve-page #bottom_content .ve-profile__body h3,
.ve-page #bottom_content .ve-profile__body p.ve-role {
	font-weight: 700 !important;
}

/* =========================================================
   Home page design
   ========================================================= */
body.ve-page {
	overflow-x: hidden;
}
.page-id-17280 .entry-content p {
	font-size: 16px;
	line-height: 1.7;
	color: #2b3d47;
}

/* Intro: full-width pale band under the hero */
.page-id-17280 .ve-intro {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 64px calc(50vw - 50%);
	background: var(--ve-light);
}
.page-id-17280 .ve-intro p {
	max-width: 820px;
}
.page-id-17280 .entry-content .ve-intro p.ve-lead {
	font-size: 22px;
	line-height: 1.5;
	color: var(--ve-navy);
	margin-bottom: 24px;
}
.page-id-17280 .ve-intro .ve-callout {
	border-left: 6px solid var(--ve-yellow);
	background: #fff;
	padding: 20px 28px;
	margin: 32px 0 0;
	max-width: 820px;
	box-shadow: 0 2px 12px rgba(1, 75, 110, 0.08);
}
.page-id-17280 .entry-content .ve-intro .ve-callout p {
	font-size: 22px;
	line-height: 1.4;
	color: var(--ve-navy);
	margin: 0;
}

/* Excerpts */
.page-id-17280 .ve-home-excerpts {
	padding: 64px 0 24px;
}
.page-id-17280 .ve-home-excerpts h2 {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
	font-size: 28px;
	color: var(--ve-navy);
}
.page-id-17280 .ve-home-excerpts h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 5px;
	background: var(--ve-yellow);
	margin-bottom: 14px;
}
.page-id-17280 .ve-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 56px;
}
.page-id-17280 .ve-tile {
	background: #fff;
	border-radius: 8px;
	padding: 32px;
	box-shadow: 0 2px 16px rgba(1, 75, 110, 0.08);
	display: flex;
	flex-direction: column;
}
.page-id-17280 .ve-tile .ve-more {
	margin-top: auto;
	margin-bottom: 0;
}
.page-id-17280 .ve-home-how {
	margin-bottom: 56px;
}
.page-id-17280 .ve-home-how .ve-card h3 {
	font-size: 18px;
}
.page-id-17280 .ve-tile--news {
	background: var(--ve-light);
	box-shadow: none;
	border: 2px dashed #c9d8e0;
}

/* "Read more" links with an arrow */
.ve-page .ve-more a {
	font-weight: 700;
	color: var(--ve-teal) !important;
	text-decoration: none !important;
}
.ve-page .ve-more a::after {
	content: " \2192";
}
.ve-page .ve-more a:hover {
	color: var(--ve-navy) !important;
}

/* Home: Get involved section becomes a navy call-to-action band */
.page-id-17280 #bottom_content .bottom_content_area {
	background: var(--ve-navy) !important;
}
.page-id-17280 #bottom_content .bottom_content_area h2,
.page-id-17280 #bottom_content .bottom_content_area p,
.page-id-17280 #bottom_content .bottom_content_area span {
	color: #fff !important;
}
.page-id-17280 #bottom_content .bottom_content_area h2::before {
	background: var(--ve-yellow);
}
.page-id-17280 #bottom_content .ve-btn:not(.ve-btn--outline) {
	background: var(--ve-yellow);
	color: var(--ve-navy) !important;
}
.page-id-17280 #bottom_content .ve-btn--outline {
	border-color: #fff;
	color: #fff !important;
}
.page-id-17280 #bottom_content .ve-btn--outline:hover {
	background: #fff;
	color: var(--ve-navy) !important;
}

/* Get involved page: content sits in a panel */
.ve-page #bottom_content .ve-cta-panel {
	background: #fff;
	border-top: 6px solid var(--ve-yellow);
	border-radius: 8px;
	padding: 40px;
	max-width: 900px;
	box-shadow: 0 2px 16px rgba(1, 75, 110, 0.08);
}
.page-id-17285 #bottom_content .bottom_content_area {
	background: var(--ve-light);
}

@media (max-width: 800px) {
	.page-id-17280 .ve-tiles {
		grid-template-columns: 1fr;
	}
	.page-id-17280 .ve-intro {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.page-id-17280 .entry-content .ve-intro p.ve-lead {
		font-size: 19px;
	}
	.ve-page #bottom_content .ve-cta-panel,
	.page-id-17280 .ve-tile {
		padding: 24px;
	}
}
.ve-page .ve-card h3,
.ve-page .ve-tile h2 {
	font-weight: 700 !important;
}

/* ---------- Header: utility link icons ---------- */
.ve-utility {
	font-size: 14px;
}
.ve-utility a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color 0.15s ease;
}
.ve-utility a:hover,
.ve-utility a:focus-visible {
	color: var(--ve-blue);
	text-decoration: none;
}
/* Official LinkedIn In-Bug from brand.linkedin.com. Shown unaltered at the 21px minimum. */
.ve-utility .ve-icon-linkedin > a::before {
	content: "";
	flex: none;
	width: 25px;
	height: 21px;
	background: url("images/linkedin.png") center / contain no-repeat;
}
/* Envelope icon, drawn in the link colour so it follows the hover state. */
.ve-utility .ve-icon-contact > a::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Footer: LinkedIn and Contact links, right side ---------- */
#footer #subsidiary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
#footer .ve-utility--footer {
	margin-left: auto;
	padding: 0;
	text-align: right;
}
#footer .ve-utility--footer a {
	color: #c3e7ff;
}
#footer .ve-utility--footer a:hover,
#footer .ve-utility--footer a:focus-visible {
	color: #ffffff;
}
/* Official white In-Bug for dark backgrounds, shown unaltered at the 21px minimum. */
#footer .ve-utility--footer .ve-icon-linkedin > a::before {
	background-image: url("images/linkedin-white.png");
}
@media screen and (max-width: 800px) {
	#footer #subsidiary {
		flex-direction: column;
		gap: 12px;
	}
	#footer .ve-utility--footer {
		margin-left: 0;
		text-align: center;
	}
}

/* ---------- Main menu: no current-page triangle under the Get Involved button ----------
 * vivli22 marks the current section with a triangle under its menu item. That
 * works for text links but collides with the filled button, so hide it there only.
 */
html body #access #menu-main-nav.sf-menu > li.menu-button.current-menu-item,
html body #access #menu-main-nav.sf-menu > li.menu-button.current_page_parent {
	background-image: none;
}

/* ---------- Main menu: Get Involved button hover ----------
 * Matches the homepage Contact Vivli Europe button (Customizer CSS): the
 * button lifts 2px and gains a soft shadow, and keeps its yellow.
 * vivli22 has two hover triggers that make menu links transparent: a .hover
 * class added by custom.js, and a:hover. Both are covered, plus keyboard focus.
 */
html body #access #menu-main-nav.sf-menu > li.menu-button > a {
	transition: transform 0.2s, box-shadow 0.2s;
}
html body #access #menu-main-nav.sf-menu > li.menu-button > a:hover,
html body #access #menu-main-nav.sf-menu > li.menu-button > a:focus-visible,
html body #access #menu-main-nav.sf-menu > li.menu-button.hover > a {
	background: var(--ve-yellow);
	color: var(--ve-navy) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}