/*!
 * MDBC Brand Layer — decorative patterns, motion and accessibility helpers
 * MarketDirect Business Communications
 *
 * Every rule is scoped to body.mdbc-site (added by the plugin) and to
 * classes that start with "mdbc-". Nothing here styles text, images or
 * buttons directly — those are styled in Elementor so they stay editable.
 *
 * Classes you can type into Elementor → Advanced → CSS Classes:
 *   mdbc-dots            brand dot field (top-left by default)
 *   mdbc-dots--tr        …top-right      mdbc-dots--br  …bottom-right
 *   mdbc-dots--bl        …bottom-left    mdbc-dots--lg  larger field
 *   mdbc-dots--on-dark   lighter dots for petrol backgrounds
 *   mdbc-dots--frame     dot field sits behind the corner of an image
 *   mdbc-diagonal        pale diagonal plane rising to the right (card front)
 *   mdbc-diagonal--on-dark   deeper petrol plane for petrol sections
 *   mdbc-reveal          fade/slide in when scrolled into view
 *   mdbc-stagger         reveal the widgets inside one after another
 *   mdbc-card            gentle image zoom on hover (pointer devices only)
 */

/* ------------------------------------------------------------------ */
/* 1. Design tokens (mirror Elementor → Site Settings → Global Colors) */
/* ------------------------------------------------------------------ */
body.mdbc-site {
	/* Linked to Elementor → Site Settings → Global Colors, so changing a global
	   colour there also recolours the dots, planes and focus rings. */
	--mdbc-petrol: var(--e-global-color-primary, #1C5261);        /* card CMYK 90/57/47/27 on screen */
	--mdbc-petrol-deep: var(--e-global-color-accent, #163F4B);    /* planes and hover on petrol */
	--mdbc-pale: var(--e-global-color-secondary, #D2DDE0);        /* card tint: petrol at 20% on white */
	--mdbc-mist: var(--e-global-color-mdbcmist, #EEF3F4);         /* quiet section background */
	--mdbc-white: var(--e-global-color-mdbcwhite, #FFFFFF);
	--mdbc-ink: var(--e-global-color-mdbcink, #15262D);           /* headings */
	--mdbc-slate: var(--e-global-color-text, #4B5F66);            /* body text (5.9:1 on white) */
	--mdbc-focus: var(--mdbc-petrol);

	--mdbc-ease: cubic-bezier(.2, .7, .2, 1);
	--mdbc-dur: 600ms;
	--mdbc-dur-fast: 300ms;

	/* dot field geometry, proportional to the business card */
	--mdbc-dot: 12px;             /* dot diameter            */
	--mdbc-pitch-x: 36px;         /* horizontal distance     */
	--mdbc-pitch-y: 30px;         /* vertical distance       */
	--mdbc-cols: 10;
	--mdbc-rows: 7;
	--mdbc-dots-color: var(--mdbc-pale);
	--mdbc-dots-inset: 0px;
}

/* ------------------------------------------------------------------ */
/* 2. Dot field                                                        */
/* ------------------------------------------------------------------ */
body.mdbc-decor-on .mdbc-dots {
	position: relative;
	isolation: isolate;           /* keeps the dots behind this container's content */
}

body.mdbc-decor-on .mdbc-dots::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	width: calc(var(--mdbc-cols) * var(--mdbc-pitch-x));
	height: calc(var(--mdbc-rows) * var(--mdbc-pitch-y));
	top: var(--mdbc-dots-inset);
	left: var(--mdbc-dots-inset);
	background-image: radial-gradient(circle at center, var(--mdbc-dots-color) 0 calc(var(--mdbc-dot) / 2), transparent calc(var(--mdbc-dot) / 2 + .75px));
	background-size: var(--mdbc-pitch-x) var(--mdbc-pitch-y);
	/* the card's dot field is cut by a large circle centred near the top edge */
	clip-path: circle(68% at var(--mdbc-dots-at, 40% 5%));
	transform: translate3d(var(--mdbc-px, 0px), var(--mdbc-py, 0px), 0);
}

body.mdbc-decor-on .mdbc-dots--tr::after { left: auto; right: var(--mdbc-dots-inset); --mdbc-dots-at: 60% 5%; }
body.mdbc-decor-on .mdbc-dots--bl::after { top: auto; bottom: var(--mdbc-dots-inset); --mdbc-dots-at: 40% 95%; }
body.mdbc-decor-on .mdbc-dots--br::after { top: auto; left: auto; bottom: var(--mdbc-dots-inset); right: var(--mdbc-dots-inset); --mdbc-dots-at: 60% 95%; }

body.mdbc-decor-on .mdbc-dots--lg { --mdbc-cols: 13; --mdbc-rows: 9; }
body.mdbc-decor-on .mdbc-dots--inset { --mdbc-dots-inset: 40px; }
body.mdbc-decor-on .mdbc-dots--sm { --mdbc-cols: 7; --mdbc-rows: 5; }
body.mdbc-decor-on .mdbc-dots--on-dark { --mdbc-dots-color: rgba(255, 255, 255, .16); }

/* Behind an image: the field peeks out from the image corner */
body.mdbc-decor-on .mdbc-dots--frame { --mdbc-dots-inset: -40px; }

@media (max-width: 1024px) {
	body.mdbc-site { --mdbc-dot: 10px; --mdbc-pitch-x: 30px; --mdbc-pitch-y: 25px; }
	body.mdbc-decor-on .mdbc-dots--frame { --mdbc-dots-inset: -28px; }
}
@media (max-width: 1024px) {
	/* keep text clear of the pattern on tablets and phones */
	body.mdbc-decor-on .mdbc-dots--hide-small::after { display: none; }
}
@media (max-width: 767px) {
	body.mdbc-site { --mdbc-dot: 8px; --mdbc-pitch-x: 24px; --mdbc-pitch-y: 20px; }
	body.mdbc-decor-on .mdbc-dots--lg { --mdbc-cols: 10; --mdbc-rows: 7; }
	/* small offset so the field never reaches past the section padding */
	body.mdbc-decor-on .mdbc-dots--frame { --mdbc-dots-inset: -16px; }
}

/* ------------------------------------------------------------------ */
/* 3. Diagonal planes (card front)                                     */
/* ------------------------------------------------------------------ */
body.mdbc-decor-on .mdbc-diagonal {
	--mdbc-plane: var(--mdbc-pale);
	--mdbc-plane-start: 62%;
	background-image: linear-gradient(157deg, transparent calc(var(--mdbc-plane-start) - .5px), var(--mdbc-plane) var(--mdbc-plane-start));
}
body.mdbc-decor-on .mdbc-diagonal--soft { --mdbc-plane: var(--mdbc-mist); }
body.mdbc-decor-on .mdbc-diagonal--on-dark { --mdbc-plane: var(--mdbc-petrol-deep); --mdbc-plane-start: 58%; }
body.mdbc-decor-on .mdbc-diagonal--low { --mdbc-plane-start: 74%; }
body.mdbc-decor-on .mdbc-diagonal--lift { --mdbc-plane: var(--mdbc-petrol); --mdbc-plane-start: 50%; }
body.mdbc-decor-on .mdbc-diagonal--high { --mdbc-plane-start: 50%; }

/* ------------------------------------------------------------------ */
/* 4. Motion — progressive enhancement only                            */
/*    Hidden states apply ONLY when <html> has .mdbc-motion, which the */
/*    plugin adds when JavaScript runs, outside the Elementor editor,  */
/*    and only if the visitor has not asked for reduced motion.        */
/* ------------------------------------------------------------------ */
html.mdbc-motion body.mdbc-site .mdbc-reveal,
html.mdbc-motion body.mdbc-site .mdbc-stagger > .elementor-element,
html.mdbc-motion body.mdbc-site .mdbc-stagger > .e-con-inner > .elementor-element {
	transition:
		opacity var(--mdbc-dur) var(--mdbc-ease) var(--mdbc-delay, 0ms),
		transform var(--mdbc-dur) var(--mdbc-ease) var(--mdbc-delay, 0ms);
}

html.mdbc-motion body.mdbc-site .mdbc-reveal:not(.mdbc-in),
html.mdbc-motion body.mdbc-site .mdbc-stagger:not(.mdbc-in) > .elementor-element,
html.mdbc-motion body.mdbc-site .mdbc-stagger:not(.mdbc-in) > .e-con-inner > .elementor-element {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
}

/* dot field blooms open from its centre point, once */
html.mdbc-motion body.mdbc-decor-on .mdbc-dots::after {
	transition: clip-path 700ms var(--mdbc-ease), transform var(--mdbc-dur) ease-out;
}
html.mdbc-motion body.mdbc-decor-on .mdbc-dots:not(.mdbc-dots-in)::after {
	clip-path: circle(0% at var(--mdbc-dots-at, 40% 5%));
}

/* hover — pointer devices only, never required to read anything */
@media (hover: hover) and (pointer: fine) {
	body.mdbc-site .mdbc-card .elementor-widget-image {
		overflow: hidden;
	}
	body.mdbc-site .mdbc-card .elementor-widget-image img {
		transition: transform 500ms var(--mdbc-ease);
	}
	body.mdbc-site .mdbc-card:hover .elementor-widget-image img,
	body.mdbc-site .mdbc-card:focus-within .elementor-widget-image img {
		transform: scale(1.03);
	}
	body.mdbc-site .elementor-button {
		transition: transform var(--mdbc-dur-fast) var(--mdbc-ease), background-color var(--mdbc-dur-fast) ease, color var(--mdbc-dur-fast) ease, border-color var(--mdbc-dur-fast) ease;
	}
	body.mdbc-site .elementor-button:hover {
		transform: translate3d(0, -2px, 0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	html:has(body.mdbc-site) {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.mdbc-site *,
	body.mdbc-site *::before,
	body.mdbc-site *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
	body.mdbc-site .elementor-button:hover,
	body.mdbc-site .mdbc-card:hover .elementor-widget-image img {
		transform: none !important;
	}
}

/* Elementor editor: always show everything, never animate */
body.elementor-editor-active .mdbc-reveal,
body.elementor-editor-active .mdbc-stagger .elementor-element {
	opacity: 1 !important;
	transform: none !important;
}

/* ------------------------------------------------------------------ */
/* 5. Accessibility helpers                                            */
/* ------------------------------------------------------------------ */
body.mdbc-site a:focus-visible,
body.mdbc-site button:focus-visible,
body.mdbc-site .elementor-button:focus-visible,
body.mdbc-site input:focus-visible,
body.mdbc-site textarea:focus-visible,
body.mdbc-site select:focus-visible {
	outline: 3px solid var(--mdbc-focus);
	outline-offset: 3px;
}

/* on petrol sections the focus ring turns white */
body.mdbc-site .mdbc-on-dark a:focus-visible,
body.mdbc-site .mdbc-on-dark .elementor-button:focus-visible,
body.mdbc-site .mdbc-dots--on-dark a:focus-visible,
body.mdbc-site .mdbc-dots--on-dark .elementor-button:focus-visible {
	outline-color: var(--mdbc-white);
}

/* tidy anchor jumps below a sticky header */
body.mdbc-site [id] {
	scroll-margin-top: 96px;
}

/* ------------------------------------------------------------------ */
/* 6. Hello theme header & footer polish                               */
/* ------------------------------------------------------------------ */
/* header stays in view while scrolling */
body.mdbc-site #site-header.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 var(--mdbc-mist);
	padding-block: 14px;
}
body.mdbc-site.admin-bar #site-header.site-header { top: 32px; }
@media (max-width: 782px) {
	body.mdbc-site.admin-bar #site-header.site-header { top: 46px; }
}
@media (max-width: 600px) {
	body.mdbc-site.admin-bar #site-header.site-header { top: 0; }
}
body.mdbc-site .site-header .site-logo img,
body.mdbc-site .site-footer .site-logo img {
	height: auto;
}
body.mdbc-site .site-header .site-navigation ul.menu > li > a {
	transition: color var(--mdbc-dur-fast) ease;
}
body.mdbc-site .site-header .site-navigation ul.menu > li > a:hover,
body.mdbc-site .site-header .site-navigation ul.menu > li.current-menu-item > a {
	color: var(--mdbc-petrol);
}
/* menu item with the CSS class "mdbc-menu-cta" (Appearance → Menus) becomes a button */
body.mdbc-site .site-header .site-navigation ul.menu > li.mdbc-menu-cta > a {
	background: var(--mdbc-petrol);
	color: var(--mdbc-white);
	padding: 12px 22px;
	margin-inline-start: 12px;
	transition: background-color var(--mdbc-dur-fast) ease;
}
body.mdbc-site .site-header .site-navigation ul.menu > li.mdbc-menu-cta > a:hover {
	background: var(--mdbc-petrol-deep);
	color: var(--mdbc-white);
}
body.mdbc-site .site-header .site-navigation-dropdown ul.menu li.mdbc-menu-cta > a {
	background: var(--mdbc-petrol);
	color: var(--mdbc-white);
}
body.mdbc-site .site-footer {
	padding-block: 48px 40px;
}
/* mobile dropdown: brand colours instead of the theme's grey */
body.mdbc-site .site-header .site-navigation-dropdown ul.menu li a {
	font-family: var(--e-global-typography-text-font-family, "Open Sans"), sans-serif;
	font-weight: 600;
	color: var(--mdbc-ink);
}
body.mdbc-site .site-header .site-navigation-dropdown ul.menu li.current-menu-item > a {
	background: var(--mdbc-mist);
	color: var(--mdbc-petrol);
}

/* ------------------------------------------------------------------ */
/* 9. Insights list — output of the [mdbc_insights] shortcode          */
/* ------------------------------------------------------------------ */
body.mdbc-site .mdbc-insights {
	width: 100%;
	font-family: var(--e-global-typography-text-font-family, "Open Sans"), sans-serif;
}
body.mdbc-site .mdbc-insights__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}
body.mdbc-site .mdbc-insights__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
body.mdbc-site .mdbc-insights--cards .mdbc-insights__item {
	background: var(--mdbc-white);
}
body.mdbc-site .mdbc-insights--compact .mdbc-insights__item {
	border-top: 3px solid var(--mdbc-petrol);
	padding-top: 22px;
}
body.mdbc-site .mdbc-insights__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--mdbc-pale);
}
body.mdbc-site .mdbc-insights__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* no featured image yet: a quiet brand dot field instead */
body.mdbc-site .mdbc-insights__noimage {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--mdbc-mist);
	background-image: radial-gradient(circle at center, var(--mdbc-pale) 0 6px, transparent 6.75px);
	background-size: 36px 30px;
	background-position: 18px 15px;
}
body.mdbc-site .mdbc-insights__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
body.mdbc-site .mdbc-insights--cards .mdbc-insights__body {
	padding: 24px 26px 28px;
}
body.mdbc-site .mdbc-insights__body > * {
	margin: 0;
}
body.mdbc-site .mdbc-insights__cat {
	font-family: var(--e-global-typography-mdbceyebrow-font-family, "Open Sans"), sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--mdbc-petrol);
	line-height: 1.4;
}
body.mdbc-site .mdbc-insights__title {
	font-family: var(--e-global-typography-secondary-font-family, "Open Sans"), sans-serif;
	font-size: var(--e-global-typography-secondary-font-size, 22px);
	font-weight: var(--e-global-typography-secondary-font-weight, 700);
	line-height: var(--e-global-typography-secondary-line-height, 1.3);
	color: var(--mdbc-ink);
}
body.mdbc-site .mdbc-insights__title a {
	color: inherit;
	text-decoration: none;
}
body.mdbc-site .mdbc-insights__title a:hover {
	color: var(--mdbc-petrol);
}
body.mdbc-site .mdbc-insights__date {
	font-size: 14px;
	color: var(--mdbc-slate);
}
body.mdbc-site .mdbc-insights__excerpt {
	font-size: var(--e-global-typography-text-font-size, 17px);
	line-height: 1.65;
	color: var(--mdbc-slate);
}
body.mdbc-site .mdbc-insights__more {
	margin-top: auto;
	padding-top: 8px;
	align-self: flex-start;
	font-size: 15px;
	font-weight: 700;
	color: var(--mdbc-petrol);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
body.mdbc-site .mdbc-insights__more:hover {
	color: var(--mdbc-petrol-deep);
}
body.mdbc-site .mdbc-insights--compact .mdbc-insights__more {
	display: none;
}
body.mdbc-site .mdbc-insights__empty {
	margin: 0;
	text-align: center;
	color: var(--mdbc-slate);
	font-size: 17px;
}
body.mdbc-site .mdbc-insights__pagination {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
}
body.mdbc-site .mdbc-insights__page {
	padding: 12px 22px;
	border: 1px solid var(--mdbc-petrol);
	color: var(--mdbc-petrol);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}
body.mdbc-site .mdbc-insights__page--next {
	margin-inline-start: auto;
}
body.mdbc-site .mdbc-insights__page:hover {
	background: var(--mdbc-petrol);
	color: var(--mdbc-white);
}
@media (hover: hover) and (pointer: fine) {
	body.mdbc-site .mdbc-insights__media img {
		transition: transform 500ms var(--mdbc-ease);
	}
	body.mdbc-site .mdbc-insights__item:hover .mdbc-insights__media img,
	body.mdbc-site .mdbc-insights__item:focus-within .mdbc-insights__media img {
		transform: scale(1.03);
	}
}
@media (prefers-reduced-motion: reduce) {
	body.mdbc-site .mdbc-insights__item:hover .mdbc-insights__media img {
		transform: none !important;
	}
}
@media (max-width: 1024px) {
	body.mdbc-site .mdbc-insights--cards .mdbc-insights__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
	body.mdbc-site .mdbc-insights--compact .mdbc-insights__grid {
		gap: 24px;
	}
}
@media (max-width: 767px) {
	body.mdbc-site .mdbc-insights__grid,
	body.mdbc-site .mdbc-insights--cards .mdbc-insights__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

/* ------------------------------------------------------------------ */
/* 10. Single article (blog post) — calm, readable column              */
/* ------------------------------------------------------------------ */
body.mdbc-site.single-post:not([class*=elementor-page-]) .site-main {
	max-width: 760px;
	margin-inline: auto;
	padding: 72px 20px 96px;
}
body.mdbc-site.single-post:not([class*=elementor-page-]) .mdbc-post-meta {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--mdbc-petrol);
}
body.mdbc-site.single-post:not([class*=elementor-page-]) .page-header .entry-title {
	font-family: var(--e-global-typography-primary-font-family, "Open Sans"), sans-serif;
	font-size: var(--e-global-typography-primary-font-size, 44px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--mdbc-ink);
	margin: 0 0 32px;
}
body.mdbc-site.single-post:not([class*=elementor-page-]) .page-content {
	font-size: 18px;
	line-height: 1.75;
	color: var(--mdbc-ink);
}
body.mdbc-site.single-post:not([class*=elementor-page-]) .page-content h2,
body.mdbc-site.single-post:not([class*=elementor-page-]) .page-content h3 {
	color: var(--mdbc-ink);
	margin: 1.6em 0 .5em;
	line-height: 1.3;
}
body.mdbc-site.single-post:not([class*=elementor-page-]) .page-content h2 { font-size: 28px; }
body.mdbc-site.single-post:not([class*=elementor-page-]) .page-content h3 { font-size: 22px; }
body.mdbc-site.single-post:not([class*=elementor-page-]) .page-content img {
	height: auto;
}
body.mdbc-site.single-post:not([class*=elementor-page-]) .page-content a {
	color: var(--mdbc-petrol);
}
body.mdbc-site.single-post:not([class*=elementor-page-]) .mdbc-post-back {
	margin: 56px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--mdbc-pale);
}
body.mdbc-site.single-post:not([class*=elementor-page-]) .mdbc-post-back a {
	font-size: 15px;
	font-weight: 700;
	color: var(--mdbc-petrol);
	text-decoration: none;
}