/* =========================================================================
   The B2B Mix — Brand custom CSS for Divi 5
   -------------------------------------------------------------------------
   Loaded from the b2b-mix-child theme via functions.php.
   Do not paste this into Divi → Theme Options → Custom CSS — it lives here
   so it can be version controlled and deployed with the theme.
   ========================================================================= */


/* -----------------------------------------------------------------
   1. Brand tokens
   ----------------------------------------------------------------- */
:root {
	--b2b-deep-teal: #254653;
	--b2b-teal:      #2a9d8f;
	--b2b-orange:    #fc7e01;
	--b2b-yellow:    #ffcc3f;
	--b2b-cream:     #eae4dd;
	--b2b-sage:      #d0e0d3;
	--b2b-ink:       #1a323b;
}


/* -----------------------------------------------------------------
   2. Typographic accents
   These remain as classes (rather than presets) because Divi 5
   presets cover the whole module — these are tiny utilities you
   may want to mix into Text modules without committing the entire
   module to a single preset.
   ----------------------------------------------------------------- */

/* Eyebrow label — orange uppercase mini-heading above an H1/H2. */
.b2b-eyebrow {
	font-family: "Lato", sans-serif !important;
	font-weight: 700;
	font-size: 13px !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--b2b-orange) !important;
	margin-bottom: 8px;
}
.b2b-eyebrow--yellow { color: var(--b2b-yellow) !important; }

/* Handwritten accent — for "just a conversation →" / closing aside lines. */
.b2b-marker {
	font-family: "Permanent Marker", cursive !important;
	font-weight: 400;
	font-size: 24px !important;
	color: var(--b2b-deep-teal);
}

/* Pull-quote in founder section. */
.b2b-pull {
	border-left: 3px solid var(--b2b-orange);
	padding-left: 18px;
	font-family: "Quicksand", sans-serif !important;
	font-weight: 600;
	font-size: 22px !important;
	line-height: 1.32;
	color: var(--b2b-deep-teal);
}


/* -----------------------------------------------------------------
   3. Section shape — diagonal cut at section bottom
   Cannot be a Divi preset (clip-path is not exposed in the UI),
   so it stays as a CSS class applied to the Section module.
   ----------------------------------------------------------------- */
.et_pb_section.b2b-slant {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%);
}
.et_pb_section.b2b-slant--deep {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%);
}


/* -----------------------------------------------------------------
   4. Bee bridge — the orange disc that sits on the seam between sections
   Apply to a Section that contains ONLY a single Image module
   (bee-circle.png). Section background MUST be transparent and padding 0.
   ----------------------------------------------------------------- */
.et_pb_section.b2b-bee {
	position: relative;
	height: 0;
	z-index: 10;
	overflow: visible !important;
}
.et_pb_section.b2b-bee .et_pb_image {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--b2b-orange);
	border: 6px solid var(--bee-ring, var(--b2b-cream));
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
}
.et_pb_section.b2b-bee .et_pb_image img {
	width:  60px;
	height: 60px;
	border-radius: 50%;
}

/* Ring color modifiers — match the upcoming section's background. */
.b2b-bee--ring-yellow { --bee-ring: var(--b2b-yellow); }
.b2b-bee--ring-cream  { --bee-ring: var(--b2b-cream); }
.b2b-bee--ring-anchor { --bee-ring: var(--b2b-deep-teal); }
.b2b-bee--ring-sage   { --bee-ring: var(--b2b-sage); }


/* -----------------------------------------------------------------
   5. Outcome card — Blurb module styling
   Mirrors the Divi 5 "Outcome Card" Blurb preset (see preset spec).
   Kept as CSS for backward compatibility and so the visual works
   even if the preset is missing on import.
   ----------------------------------------------------------------- */
.et_pb_blurb.b2b-outcome .et_pb_blurb_content {
	background: #fff;
	border-radius: 14px;
	padding: 28px 26px;
	box-shadow:
		0 2px 0 rgba(37, 70, 83, 0.06),
		0 12px 28px -10px rgba(37, 70, 83, 0.18);
}


/* -----------------------------------------------------------------
   6. "What you won't get" strikethrough list
   Used inside a Text module on the cream "What happens after" band.
   ----------------------------------------------------------------- */
.b2b-strike-list ul { list-style: none; padding-left: 0; }
.b2b-strike-list li {
	position: relative;
	padding-left: 26px;
	color: var(--b2b-orange);
	text-decoration: line-through;
	margin-bottom: 6px;
}
.b2b-strike-list li::before {
	content: "✕";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	text-decoration: none;
}


/* -----------------------------------------------------------------
   7. Mobile tweaks
   Divi handles most responsive sizing; these are the corrections
   that came up in the original Discovery_Call_Landing.html.
   ----------------------------------------------------------------- */
@media (max-width: 980px) {
	.b2b-marker { font-size: 20px !important; }
	.b2b-pull   { font-size: 19px !important; }

	/* Soften the slant on small screens — a 48px cut looks dramatic on desktop
	   but exaggerated on mobile where the section is narrower. */
	.et_pb_section.b2b-slant {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
	}
	.et_pb_section.b2b-slant--deep {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%);
	}

	/* Bee disc — a touch smaller. */
	.et_pb_section.b2b-bee .et_pb_image {
		width:  64px;
		height: 64px;
	}
	.et_pb_section.b2b-bee .et_pb_image img {
		width:  50px;
		height: 50px;
	}
}