/**
 * Contact page — decorative/layout touches theme.json cannot express.
 * Kept deliberately quiet: no cards, no boxed SaaS-style form widget —
 * the form sits directly in the page flow like the rest of the content,
 * just dressed in the site's own type/color/spacing instead of Jetpack's
 * bare defaults.
 */

/* Jetpack's contact-form wraps the real <form> in an `is-layout-flex`
   container (default row direction). With no explicit width, the <form>
   is a shrink-wrapped flex item that sizes to its own content instead of
   filling the column — this is what made the whole form collapse to a
   narrow strip with a large empty gap beside it. Force it to stack and
   stretch full width instead. */
.jetpack-contact-form-container {
	flex-direction: column;
	align-items: stretch;
}

.wp-block-jetpack-contact-form .contact-form {
	width: 100%;
}

/* A quiet, brand-tinted surface for the form — not a SaaS card. No
   shadow, no hard edge; a soft beige panel that reads as part of the
   page rather than a plugin widget dropped on top of it. */
.almagzal-contact-form-panel {
	background-color: var(--wp--preset--color--beige);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--md);
}

@media (max-width: 600px) {
	.almagzal-contact-form-panel {
		padding: var(--wp--preset--spacing--sm);
	}
}

.wp-block-jetpack-contact-form .jetpack-field-label,
.wp-block-jetpack-contact-form label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 6px;
}

.wp-block-jetpack-contact-form .form-required {
	color: var(--wp--preset--color--terracotta);
}

.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form input[type="tel"],
.wp-block-jetpack-contact-form input[type="url"],
.wp-block-jetpack-contact-form textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--wp--preset--color--text-primary);
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0.7em 0.85em;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Consistent height across single-line field types regardless of type
   attribute or browser UA defaults. */
.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form input[type="tel"],
.wp-block-jetpack-contact-form input[type="url"] {
	height: 2.75em;
}

/* Proportional, not enormous — roughly 4 visible lines. */
.wp-block-jetpack-contact-form textarea {
	min-height: 6.5em;
	resize: vertical;
}

.wp-block-jetpack-contact-form input:hover,
.wp-block-jetpack-contact-form textarea:hover {
	border-color: var(--wp--preset--color--text-secondary);
}

.wp-block-jetpack-contact-form input:focus-visible,
.wp-block-jetpack-contact-form textarea:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--terracotta);
	box-shadow: 0 0 0 3px rgba(150, 85, 53, 0.15);
}

/* Button already inherits the theme's global button styling (color,
   radius, hover) from theme.json — just tighten its position in flow. */
.wp-block-jetpack-contact-form .wp-block-button {
	margin-top: var(--wp--preset--spacing--xs);
}

/* Contact channel values (Contact page + reused convention) — a clear,
   clickable value directly under its small label, restrained rather than
   headline-sized so email/Instagram/YouTube don't outweigh the page. */
.almagzal-contact-value a {
	color: var(--wp--preset--color--terracotta);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.almagzal-contact-value a:hover {
	border-bottom-color: currentColor;
}

.almagzal-contact-value a:focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
	border-radius: 2px;
}