/* Nottingham Homes – Trades : shared design system
   One green palette used across directory cards, search bar and signup form. */

.nh-wrap {
	--nh-bg:        #f5f3ec;
	--nh-card-bg:   #ffffff;
	--nh-ink:       #1b2a20;
	--nh-muted:     #6f7d70;
	--nh-accent:    #4d7a52;   /* specialty text            */
	--nh-green:     #2f7d4f;   /* verified tick / accents   */
	--nh-cta:       #5f8a4f;   /* primary buttons           */
	--nh-cta-hover: #517a43;
	--nh-dark:      #14342a;
	--nh-chip-bg:   #f1f0e9;
	--nh-border:    #e7e6df;

	background: var(--nh-bg);
	padding: 28px;
	border-radius: 22px;
	color: var(--nh-ink);
	font-family: inherit;
}

/* ---------- search / filter bar ---------- */
.nh-search {
	margin-bottom: 22px;
}
.nh-search__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}
.nh-search__field {
	flex: 1 1 180px;
}
.nh-search__field--main {
	flex: 2 1 280px;
}
.nh-input,
.nh-select {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--nh-border);
	border-radius: 12px;
	background: #fff;
	color: var(--nh-ink);
	font-size: .92rem;
	font-family: inherit;
}
.nh-input:focus,
.nh-select:focus {
	outline: none;
	border-color: var(--nh-cta);
	box-shadow: 0 0 0 3px rgba(95, 138, 79, .18);
}
.nh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: none;
	border-radius: 12px;
	background: var(--nh-cta);
	color: #fff;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
	text-decoration: none;
}
.nh-btn:hover { background: var(--nh-cta-hover); color: #fff; }
.nh-btn--ghost {
	background: transparent;
	color: var(--nh-accent);
	border: 1px solid var(--nh-border);
}
.nh-btn--ghost:hover { background: #fff; color: var(--nh-accent); }
.nh-search__meta {
	margin-top: 12px;
	font-size: .85rem;
	color: var(--nh-muted);
	font-weight: 600;
}

/* ---------- card grid ---------- */
.nh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 20px;
}
.nh-card {
	background: var(--nh-card-bg);
	border: 1px solid var(--nh-border);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 40, 30, .04);
	transition: transform .18s ease, box-shadow .18s ease;
}
.nh-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(20, 52, 42, .12);
}
.nh-card__media {
	position: relative;
	height: 168px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nh-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.nh-card__initials {
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 1px;
	opacity: .92;
}
.nh-badge {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 11px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	color: #fff;
	background: rgba(15, 30, 22, .62);
	backdrop-filter: blur(4px);
}
.nh-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5fd07e;
	box-shadow: 0 0 0 3px rgba(95, 208, 126, .25);
}
.nh-badge--soon .nh-dot {
	background: #d8b24a;
	box-shadow: 0 0 0 3px rgba(216, 178, 74, .25);
}
.nh-card__body { padding: 15px 16px 16px; }
.nh-card__name {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 3px;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--nh-ink);
	line-height: 1.25;
}
.nh-verified { width: 16px; height: 16px; flex: 0 0 auto; }
.nh-card__specialty {
	margin: 0 0 2px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--nh-accent);
}
.nh-card__area {
	margin: 0 0 13px;
	font-size: .78rem;
	color: var(--nh-muted);
}
.nh-card__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.nh-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--nh-chip-bg);
	font-size: .76rem;
	font-weight: 600;
	color: var(--nh-ink);
}
.nh-chip__icon { width: 14px; height: 14px; color: var(--nh-muted); }

/* ---------- empty state ---------- */
.nh-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--nh-muted);
	background: #fff;
	border: 1px dashed var(--nh-border);
	border-radius: 16px;
}

/* ---------- pagination ---------- */
.nh-pager {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 24px;
	flex-wrap: wrap;
}
.nh-pager a,
.nh-pager span {
	min-width: 38px;
	padding: 8px 10px;
	text-align: center;
	border-radius: 10px;
	border: 1px solid var(--nh-border);
	background: #fff;
	color: var(--nh-ink);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
}
.nh-pager a:hover { border-color: var(--nh-cta); color: var(--nh-cta); }
.nh-pager .nh-pager__current {
	background: var(--nh-cta);
	border-color: var(--nh-cta);
	color: #fff;
}

/* ---------- signup form ---------- */
.nh-form {
	max-width: 720px;
	background: #fff;
	border: 1px solid var(--nh-border);
	border-radius: 18px;
	padding: 26px;
}
.nh-form__title {
	margin: 0 0 4px;
	font-size: 1.4rem;
	color: var(--nh-ink);
}
.nh-form__lead {
	margin: 0 0 20px;
	color: var(--nh-muted);
	font-size: .9rem;
}
.nh-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.nh-field { display: flex; flex-direction: column; gap: 6px; }
.nh-field--full { grid-column: 1 / -1; }
.nh-label {
	font-size: .82rem;
	font-weight: 600;
	color: var(--nh-ink);
}
.nh-label span { color: #b23b3b; }
.nh-textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 110px;
	padding: 12px 14px;
	border: 1px solid var(--nh-border);
	border-radius: 12px;
	font-size: .92rem;
	font-family: inherit;
	resize: vertical;
}
.nh-textarea:focus {
	outline: none;
	border-color: var(--nh-cta);
	box-shadow: 0 0 0 3px rgba(95, 138, 79, .18);
}
.nh-form__actions { margin-top: 20px; }

/* ---------- notices ---------- */
.nh-notice {
	padding: 14px 16px;
	border-radius: 12px;
	margin-bottom: 18px;
	font-size: .9rem;
	font-weight: 500;
}
.nh-notice--success { background: #e7f3ea; color: #245540; border: 1px solid #bcdcc5; }
.nh-notice--error   { background: #fbeaea; color: #8a2f2f; border: 1px solid #f0c4c4; }

/* ---------- responsive ---------- */
@media (max-width: 600px) {
	.nh-wrap { padding: 16px; }
	.nh-form__grid { grid-template-columns: 1fr; }
	.nh-search__field, .nh-search__field--main { flex: 1 1 100%; }
}
@media (max-width: 480px) {
	.nh-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ---------- clickable card (links through to the profile page) ---------- */
.nh-card-link { text-decoration: none; color: inherit; display: block; }
.nh-card-link .nh-card { transition: transform .15s ease, box-shadow .15s ease; }
.nh-card-link:hover .nh-card { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,52,42,.12); }