/**
 * Argo Shop — Contact page + Contact Form 7.
 *
 * Presentation only. Do not change CF7 / reCAPTCHA gating behaviour here.
 * Job 16J.3 / 16J.3c: consent notice + fail-closed CF7 submit (Complianz marketing gate).
 */

/* ------------------------------------------------------------------
   Page shell
   ------------------------------------------------------------------ */

#main-content {
	background: #FFF9F5;
}

.argo-contact-page {
	--ac-plum: #2A141C;
	--ac-cream: #FDF0E3;
	--ac-page: #FFF9F5;
	--ac-white: #FFFFFF;
	--ac-terracotta: #C06F4B;
	--ac-terracotta-text: #A4532F;
	--ac-pink: #F2A0C0;
	--ac-raspberry: #DD527E;
	--ac-border: #F4D4E1;
	--ac-input-border: #A98595;
	--ac-muted: #5C4A52;
	--ac-radius-card: 24px;
	--ac-radius-form: 28px;
	--ac-radius-input: 14px;

	font-family: Poppins, sans-serif;
	color: var(--ac-plum);
	max-width: 1120px;
	margin: 0 auto;
	padding: 8px 0 48px;
	box-sizing: border-box;
}

.argo-contact-page *,
.argo-contact-page *::before,
.argo-contact-page *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Intro
   ------------------------------------------------------------------ */

.argo-contact-hero {
	margin: 0 0 28px;
	max-width: 40rem;
}

