/*
 * Theme styles on top of legacy.css (the rules the old site actually used).
 * These replace the inline styles and JS-driven sizes WPBakery/Ultimate used to print.
 */

/* Hero background: video or image behind the full-height row */
.wg-hero { position: relative; overflow: hidden; }
.wg-hero > .container { position: relative; z-index: 1; }
.wg-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-color: #d9dde3;
	background-size: cover;
	background-position: 50% 50%;
	pointer-events: none;
}
.wg-hero-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
}

/* Slanted box with typed words */
.wg-hero .ultimate-typewriter-prefix,
.wg-hero .ultimate-typed-main { color: #ec7c32; text-transform: unset; }

/* Subtitle under the box */
.wg-hero-subtitle { text-align: center; }
.wg-hero-subtitle .uvc-sub-heading { font-weight: normal; color: #fff; margin-bottom: 30px; font-size: 20px; line-height: 30px; }
.wg-hero-subtitle .uvc-sub-heading span { font-weight: normal; color: #ec7c32; font-size: 34px; }

/* Heading in the box on inner pages */
.wg-hero-heading { text-align: center; }
.wg-hero-heading h2 { font-weight: normal; color: #ec7c32; margin-bottom: 20px !important; }
.wg-hero-heading ~ .wpb_single_image { padding-top: 20px; }

/* CTA button: 20px spacer above it, like the old ult-spacer */
.wg-hero-cta { padding-top: 20px; }
.wg-hero-cta .ubtn,
.wg-hero-cta .ubtn:hover,
.wg-hero-cta .ubtn:focus,
.wg-hero-cta .ubtn:active,
.wg-hero-cta .ubtn:visited {
	font-family: 'Rubik';
	font-weight: 500;
	font-size: 14px;
	width: 180px;
	min-height: 40px;
	border-radius: 3px;
	border: 0;
	background: #ec7c32;
	color: #fff;
	cursor: pointer;
}

/* Section headings */
.wg-section-heading { text-align: center; margin: 20px 0; }
.wg-section-heading h1,
.wg-section-heading h2 { font-weight: normal; color: #ec7c32; }
.h4tall h3 { font-weight: normal; }

/* Back to top: hidden until the page is scrolled */
.sd-back-top-wrap { transition: bottom 0.3s; }
.sd-back-top-wrap.sd-backtop-show { bottom: 0; }

/* Off-canvas menu works like Bootstrap's offcanvas: the panel slides in over the page with a
   backdrop; the page itself does not move (the old theme pushed it 100px to the right). */
.sd-off-canvas-menu-wrap {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 300px;
	max-width: 85vw;
	height: auto;
	overflow-y: auto;
	background: #fff !important;
	box-shadow: none !important;
	transform: translateX(-100%) !important;
	visibility: hidden;
	transition: transform 0.3s ease-in-out, visibility 0.3s;
	z-index: 1045;
}
.sd-show-menu .sd-off-canvas-menu-wrap {
	transform: none !important;
	visibility: visible;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) !important;
}
.sd-show-menu .sd-off-canvas-content-wrap { transform: none !important; }
.sd-content-wrap-content::before { display: none !important; }
body.sd-show-menu { overflow: hidden; }
.wg-backdrop {
	position: fixed;
	inset: 0;
	background: #000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	z-index: 1040;
}
.sd-show-menu .wg-backdrop { opacity: 0.5; visibility: visible; }

/* Hero starts right under the header (no 15px gap); JS sets the exact viewport height */
main > section { padding-top: 0 !important; }
.wg-hero.vc_row-o-full-height { min-height: calc(100vh - 101px); }

/* Video fades in once it plays, so the poster is shown while Vimeo loads or loops */
.wg-hero-video { opacity: 0; transition: opacity 0.6s; }
.wg-hero-video.is-playing { opacity: 1; }

/* Column headings are left-aligned (inline style on the old site) */
.h4tall { text-align: left; }
/* 20px spacers the old ult-spacer elements added between blocks */
.wg-intro { margin-bottom: 0 !important; padding-bottom: 20px; }
.wg-cols { margin-top: 20px; }
.wg-bottom-sep { padding-top: 1px; }
/* The orange line above the footer is hidden (client's choice); its space is kept so the gap to the footer stays as on prod. */
.wg-bottom-sep .vc_separator { visibility: hidden; }
/* On mobile the old CH home and both job boards used 10px spacers; the EN home kept 20px. */
@media (max-width: 767px) {
	.lang-ch .wg-home .wg-intro { padding-bottom: 10px; }
	.lang-ch .wg-cols,
	.wg-job-board .wg-cols { margin-top: 10px; }
}

/* Team photos scale with the column */
.ult-team-member-image img { width: 100%; height: auto; }

/* Phones: no background video where the old site disabled it */
@media (max-width: 767px) {
	.wg-hero-video.wg-no-mobile { display: none; }
}

/* Icon font of the old Ultimate Addons plugin (LinkedIn icon on team cards; glyph rule is in legacy.css) */
@font-face {
	font-family: 'Defaults';
	src: url("../legacy/uploads/smile_fonts/Defaults/Defaults.woff") format("woff"), url("../legacy/uploads/smile_fonts/Defaults/Defaults.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

/* Phones: logo and burger on one line, smaller logo, no gap under the fixed header */
@media (max-width: 767px) {
	#sd-header .sd-logo-menu-content { display: flex; align-items: center; justify-content: space-between; height: 64px; }
	#sd-header .sd-logo { margin: 0 !important; padding: 0 !important; width: auto; text-align: left; }
	#sd-header .sd-logo img { height: 32px; width: auto; display: block; }
	#sd-header .h-menu-icon { float: none; width: auto; height: auto; }
	#sd-header .h-menu-icon,
	#sd-header .menu-rt { display: flex; align-items: center; }
	#sd-header .sd-open-button { margin: 0 !important; width: 40px; height: 32px; font-size: 0; }
	#sd-header .sd-open-button::before { inset: 3px 0; width: auto; }
	main { margin-top: 65px !important; }
}

/* Language switcher hover: brand orange instead of the theme's blue */
.switch-lang a:hover { color: #ec7c32; }

/* Every link turns brand orange on hover; the old theme left the menu (and its current item) on royal blue */
a:not(.ubtn):not(.ubtn-link):hover,
a:not(.ubtn):not(.ubtn-link):focus,
a:not(.ubtn):not(.ubtn-link):hover i,
a:not(.ubtn):not(.ubtn-link):hover span,
#sd-sidebar-menu > ul > li > a:hover,
#sd-sidebar-menu > ul > li > a:hover span,
#sd-sidebar-menu > ul > li.active > a,
#sd-sidebar-menu > ul > li.current-menu-item > a,
.ult-team-member-wrap .ult-social-icon:hover,
.ult-team-member-wrap .ult-social-icon:hover i { color: #ec7c32 !important; }

/* Team bio overlay: centred text as on the old site, with side padding so lines do not touch the photo edges */
.ult-style-3 .ult-team-member-description { text-align: center; padding: 0 25px; }
/* Members without a bio keep their photo on hover (no white veil over an empty box) */
.ult-style-3.wg-no-bio:hover .ult-team-member-image img { opacity: 1; }

/* 404 page: language home's hero image with the message in the slanted box */
.wg-404 .slanted-div { padding-bottom: 30px; }
.wg-404-code { display: block; font-size: 72px; line-height: 1; font-weight: 700; color: #ec7c32; }
.wg-404 .wg-404-title { margin: 10px 0 15px; font-size: 30px; line-height: 1.3; font-weight: 400; color: #ec7c32; }
.wg-404-text { margin: 0; font-size: 16px; line-height: 1.6; color: #303030; }
@media (max-width: 767px) {
	.wg-404-code { font-size: 56px; }
	.wg-404 .wg-404-title { font-size: 24px; }
}

/* Admin bar (administrators only): keep the fixed header and off-canvas menu below it */
.admin-bar #sd-header,
.admin-bar .sd-off-canvas-menu-wrap { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar #sd-header,
	.admin-bar .sd-off-canvas-menu-wrap { top: 46px; }
}