/*
Theme Name: ericville25
Author: eric@ericwittke.com
File: forms.css
Description: Global styles for buttons, inputs, and form wrappers.
*/

/* * -------------------------------------------------------------------------
 * Overall Size Alignment & Resets
 * -------------------------------------------------------------------------
 */

button,
.button,
.wp-element-button,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"] {
	font-family: var(--base-fonts);
	font-size: var(--font-size-m); /* Replaced 1rem with variable */
	padding: var(--space-s);
	box-sizing: border-box;
	display: block;
	
	/* Interaction Target Size */
	min-height: 50px; 
}

/* * -------------------------------------------------------------------------
 * Buttons
 * -------------------------------------------------------------------------
 */

button,
.button,
input[type="submit"],
a.wp-element-button {
	/* Structure */
	display: inline-block; /* Ensure they don't break flow if used inline */
	border-radius: var(--radius-s);
	padding-left: var(--space-lg); /* Formerly 30px, snapped to scale */
	padding-right: var(--space-lg);
	
	/* Appearance */
	background: var(--color-accent);
	color: var(--color-bg);
	border: 1px solid var(--color-accent);
	font-weight: bold;
	text-decoration: none; /* Reset links styled as buttons */

	/* Interaction Pre-sets */
	outline: 0px solid var(--color-accent-light);
	transition: all var(--motion-fast);
	cursor: pointer;
}

/* Hover State */
button:hover,
.button:hover,
input[type="submit"]:hover,
a.wp-element-button:hover {
	outline-width: 5px;
	color: var(--color-bg);
}

/* Active/Press State */
button:active,
.button:active,
input[type="submit"]:active,
a.wp-element-button:active {
	outline-width: 7px;
	transform: scale(0.95);
}

/* * Special Context Variant 
 * Used for high-priority CTAs
 */
.special button,
.special input[type="submit"],
.special a.wp-element-button {
	border-color: var(--color-special);
	background: var(--color-special);
	
	/* FLAG: Magic Number / Hardcoded Color
	 * This is a transparency of #cb9400. 
	 * Ideally: color-mix(in srgb, var(--color-special), transparent 75%);
	 */
	outline-color: #cb940044; 
}

/* * -------------------------------------------------------------------------
 * Text Inputs
 * -------------------------------------------------------------------------
 */

textarea {
	width: 100%;
	/* Resize vertical only to prevent layout breaking */
	resize: vertical; 
}

input[type="email"],
input[type="text"] {
	font-size: inherit;
	border: 1px solid var(--color-borders);
	border-radius: var(--radius-s);
}

/* * -------------------------------------------------------------------------
 * Password Protection Wrapper
 * -------------------------------------------------------------------------
 */

.password-input-wrapper {
	display: flex;
	flex-wrap: wrap; /* Safety for mobile */
	gap: var(--space-s);
}

.password-input-wrapper input[type=password],
.password-input-wrapper input[type=submit] {
	font-size: var(--font-size-l); /* Formerly 1.4rem, snapped to scale */
	padding: var(--space-s);
	font-weight: normal !important;
	transition: all var(--motion-fast);
}

.password-input-wrapper input[type=password] {
	border-radius: var(--radius-s);
	border: 1px solid var(--color-borders);
	
	/* Focus Effects */
	outline: 0px solid var(--color-accent-light);
}

.password-input-wrapper input[type=password]:focus,
.password-input-wrapper input[type=password]:hover {
	outline-width: 5px;
	border-color: var(--color-accent);
}

.password-input-wrapper input[type=password]:active {
	outline-width: 10px;
}

.password-input-wrapper input[type=submit] {
	padding: var(--space-s) var(--space-lg);
	height: auto; /* Allow height to adjust to the larger font */
}

/* * -------------------------------------------------------------------------
 * Vendor: MailerLite
 * -------------------------------------------------------------------------
 */

.row-form {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.ml-subscribe-form {
	margin: 0 !important; 
	padding: 0;
	width: 100%;
}