/*
  wbs-pages/_shared/wbs-marketing.css

  Shared component stylesheet for WOODS Business Solutions marketing
  pages (starting from the four Microsoft Dynamics 365 product pages,
  which all share one Elementor template). Reused by every marketing
  page, so every class is namespaced .wbs-m-* and every rule is anchored
  to a .wbs-m-* selector. Nothing here can bleed into the already
  migrated legal / content partials, which do not use .wbs-m-* classes.

  Theming model: the whole partial is wrapped in a .wbs-m-page element
  that defines the brand tokens and a dark canvas. Sections are wrapped
  in .wbs-m-section, which sets a local palette (dark by default, or
  --light / --accent). Components read the section palette via CSS
  variables, so a component looks correct in any section without a
  component-level variant. This matches the originals, which alternate
  dark hero / tabs against light feature and contact sections and a lime
  call-to-action band.

  Brand tokens come from the site-wide Elementor global kit
  (Roboto is loaded globally; only fallbacks are declared here). No
  @import, no Google Fonts, no external url() assets. Decorative section
  backgrounds are supplied by the page via the --wbs-m-*-image custom
  properties (inline style), so the media-library URLs stay with the
  content.

  Author: WOODS Business Solutions
*/

/* ------------------------------------------------------------------ */
/* Page wrapper + brand tokens                                        */
/* ------------------------------------------------------------------ */
.wbs-m-page {
	/* Brand palette (Elementor global kit) */
	--wbs-m-canvas: #232323;   /* near-black page canvas   */
	--wbs-m-primary: #353A44;  /* primary surface          */
	--wbs-m-surface: #363C46;  /* card surface (dark)      */
	--wbs-m-surface-2: #2d333c;/* card surface, deeper     */
	--wbs-m-accent: #CAF1A2;   /* lime accent              */
	--wbs-m-accent-hover: #b8e08f;
	--wbs-m-ink: #232323;      /* dark text on lime        */
	--wbs-m-text: #E8E8E8;     /* body text on dark        */
	--wbs-m-heading: #ffffff;  /* headings on dark         */
	--wbs-m-muted: rgba(232, 232, 232, 0.72);
	--wbs-m-border: rgba(255, 255, 255, 0.10);

	/* Section palette defaults (dark). Overridden by --light/--accent. */
	--wbs-m-sec-bg: var(--wbs-m-canvas);
	--wbs-m-sec-text: var(--wbs-m-text);
	--wbs-m-sec-heading: var(--wbs-m-heading);
	--wbs-m-sec-muted: var(--wbs-m-muted);
	--wbs-m-sec-surface: var(--wbs-m-surface);
	--wbs-m-sec-border: var(--wbs-m-border);

	/* Metrics */
	--wbs-m-maxw: 1140px;
	--wbs-m-pad: clamp(20px, 5vw, 40px);
	--wbs-m-radius: 12px;
	--wbs-m-radius-sm: 8px;

	background-color: var(--wbs-m-canvas);
	color: var(--wbs-m-text);
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Local box model + media hygiene, scoped to the marketing subtree. */
.wbs-m-page *,
.wbs-m-page *::before,
.wbs-m-page *::after {
	box-sizing: border-box;
}

.wbs-m-page img,
.wbs-m-page video,
.wbs-m-page iframe {
	max-width: 100%;
}

.wbs-m-page img {
	height: auto;
}

.wbs-m-page p {
	margin: 0 0 16px;
}

.wbs-m-page p:last-child {
	margin-bottom: 0;
}

.wbs-m-page a {
	color: var(--wbs-m-accent);
	text-decoration: none;
	transition: color 0.2s ease;
}

.wbs-m-page a:hover {
	color: var(--wbs-m-accent-hover);
}

/* ------------------------------------------------------------------ */
/* Container + section palettes                                       */
/* ------------------------------------------------------------------ */
.wbs-m-container {
	width: 100%;
	max-width: var(--wbs-m-maxw);
	margin-left: auto;
	margin-right: auto;
}

.wbs-m-section {
	padding: clamp(48px, 7vw, 96px) var(--wbs-m-pad);
	background-color: var(--wbs-m-sec-bg);
	color: var(--wbs-m-sec-text);
	/* Optional decorative background, positioned to the right. */
	background-image: var(--wbs-m-section-image, none);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
}

.wbs-m-section--light {
	--wbs-m-sec-bg: #f5f5f5;
	--wbs-m-sec-text: #2a2f36;
	--wbs-m-sec-heading: #232323;
	--wbs-m-sec-muted: #5b6069;
	--wbs-m-sec-surface: #ffffff;
	--wbs-m-sec-border: rgba(0, 0, 0, 0.10);
}

.wbs-m-section--accent {
	--wbs-m-sec-bg: var(--wbs-m-accent);
	--wbs-m-sec-text: #232323;
	--wbs-m-sec-heading: #1c1f23;
	--wbs-m-sec-muted: rgba(35, 35, 35, 0.75);
	--wbs-m-sec-surface: rgba(255, 255, 255, 0.5);
	--wbs-m-sec-border: rgba(35, 35, 35, 0.18);
}

/* A section can also carry --dark explicitly (same as default). */
.wbs-m-section--dark {
	--wbs-m-sec-bg: var(--wbs-m-canvas);
	--wbs-m-sec-text: var(--wbs-m-text);
	--wbs-m-sec-heading: var(--wbs-m-heading);
	--wbs-m-sec-muted: var(--wbs-m-muted);
	--wbs-m-sec-surface: var(--wbs-m-surface);
	--wbs-m-sec-border: var(--wbs-m-border);
}

/* Shared centered section heading (intro above stats / tabs). */
.wbs-m-section-head {
	max-width: 780px;
	margin: 0 auto clamp(32px, 5vw, 56px);
	text-align: center;
}

.wbs-m-section-head__title {
	margin: 0 0 16px;
	font-size: clamp(26px, 3.6vw, 38px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wbs-m-sec-heading);
}

.wbs-m-section-head__lead {
	margin: 0;
	font-size: clamp(15px, 1.6vw, 17px);
	font-weight: 300;
	color: var(--wbs-m-sec-muted);
}

/* ------------------------------------------------------------------ */
/* Buttons (pill + circular lime arrow badge)                         */
/* ------------------------------------------------------------------ */
.wbs-m-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 8px 8px 8px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.wbs-m-btn:hover {
	transform: translateY(-1px);
}

.wbs-m-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--wbs-m-accent);
}

