/**
 * HubSpot Inline Form — Zededa Panel Wrapper
 *
 * Styles the OUTER container that wraps a HubSpot embed: dark-teal panel,
 * orange border, left accent strip, and the fade-in transition that hides
 * the target until HubSpot's iframe form has loaded.
 *
 * NOTE: HubSpot's modern embed (forms/embed/v2.js, used by all forms created
 * since the 2024 forms relaunch) renders the actual fields inside a
 * cross-origin iframe (js.hsforms.net/ui-forms-embed-components-app). The
 * field/label/button styling MUST be configured in HubSpot's Form designer
 * → Style and preview tab — external CSS cannot reach inside the iframe.
 *
 * SCOPING: all selectors are prefixed with `.zededa-hubspot-embed--panel` so
 * this affects only widgets that opt in (currently the hero widget's inline
 * form). The modal embed (class-hubspot-modal.php) is unaffected.
 *
 * @package Zededa
 */

/* ==========================================================================
   Wrapper — dark teal panel with orange border + left accent strip
   ========================================================================== */

.zededa-hubspot-embed--panel {
	position: relative;
	background-color: var(--color-container-blue, #133844);
	border: var(--border-width-thick, 4px) solid var(--color-brand-primary, #ff5000);
	padding: var(--spacing-2xl, 40px);
	padding-left: calc(var(--spacing-2xl, 40px) + 12px);
	overflow: hidden;
	box-sizing: border-box;
}

.zededa-hubspot-embed--panel::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 12px;
	background-color: var(--color-brand-primary, #ff5000);
}

/* Fade-in once HubSpot has injected its iframe (toggled by hero-widget.js) */
.zededa-hubspot-embed__target {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.zededa-hubspot-embed__target--ready {
	opacity: 1;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.zededa-hubspot-embed--panel {
		padding: var(--spacing-xl, 32px);
		padding-left: calc(var(--spacing-xl, 32px) + 10px);
	}

	.zededa-hubspot-embed--panel::before {
		width: 10px;
	}
}