/**
 * Tailor CTA Form (1.6.6)
 *
 * Defaults come from the theme.
 *
 *   Button  Rendered as .wp-block-button > .wp-block-button__link.wp-element-button,
 *           so Global Styles (Styles > Blocks > Button, Styles > Elements >
 *           Buttons) style it. This file sets no button colour, font, padding
 *           or radius unless a preset supplies one.
 *   Field   Uses the theme palette presets (base, contrast, primary) with
 *           neutral fallbacks, and the surrounding font.
 *
 * Presets override through CSS variables set inline on .tb-cta (presets.php).
 * Variables are only applied when the preset actually sets them, so an empty
 * preset leaves the theme in charge.
 */

:root {
	--tb-cta-gap: 20px;
	--tb-cta-message-error-text: #b42318;
	--tb-cta-message-notice-text: #4b5563;
	--tb-cta-message-font-size: 14px;
	--tb-cta-message-line-height: 1.4;
	--tb-cta-message-gap: 8px;
}

/* -------------------------------------------------------------------------
 * Layout: Follow container (default)
 *
 * Two cases, decided by the layout class WordPress puts on the container:
 *
 *   Row / Stack / Grid       The wrapper and the form drop out of the layout
 *   (.is-layout-flex,        (display: contents), so the field and the button
 *    .is-layout-grid)        behave as direct children of the container and
 *                            take its direction, gap and justification.
 *
 *   Anything else            Default Group (constrained), plain post content,
 *   (flow / constrained)     a Column: there is no layout to borrow, so the
 *                            form lays itself out — stacked, with the same gap
 *                            as Stacked / Inline (--tb-cta-gap), aligned by the
 *                            container's justification.
 *
 * The <form> element still exists in the DOM, so submission is unaffected.
 * ---------------------------------------------------------------------- */

/* Field and button share .tb-cta__group. It is a box only in the Pill layout;
   everywhere else it is transparent to layout. */
.tb-cta__group {
	display: contents;
}

/* Fallback: no flex or grid container to follow.
   align-items is inherited through the wrapper from whatever the block sits
   in, so a column that centres its children with flexbox (GreenShift rows
   and columns, for example) centres the field and the button too. In a plain
   container it inherits "normal": the field keeps its own width and sits
   left, as before. */
.tb-cta--container {
	align-items: inherit;
}

.tb-cta--container .tb-cta__form {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: var(--tb-cta-gap);
	margin: 0;
}

.is-content-justification-center > .tb-cta--container .tb-cta__form,
.has-text-align-center > .tb-cta--container .tb-cta__form {
	align-items: center;
}

.is-content-justification-right > .tb-cta--container .tb-cta__form,
.has-text-align-right > .tb-cta--container .tb-cta__form {
	align-items: flex-end;
}

/* Flex or grid container: follow it. */
:is(.is-layout-flex, .is-layout-grid) > .tb-cta--container,
:is(.is-layout-flex, .is-layout-grid) > .tb-cta--container > .tb-cta__form {
	display: contents;
}

/* A message spans its own line in a row container. */
.is-layout-flex > .tb-cta--container .tb-cta__message {
	flex: 0 1 100%;
}

/* -------------------------------------------------------------------------
 * Layout: Stacked / Inline (self-contained)
 * ---------------------------------------------------------------------- */

.tb-cta--stacked,
.tb-cta--inline {
	width: 100%;
}

.tb-cta--stacked .tb-cta__form,
.tb-cta--inline .tb-cta__form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--tb-cta-gap);
	margin: 0;
	width: 100%;
}