.wbs-m-btn__icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* Light pill (dark text) - "Learn more" */
.wbs-m-btn--light {
	background: #ffffff;
	color: #232323;
}

.wbs-m-btn--light:hover {
	background: #f0f0f0;
	color: #232323;
}

/* Dark pill (light text) - "Request Demo" */
.wbs-m-btn--dark {
	background: #232323;
	color: #ffffff;
}

.wbs-m-btn--dark:hover {
	background: #1a1a1a;
	color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Hero                                                               */
/* ------------------------------------------------------------------ */
.wbs-m-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(340px, 56vh, 600px);
	padding: clamp(40px, 8vw, 96px) var(--wbs-m-pad);
	background-color: #0d0f0e;
	background-image:
		linear-gradient(90deg, rgba(13, 15, 14, 0.85) 0%, rgba(13, 15, 14, 0.45) 55%, rgba(13, 15, 14, 0.25) 100%),
		var(--wbs-m-hero-image, none);
	background-size: cover;
	background-position: center;
	color: #ffffff;
}

.wbs-m-hero__inner {
	width: 100%;
	max-width: var(--wbs-m-maxw);
	margin: 0 auto;
}

.wbs-m-hero__title {
	margin: 0 0 18px;
	font-size: clamp(30px, 5.4vw, 52px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #ffffff;
	max-width: 18ch;
}

.wbs-m-hero__lead {
	margin: 0;
	max-width: 52ch;
	font-size: clamp(15px, 1.7vw, 18px);
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}

.wbs-m-hero__actions {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ------------------------------------------------------------------ */
/* Feature row (alternating media / text)                             */
/* ------------------------------------------------------------------ */
.wbs-m-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	max-width: var(--wbs-m-maxw);
	margin: 0 auto;
}

/* Reverse places the media on the right (alternating rows). */
.wbs-m-feature--reverse .wbs-m-feature__media {
	order: 2;
}

.wbs-m-feature__body {
	min-width: 0;
}

.wbs-m-feature__title {
	margin: 0 0 16px;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wbs-m-sec-heading);
}

.wbs-m-feature__text {
	margin: 0 0 20px;
	font-weight: 300;
	color: var(--wbs-m-sec-muted);
}

.wbs-m-feature__text:last-child {
	margin-bottom: 0;
}

/* Lime "banner" heading used on the feature rows (ribbon look). */
.wbs-m-banner-title {
	position: relative;
	display: inline-block;
	margin: 0 0 20px;
	padding: 14px 26px 16px 22px;
	background: var(--wbs-m-accent);
	color: #232323;
	font-size: clamp(20px, 2.8vw, 30px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.01em;
}

/* Folded corner at the bottom-right of the ribbon. */
.wbs-m-banner-title::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -12px;
	border-width: 0 12px 12px 0;
	border-style: solid;
	border-color: transparent #9fce74 transparent transparent;
}

