/**
 * Contact page.
 */

.contato {
	--contato-section-space: clamp(3rem, 4vw, 4rem);
}

.contato .wp-block-post-content,
.contato .wp-block-post-content > * {
	margin-block: 0;
}

.contato__hero {
	background:
		linear-gradient(180deg, rgba(17, 17, 17, 0.42), rgba(17, 17, 17, 0.58) 55%, #111 100%),
		var(--duplatech-page-hero-contact, var(--duplatech-hero-contact, url(../images/figma/contact-hero-reference-derived.png)));
	background-position: center;
	background-size: cover;
	display: grid;
	min-height: clamp(15rem, 22vw, 20rem);
	place-items: center;
	position: relative;
}

.contato .wp-block-post-content .contato__hero-content {
	box-sizing: border-box;
	margin-inline: auto;
	padding: 3rem 1rem 5rem;
	text-align: center;
	width: min(100%, 78rem);
}

.contato__hero-content h1 {
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	line-height: 1.05;
	margin: 0;
}

.contato__hero-content p {
	color: var(--wp--preset--color--text-secondary);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	margin: 0.75rem 0 0;
}

.contato__section {
	padding-block: var(--contato-section-space);
}

.contato__main {
	background: #111;
	padding-block: 2rem 5rem;
}

.contato .wp-block-post-content .contato__columns {
	box-sizing: border-box;
	gap: clamp(2rem, 4vw, 3rem);
	margin-inline: auto;
	max-width: 78rem;
	width: calc(100% - 2rem);
}

.contato__columns > .wp-block-column {
	min-width: 0;
}

.contato__eyebrow {
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	letter-spacing: 0.1em;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

.contato__intro-title {
	font-size: clamp(2rem, 2.6vw, 2.5rem);
	line-height: 1;
	margin: 0 0 1rem;
	max-width: 8em;
}

.contato__columns > .wp-block-column:first-child > .contato__eyebrow {
	margin: 0 0 0.75rem;
}

.contato__intro-copy {
	font-size: 1rem;
	line-height: 1.35;
	margin: 0;
	max-width: 28rem;
}

.contato__info-list {
	display: grid;
	gap: 1.125rem;
	margin-top: 2rem;
	width: 100%;
}

.contato .wp-block-post-content .contato__info-list > *,
.contato .wp-block-post-content .contato__info-card > * {
	margin-block: 0;
}

.contato__info-card {
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 0.75rem;
	box-sizing: border-box;
	padding: 1rem;
	width: 100%;
}

.contato__info-card:not(.contato__hours) {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 0.75rem;
	height: 4.25rem;
	min-height: 0;
	padding-block: 0.625rem;
}

.contato__info-icon {
	align-items: center;
	background: rgba(245, 184, 0, 0.1);
	border-radius: 0.625rem;
	display: flex;
	grid-row: 1 / 3;
	height: 2.25rem;
	justify-content: center;
	width: 2.25rem;
}

.contato__info-icon img {
	height: 1rem;
	width: 1rem;
}

.contato__info-card:not(.contato__hours) > :where(.contato__label, p) {
	grid-column: 2;
	justify-self: stretch;
	margin-inline: 0 !important; /* Override Core's constrained-layout auto margins. */
	max-width: none;
	text-align: left;
	width: 100%;
}

.contato__info-card p {
	line-height: 1.15;
	margin: 0;
}

.contato__info-card a {
	color: var(--wp--preset--color--text-primary);
	font-size: 0.75rem;
	font-weight: 700;
}

.contato__info-card small {
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.5625rem;
	display: inline-block;
	margin-top: 0.15rem;
}

.contato__label,
.contato__hours h2 {
	color: var(--wp--preset--color--brand-primary);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
}

.contato__hours table,
.contato__hours th,
.contato__hours td {
	border: 0;
}

.contato__hours table {
	margin: 0;
	width: 100%;
}

.contato__hours {
	min-height: 7rem;
	padding: 1rem;
}

.contato__hours th,
.contato__hours td {
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.625rem;
	font-weight: 400;
	padding: 0.25rem 0;
}

.contato__hours td {
	text-align: right;
}

.contato__hours th {
	text-align: left;
}

.contato-form {
	background:
		radial-gradient(circle at 100% 0, rgba(245, 184, 0, 0.05), transparent 32%),
		var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 1rem;
	box-sizing: border-box;
	padding: 1.25rem;
	width: 100%;
}

@media (min-width: 64rem) {

	.contato .wp-block-post-content .contato__columns {
		align-items: stretch;
	}

	.contato__columns > .wp-block-column {
		align-self: stretch;
	}

	.contato__columns > .wp-block-column:first-child {
		display: flex;
		flex-direction: column;
	}

	.contato__info-list {
		grid-template-rows: 4.25rem 4.25rem 7rem;
	}

	.contato-form {
		height: 100%;
	}
}

.contato-form h2 {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 1rem;
	max-width: none;
}

.contato-form__notice {
	border-left: 3px solid currentcolor;
	border-radius: 0.25rem;
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
}

.contato-form__notice--success {
	color: #92d49b;
}

.contato-form__notice--error {
	color: #ffaaa3;
}

.contato-form__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contato-form p {
	margin: 0;
}

.contato-form label {
	color: var(--wp--preset--color--text-secondary);
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.contato-form input,
.contato-form textarea {
	background: #242424;
	border: 1px solid #3c3c3c;
	border-radius: 0.5rem;
	box-sizing: border-box;
	color: var(--wp--preset--color--text-primary);
	font-size: 1rem;
	padding: 0.75rem 0.875rem;
	width: 100%;
}

.contato-form input::placeholder,
.contato-form textarea::placeholder {
	color: #8d8d8d;
	opacity: 1;
}

.contato-form input {
	height: 2.75rem;
}

.contato-form :where(input:focus, textarea:focus) {
	border-color: var(--wp--preset--color--brand-primary);
	outline: 2px solid var(--wp--preset--color--brand-primary);
	outline-offset: 2px;
}

.contato-form__message {
	margin-top: 0.75rem !important;
}

.contato-form textarea {
	height: 6.5rem;
	min-height: 6.5rem;
	resize: vertical;
}

.contato-form__website {
	left: -9999px;
	position: absolute;
}

.contato-form button {
	align-items: center;
	background: var(--wp--preset--color--brand-primary);
	border: 0;
	border-radius: 0.5rem;
	box-sizing: border-box;
	color: var(--wp--preset--color--brand-on-primary);
	cursor: pointer;
	display: flex;
	font-weight: 800;
	gap: 1rem;
	justify-content: center;
	font-size: 0.875rem;
	margin-top: 1rem;
	min-height: 2.75rem;
	padding: 0 1.5rem;
	width: 100%;
}

.contato-form button::after {
	content: "→";
	font-size: 1rem;
}

.contato-form button:hover {
	background: var(--wp--preset--color--text-primary);
}

.contato-form__privacy {
	font-size: 0.72rem;
	margin-top: 0.5rem !important;
	text-align: center;
}

.contato__faq {
	background: #090909;
	padding-block: 8rem;
}

.contato__faq > h2 {
	font-size: 3.25rem;
	margin-bottom: clamp(2.75rem, 6vw, 4rem);
}

.contato__faq-list {
	display: grid;
	gap: 0.75rem;
	margin-inline: auto;
	max-width: 45rem;
}

.contato__faq-list .wp-block-details {
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 0.75rem;
	margin: 0;
	padding: 1.25rem 1.5rem;
	width: 100%;
}

.contato__faq-list summary {
	color: var(--wp--preset--color--text-primary);
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	padding-right: 2.5rem;
	position: relative;
}

.contato__faq-list summary::-webkit-details-marker {
	display: none;
}

.contato__faq-list summary::after {
	align-items: center;
	background: #292929;
	border-radius: 50%;
	color: var(--wp--preset--color--text-secondary);
	content: "+";
	display: flex;
	font-size: 1.25rem;
	height: 2rem;
	justify-content: center;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 2rem;
}

.contato__faq-list details[open] summary::after {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--brand-on-primary);
	content: "×";
}

.contato__faq-list details p {
	margin: 1.25rem 0 0;
}

@media (max-width: 63.99rem) {

	.contato__columns {
		flex-wrap: wrap;
	}

	.contato__columns > .wp-block-column {
		flex-basis: 100%;
	}

	.contato__info-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.contato__hours {
		grid-column: 1 / -1;
	}
}

@media (max-width: 47.99rem) {

	.contato__hero {
		min-height: 12rem;
	}

	.contato__columns > .wp-block-column:first-child {
		order: 2;
	}

	.contato__columns > .wp-block-column:last-child {
		order: 1;
	}

	.contato .wp-block-post-content .contato__hero-content {
		padding-block: 2.5rem 4rem;
	}

	.contato__section {
		padding-block: clamp(3rem, 12vw, 4rem);
	}

	.contato__info-list,
	.contato-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.contato__hours {
		grid-column: auto;
	}

	.contato-form {
		padding: 1.25rem;
	}

	.contato__faq {
		min-height: auto;
		padding-inline: var(--wp--preset--spacing--60);
	}

	.contato__faq-list summary {
		align-items: center;
		display: flex;
		min-height: 2.75rem;
	}
}

@media (prefers-contrast: more) {

	.contato__info-card,
	.contato-form,
	.contato__faq-list .wp-block-details {
		border-color: var(--wp--preset--color--text-secondary);
	}
}