/*
 * Contact — observatorio-cero-theme
 *
 * Styles for the contact page template and its reusable parts:
 *   - .oc-contact-info-item       sidebar info rows
 *   - .oc-contact-form-wrapper     WPForms container on page-contacto
 *   - .oc-social-links-contact-1  sidebar social-links card
 *
 * All values use design tokens from theme.json via CSS custom properties.
 */

/* ═══════════════════════════════════════════
 * Contact Info Item — sidebar contact rows
 * ═══════════════════════════════════════════ */

.oc-contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--border-radius--md);
	transition:
		background-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing),
		transform var(--wp--custom--ui--interaction--medium);
	cursor: default;
}

.oc-contact-info-item:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--surface-container-low) var(--wp--custom--blend--hover), transparent);
	transform: translateX(var(--wp--custom--ui--decoration--transform-translate-sm));
}

.oc-contact-info-item__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--ui--sizes--icon-2xl);
	height: var(--wp--custom--ui--sizes--icon-2xl);
	background-color: transparent;
	color: var(--wp--preset--color--on-surface);
	border-radius: var(--wp--custom--border-radius--default);
	transition:
		color var(--wp--custom--ui--interaction--fast),
		transform var(--wp--custom--ui--interaction--medium);
}

.oc-contact-info-item__icon svg,
.oc-contact-info-item__icon svg path,
.oc-contact-info-item__icon svg * {
	width: var(--wp--custom--ui--control-size--mobile);
	height: var(--wp--custom--ui--control-size--mobile);
	fill: currentColor;
	color: inherit;
}

.oc-contact-info-item:hover .oc-contact-info-item__icon {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	transform: scale(var(--wp--custom--ui--scale--icon));
}

/* High-contrast: ensure consistent contrast matching social links */
[data-theme="high-contrast"] .oc-contact-info-item__icon {
	color: var(--wp--preset--color--on-surface);
}

[data-theme="high-contrast"] .oc-contact-info-item:hover .oc-contact-info-item__icon {
	color: var(--wp--preset--color--primary);
}

.oc-contact-info-item__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.oc-contact-info-item__label {
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: var(--wp--custom--typography--font-weight--medium);
	color: var(--wp--preset--color--on-surface-variant);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--typography--letter-spacing--label-sm);
}

.oc-contact-info-item__value {
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--wp--custom--typography--font-weight--medium);
	color: var(--wp--preset--color--on-surface);
	line-height: var(--wp--custom--typography--line-height--body-sm);
}

.oc-contact-info-item__value a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: text-decoration var(--wp--custom--ui--interaction--fast);
}

.oc-contact-info-item__value a:hover {
	text-decoration: underline;
}

/* ═══════════════════════════════════════════
 * WPForms custom styling on page-contacto
 * ═══════════════════════════════════════════ */

.oc-contact-form-wrapper .wpforms-form {
	--oc-wpf-label: var(--wp--preset--color--on-surface-variant);
	--oc-wpf-text: var(--wp--preset--color--on-surface);
	--oc-wpf-border: var(--wp--preset--color--outline);
	--oc-wpf-bg: var(--wp--preset--color--surface-container-lowest);
	--oc-wpf-focus: var(--wp--preset--color--primary);
	--oc-wpf-focus-ring: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	--oc-wpf-error: var(--wp--preset--color--error);
	--oc-wpf-success: var(--wp--preset--color--success);

	/* Override WPForms static color variables so its own rules follow our tokens. */
	--wpforms-field-text-color: var(--oc-wpf-text);
	--wpforms-field-background-color: var(--oc-wpf-bg);
	--wpforms-field-border-color: var(--oc-wpf-border);

	font-family: inherit;
}

.oc-contact-form-wrapper .wpforms-form .wpforms-field {
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--50);
}

.oc-contact-form-wrapper .wpforms-form .wpforms-field:last-of-type {
	margin-bottom: 0;
}

