/**
 * Flodesk Signup Block - Frontend Styles
 * Uses WordPress/theme native classes for maximum compatibility
 */

/* ============================================
   Block Container - No width constraints
   ============================================ */
.flodesk-signup-block {
	/* Block takes natural width of content */
}

/* ============================================
   Alignment Support
   ============================================ */
.flodesk-signup-block.align-left {
	text-align: left;
}

.flodesk-signup-block.align-center {
	text-align: center;
}

.flodesk-signup-block.align-center .flodesk-signup-fields {
	justify-content: center;
}

.flodesk-signup-block.align-right {
	text-align: right;
}

.flodesk-signup-block.align-right .flodesk-signup-fields {
	justify-content: flex-end;
}

/* ============================================
   Form Container - Default (Stacked)
   ============================================ */
.flodesk-signup-form {
	display: block;
}

/* Fields Container - Stacked by default */
.flodesk-signup-fields {
	display: flex;
	flex-direction: column;
	gap: var(--wp--style--block-gap, 1rem);
}

.flodesk-signup-field {
	width: 100%;
}

.flodesk-signup-footer {
	margin-top: var(--wp--style--block-gap, 1rem);
}

/* ============================================
   Inline Style - All form elements on one line
   ============================================ */
.flodesk-signup-block.is-style-inline .flodesk-signup-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--style--block-gap, 0.75rem);
	align-items: stretch; /* Make all children same height */
}

.flodesk-signup-block.is-style-inline .flodesk-signup-fields {
	flex: 1 1 auto;
	flex-direction: row;
	gap: var(--wp--style--block-gap, 0.75rem);
	margin-bottom: 0;
	align-items: stretch; /* Make all fields same height */
}

.flodesk-signup-block.is-style-inline .flodesk-signup-field {
	flex: 1 1 auto;
	min-width: 200px;
	width: auto;
	display: flex; /* Make field wrapper flex to control input height */
}

.flodesk-signup-block.is-style-inline .flodesk-signup-input {
	height: 100%; /* Fill parent height */
}

.flodesk-signup-block.is-style-inline .flodesk-signup-footer {
	flex: 0 0 auto;
	margin-top: 0;
	display: flex; /* Make footer flex to control button height */
}

.flodesk-signup-block.is-style-inline .flodesk-signup-button {
	height: 100%; /* Match input height naturally */
	box-sizing: border-box; /* Include padding/border in height calculation */
}

/* ============================================
   Input Fields - Inherit from WordPress/Theme
   ============================================ */
.flodesk-signup-input {
	width: 100%;
	box-sizing: border-box; /* Include padding/border in width calculation */
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	
	/* Use theme's form control styles if available */
	padding: var(--wp--custom--spacing--small, 0.75rem) var(--wp--custom--spacing--medium, 1rem);
	background-color: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--contrast, #000);
	border-radius: var(--wp--custom--border-radius, 0);
	
	/* Smooth transitions */
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Focus state */
.flodesk-signup-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary, currentColor);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary, currentColor);
}

/* Placeholder text */
.flodesk-signup-input::placeholder {
	color: var(--wp--preset--color--contrast-3, #757575);
	opacity: 0.7;
}

/* ============================================
   Screen Reader Text (Accessibility)
   ============================================ */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ============================================
   Button - Uses WordPress Button Block Classes
   ============================================ */
.flodesk-signup-footer.wp-block-button {
	/* Button wrapper inherits all wp-block-button styles from theme */
}

.flodesk-signup-button.wp-block-button__link {
	/* Button inherits all wp-block-button__link styles from theme */
	/* wp-element-button class ensures theme.json styles apply */
}

/* Only add minimal overrides for form-specific behavior */
.flodesk-signup-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ============================================
   Messages (Success/Error)
   ============================================ */
.flodesk-signup-message {
	width: 100%; /* Full width */
	padding: 0.75rem 1rem;
	border-radius: var(--wp--custom--border-radius, 0);
	font-size: 0.9em;
	box-sizing: border-box;
}

/* Inline style - message appears on its own line */
.flodesk-signup-block.is-style-inline .flodesk-signup-message {
	flex-basis: 100%; /* Force message to own line in flex container */
	width: 100%;
}

.flodesk-signup-success {
	color: var(--wp--preset--color--success, #00a32a);
	background-color: var(--wp--preset--color--success-light, #f0f6f0);
	border-left: 4px solid var(--wp--preset--color--success, #00a32a);
}

.flodesk-signup-error {
	color: var(--wp--preset--color--error, #d63638);
	background-color: var(--wp--preset--color--error-light, #fcf0f1);
	border-left: 4px solid var(--wp--preset--color--error, #d63638);
}

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

/* Mobile: Stack inline layout on small screens */
@media (max-width: 782px) {
	.flodesk-signup-block.is-style-inline .flodesk-signup-form {
		flex-direction: column;
	}

	.flodesk-signup-block.is-style-inline .flodesk-signup-fields {
		flex-direction: column;
		width: 100%;
	}

	.flodesk-signup-block.is-style-inline .flodesk-signup-field {
		width: 100%;
		min-width: 100%;
	}

	.flodesk-signup-block.is-style-inline .flodesk-signup-footer {
		width: 100%;
	}

	.flodesk-signup-button {
		width: 100%;
	}
}

/* ============================================
   Accessibility Features
   ============================================ */

/* High Contrast Mode */
@media (prefers-contrast: high) {
	.flodesk-signup-input {
		border-width: 2px;
	}

	.flodesk-signup-button {
		border: 2px solid currentColor;
	}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.flodesk-signup-input,
	.flodesk-signup-button {
		transition: none;
	}
}

/* ============================================
   Dark Mode Support (if theme doesn't handle)
   ============================================ */
@media (prefers-color-scheme: dark) {
	.flodesk-signup-input {
		background-color: var(--wp--preset--color--base, #1e1e1e);
		border-color: var(--wp--preset--color--contrast, #444);
	}

	.flodesk-signup-input::placeholder {
		color: var(--wp--preset--color--contrast-3, #999);
	}
}