/* ==========================================================================
   o'Content Subscribe Form
   ========================================================================== */

.oc-subscribe {
	--oc-input-bg: #efe6d8;
	--oc-input-border: #ddd0b8;
	--oc-input-text: #5c5c52;
	--oc-button-bg: #1c1c1c;
	--oc-button-bg-hover: #000000;
	--oc-button-text: #ffffff;
	--oc-radius: 6px;
	--oc-success: #4a7a4a;
	--oc-error: #b0473f;

	max-width: 640px;
}

.oc-subscribe * ,
.oc-subscribe *::before,
.oc-subscribe *::after {
	box-sizing: border-box;
}

.oc-subscribe__form {
	width: 100%;
}

.oc-subscribe__field-wrap {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.oc-subscribe__input {
	flex: 1 1 auto;
	background-color: var(--oc-input-bg);
	border: 1px solid var(--oc-input-border);
	border-radius: var(--oc-radius);
	padding: 16px 20px;
	font-size: 15px;
	color: var(--oc-input-text);
	outline: none;
	transition: border-color 0.2s ease;
	min-width: 0;
}

.oc-subscribe__input::placeholder {
	color: var(--oc-input-text);
	opacity: 0.85;
}

.oc-subscribe__input:focus {
	border-color: var(--oc-button-bg);
	box-shadow: 0 0 0 3px rgba(28, 28, 28, 0.08);
}

.oc-subscribe__input.oc-subscribe__input--error {
	border-color: var(--oc-error);
}

/* Honeypot: visually hidden, still present in the DOM for bots to find */
.oc-subscribe__hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.oc-subscribe__button {
	flex: 0 0 auto;
	background-color: var(--oc-button-bg);
	color: var(--oc-button-text);
	border: none;
	border-radius: var(--oc-radius);
	padding: 16px 32px;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
}

.oc-subscribe__button:hover,
.oc-subscribe__button:focus-visible {
	background-color: var(--oc-button-bg-hover);
	transform: translateY(-2px);
}

.oc-subscribe__button:active {
	transform: translateY(0) scale(0.98);
}

.oc-subscribe__button:disabled {
	opacity: 0.6;
	cursor: default;
}

.oc-subscribe__message {
	margin: 10px 0 0;
	font-size: 13px;
	min-height: 1em;
	color: var(--oc-input-text);
}

.oc-subscribe__message.oc-subscribe__message--success {
	color: var(--oc-success);
}

.oc-subscribe__message.oc-subscribe__message--error {
	color: var(--oc-error);
}

/* --------------------------------------------------------------------------
   Responsive breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.oc-subscribe__field-wrap {
		flex-direction: column;
	}

	.oc-subscribe__button {
		width: 100%;
	}
}