/* =========================================================
   threadslabin - CONTACT PAGE
   Body class: custom-page-contact-us
   Save as:    assets/css/contact.css

   Built around the block structure already on the page:

     .contact-form-and-info      wrapper
       .contact-form             left column  (holds the CF7 form)
       .contact-info             right column (HTML block + image block)
         .contact-info__inner    the HTML block content
         .support-image          the image block
     .contact-map                full width map above the footer

   Everything is scoped to .custom-page-contact-us, so no rule
   here can reach the shop, blog or checkout.
   ========================================================= */

.custom-page-contact-us {
	--ct-accent: var(--madder, #a8402f);
	--ct-accent-dark: #8c3526;
	--ct-accent-soft: #faf1ef;

	--ct-ink: var(--ink, #1a1d1a);
	--ct-text: var(--ink-soft, #5d625c);
	--ct-muted: #8a8f89;

	--ct-border: rgba(26, 29, 26, 0.13);
	--ct-shadow: 0 20px 50px rgba(26, 29, 26, 0.10);

	--ct-radius: 16px;
	--ct-radius-sm: 10px;
}

/* =========================================================
   1. PAGE FRAME

   page.php wraps every page in .wrap-narrow, which is 680px.
   Right for a text page, far too tight for two columns, so
   this page alone gets the full width the header and footer
   use. Done here rather than in page.php so no other page is
   affected.
   ========================================================= */

.custom-page-contact-us .site-main > .wrap-narrow {
	width: min(100% - 2.5rem, var(--wrap, 1360px));
}

.custom-page-contact-us .site-main {
	padding-top: clamp(2.25rem, 5vw, 3.5rem);
}

/* ---------------------------------------------------------
   No white strip between the map and the footer.

   The gap comes from the stack of wrappers the map sits in:
   .site-main, the <article>, and .entry-content each carry
   their own bottom spacing, and the editor adds a margin to
   the last block. All of them are cleared here.
   --------------------------------------------------------- */

.custom-page-contact-us .site-main,
.custom-page-contact-us .entry,
.custom-page-contact-us article,
.custom-page-contact-us .entry-content {
	margin-bottom: 0;
	padding-bottom: 0;
	max-width: none;
}

.custom-page-contact-us .entry-content > *:last-child {
	margin-bottom: 0;
}

.custom-page-contact-us .contact-map {
	margin-bottom: 0;
}

/*
 * The last gap was not coming from the page at all. style.css puts
 * margin-top: clamp(2.5rem, 6vw, 4rem) on .site-footer, and that margin
 * sits between the map and the footer on every page. Removed here only,
 * so every other page keeps its breathing room.
 */
.custom-page-contact-us .site-footer {
	margin-top: 0 !important;
}

/* Belt and braces: the wrappers the map sits inside */
.custom-page-contact-us .site-content,
.custom-page-contact-us #content {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* The page's own featured image is not part of this layout */
.custom-page-contact-us .entry-thumb { display: none; }

/* =========================================================
   2. PAGE HEADER
   ========================================================= */

.custom-page-contact-us .page-header {
	margin-bottom: 0.9rem;
	text-align: center;
}

.custom-page-contact-us .page-title {
	margin: 0;
	font-family: var(--display, system-ui, sans-serif);
	font-size: clamp(2.5rem, 5vw, 3.9rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--ct-ink);
}

.custom-page-contact-us .short-description {
	max-width: 62ch;
	margin: 0 auto clamp(2.25rem, 5vw, 3.25rem);
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--ct-text);
}

/* =========================================================
   3. TWO COLUMN WRAPPER
   ========================================================= */

.custom-page-contact-us .contact-form-and-info {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: stretch;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	/*
	 * No bottom margin here. The space before the map is set on the map
	 * instead (section 6), so it cannot be swallowed by margin collapse
	 * or by editor block spacing on this wrapper.
	 */
	margin-bottom: 0;
}

/* ---------------------------------------------------------
   LEFT: the form card

   The CF7 form prints its own <div class="contact-form">
   inside this column, so both carry the same class. The
   direct child selector below styles only the outer one.
   --------------------------------------------------------- */

.custom-page-contact-us .contact-form-and-info > .contact-form {
	padding: clamp(1.6rem, 3vw, 2.5rem);
	background: #fff;
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
	box-shadow: var(--ct-shadow);
}

/* =========================================================
   4. THE FORM

   WordPress runs wpautop over a CF7 form, which leaves empty
   paragraphs and stray breaks between the fields.
   ========================================================= */

.custom-page-contact-us .contact-form p { margin: 0; }
.custom-page-contact-us .contact-form p:empty { display: none; }
.custom-page-contact-us .contact-form .cf7-field br { display: none; }

.custom-page-contact-us .cf7-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.15rem;
	margin-bottom: 1.15rem;
}

.custom-page-contact-us .cf7-field { margin-bottom: 1.15rem; }
.custom-page-contact-us .cf7-row .cf7-field { margin-bottom: 0; }

.custom-page-contact-us .cf7-field > label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ct-ink);
}