/* ------------------------------------------------------------------ */
/* Tab group (Elementor nested-tabs equivalent)                       */
/* ------------------------------------------------------------------ */
.wbs-m-tabs {
	max-width: var(--wbs-m-maxw);
	margin: 0 auto;
}

.wbs-m-tabs__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	margin-bottom: clamp(28px, 4vw, 44px);
	padding: 0;
	border: 0;
}

.wbs-m-tabs__tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 8px 4px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wbs-m-sec-muted);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.wbs-m-tabs__tab:hover {
	color: var(--wbs-m-sec-heading);
}

.wbs-m-tabs__tab[aria-selected="true"] {
	color: var(--wbs-m-accent);
	border-bottom-color: var(--wbs-m-accent);
}

.wbs-m-tabs__panel[hidden] {
	display: none;
}

/* Panel body reuses the two-column feature layout: text + media. */
.wbs-m-tabs__panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}

.wbs-m-tabs__panel .wbs-m-feature__title,
.wbs-m-tabs__panel-title {
	margin: 0 0 16px;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wbs-m-sec-heading);
}

.wbs-m-tabs__panel-text {
	margin: 0 0 20px;
	font-weight: 300;
	color: var(--wbs-m-sec-muted);
}

/* ------------------------------------------------------------------ */
/* Video block (responsive 16:9) + YouTube click-to-load facade       */
/* ------------------------------------------------------------------ */
.wbs-m-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--wbs-m-radius-sm);
	overflow: hidden;
}

.wbs-m-video > video,
.wbs-m-video__iframe,
.wbs-m-video__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.wbs-m-video > video {
	object-fit: cover;
	background: #000;
}

/* Facade button (poster + play). No network request until clicked. */
.wbs-m-video__facade {
	display: block;
	padding: 0;
	margin: 0;
	background: #000;
	cursor: pointer;
}

.wbs-m-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wbs-m-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.wbs-m-video__facade:hover .wbs-m-video__play {
	transform: translate(-50%, -50%) scale(1.06);
	background: #ffffff;
}

.wbs-m-video__play svg {
	width: 26px;
	height: 26px;
	margin-left: 3px;
	fill: #232323;
	display: block;
}

/* Optional caption under a media element (used in some tab panels). */
.wbs-m-media-caption {
	margin: 10px 0 0;
	font-size: 13px;
	font-style: italic;
	color: var(--wbs-m-sec-muted);
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Stat / feature-card grid                                           */
/* ------------------------------------------------------------------ */
.wbs-m-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
	max-width: var(--wbs-m-maxw);
	margin: 0 auto;
}

.wbs-m-stat {
	position: relative;
	background: var(--wbs-m-sec-surface);
	border: 1px solid var(--wbs-m-sec-border);
	border-left: 3px solid var(--wbs-m-accent);
	border-radius: var(--wbs-m-radius);
	padding: 24px 24px 26px;
}

.wbs-m-stat__icon {
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	color: var(--wbs-m-accent);
}

.wbs-m-stat__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

/* Optional big number for true "stat" usage. */
.wbs-m-stat__value {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wbs-m-accent);
}

.wbs-m-stat__title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wbs-m-sec-heading);
}

.wbs-m-stat__text {
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	color: var(--wbs-m-sec-muted);
}

/* ------------------------------------------------------------------ */
/* Icon list (contact details etc.)                                   */
/* ------------------------------------------------------------------ */
.wbs-m-iconlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wbs-m-iconlist__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	color: var(--wbs-m-sec-text);
}

.wbs-m-iconlist__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var(--wbs-m-accent);
}

.wbs-m-iconlist__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
	display: block;
}

.wbs-m-iconlist__item a {
	color: inherit;
}

.wbs-m-iconlist__item a:hover {
	color: var(--wbs-m-accent);
}

/* ------------------------------------------------------------------ */
/* Call-to-action band                                                */
/* ------------------------------------------------------------------ */
.wbs-m-cta {
	background-color: var(--wbs-m-accent);
	background-image: var(--wbs-m-cta-image, none);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
	color: #232323;
	padding: clamp(36px, 5vw, 64px) var(--wbs-m-pad);
}

