/*
 * caravanlogistics-funnel — plugin-scoped styles.
 *
 * The theme already ships `assets/css/jotform-overrides.css` which styles
 * the Jotform inline-embed inputs (we don't duplicate that here). These
 * rules cover the wrapper + Cal.com embed + accessibility hooks unique
 * to the plugin blocks.
 *
 * Cascade layer: stay in `patterns` so theme.json `styles.blocks` wins
 * for editor parity, while still overriding raw third-party styles.
 */

@layer patterns {
	/* ---------- shared wrapper niceties ---------- */
	.jotform-embed,
	.calcom-embed-wrap {
		display: block;
		width: 100%;
		max-width: 720px;
		margin-inline: auto;
	}

	.jotform-embed--full,
	.calcom-embed-wrap.alignfull {
		max-width: none;
	}

	/* Editor placeholder banner (admin only — visible if formId/eventUrl missing) */
	.jotform-embed--placeholder,
	.calcom-embed--placeholder {
		padding: 1rem 1.25rem;
		background: var(--wp--preset--color--white-alpha-5, rgba(255, 255, 255, 0.05));
		border: 1px dashed var(--wp--preset--color--amber-400, #ffb84d);
		border-radius: 0.5rem;
		color: var(--wp--preset--color--amber-300, #ffd580);
		font-size: var(--wp--preset--font-size--sm, 0.875rem);
	}

	/* ---------- Jotform noscript fallback ---------- */
	.jotform-embed__noscript {
		padding: 1rem 1.25rem;
		background: var(--wp--preset--color--navy-800, #0a1628);
		border-radius: 0.5rem;
		color: var(--wp--preset--color--white-alpha-65, rgba(255, 255, 255, 0.65));
		font-size: var(--wp--preset--font-size--sm, 0.875rem);
	}

	/* ---------- Cal.com embed ---------- */
	.calcom-embed-wrap {
		position: relative;
	}

	.calcom-embed {
		min-height: 700px;
		border-radius: 0.75rem;
		overflow: hidden;
		background: var(--wp--preset--color--navy-900, #06101e);
	}

	/* "Skip booking widget" link — visible only on focus */
	.calcom-embed__skip {
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}
	.calcom-embed__skip:focus,
	.calcom-embed__skip:focus-visible {
		position: static;
		width: auto;
		height: auto;
		display: inline-block;
		padding: 0.5rem 0.75rem;
		background: var(--wp--preset--color--amber-400, #ffb84d);
		color: var(--wp--preset--color--navy-950, #04090f);
		border-radius: 0.5rem;
		font-weight: 600;
		text-decoration: none;
		margin-bottom: 0.5rem;
	}

	/* Marker target for the skip-link */
	[id^="after-calcom-"] {
		display: block;
		width: 0;
		height: 0;
	}
}