.custom-page-contact-us .cf7-field abbr {
	color: var(--ct-accent);
	text-decoration: none;
	border: 0;
}

/* ---------- Inputs ---------- */

.custom-page-contact-us .contact-form input[type="text"],
.custom-page-contact-us .contact-form input[type="email"],
.custom-page-contact-us .contact-form input[type="tel"],
.custom-page-contact-us .contact-form input[type="url"],
.custom-page-contact-us .contact-form select,
.custom-page-contact-us .contact-form textarea {
	width: 100%;
	padding: 0.95em 1.05em;
	background: #fff;
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius-sm);
	font-family: var(--body, system-ui, sans-serif);
	/* 16px stops iOS zooming in when a field is tapped */
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ct-ink);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.custom-page-contact-us .contact-form textarea {
	min-height: 170px;
	resize: vertical;
}

.custom-page-contact-us .contact-form input::placeholder,
.custom-page-contact-us .contact-form textarea::placeholder {
	color: var(--ct-muted);
	opacity: 1;
}

.custom-page-contact-us .contact-form input:focus,
.custom-page-contact-us .contact-form select:focus,
.custom-page-contact-us .contact-form textarea:focus {
	outline: none;
	border-color: var(--ct-ink);
	box-shadow: 0 0 0 3px rgba(26, 29, 26, 0.08);
}

/* ---------- Submit ---------- */

.custom-page-contact-us .contact-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	min-width: 210px;
	margin-top: 0.6rem;
	padding: 1.05em 3.4em 1.05em 2.1em;
	background-color: var(--ct-accent);
	/* The arrow is a background image because an <input> cannot
	   carry an ::after pseudo element */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.5em center;
	background-size: 18px 18px;
	border: 0;
	border-radius: var(--ct-radius-sm);
	color: #fff;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.custom-page-contact-us .contact-form input[type="submit"]:hover {
	background-color: var(--ct-accent-dark);
	background-position: right 1.2em center;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(168, 64, 47, 0.3);
}

.custom-page-contact-us .contact-form input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.custom-page-contact-us .wpcf7-spinner {
	margin: 0 0 0 0.8rem;
	vertical-align: middle;
}

/* ---------- CF7 messages ---------- */

.custom-page-contact-us .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ct-accent);
}

.custom-page-contact-us .contact-form .wpcf7-not-valid {
	border-color: var(--ct-accent);
	background: var(--ct-accent-soft);
}

.custom-page-contact-us .wpcf7-response-output {
	margin: 1.4rem 0 0 !important;
	padding: 0.95rem 1.15rem !important;
	border: 1px solid var(--ct-border) !important;
	border-left-width: 3px !important;
	border-radius: var(--ct-radius-sm);
	font-size: 0.92rem;
	line-height: 1.6;
}

.custom-page-contact-us .wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #2f7a4d !important;
	background: #f1f8f3;
	color: #1f5636;
}

.custom-page-contact-us .wpcf7 form.invalid .wpcf7-response-output,
.custom-page-contact-us .wpcf7 form.unaccepted .wpcf7-response-output,
.custom-page-contact-us .wpcf7 form.failed .wpcf7-response-output,
.custom-page-contact-us .wpcf7 form.spam .wpcf7-response-output {
	border-left-color: var(--ct-accent) !important;
	background: var(--ct-accent-soft);
	color: var(--ct-accent-dark);
}