.wbs-m-cta__inner {
	max-width: var(--wbs-m-maxw);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.wbs-m-cta__text {
	margin: 0;
	max-width: 60ch;
	font-size: clamp(16px, 1.9vw, 19px);
	font-weight: 400;
	line-height: 1.5;
	color: #232323;
}

.wbs-m-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ------------------------------------------------------------------ */
/* Contact block + form wrapper                                       */
/* ------------------------------------------------------------------ */
.wbs-m-contact {
	max-width: var(--wbs-m-maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}

.wbs-m-contact__title {
	margin: 0 0 12px;
	font-size: clamp(26px, 3.6vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wbs-m-sec-heading);
}

.wbs-m-contact__lead {
	margin: 0 0 24px;
	font-weight: 300;
	color: var(--wbs-m-sec-muted);
}

.wbs-m-contact__card {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 20px;
}

.wbs-m-contact__photo {
	width: 96px;
	height: 96px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
}

.wbs-m-contact__name {
	margin: 0 0 2px;
	font-size: 22px;
	font-weight: 700;
	color: var(--wbs-m-sec-heading);
}

.wbs-m-contact__role {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--wbs-m-sec-muted);
}

.wbs-m-contact__note {
	margin: 0;
	font-size: 14px;
	color: var(--wbs-m-sec-muted);
}

/*
  Form. The inner markup uses the site-wide .wbs-form contract (handled
  by the global form script); every rule below is anchored under
  .wbs-m-form so it stays inside the marketing subtree.
*/
.wbs-m-form {
	background: var(--wbs-m-sec-surface);
	border: 1px solid var(--wbs-m-sec-border);
	border-radius: var(--wbs-m-radius);
	padding: clamp(20px, 3vw, 32px);
}

.wbs-m-form .gm-col-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

.wbs-m-form .wbs-radio-group {
	display: flex;
	gap: 20px;
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--wbs-m-sec-text);
}

.wbs-m-form .wbs-radio-group label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.wbs-m-form input[type="text"],
.wbs-m-form input[type="email"],
.wbs-m-form input[type="tel"],
.wbs-m-form textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--wbs-m-sec-text);
	background: var(--wbs-m-sec-bg);
	border: 1px solid var(--wbs-m-sec-border);
	border-radius: var(--wbs-m-radius-sm);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wbs-m-form textarea {
	margin-bottom: 14px;
	resize: vertical;
	min-height: 120px;
}

.wbs-m-form input::placeholder,
.wbs-m-form textarea::placeholder {
	color: var(--wbs-m-sec-muted);
	opacity: 1;
}

.wbs-m-form input:focus,
.wbs-m-form textarea:focus {
	outline: none;
	border-color: var(--wbs-m-accent);
	box-shadow: 0 0 0 3px rgba(202, 241, 162, 0.28);
}

.wbs-m-form .wbs-acceptance {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 4px 0 18px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wbs-m-sec-muted);
}

.wbs-m-form .wbs-acceptance input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.wbs-m-form input[type="submit"] {
	appearance: none;
	display: inline-block;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background: #232323;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.wbs-m-form input[type="submit"]:hover {
	background: #000000;
	transform: translateY(-1px);
}

.wbs-m-form .wbs-form-response {
	margin-top: 14px;
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Accessibility: focus states                                        */
/* ------------------------------------------------------------------ */
.wbs-m-page a:focus-visible,
.wbs-m-page button:focus-visible,
.wbs-m-page input:focus-visible,
.wbs-m-page textarea:focus-visible,
.wbs-m-page [tabindex]:focus-visible {
	outline: 3px solid var(--wbs-m-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.wbs-m-page .wbs-m-tabs__tab:focus-visible {
	outline-offset: 4px;
}

/* Visually-hidden helper for optional labels. */
.wbs-m-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Responsive: collapse to single column, keep no horizontal scroll   */
/* ------------------------------------------------------------------ */
@media (max-width: 860px) {
	.wbs-m-feature,
	.wbs-m-tabs__panel,
	.wbs-m-contact {
		grid-template-columns: 1fr;
	}

	/* Media stacks above text on reversed rows too. */
	.wbs-m-feature--reverse .wbs-m-feature__media {
		order: 0;
	}

	.wbs-m-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Right-anchored decorative section art is distracting when narrow. */
	.wbs-m-section,
	.wbs-m-cta {
		background-image: none;
	}
}

@media (max-width: 560px) {
	.wbs-m-form .gm-col-2 {
		grid-template-columns: 1fr;
	}

	.wbs-m-contact__card {
		flex-direction: column;
		align-items: flex-start;
	}

	.wbs-m-tabs__list {
		gap: 6px 18px;
	}
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.wbs-m-page *,
	.wbs-m-page *::before,
	.wbs-m-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}