/*
  Micro Mainframe (MMC) – site styles
  ---------------------------------------------------------------------------
  Single source of truth for all custom CSS. Customizer → Additional CSS and
  Uncode → Theme Options → Custom CSS are intentionally empty.

  Loaded after every Uncode stylesheet (see inc/enqueue.php), so selectors here
  only need to match Uncode's specificity, not beat it with !important.

  Colours mirror the Uncode palette (Theme Options → Colors). If a palette
  colour changes there, change it here too.
*/

:root {
	--mmc-orange: #edb841; /* Uncode "MMC Orange" (color-xsdn) */
	--mmc-black:  #2f2f2f; /* Uncode "MMC Black"  (color-jevc) */
	--mmc-cream:  #f0eee7; /* Uncode "MMC Cream"  (color-nhtu) */
	--mmc-blue:   #387dfd; /* Uncode "MMC Blue"   (color-wayh) */
	--mmc-white:  #ffffff; /* Uncode "MMC White"  (color-wvjs) */
	--mmc-ink:    #000000;
	--mmc-dropdown-bg: #303030;
}

/* -------------------------------------------------------------------------
   1. Global
   ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

/* -------------------------------------------------------------------------
   2. Header – "Ping Us" CTA pill
   The menu item carries the class `contact-cta` (Appearance → Menus → CSS Classes).
   ---------------------------------------------------------------------- */

#masthead .menu-smart > li.contact-cta {
	margin-left: 18px;
}

/* !important: Uncode's generated style-custom.css sets menu link colour and
   padding with !important (.style-dark-override, .navbar-nav-last). */
#masthead .menu-smart > li.contact-cta > a {
	display: inline-block;
	height: 34px !important;
	line-height: 34px !important;
	padding: 0 20px !important;
	border-radius: 999px;
	background: var(--mmc-orange);
	color: var(--mmc-ink) !important;
}

#masthead .menu-smart > li.contact-cta .fa-dropdown {
	display: none;
}

/* -------------------------------------------------------------------------
   3. Header – Services dropdown
   ---------------------------------------------------------------------- */

#masthead .drop-menu {
	background-color: var(--mmc-dropdown-bg);
}

#masthead .menu-smart > li > ul.drop-menu {
	width: 300px;
	min-width: 300px;
	max-width: 300px;
	overflow: hidden;
}

/* Rounded on all corners at the top of the page… */
#masthead:not(.is_stuck) .menu-smart > li > ul.drop-menu {
	border-radius: 20px;
	margin-top: -22px;
}

/* …and only at the bottom once the header is stuck. */
#masthead.is_stuck .menu-smart > li > ul.drop-menu {
	border-radius: 0 0 20px 20px;
}

#masthead .menu-smart ul.drop-menu > li {
	width: auto;
	min-width: 0;
}

#masthead .menu-smart ul.drop-menu > li > a {
	padding-right: 20px;
	white-space: nowrap;
	transform: translateX(12px);
}

/* No per-item hover background inside the dropdown. */
#masthead .drop-menu > li,
#masthead .drop-menu > li > a,
#masthead .drop-menu > li:hover,
#masthead .drop-menu > li:hover > a,
#masthead .drop-menu > li > a:hover,
#masthead .drop-menu > li::before,
#masthead .drop-menu > li::after,
#masthead .drop-menu > li > a::before,
#masthead .drop-menu > li > a::after {
	background: transparent;
	box-shadow: none;
}

/* Mobile menu: the "Services" label links to the page (inc/menus.php) and the
   caret alone opens the sub-menu (assets/js/mmc.js). Uncode only lets the
   label's <span> take clicks (.unmenu-title is pointer-events: none), so the
   caret needs them turned on; padding gives it a 44px tap target without
   moving the icon. */
#uncode-mobile-menu-block .unmenu-title .collapsible-icon-wrapper {
	pointer-events: auto;
	cursor: pointer;
	padding: 7px 8px;
	margin: -7px -8px -7px auto; /* auto: Uncode pins the caret to the right */
	box-sizing: content-box;
}

/* -------------------------------------------------------------------------
   4. Buttons
   ---------------------------------------------------------------------- */

/* Circle arrow buttons: optically centre the icon. */
.mmc-circle-btn .btn-icon-out {
	position: relative;
	left: 6.8px;
}

/* -------------------------------------------------------------------------
   5. Counters
   ---------------------------------------------------------------------- */

.uncode-counter-wrap .counter-text p {
	font-size: 24px;
	line-height: 0.01;
	color: var(--mmc-white);
}