.oc-contact-form-wrapper .wpforms-form .wpforms-field-label,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-label-inline,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-sublabel,
.oc-contact-form-wrapper .wpforms-form legend {
	color: var(--oc-wpf-label);
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: var(--wp--custom--typography--font-weight--medium);
}

.oc-contact-form-wrapper .wpforms-form .wpforms-required-label {
	color: var(--oc-wpf-error);
}

.oc-contact-form-wrapper .wpforms-form .wpforms-field-description {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--body-sm);
}

.oc-contact-form-wrapper .wpforms-form .wpforms-field-row {
	gap: var(--wp--preset--spacing--50);
	margin-bottom: 0;
}

.oc-contact-form-wrapper .wpforms-form .wpforms-field-row .wpforms-one-half,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-row .wpforms-two-fifths,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-row .wpforms-three-fifths,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-row .wpforms-one-third,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-row .wpforms-two-thirds {
	width: 100%;
}

@media (min-width: 600px) {
	.oc-contact-form-wrapper .wpforms-form .wpforms-field-row .wpforms-one-half {
		width: calc(50% - var(--wp--preset--spacing--50) / 2);
	}
}

.oc-contact-form-wrapper .wpforms-form input[type="text"],
.oc-contact-form-wrapper .wpforms-form input[type="email"],
.oc-contact-form-wrapper .wpforms-form input[type="url"],
.oc-contact-form-wrapper .wpforms-form input[type="tel"],
.oc-contact-form-wrapper .wpforms-form textarea,
.oc-contact-form-wrapper .wpforms-form select,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-select .choices__inner,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-select .choices__list--single {
	width: 100%;
	min-height: var(--wp--custom--ui--sizes--form-input);
	height: auto;
	background-color: var(--oc-wpf-bg);
	border: var(--wp--custom--ui--decoration--border) solid var(--oc-wpf-border);
	border-radius: var(--wp--custom--border-radius--md);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body-md);
	font-family: inherit;
	line-height: var(--wp--custom--typography--line-height--ui);
	color: var(--oc-wpf-text);
	transition:
		border-color var(--wp--custom--ui--interaction--fast),
		box-shadow var(--wp--custom--ui--interaction--fast),
		background-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing);
	-webkit-appearance: none;
	appearance: none;
}

.oc-contact-form-wrapper .wpforms-form input[type="text"]:focus,
.oc-contact-form-wrapper .wpforms-form input[type="email"]:focus,
.oc-contact-form-wrapper .wpforms-form input[type="url"]:focus,
.oc-contact-form-wrapper .wpforms-form input[type="tel"]:focus,
.oc-contact-form-wrapper .wpforms-form textarea:focus,
.oc-contact-form-wrapper .wpforms-form select:focus,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-select .choices__inner:focus,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-select .choices__list--single:focus {
	outline: none;
	border-color: var(--oc-wpf-focus);
		box-shadow: 0 0 0 var(--wp--custom--ui--focus--form-width) var(--oc-wpf-focus-ring);
	color: var(--oc-wpf-text);
}

.oc-contact-form-wrapper .wpforms-form input::placeholder,
.oc-contact-form-wrapper .wpforms-form textarea::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--on-surface-variant) var(--wp--custom--blend--muted), transparent);
}

.oc-contact-form-wrapper .wpforms-form textarea {
	min-height: var(--wp--custom--ui--sizes--textarea);
	resize: vertical;
}

.oc-contact-form-wrapper .wpforms-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236f797a'%3E%3Cpath d='m213.66 101.66-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--40) center;
	background-size: var(--wp--custom--ui--control-size--mobile);
	padding-right: calc(var(--wp--preset--spacing--40) * 2 + var(--wp--custom--ui--control-size--mobile));
}