/* =========================================================
   5. RIGHT: the info card

   No padding on the card itself. The HTML block pads its own
   content, which lets the image below sit flush to the edges
   instead of floating in a dark box.
   ========================================================= */

.custom-page-contact-us .contact-info {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	background:
		radial-gradient(circle at 115% 0%, rgba(168, 64, 47, 0.5) 0%, rgba(168, 64, 47, 0) 58%),
		linear-gradient(160deg, #232723 0%, var(--ct-ink) 60%, #141714 100%);
	background-color: var(--ct-ink);
	border-radius: var(--ct-radius);
	box-shadow: var(--ct-shadow);
	color: #fff;
}

/*
 * flex:1 with centred content means the card reads as deliberate whether
 * or not an image block follows it: with no image the rows centre in the
 * height the form column sets, instead of leaving dark space underneath.
 */
.custom-page-contact-us .contact-info__inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 2.8vw, 2.2rem);
}

/* ---------- Info rows ---------- */

.custom-page-contact-us .contact-info__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.custom-page-contact-us .contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 0;
	padding: 1.1rem 0;
}

/* Hairline between rows */
.custom-page-contact-us .contact-info__item + .contact-info__item {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.custom-page-contact-us .contact-info__item:first-child { padding-top: 0; }
.custom-page-contact-us .contact-info__item:last-child { padding-bottom: 0; }

/* ---------- Dashed circle icon ---------- */

.custom-page-contact-us .contact-info__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 1px dashed rgba(255, 255, 255, 0.42);
	border-radius: 50%;
	color: #fff;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.custom-page-contact-us .contact-info__item:hover .contact-info__icon {
	background: var(--ct-accent);
	border-color: var(--ct-accent);
	border-style: solid;
	transform: scale(1.05);
}

.custom-page-contact-us .contact-info__icon svg {
	width: 21px;
	height: 21px;
}

/* ---------- Label and value ---------- */

.custom-page-contact-us .contact-info__body {
	min-width: 0;
	padding-top: 0.1rem;
}

.custom-page-contact-us .contact-info__label {
	display: block;
	margin-bottom: 0.28rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.62);
}

.custom-page-contact-us .contact-info__value,
.custom-page-contact-us .contact-info__body a {
	display: block;
	margin: 0;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.16s ease;
}