.argo-contact-eyebrow {
	margin: 0 0 8px !important;
	color: var(--ac-terracotta-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.argo-contact-title {
	margin: 0 0 12px !important;
	color: var(--ac-plum);
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
}

.argo-contact-lead {
	margin: 0 !important;
	color: var(--ac-muted);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
}

/* ------------------------------------------------------------------
   Quick answer pills
   ------------------------------------------------------------------ */

.argo-contact-quick {
	margin: 0 0 28px;
}

.argo-contact-quick__title {
	margin: 0 0 14px !important;
	color: var(--ac-plum);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.argo-contact-quick__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.argo-contact-quick__item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.argo-contact-quick__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--ac-border);
	border-radius: 999px;
	background: var(--ac-white);
	color: var(--ac-plum);
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.argo-contact-quick__pill:hover {
	border-color: var(--ac-pink);
	background: var(--ac-cream);
	color: var(--ac-plum);
}

.argo-contact-quick__pill:focus {
	outline: none;
}

.argo-contact-quick__pill:focus-visible {
	outline: 2px solid var(--ac-raspberry);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Layout — desktop ~40 / 60; stack under 900px
   Desktop: visit + reach left, form right
   Mobile:  reach → form → visit
   ------------------------------------------------------------------ */

.argo-contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	grid-template-areas:
		"visit form"
		"reach form";
	gap: 24px;
	align-items: start;
}

.argo-contact-visit {
	grid-area: visit;
}

.argo-contact-reach {
	grid-area: reach;
}

.argo-contact-form-panel {
	grid-area: form;
}

/* ------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------ */

.argo-contact-card {
	background: var(--ac-white);
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius-card);
	padding: 32px;
}

.argo-contact-card--form {
	border-radius: var(--ac-radius-form);
	box-shadow: 0 12px 32px rgba(42, 20, 28, 0.08);
}

.argo-contact-card__title {
	margin: 0 0 16px !important;
	color: var(--ac-plum);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.argo-contact-form-req {
	margin: 0 0 20px !important;
	color: var(--ac-terracotta-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
   Reach — phone / email
   ------------------------------------------------------------------ */

.argo-contact-reach__list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.argo-contact-reach__list > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.argo-contact-card--reach {
	padding: 24px;
}

.argo-contact-reach__btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 56px;
	padding: 12px 18px;
	border: 1px solid var(--ac-border);
	border-radius: 16px;
	background: var(--ac-page);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.argo-contact-reach__btn:hover {
	border-color: var(--ac-pink);
	background: var(--ac-cream);
}

.argo-contact-reach__btn:focus {
	outline: none;
}

.argo-contact-reach__btn:focus-visible {
	outline: 2px solid var(--ac-raspberry);
	outline-offset: 2px;
}

.argo-contact-reach__label {
	color: var(--ac-terracotta-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.argo-contact-reach__value {
	color: var(--ac-plum);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	word-break: break-word;
}

.argo-contact-reach__note {
	margin: 0 !important;
	padding: 14px 16px;
	border: 1px solid var(--ac-border);
	border-radius: 16px;
	background: var(--ac-cream);
	color: var(--ac-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

/* ------------------------------------------------------------------
   Visit the shop
   ------------------------------------------------------------------ */

.argo-contact-visit__address {
	margin: 0 0 10px;
	padding: 0;
	font-style: normal;
	color: var(--ac-plum);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
}

.argo-contact-visit__line {
	display: block;
}

.argo-contact-visit__line--muted {
	color: var(--ac-muted);
	font-weight: 400;
}

.argo-contact-visit__directions {
	margin: 0 0 22px !important;
}

.argo-contact-visit__directions-link {
	color: var(--ac-plum);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--ac-raspberry);
	text-underline-offset: 3px;
}

.argo-contact-visit__directions-link:hover {
	color: var(--ac-plum);
}

.argo-contact-visit__directions-link:focus {
	outline: none;
}

.argo-contact-visit__directions-link:focus-visible {
	outline: 2px solid var(--ac-raspberry);
	outline-offset: 2px;
	border-radius: 2px;
}

.argo-contact-visit__hours-title {
	margin: 0 0 10px !important;
	color: var(--ac-plum);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.argo-contact-visit__hours {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	gap: 6px;
}

.argo-contact-visit__hours-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 0;
	color: var(--ac-plum);
	font-size: 14px;
	line-height: 1.4;
}

.argo-contact-visit__day {
	font-weight: 500;
}

.argo-contact-visit__time {
	font-weight: 400;
	color: var(--ac-muted);
	text-align: right;
}

.argo-contact-visit__hours-row.is-closed .argo-contact-visit__time {
	color: var(--ac-terracotta-text);
	font-weight: 600;
}

/* Open in Google Maps panel (link, no iframe) */
.argo-contact-maps-panel {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 72px;
	padding: 14px 16px;
	border: 1px solid var(--ac-border);
	border-radius: 18px;
	background: linear-gradient(135deg, #FFF9F5 0%, #FDF0E3 55%, #F8E0EA 100%);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.argo-contact-maps-panel:hover {
	border-color: var(--ac-pink);
	box-shadow: 0 4px 16px rgba(42, 20, 28, 0.06);
}

.argo-contact-maps-panel:focus {
	outline: none;
}

.argo-contact-maps-panel:focus-visible {
	outline: 2px solid var(--ac-raspberry);
	outline-offset: 2px;
}

.argo-contact-maps-panel__icon {
	display: flex;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

.argo-contact-maps-panel__icon svg {
	display: block;
	width: 40px;
	height: 40px;
}

.argo-contact-maps-panel__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.argo-contact-maps-panel__title {
	color: var(--ac-plum);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.argo-contact-maps-panel__sub {
	color: var(--ac-terracotta-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

/* ------------------------------------------------------------------
   Form wrap + CF7
   ------------------------------------------------------------------ */

.argo-contact-form-wrap .wpcf7 {
	margin: 0;
}

.argo-contact-form-wrap .wpcf7-form > p:last-of-type {
	margin-bottom: 0;
}

.argo-contact-form-fallback {
	margin: 0 !important;
	padding: 16px;
	border: 1px solid var(--ac-border);
	border-radius: 16px;
	background: var(--ac-cream);
	color: var(--ac-muted);
	font-size: 14px;
	line-height: 1.5;
}

.argo-contact-form .argo-form-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px !important;
	margin: 0 0 4px;
}

.argo-contact-form .argo-form-row > p {
	margin: 0 0 16px !important;
}

.argo-contact-form > p {
	margin: 0 0 16px !important;
}

.argo-contact-form label {
	display: block !important;
	color: var(--ac-plum) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	margin-bottom: 0 !important;
	line-height: 1.3 !important;
}

.argo-contact-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

.argo-contact-form input[type="text"],
.argo-contact-form input[type="email"],
.argo-contact-form input[type="tel"],
.argo-contact-form input[type="url"],
.argo-contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.argo-contact-form textarea {
	width: 100% !important;
	margin-top: 0 !important;
	height: 52px !important;
	min-height: 52px !important;
	border: 1px solid var(--ac-input-border) !important;
	background: var(--ac-page) !important;
	color: var(--ac-plum) !important;
	border-radius: var(--ac-radius-input) !important;
	padding: 12px 16px !important;
	font-size: 16px !important; /* Spec 16px; also avoids iOS input zoom */
	font-weight: 400 !important;
	font-family: Poppins, sans-serif !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	-webkit-appearance: none;
	appearance: none;
}

.argo-contact-form textarea {
	height: auto !important;
	min-height: 140px !important;
	resize: vertical !important;
	padding-top: 14px !important;
}

.argo-contact-form input::placeholder,
.argo-contact-form textarea::placeholder {
	color: #8A7380 !important;
	font-weight: 400 !important;
	opacity: 1 !important;
}

.argo-contact-form input:focus,
.argo-contact-form textarea:focus {
	border-color: var(--ac-raspberry) !important;
	outline: 2px solid var(--ac-raspberry) !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}

.argo-contact-form input:focus-visible,
.argo-contact-form textarea:focus-visible {
	outline: 2px solid var(--ac-raspberry) !important;
	outline-offset: 0 !important;
}

/* Submit — always visually present */
.argo-contact-form input[type="submit"],
.argo-contact-form .wpcf7-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 180px !important;
	height: 56px !important;
	min-height: 56px !important;
	margin-top: 8px !important;
	padding: 0 32px !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--ac-plum) !important;
	color: #FFFFFF !important;
	font-family: Poppins, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.argo-contact-form input[type="submit"]:hover,
.argo-contact-form .wpcf7-submit:hover {
	background: #3D1C2A !important;
	color: #FFFFFF !important;
}

.argo-contact-form input[type="submit"]:focus,
.argo-contact-form .wpcf7-submit:focus {
	outline: none !important;
}

.argo-contact-form input[type="submit"]:focus-visible,
.argo-contact-form .wpcf7-submit:focus-visible {
	outline: 2px solid var(--ac-raspberry) !important;
	outline-offset: 3px !important;
}

/* ===== Argo contact form: result messages and spinner ===== */

/* Hide the message box until there is something to show */
body .wpcf7 form.wpcf7-form.init .wpcf7-response-output,
body .wpcf7form.wpcf7-form.resetting .wpcf7-response-output,
body .wpcf7form.wpcf7-form .wpcf7-response-output:empty {
	display: none !important;
}

/* Default look = problem message (soft raspberry) */
body .wpcf7form.wpcf7-form .wpcf7-response-output {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 20px 0 0;
	padding: 14px 18px;
	border: 1px solid #DD527E;
	border-radius: 16px;
	background: #FDE7EE;
	color: #7A1F3D;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	box-shadow: none;
}
body .wpcf7form.wpcf7-form .wpcf7-response-output::before {
	content: "";
	position: static;
	display: block;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23DD527E'/%3E%3Cpath d='M12 6.500v6.500' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.300' fill='white'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
}
body .wpcf7form.wpcf7-form .wpcf7-response-output::after {
	display: none;
}

/* Success = calm cream with a plum check */
body .wpcf7form.wpcf7-form.sent .wpcf7-response-output,
body .wpcf7form.wpcf7-form[data-status="sent"] .wpcf7-response-output {
	border-color: #F2A0C0;
	background: #FDF0E3;
	color: #2A141C;
}
body .wpcf7form.wpcf7-form.sent .wpcf7-response-output::before,
body .wpcf7form.wpcf7-form[data-status="sent"] .wpcf7-response-output::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%232A141C'/%3E%3Cpath d='M7 12.500l3.200 3.200L17 9' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
}

/* Messages under each field */
body .wpcf7form.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #A12B4F;
}
body .wpcf7form.wpcf7-form .wpcf7-not-valid {
	border-color: #DD527E !important;
	box-shadow: 0 0 0 1px #DD527E;
}

/* Spinner next to the Send button */
body .wpcf7form.wpcf7-form .wpcf7-spinner {
	width: 22px;
	height: 22px;
	margin: 0 0 0 16px;
	padding: 0;
	border: 3px solid rgba(42, 20, 28, 0.15);
	border-top-color: #DD527E;
	border-radius: 50%;
	background: transparent;
	opacity: 1;
	vertical-align: middle;
	animation: argo-spin 0.8s linear infinite;
}
body .wpcf7form.wpcf7-form .wpcf7-spinner::before {
	display: none;
	content: none;
}
@keyframes argo-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	body .wpcf7form.wpcf7-form .wpcf7-spinner { animation-duration: 2.5s; }
}

/* Button while sending */
body .wpcf7form.wpcf7-form.submitting input.wpcf7-submit {
	opacity: 0.65;
	cursor: wait;
	pointer-events: none;
}
/* ===== end Argo contact form messages ===== */

/* ------------------------------------------------------------------
   Cloudflare Turnstile note (under Send message)
   ------------------------------------------------------------------ */

.argo-contact-turnstile-note {
	margin: 14px 0 0 !important;
	padding: 0;
	color: #5E4A53;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

.argo-contact-turnstile-note__link {
	color: #5E4A53;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: #DD527E;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.argo-contact-turnstile-note__link:hover {
	color: #5E4A53;
}

.argo-contact-turnstile-note__link:focus {
	outline: none;
}

.argo-contact-turnstile-note__link:focus-visible {
	outline: 2px solid #DD527E;
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------------------------
   Mobile / tablet — under 900px
   Order: reach → form → visit
   ------------------------------------------------------------------ */

@media (max-width: 899px) {
	.argo-contact-page {
		padding-bottom: 36px;
	}

	.argo-contact-hero {
		margin-bottom: 22px;
	}

	.argo-contact-lead {
		font-size: 14px;
	}

	.argo-contact-quick {
		margin-bottom: 22px;
	}

	.argo-contact-layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"reach"
			"form"
			"visit";
		gap: 20px;
	}

	.argo-contact-card {
		padding: 24px;
	}

	.argo-contact-card--form {
		border-radius: 24px;
	}

	.argo-contact-reach__list {
		gap: 12px;
		margin-bottom: 12px;
	}

	.argo-contact-card--reach {
		padding: 0;
		border: 0;
		background: transparent;
		border-radius: 0;
	}

	.argo-contact-reach__btn {
		position: relative;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		height: 56px;
		min-height: 56px;
		padding: 0 20px;
		border-radius: 999px;
		border: 1px solid var(--ac-pink);
		background: var(--ac-white);
		text-align: center;
	}

	.argo-contact-reach__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.argo-contact-reach__value {
		font-size: 15px;
	}

	.argo-contact-form .argo-form-row {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}

	.argo-contact-form input[type="submit"],
	.argo-contact-form .wpcf7-submit {
		width: 100% !important;
		min-width: 0 !important;
	}
}

@media (max-width: 480px) {
	.argo-contact-quick__pill {
		flex: 1 1 calc(50% - 10px);
		text-align: center;
		padding-left: 12px;
		padding-right: 12px;
		font-size: 13px;
	}

	.argo-contact-form input[type="text"],
	.argo-contact-form input[type="email"],
	.argo-contact-form input[type="tel"],
	.argo-contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	.argo-contact-form textarea {
		font-size: 16px !important;
	}
}