@media (min-width: 640px) {
	.tb-cta--inline .tb-cta__form {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.tb-cta--inline .tb-cta__message {
		flex: 1 0 100%;
		margin-top: calc(var(--tb-cta-message-gap) - var(--tb-cta-gap));
	}
}

/* -------------------------------------------------------------------------
 * Label: visually hidden, present for assistive technology.
 * ---------------------------------------------------------------------- */

.tb-cta__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Field
 *
 * width: max-content sizes the field to its placeholder (text input, via its
 * size attribute) or its longest option (select). An explicit width also stops
 * a Stack container from stretching it to full width.
 * ---------------------------------------------------------------------- */

.tb-cta__field {
	box-sizing: border-box;
	width: max-content;
	max-width: 100%;
	/* Explicit zero: a site-wide `select, textarea { margin-bottom }` rule
	   would otherwise space the select differently from the text input. */
	margin: 0;
	min-height: 44px;
	/* Same padding as the core button, so field and button match in height. */
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	font-family: inherit;
	/* Never below 16px: iOS Safari zooms the page on focus. */
	font-size: max(16px, 1em);
	line-height: inherit;
	vertical-align: middle;
	color: var(--tb-cta-field-text, var(--wp--preset--color--contrast, #16181d));
	background-color: var(--tb-cta-field-bg, var(--wp--preset--color--base, #ffffff));
	border: var(--tb-cta-field-border-width, 1px) solid var(--tb-cta-field-border, color-mix(in srgb, currentColor 30%, transparent));
	border-radius: var(--tb-cta-field-radius, 8px);
	appearance: none;
	-webkit-appearance: none;
}

.tb-cta__field--select {
	padding-right: calc(1.333em + 2px + 20px);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right calc(1.333em + 2px) center;
	cursor: pointer;
}

.tb-cta__field::placeholder {
	color: var(--tb-cta-field-placeholder, color-mix(in srgb, currentColor 60%, transparent));
	opacity: 1;
}

/* Placeholder option still chosen: a required select is :invalid. */
.tb-cta__field--select:invalid {
	color: var(--tb-cta-field-placeholder, color-mix(in srgb, var(--tb-cta-field-text, var(--wp--preset--color--contrast, #16181d)) 60%, transparent));
}

.tb-cta__field--select option {
	color: var(--tb-cta-field-text, var(--wp--preset--color--contrast, #16181d));
}

/* Focus: no outer ring. The border takes the focus colour and thickens by
   1px (inset shadow, so nothing moves). Visible for keyboard users without a
   ring appearing around the field on every click. */
.tb-cta__field:focus,
.tb-cta__field:focus-visible {
	border-color: var(--tb-cta-field-border-focus, var(--wp--preset--color--primary, currentColor));
	box-shadow: inset 0 0 0 1px var(--tb-cta-field-border-focus, var(--wp--preset--color--primary, currentColor));
	outline: none;
}

.tb-cta__field[aria-invalid="true"]:focus {
	box-shadow: inset 0 0 0 1px var(--tb-cta-message-error-text);
}

.tb-cta__field[aria-invalid="true"] {
	border-color: var(--tb-cta-message-error-text);
}

/* -------------------------------------------------------------------------
 * Button
 *
 * Zero-specificity defaults only: the theme's Global Styles win wherever they
 * set something.
 * ---------------------------------------------------------------------- */

:where(.tb-cta__actions) {
	margin: 0;
}

:where(.tb-cta__button) {
	margin: 0;
	border: 0;
	font-family: inherit;
	cursor: pointer;
	min-height: 44px;
}

.tb-cta__button:focus-visible {
	outline: 2px solid var(--tb-cta-focus-ring-color, var(--wp--preset--color--primary, currentColor));
	outline-offset: 2px;
}

/* Preset overrides: applied only when the preset sets the variable.
   Four-part selectors so they beat theme/plugin button rules such as
   GreenShift's `:root .wp-block-button .wp-block-button__link` regardless of
   which stylesheet loads last. */
.tb-cta[style*="--tb-cta-button-bg:"] .tb-cta__actions .tb-cta__button {
	background-color: var(--tb-cta-button-bg);
	background-image: none;
}

.tb-cta[style*="--tb-cta-button-bg-hover:"] .tb-cta__actions .tb-cta__button:hover,
.tb-cta[style*="--tb-cta-button-bg-hover:"] .tb-cta__actions .tb-cta__button:focus-visible {
	background-color: var(--tb-cta-button-bg-hover);
}

.tb-cta[style*="--tb-cta-button-bg-active:"] .tb-cta__actions .tb-cta__button:active {
	background-color: var(--tb-cta-button-bg-active);
}

.tb-cta[style*="--tb-cta-button-text:"] .tb-cta__actions .tb-cta__button {
	color: var(--tb-cta-button-text);
}

.tb-cta[style*="--tb-cta-button-radius:"] .tb-cta__actions .tb-cta__button {
	border-radius: var(--tb-cta-button-radius);
}

/* Button border: colour alone gives a 1px border; width alone uses the text
   colour. */
.tb-cta[style*="--tb-cta-button-border:"] .tb-cta__actions .tb-cta__button,
.tb-cta[style*="--tb-cta-button-border-width:"] .tb-cta__actions .tb-cta__button {
	border-style: solid;
	border-width: var(--tb-cta-button-border-width, 1px);
	border-color: var(--tb-cta-button-border, currentColor);
}

/* Self-contained layouts keep the D4 rule: full-width button below 640px. */
@media (max-width: 639px) {
	.tb-cta--stacked .tb-cta__actions,
	.tb-cta--inline .tb-cta__actions,
	.tb-cta--stacked .tb-cta__field,
	.tb-cta--inline .tb-cta__field {
		align-self: stretch;
		width: 100%;
	}

	.tb-cta--stacked .tb-cta__button,
	.tb-cta--inline .tb-cta__button {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Size: compact
 * ---------------------------------------------------------------------- */

.tb-cta--compact .tb-cta__field,
.tb-cta--compact .tb-cta__button {
	padding-top: calc(0.4em + 2px);
	padding-bottom: calc(0.4em + 2px);
	min-height: 40px;
}

@media (pointer: coarse) {
	.tb-cta__field,
	.tb-cta__button {
		min-height: 44px;
	}
}

/* -------------------------------------------------------------------------
 * Messages
 *
 * One element serves both the error and the advisory notice. They must not
 * look alike: the advisory does not block submission.
 * ---------------------------------------------------------------------- */

.tb-cta__message {
	margin: 0;
	font-size: var(--tb-cta-message-font-size);
	line-height: var(--tb-cta-message-line-height);
	color: var(--tb-cta-message-notice-text);
}

.tb-cta__message--error {
	color: var(--tb-cta-message-error-text);
	font-weight: 500;
}

/* Not colour alone: the error also carries a mark. */
.tb-cta__message--error::before {
	content: "\26A0  ";
}

@media (prefers-reduced-motion: reduce) {
	.tb-cta__button {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Layout: Pill
 *
 * One bordered, fully rounded box holding the field, with the button inset at
 * the right. Self-contained: it ignores the container's gap and direction but
 * follows its left / centre / right justification.
 *
 * Colours: the border is the button colour (preset button-bg, else #166cff,
 * the current theme button colour, hard-coded for now). The box background is
 * the field background. Text and placeholder colours are the field's.
 *
 * Small widths are handled with container queries on the block's own width,
 * so a pill in a narrow column behaves like a pill on a narrow phone:
 *
 *   >= 360px   full spacing
 *   < 360px    tighter spacing (fits "Choose your LLC state" + "Start" at
 *              288px, a 320px phone with 16px gutters)
 *   < 240px    wraps: field pill above a full-width button
 *
 * Long state names are cut with an ellipsis rather than wrapping.
 * ---------------------------------------------------------------------- */

.tb-cta--pill {
	container-type: inline-size;
	box-sizing: border-box;
	width: 100%;
}

/* The pill box takes its alignment from the container the same way: a
   flexbox column that centres its children (GreenShift, for example) centres
   the pill, a plain container leaves it on the left. */
.tb-cta--pill {
	align-items: inherit;
}

.tb-cta--pill .tb-cta__form {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	margin: 0;
}

.tb-cta--pill .tb-cta__message {
	align-self: stretch;
}

/* WordPress Row / Stack / Grid: their align-items is about the other axis
   (vertical in a Row), so don't inherit it. Their own justification classes
   below still centre or right-align the pill. */
:is(.is-layout-flex, .is-layout-grid) > .tb-cta--pill {
	align-items: flex-start;
}

.tb-cta--pill .tb-cta__group {
	--tb-cta-pill-field-pad: 20px;
	--tb-cta-pill-chevron-space: 20px;
	--tb-cta-pill-button-pad: 28px;

	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	width: max-content;
	max-width: 100%;
	padding: var(--tb-cta-box-padding, 4px);
	border: var(--tb-cta-box-border-width, 2px) solid var(--tb-cta-box-border, var(--tb-cta-button-bg, #166cff));
	border-radius: var(--tb-cta-box-radius, 999px);
	background-color: var(--tb-cta-box-bg, var(--tb-cta-field-bg, var(--wp--preset--color--base, #ffffff)));
}

/* Justification from the container. */
:is(.is-content-justification-center, .has-text-align-center) > .tb-cta--pill .tb-cta__group {
	margin-inline: auto;
}

:is(.is-content-justification-right, .has-text-align-right) > .tb-cta--pill .tb-cta__group {
	margin-left: auto;
}

:is(.is-content-justification-center, .has-text-align-center) > .tb-cta--pill .tb-cta__message {
	text-align: center;
}

:is(.is-content-justification-right, .has-text-align-right) > .tb-cta--pill .tb-cta__message {
	text-align: right;
}

/* The field: borderless and transparent inside the box. */
.tb-cta.tb-cta--pill .tb-cta__field {
	flex: 1 1 auto;
	width: max-content;
	min-width: 0;
	min-height: 44px;
	padding: 0 var(--tb-cta-pill-field-pad) 0 var(--tb-cta-pill-field-pad);
	border: 0;
	border-radius: var(--tb-cta-box-radius, 999px);
	background-color: transparent;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.tb-cta.tb-cta--pill .tb-cta__field--select {
	padding-right: calc(var(--tb-cta-pill-field-pad) + var(--tb-cta-pill-chevron-space));
	background-position: right var(--tb-cta-pill-field-pad) center;
}

/* Focus and error states belong to the whole box. Focus thickens the box
   border by 1px (no outer ring); in an error state it thickens in red. */
.tb-cta.tb-cta--pill .tb-cta__field:focus,
.tb-cta.tb-cta--pill .tb-cta__field:focus-visible {
	outline: none;
	box-shadow: none;
}

.tb-cta--pill .tb-cta__group:has(.tb-cta__field:focus) {
	box-shadow: 0 0 0 1px var(--tb-cta-pill-focus-color, var(--tb-cta-box-border, var(--tb-cta-button-bg, #166cff)));
}

@supports not selector(:has(*)) {
	.tb-cta--pill .tb-cta__group:focus-within {
		box-shadow: 0 0 0 1px var(--tb-cta-pill-focus-color, var(--tb-cta-box-border, var(--tb-cta-button-bg, #166cff)));
	}
}

.tb-cta--pill .tb-cta__group:has(.tb-cta__field[aria-invalid="true"]) {
	--tb-cta-pill-focus-color: var(--tb-cta-message-error-text);
	border-color: var(--tb-cta-message-error-text);
}

/* The button: the theme's colours and font, the pill's shape and size. */
.tb-cta.tb-cta--pill .tb-cta__actions {
	flex: 0 0 auto;
	margin: 0;
}

.tb-cta.tb-cta--pill .tb-cta__actions .tb-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--tb-cta-pill-button-pad);
	border-radius: var(--tb-cta-button-radius, var(--tb-cta-box-radius, 999px));
	line-height: 1.2;
	white-space: nowrap;
}

/* The message sits below the box, lined up with the field text. */
.tb-cta--pill .tb-cta__message {
	margin-top: var(--tb-cta-message-gap);
	padding-inline: calc(var(--tb-cta-box-border-width, 2px) + var(--tb-cta-box-padding, 4px) + 20px);
}

/* Compact: 48px box instead of 56px (touch screens keep 44px targets). */
.tb-cta.tb-cta--pill.tb-cta--compact .tb-cta__field,
.tb-cta.tb-cta--pill.tb-cta--compact .tb-cta__actions .tb-cta__button {
	min-height: 36px;
}

@media (pointer: coarse) {
	.tb-cta.tb-cta--pill .tb-cta__field,
	.tb-cta.tb-cta--pill .tb-cta__actions .tb-cta__button {
		min-height: 44px;
	}
}

@container (max-width: 359px) {
	.tb-cta--pill .tb-cta__group {
		--tb-cta-pill-field-pad: 12px;
		--tb-cta-pill-chevron-space: 18px;
		--tb-cta-pill-button-pad: 14px;
		gap: 0;
	}

	.tb-cta--pill .tb-cta__message {
		padding-inline: calc(var(--tb-cta-box-border-width, 2px) + var(--tb-cta-box-padding, 4px) + 12px);
	}
}

@container (max-width: 239px) {
	.tb-cta--pill .tb-cta__group {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: 100%;
		padding: 0;
		border: 0;
		background: none;
	}

	.tb-cta.tb-cta--pill .tb-cta__field {
		width: 100%;
		border: var(--tb-cta-box-border-width, 2px) solid var(--tb-cta-box-border, var(--tb-cta-button-bg, #166cff));
		background-color: var(--tb-cta-box-bg, var(--tb-cta-field-bg, var(--wp--preset--color--base, #ffffff)));
	}

	.tb-cta.tb-cta--pill .tb-cta__field[aria-invalid="true"] {
		border-color: var(--tb-cta-message-error-text);
	}

	.tb-cta.tb-cta--pill .tb-cta__actions .tb-cta__button {
		width: 100%;
	}

	.tb-cta--pill .tb-cta__group:has(.tb-cta__field:focus) {
		box-shadow: none;
	}

	.tb-cta.tb-cta--pill .tb-cta__field:focus,
	.tb-cta.tb-cta--pill .tb-cta__field:focus-visible {
		box-shadow: inset 0 0 0 1px var(--tb-cta-pill-focus-color, var(--tb-cta-box-border, var(--tb-cta-button-bg, #166cff)));
	}

	.tb-cta.tb-cta--pill .tb-cta__field[aria-invalid="true"] {
		--tb-cta-pill-focus-color: var(--tb-cta-message-error-text);
	}

	.tb-cta--pill .tb-cta__message {
		padding-inline: 0;
	}
}

/* Editor-only notice for an unknown definition. */
.tb-cta-admin-notice {
	padding: 12px 16px;
	border-left: 4px solid var(--tb-cta-message-error-text);
	background: #fef3f2;
	color: var(--tb-cta-message-error-text);
	font-size: 14px;
}