/**
 * The contact form.
 *
 * Tokens come from the theme (--color-*, --font-*, --radius-*). Nothing here
 * introduces a colour or a typeface of its own.
 *
 * @package Hawksbury_Core
 */

.hk-contact {
	max-width: 42rem;
	margin: 0 0 2rem;
}

.hk-contact__heading {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}

.hk-contact__intro {
	color: var(--color-text-soft);
	margin: 0 0 1.5rem;
}

/* ---------------------------------------------------------------- notices */

.hk-contact__notice {
	padding: 1rem 1.25rem;
	border-radius: var(--radius-card);
	margin-bottom: 1.5rem;
}

.hk-contact__notice--sent {
	background: var(--color-bg-soft);
	border-left: 4px solid var(--color-green);
}

.hk-contact__notice--error {
	background: #fdf4ec;
	border-left: 4px solid var(--color-accent);
}

.hk-contact__notice-title {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	margin: 0 0 0.35rem;
}

.hk-contact__notice p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- fields */

.hk-contact__field {
	margin: 0 0 1.15rem;
}

.hk-contact__field label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--color-text);
}

.hk-contact__optional {
	font-weight: 400;
	color: var(--color-text-muted);
}

.hk-contact__field input[type="text"],
.hk-contact__field input[type="email"],
.hk-contact__field input[type="tel"],
.hk-contact__field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	color: var(--color-text);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
	appearance: none;
}

.hk-contact__field select {
	width: 100%;
	padding: 0.65rem 0.75rem;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	color: var(--color-text);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
}

.hk-contact__field textarea {
	resize: vertical;
	min-height: 9rem;
}

.hk-contact__field input:focus,
.hk-contact__field select:focus,
.hk-contact__field textarea:focus {
	outline: 2px solid var(--color-green);
	outline-offset: -2px;
}

.hk-contact__row {
	display: grid;
	gap: 0 1.25rem;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
	.hk-contact__row {
		grid-template-columns: 1fr;
	}
}

.hk-contact__field--check label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
}

.hk-contact__field--check input[type="checkbox"] {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

.hk-contact__hint {
	display: block;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-top: 0.3rem;
}

.hk-contact__error {
	display: block;
	font-size: 0.85rem;
	color: #a4482c;
	margin-top: 0.3rem;
}

.hk-contact__submit {
	margin: 1.5rem 0 0;
}

/*
 * The honeypot. Hidden by position rather than display:none, because some bots
 * skip fields that are display:none. It is off-screen, aria-hidden and
 * tabindex="-1", so no real visitor can reach it with a mouse, a keyboard or a
 * screen reader — but a script filling every input will find it.
 */
.hk-contact__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Directory join form: service checkboxes (Hawksbury_Directory_Join). */
.hk-directory__join-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.35rem 1rem;border:0;padding:0}
.hk-directory__join-services legend{font-weight:600;margin-bottom:.5rem}
.hk-directory__join-services label{display:flex;gap:.5rem;align-items:center;font-weight:400}

/* Directory plans: the public comparison and the upgrade box on /manage-listing/. */
.hk-directory__billing{margin-top:1.5rem}
.hk-directory__plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:1rem 0}
.hk-directory__plans > p,.hk-directory__plans > input{grid-column:1/-1;margin:0}
.hk-directory__plan{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-bg-soft)}
.hk-directory__plan h3,.hk-directory__plan h4{margin:0;font-family:var(--font-heading)}
.hk-directory__plan ul{margin:0;padding-left:1.1rem}
.hk-directory__plan .btn{margin-top:auto;width:100%;justify-content:center}
.hk-directory__plan .btn + .btn{margin-top:.5rem}
.hk-directory__plan--featured{border-color:var(--color-accent)}
.hk-directory__plan-price{font-weight:600;margin:0}
.hk-directory__plans-offer{font-weight:600}

/* Join form: optional profile sections, closed until opened. */
.hk-directory__join-more{border:2px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-bg-soft);margin:0 0 1rem;overflow:hidden}
.hk-directory__join-more summary{display:flex;align-items:center;gap:.75rem;min-height:3.5rem;padding:.75rem 1rem;cursor:pointer;font-weight:600;list-style:none;-webkit-tap-highlight-color:transparent}
.hk-directory__join-more summary::-webkit-details-marker{display:none}
.hk-directory__join-more summary::after{content:"+";flex:0 0 2rem;height:2rem;margin-left:auto;border-radius:50%;background:var(--color-green);color:#fff;font-size:1.4rem;line-height:2rem;text-align:center}
.hk-directory__join-more[open] summary::after{content:"\2212"}
.hk-directory__join-more summary:hover,.hk-directory__join-more summary:focus-visible{background:var(--color-border)}
.hk-directory__join-more[open] summary{border-bottom:1px solid var(--color-border)}
.hk-directory__join-more > :not(summary){margin-left:1rem;margin-right:1rem}
.hk-directory__join-more[open]{background:transparent;padding-bottom:.5rem}

/* Regular stock rows on /manage-listing/. */
.hk-stock-fields{margin:0 0 1.5rem;padding:0;list-style:none}
.hk-stock-fields__row{display:grid;grid-template-columns:2fr 2fr 1fr;gap:.6rem;margin:0 0 .6rem}
.hk-stock-fields label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;font-weight:600}
.hk-stock-fields input{width:100%;min-width:0}
@media (max-width:640px){.hk-stock-fields__row{grid-template-columns:1fr;padding:0 0 .6rem;border-bottom:1px solid var(--color-border,#ddd)}}