.oc-contact-form-wrapper .wpforms-form .wpforms-field-checkbox ul,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-gdpr-checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oc-contact-form-wrapper .wpforms-form .wpforms-field-checkbox ul li,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-gdpr-checkbox ul li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.oc-contact-form-wrapper .wpforms-form .wpforms-field-checkbox input[type="checkbox"],
.oc-contact-form-wrapper .wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"] {
	flex-shrink: 0;
	width: var(--wp--custom--ui--control-size--mobile);
	height: var(--wp--custom--ui--control-size--mobile);
	margin-top: var(--wp--preset--spacing--10);
	accent-color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.oc-contact-form-wrapper .wpforms-form .wpforms-field-checkbox label,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-gdpr-checkbox label {
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
	line-height: var(--wp--custom--typography--line-height--body-sm);
}

.oc-contact-form-wrapper .wpforms-form .wpforms-submit-container {
	margin-top: var(--wp--preset--spacing--50);
}

.oc-contact-form-wrapper .wpforms-form button.wpforms-submit,
.oc-contact-form-wrapper .wpforms-form .wpforms-submit {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border: none;
	border-radius: var(--wp--custom--border-radius--md);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: var(--wp--custom--typography--font-weight--semibold);
	font-family: inherit;
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--soft);
	transition:
		background-color var(--wp--custom--ui--interaction--medium),
		box-shadow var(--wp--custom--ui--interaction--medium),
		transform var(--wp--custom--ui--interaction--medium),
		opacity var(--wp--custom--ui--interaction--medium);
}

.oc-contact-form-wrapper .wpforms-form button.wpforms-submit:hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]),
.oc-contact-form-wrapper .wpforms-form .wpforms-submit:hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]) {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 85%, var(--wp--preset--color--on-primary));
	box-shadow: var(--wp--preset--shadow--medium);
}

.oc-contact-form-wrapper .wpforms-form button.wpforms-submit:active:not(:disabled):not(.is-disabled):not([aria-disabled="true"]),
.oc-contact-form-wrapper .wpforms-form .wpforms-submit:active:not(:disabled):not(.is-disabled):not([aria-disabled="true"]) {
	transform: scale(var(--wp--custom--ui--scale--press));
}

.oc-contact-form-wrapper .wpforms-form button.wpforms-submit:disabled,
.oc-contact-form-wrapper .wpforms-form .wpforms-submit:disabled,
.oc-contact-form-wrapper .wpforms-form button.wpforms-submit.is-disabled,
.oc-contact-form-wrapper .wpforms-form .wpforms-submit.is-disabled,
.oc-contact-form-wrapper .wpforms-form button.wpforms-submit[aria-disabled="true"],
.oc-contact-form-wrapper .wpforms-form .wpforms-submit[aria-disabled="true"],
.oc-contact-form-wrapper .wpforms-form button.wpforms-submit:disabled:hover,
.oc-contact-form-wrapper .wpforms-form .wpforms-submit:disabled:hover,
.oc-contact-form-wrapper .wpforms-form button.wpforms-submit.is-disabled:hover,
.oc-contact-form-wrapper .wpforms-form .wpforms-submit.is-disabled:hover,
.oc-contact-form-wrapper .wpforms-form button.wpforms-submit[aria-disabled="true"]:hover,
.oc-contact-form-wrapper .wpforms-form .wpforms-submit[aria-disabled="true"]:hover,
.oc-contact-form-wrapper .wpforms-form button.wpforms-submit:disabled:active,
.oc-contact-form-wrapper .wpforms-form .wpforms-submit:disabled:active,
.oc-contact-form-wrapper .wpforms-form button.wpforms-submit.is-disabled:active,
.oc-contact-form-wrapper .wpforms-form .wpforms-submit.is-disabled:active,
.oc-contact-form-wrapper .wpforms-form button.wpforms-submit[aria-disabled="true"]:active,
.oc-contact-form-wrapper .wpforms-form .wpforms-submit[aria-disabled="true"]:active {
	opacity: var(--wp--custom--ui--opacity--disabled, 0.65);
	cursor: not-allowed;
	background-color: var(--wp--preset--color--surface-container-high) !important;
	color: var(--wp--preset--color--on-surface-variant) !important;
	border: 1px solid var(--wp--preset--color--outline-variant);
	box-shadow: none !important;
	transform: none !important;
}

