/* Contact page (inc/features/contact.php): lead, store panel and form side by side, quick answers. */

body.yr-contact-page .entry-content { max-width: 1440px; margin-inline: auto; }
.yr-contact { padding: 0 0 104px; display: flex; flex-direction: column; gap: 36px; }
.yr-contact__lead { margin: 0; max-width: 760px; font-size: 18px; line-height: 1.55; }

.yr-contact__cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; }
.yr-contact__store, .yr-contact__form { flex: 1 1 480px; min-width: 0; box-sizing: border-box; background: #FFFFFF; }
.yr-contact__store { display: flex; flex-direction: column; border: 4px solid var(--yr-ink); box-shadow: var(--yr-sh-lg); }
.yr-contact__art {
	position: relative; height: 260px; overflow: hidden; border-bottom: 4px solid var(--yr-ink);
	background: repeating-conic-gradient(from 0deg at 50% 50%, var(--yr-ink) 0deg 1.3deg, var(--yr-paper) 1.3deg 6deg);
}
.yr-contact__art span {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); max-width: calc(100% - 32px); box-sizing: border-box;
	padding: 16px 22px; background: var(--yr-orange); border: 4px solid var(--yr-ink); box-shadow: var(--yr-sh-md);
	font-family: var(--yr-display); font-weight: 800; font-size: 28px; line-height: 1.1; white-space: nowrap;
}
.yr-contact__body { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.yr-contact h2 { margin: 0; font-family: var(--yr-display); font-weight: 800; font-size: 26px; line-height: 1.15; }
.yr-contact__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; font-size: 16px; line-height: 1.6; }
.yr-contact__facts > div:last-child { grid-column: 1 / -1; }
.yr-contact__facts dt { font-weight: 800; color: var(--yr-orange-text); }
.yr-contact__facts dd { margin: 0; overflow-wrap: anywhere; }
.yr-contact__facts a { font-weight: 600; }
.yr-contact__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.yr-contact__btns .yr-btn { min-height: 56px; }

.yr-contact__form { padding: 32px; border: 4px solid var(--yr-ink); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.yr-contact__form--ways { align-self: flex-start; }
.yr-contact__form > p { margin: 0; font-size: 16px; line-height: 1.55; }
.yr-contact__ways { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.yr-contact__ways .yr-btn { width: 100%; min-height: 56px; }
.yr-contact__form .forminator-ui { align-self: stretch; width: 100%; }

/* Forminator's form, in this design (its markup and handling are untouched). Its own stylesheet is very specific, hence the longer selectors and !important. */
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-label { font-family: var(--yr-text) !important; font-weight: 800 !important; font-size: 14px !important; color: var(--yr-ink) !important; }
/* The form uses Forminator's floating-label style (labels sit inside the field until focus; here they end up behind the white input): plain labels above the fields instead. */
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-label { position: static !important; transform: none !important; display: block; margin: 0 0 7px !important; padding: 0 !important; }
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-required { color: #C4251C !important; }
.yr-contact .forminator-ui.forminator-custom-form[data-design] :is(.forminator-input, .forminator-textarea),
.yr-contact .forminator-ui.forminator-custom-form[data-design] .select2-container .select2-selection--single {
	box-sizing: border-box; min-height: 52px; padding: 0 14px !important; background: #FFFFFF !important; color: var(--yr-ink) !important;
	border: 2px solid var(--yr-ink) !important; border-radius: 0 !important; box-shadow: none !important;
	font-family: var(--yr-text) !important; font-size: 16px !important; font-weight: 400 !important;
}
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-textarea { min-height: 150px; padding: 12px 14px !important; resize: vertical; }
.yr-contact .forminator-ui.forminator-custom-form[data-design] :is(.forminator-input, .forminator-textarea):focus { border-color: var(--yr-orange) !important; box-shadow: var(--yr-sh-sm) !important; outline: 0; }
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-is_error :is(.forminator-input, .forminator-textarea),
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-has_error :is(.forminator-input, .forminator-textarea) { border-color: #C4251C !important; background: #FFF5F4 !important; }
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-error-message { font-family: var(--yr-text) !important; font-weight: 600; font-size: 13px; color: #A31E17 !important; background: transparent !important; }
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-description { font-family: var(--yr-text) !important; font-size: 14px; color: var(--yr-muted) !important; }
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit {
	min-height: 56px; padding: 0 28px !important; background: var(--yr-orange) !important; color: var(--yr-ink) !important;
	border: 3px solid var(--yr-ink) !important; border-radius: 0 !important; box-shadow: var(--yr-sh-md) !important;
	font-family: var(--yr-display) !important; font-weight: 800 !important; font-size: 18px !important; cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:hover { background: var(--yr-sun) !important; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--yr-ink) !important; }
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-response-message { border-radius: 0 !important; border: 3px solid var(--yr-ink) !important; background: #FFFFFF !important; color: var(--yr-ink) !important; }
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-response-message.forminator-error { border-color: #C4251C !important; background: #FFF5F4 !important; }
.yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-checkbox .forminator-checkbox-box { border-radius: 0 !important; border-color: var(--yr-ink) !important; }

.yr-contact__quick { display: flex; flex-direction: column; gap: 16px; }
.yr-contact__quick h2 { font-size: 30px; }
.yr-contact__quick ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.yr-contact__quick a {
	display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; padding: 20px;
	background: #FFFFFF; border: 3px solid var(--yr-ink); text-decoration: none;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.yr-contact__quick a:hover { background: var(--yr-sun); transform: translate(-2px, -2px); box-shadow: var(--yr-sh-sm); }
.yr-contact__quick strong { font-size: 16px; font-weight: 800; }
.yr-contact__quick span { font-size: 14px; color: var(--yr-muted); }
.yr-contact__quick a:hover span { color: var(--yr-ink); }

@media (max-width: 689px) {
	.yr-contact { gap: 28px; padding-bottom: 64px; }
	.yr-contact__lead { font-size: 16px; }
	.yr-contact__store { box-shadow: var(--yr-sh-md); }
	.yr-contact__art { height: 180px; }
	.yr-contact__art span { font-size: 20px; padding: 12px 14px; }
	.yr-contact__body { padding: 20px 16px; }
	.yr-contact__form { padding: 22px 16px; }
	.yr-contact__btns .yr-btn { flex: 1 1 100%; }
	.yr-contact__quick h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.yr-contact__quick a, .yr-contact .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit { transition: none; }
}