.custom-page-contact-us .contact-info__body a:hover { color: #f0b9ae; }

/* ---------- Social row ---------- */

.custom-page-contact-us .contact-social {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.4rem;
	padding-top: 1.3rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.custom-page-contact-us .contact-social__label {
	margin-right: 0.25rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.custom-page-contact-us .contact-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	color: #fff;
	transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.custom-page-contact-us .contact-social a:hover {
	background: var(--ct-accent);
	border-color: var(--ct-accent);
	transform: translateY(-2px);
}

.custom-page-contact-us .contact-social svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------
   Support image

   flex: 1 fills whatever height is left once the info rows
   are placed, so the dark card never ends in a block of
   empty background when the form column is taller.
   --------------------------------------------------------- */

.custom-page-contact-us .support-image {
	flex: 1 1 auto;
	display: block;
	margin: 0;
	padding: 0;
	min-height: 220px;
	line-height: 0;
	background: rgba(255, 255, 255, 0.04);
}

.custom-page-contact-us .support-image img {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 0;
}

.custom-page-contact-us .support-image figcaption { display: none; }

/* =========================================================
   6. FULL WIDTH MAP

   Two lines pull the map out of the centred container to the
   full viewport width. Safe because the theme already sets
   overflow-x: clip on html and body.
   ========================================================= */

.custom-page-contact-us .contact-map {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	/* Matches the space above the form section, so the map is not
	   touching the cards */
	margin-top: clamp(2.25rem, 5vw, 3.5rem);
	/* The ratio decides the height, not the iframe attribute */
	aspect-ratio: 32 / 9;
	background: var(--chalk, #f3f2ed);
	border-top: 1px solid var(--ct-border);
	line-height: 0;
	font-size: 0;
}

.custom-page-contact-us .contact-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* =========================================================
   7. RESPONSIVE
   ========================================================= */

/* Large laptop: pull the columns closer */
@media (max-width: 1280px) {
	.custom-page-contact-us .contact-form-and-info {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

/* Small laptop */
@media (max-width: 1100px) {
	.custom-page-contact-us .contact-info__icon { width: 44px; height: 44px; }
	.custom-page-contact-us .contact-info__icon svg { width: 18px; height: 18px; }
	.custom-page-contact-us .contact-info__item { gap: 0.85rem; }
	.custom-page-contact-us .contact-info__value,
	.custom-page-contact-us .contact-info__body a { font-size: 0.95rem; }

	.custom-page-contact-us .contact-map { aspect-ratio: 21 / 9; }
}

/* Tablet: one column, info card under the form */
@media (max-width: 900px) {
	.custom-page-contact-us .contact-form-and-info {
		grid-template-columns: 1fr;
	}

	/* Stacked, the card is only as tall as its own content, so the
	   vertical centring has nothing to do */
	.custom-page-contact-us .contact-info__inner {
		justify-content: flex-start;
	}

	.custom-page-contact-us .support-image {
		flex: 0 0 auto;
		max-height: 280px;
	}

	.custom-page-contact-us .support-image img { max-height: 280px; }

	.custom-page-contact-us .contact-map { aspect-ratio: 16 / 9; }
}

/* Large phone / small tablet */
@media (max-width: 767px) {
	.custom-page-contact-us .contact-form-and-info {
		gap: 1.25rem;
	}

	.custom-page-contact-us .short-description {
		font-size: 1rem;
		margin-bottom: 2rem;
	}
}

/* Phone: single column fields, full width button */
@media (max-width: 640px) {
	.custom-page-contact-us .site-main > .wrap-narrow {
		width: min(100% - 1.75rem, var(--wrap, 1360px));
	}

	.custom-page-contact-us .cf7-row {
		grid-template-columns: 1fr;
		gap: 0;
		margin-bottom: 0;
	}

	.custom-page-contact-us .cf7-row .cf7-field { margin-bottom: 1.15rem; }

	.custom-page-contact-us .contact-form input[type="submit"] {
		width: 100%;
		justify-content: center;
	}

	.custom-page-contact-us .contact-form textarea { min-height: 140px; }

	.custom-page-contact-us .contact-info__item {
		gap: 0.8rem;
		padding: 0.95rem 0;
	}

	.custom-page-contact-us .contact-social {
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.custom-page-contact-us .support-image { display: none; }

	.custom-page-contact-us .contact-map { aspect-ratio: 4 / 3; }
}

/* Small phone */
@media (max-width: 480px) {
	.custom-page-contact-us .page-title { font-size: 2.2rem; }

	.custom-page-contact-us .short-description {
		font-size: 0.96rem;
		margin-bottom: 1.75rem;
	}

	.custom-page-contact-us .contact-form-and-info > .contact-form,
	.custom-page-contact-us .contact-info__inner {
		padding: 1.15rem;
	}

	/* Smaller circles keep the long office address readable rather than
	   squeezing it into a narrow column */
	.custom-page-contact-us .contact-info__icon { width: 38px; height: 38px; }
	.custom-page-contact-us .contact-info__icon svg { width: 16px; height: 16px; }
	.custom-page-contact-us .contact-info__item { gap: 0.7rem; }

	.custom-page-contact-us .contact-info__label { font-size: 0.8rem; }
	.custom-page-contact-us .contact-info__value,
	.custom-page-contact-us .contact-info__body a { font-size: 0.92rem; }

	.custom-page-contact-us .contact-social a { width: 34px; height: 34px; }
	.custom-page-contact-us .contact-social svg { width: 15px; height: 15px; }

	.custom-page-contact-us .cf7-field > label { font-size: 0.86rem; }

	.custom-page-contact-us .contact-map { aspect-ratio: 1 / 1; }
}

/* =========================================================
   8. MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.custom-page-contact-us .contact-info__icon,
	.custom-page-contact-us .contact-social a,
	.custom-page-contact-us .contact-form input[type="submit"] {
		transition: none !important;
	}

	.custom-page-contact-us .contact-info__item:hover .contact-info__icon,
	.custom-page-contact-us .contact-social a:hover,
	.custom-page-contact-us .contact-form input[type="submit"]:hover {
		transform: none;
	}
}