/* Gap between the number and its suffix (e.g. "40 +"). */
.counter-spaced .counter-suffix {
	margin-left: 0.15em;
}

/* -------------------------------------------------------------------------
   6. Content helpers
   ---------------------------------------------------------------------- */

.service-intro {
	display: block;
	width: 100%;
	max-width: 550px;
}

/* -------------------------------------------------------------------------
   7. Forms (Contact Form 7)
   ---------------------------------------------------------------------- */

.wpcf7 input.wpcf7-submit,
.wpcf7 input.wpcf7-submit:hover,
.wpcf7 input.wpcf7-submit:focus,
.wpcf7 input.wpcf7-submit:active {
	/* !important: Uncode's generated .btn-default rules use !important. */
	background-color: var(--mmc-orange) !important;
	border-color: var(--mmc-orange) !important;
	color: var(--mmc-ink) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
}

/* -------------------------------------------------------------------------
   8. Footer
   ---------------------------------------------------------------------- */

/* Footer links are cream by default and darken on hover. */
.dark-color a:hover,
.dark-color a:focus {
	color: var(--mmc-black);
}

.phone-footer-link {
	margin-top: -22px !important; /* overrides the column's own spacing */
}

/* -------------------------------------------------------------------------
   9. Pie chart – "client tenure" (Our Services)
   ---------------------------------------------------------------------- */

.pie-chart .vc_pie_chart_value {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 160px;
	height: 160px;
	font-size: clamp(36px, 4vw, 60px);
	font-weight: 400;
	line-height: 1 !important; /* WPBakery sets line-height inline */
}

.pie-chart .vc_pie_chart_value::after {
	content: "Years";
	display: block;
	margin-top: 6px;
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 400;
	line-height: 0.5;
}

/* -------------------------------------------------------------------------
   10. Page: About – white logo over the hero
   Body class comes from inc/body-classes.php.
   ---------------------------------------------------------------------- */

/* !important: Uncode toggles the two logo images with inline styles. */
.mmc-page-about #main-logo .logo-light {
	display: block !important;
}

.mmc-page-about #main-logo .logo-dark {
	display: none !important;
}

/* -------------------------------------------------------------------------
   11. Element: MMC Video Hero ([mmc_video_hero], templates/video-hero.php)
   Two layered videos (gradient loop + shape), headline, subhead and CTA.
   !important on font sizes overrides Uncode's heading size presets.
   ---------------------------------------------------------------------- */

.mmc-video-hero {
	position: relative;
	aspect-ratio: 16 / 9;
	/* Poster (inc/elements.php mmc_poster_style): seen until the gradient
	   video draws its first frame, or for good if the phone blocks video. */
	background: var(--mmc-poster-desktop, none) center / cover no-repeat;
}

.mmc-video-hero__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mmc-video-hero__title {
	position: absolute;
	top: 18%;
	left: 5%;
	font-size: 6.5vw !important;
}

.mmc-video-hero__subtitle {
	font-size: 2vw !important;
	margin-bottom: 1em;
}

.mmc-video-hero__content {
	position: absolute;
	top: 64%;
	right: 5%;
	width: 31%;
}

.mmc-video-hero__button a[id$="__button"] {
	width: 10em;
	white-space: nowrap;
}

@media (max-width: 959px) {
	.mmc-video-hero {
		aspect-ratio: 9 / 16;
		background-image: var(--mmc-poster-mobile, none);
	}

	.mmc-video-hero__title {
		top: unset;
		bottom: 31%;
		left: 5%;
		font-size: 9.5vw !important;
	}

	.mmc-video-hero__subtitle {
		font-size: 6vw !important;
	}

	.mmc-video-hero__content {
		top: 73%;
		right: 5%;
		width: 90%;
	}
}

/* -------------------------------------------------------------------------
   12. Element: MMC Video Infographic ([mmc_video_stats], templates/video-stats.php)
   One video (mobile/desktop sources) with three counters positioned over it.
   The video plays and the counters fade in when the section scrolls into
   view (assets/js/mmc.js adds .counters-visible).
   ---------------------------------------------------------------------- */

.mmc-video-stats {
	position: relative;
	aspect-ratio: 16 / 9;
}

.mmc-video-stats__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 2.5%;
}

.mmc-video-stats .uncode-counter-wrap {
	opacity: 0;
}

.mmc-video-stats.counters-visible .uncode-counter-wrap {
	animation: mmcStatsFadeIn 0.75s ease forwards;
}