.oc-contact-form-wrapper div.wpforms-container .wpforms-form input.wpforms-error,
.oc-contact-form-wrapper div.wpforms-container .wpforms-form textarea.wpforms-error,
.oc-contact-form-wrapper .wpforms-form .wpforms-error {
	border-color: var(--oc-wpf-error);
}

.oc-contact-form-wrapper .wpforms-form .wpforms-error-label,
.oc-contact-form-wrapper .wpforms-form .wpforms-field-error {
	color: var(--oc-wpf-error);
	font-size: var(--wp--preset--font-size--body-sm);
}

.oc-contact-form-wrapper .wpforms-form .wpforms-confirmation-container {
	background-color: var(--wp--preset--color--success-container);
	color: var(--wp--preset--color--on-success-container);
	border: var(--wp--custom--ui--decoration--border) solid var(--wp--preset--color--success);
	border-radius: var(--wp--custom--border-radius--md);
	padding: var(--wp--preset--spacing--50);
}

/* ═══════════════════════════════════════════
 * Sidebar social links — contact card
 * ═══════════════════════════════════════════ */

.oc-social-links-contact-1 {
	display: flex;
	flex-direction: row;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
}

ul.wp-block-social-links.oc-social-links-contact-1 {
	gap: var(--wp--preset--spacing--30);
}

.oc-social-links-contact-1 .wp-block-social-link {
	border-radius: var(--wp--custom--border-radius--default);
	color: var(--wp--preset--color--on-surface);
	transition: color var(--wp--custom--ui--interaction--fast), transform var(--wp--custom--ui--interaction--medium);
}

.oc-social-links-contact-1 .wp-block-social-link:hover {
	color: var(--wp--preset--color--primary);
	transform: scale(var(--wp--custom--ui--scale--icon));
}

.oc-social-links-contact-1 .wp-block-social-link-anchor {
	display: inline-flex;
	padding: 0;
	color: inherit;
	background-color: transparent;
}

/* Force every icon (including X) to inherit the link color in all modes. */
.oc-social-links-contact-1 .wp-block-social-link svg,
.oc-social-links-contact-1 .wp-block-social-link svg path,
.oc-social-links-contact-1 .wp-block-social-link svg * {
	fill: currentColor;
	color: inherit;
}


/* High-contrast: ensure sufficient contrast on the CTA surface. */
[data-theme="high-contrast"] .oc-social-links-contact-1 .wp-block-social-link {
	color: var(--wp--preset--color--on-surface);
}

[data-theme="high-contrast"] .oc-social-links-contact-1 .wp-block-social-link:hover {
	color: var(--wp--preset--color--primary);
}

/* ═══════════════════════════════════════════
 * Reduced motion
 * ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.oc-contact-info-item,
	.oc-contact-info-item__icon,
	.oc-contact-form-wrapper .wpforms-form button.wpforms-submit,
	.oc-contact-form-wrapper .wpforms-form .wpforms-submit,
	.oc-contact-form-wrapper .wpforms-form input,
	.oc-contact-form-wrapper .wpforms-form textarea,
	.oc-contact-form-wrapper .wpforms-form select,
	.oc-social-links-contact-1 .wp-block-social-link {
		transition: none !important;
		animation: none !important;
	}

	.oc-contact-info-item:hover,
	.oc-contact-info-item:hover .oc-contact-info-item__icon,
	.oc-contact-form-wrapper .wpforms-form button.wpforms-submit:active,
	.oc-contact-form-wrapper .wpforms-form .wpforms-submit:active,
	.oc-social-links-contact-1 .wp-block-social-link:hover {
		transform: none !important;
	}
}