@keyframes mmcStatsFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.mmc-video-stats.counters-visible .counter-left   { animation-delay: 0.75s; }
.mmc-video-stats.counters-visible .counter-bottom { animation-delay: 1.2s; }
.mmc-video-stats.counters-visible .counter-right  { animation-delay: 1.5s; }

/* Counter positions over the video */
.mmc-video-stats .counter-left {
	position: absolute;
	top: 36%;
	left: 5%;
}

.mmc-video-stats .counter-left .counter-text {
	margin-top: 3.5vw;
}

.mmc-video-stats .counter-bottom {
	position: absolute;
	top: 71%;
	left: 41%;
}

.mmc-video-stats .counter-bottom .counter-text {
	margin-top: 3.5vw;
}

.mmc-video-stats .counter-right {
	position: absolute;
	top: 12%;
	left: 73%;
}

.mmc-video-stats .counter-right .counter-text {
	margin-top: 17vw;
}

/* !important overrides Uncode's heading size presets and paragraph spacing. */
.mmc-video-stats .uncode-counter-wrap > p {
	font-size: 5vw !important;
	margin: 0 0 0.3em !important;
	line-height: 1 !important;
}

.mmc-video-stats .counter-text p {
	font-size: 1.5vw !important;
}

@media (max-width: 959px) {
	.mmc-video-stats {
		aspect-ratio: 9 / 16;
	}

	.mmc-video-stats__video {
		mix-blend-mode: multiply;
	}

	.mmc-video-stats .uncode-counter-wrap > p {
		font-size: 12vw !important;
	}

	.mmc-video-stats .counter-left {
		top: 9%;
		left: 6%;
	}

	.mmc-video-stats .counter-left .counter-text {
		margin-top: 26vw;
	}

	.mmc-video-stats .counter-bottom {
		top: 38%;
		left: 57%;
	}

	.mmc-video-stats .counter-bottom .counter-text {
		margin-top: 10vw;
	}

	.mmc-video-stats .counter-text p {
		font-size: 4vw !important;
	}

	.mmc-video-stats .counter-right {
		top: 58%;
		left: 6%;
	}

	.mmc-video-stats .counter-right > p {
		max-width: 3em;
	}

	.mmc-video-stats .counter-right .counter-text {
		margin-top: 30vw;
	}

	.mmc-video-stats .counter-right .counter-suffix {
		display: block;
		margin-top: -0.2em;
	}
}

/* -------------------------------------------------------------------------
   13. WPBakery front-end editor only
   Pages use Uncode's "first row" header type: on the live page the menu is
   transparent over the hero. The editor cannot lift the first row into the
   header, so Uncode falls back to the opaque menu skin, which hides the top
   of the hero while editing. Restore the transparent look there. These rules
   never apply to the live site (body.vc_editor.compose-mode is editor-only).
   ---------------------------------------------------------------------- */

body.vc_editor.compose-mode #masthead,
body.vc_editor.compose-mode #masthead .menu-container {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* Uncode's script reserves the menu height above the content in the editor
   (inline height on .menu-wrapper). On the live page that space is 0 because
   the menu floats over the first row; match it so the hero sits where it will. */
body.vc_editor.compose-mode .menu-wrapper {
	height: 0 !important;
}

/* The floating menu would otherwise catch every hover and click in the top
   band of the first row, where WPBakery draws an element's controls. Let the
   mouse pass through it while editing (the menu is not usable in the editor
   anyway). */
body.vc_editor.compose-mode .menu-wrapper,
body.vc_editor.compose-mode #masthead {
	pointer-events: none !important;
}




/* Privacy page: fix Uncode "light" style text on the light background */
.page-id-185145 .style-light h1,
.page-id-185145 .style-light h2,
.page-id-185145 .style-light h3,
.page-id-185145 .style-light h4,
.page-id-185145 .style-light h5,
.page-id-185145 .style-light h6,
.page-id-185145 .style-light p b,
.page-id-185145 .style-light p strong,
.page-id-185145 .style-light .headings-color {
  color: #2f2f2f;
}

.page-id-185145 .style-light p b,
.page-id-185145 .style-light p strong {
  font-weight: 600;
}

/* Paragraph rhythm in text blocks */
.page-id-185145 .uncode_text_column p {
  margin-bottom: 1em;
}

/* Bold-only paragraphs act as section labels */
.page-id-185145 .uncode_text_column p:has(> b:only-child),
.page-id-185145 .uncode_text_column p:has(> strong:only-child) {
  margin-top: 2em;
  margin-bottom: 0.5em;
  font-size: 1.15em;
}