/*
 * Buttons, form controls, and card primitives.
 *
 * Namespaced under .urban-* so nothing here needs !important to win — one
 * of the concrete lessons from the legacy Additional CSS audit (472 uses of
 * !important, entirely from fighting Elementor's inline specificity).
 *
 * The button system's interaction pattern (sharp corners, letter-spacing
 * that expands on hover alongside a color invert) is informed by a
 * consistent pattern found in the legacy CSS across three button variants —
 * see docs/legacy-design-inventory.md — reimplemented here from scratch,
 * not copied.
 */

/* ---------- Buttons ---------- */

.urban-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--urban-btn-height);
	padding: 0 var(--urban-space-6);
	border: 1px solid transparent;
	border-radius: var(--urban-radius-none);
	font-family: var(--urban-font-family);
	font-size: var(--urban-text-button-size);
	font-weight: var(--urban-text-button-weight);
	letter-spacing: var(--urban-text-button-tracking);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
		letter-spacing 0.3s ease;
}

.urban-btn:hover {
	letter-spacing: 0.16em;
}

.urban-btn--gold {
	background-color: var(--urban-gold);
	border-color: var(--urban-gold);
	color: var(--urban-black);
}

.urban-btn--gold:hover {
	background-color: transparent;
	color: var(--urban-gold);
}

.urban-btn--outline-black {
	background-color: transparent;
	border-color: var(--urban-black);
	color: var(--urban-black);
}

.urban-btn--outline-black:hover {
	background-color: var(--urban-black);
	color: var(--urban-white);
}

.urban-btn--outline-gold {
	background-color: transparent;
	border-color: var(--urban-gold);
	color: var(--urban-gold);
}

.urban-btn--outline-gold:hover {
	background-color: var(--urban-gold);
	color: var(--urban-black);
}

.urban-btn:disabled,
.urban-btn[aria-disabled='true'] {
	opacity: 0.5;
	cursor: not-allowed;
	letter-spacing: var(--urban-text-button-tracking);
}

/* ---------- Forms ---------- */

.urban-field {
	margin-bottom: var(--urban-space-5);
}

.urban-label {
	display: block;
	margin-bottom: var(--urban-space-2);
	font-size: var(--urban-text-label-size);
	font-weight: var(--urban-text-label-weight);
	letter-spacing: var(--urban-text-label-tracking);
	text-transform: uppercase;
	color: var(--urban-text);
}

.urban-input,
.urban-select,
.urban-textarea {
	width: 100%;
	min-height: var(--urban-input-height);
	padding: var(--urban-space-3) var(--urban-space-4);
	border: 1px solid var(--urban-border);
	border-radius: var(--urban-radius-sm);
	background-color: var(--urban-surface);
	color: var(--urban-text);
	font-family: var(--urban-font-family);
	font-size: var(--urban-text-body-size);
}

.urban-textarea {
	min-height: 8rem;
	resize: vertical;
}

.urban-input:focus,
.urban-select:focus,
.urban-textarea:focus {
	outline: 2px solid var(--urban-gold);
	outline-offset: 1px;
	border-color: var(--urban-gold);
}

.urban-field-error {
	margin-top: var(--urban-space-2);
	color: var(--urban-error);
	font-size: var(--urban-text-small-size);
}

.urban-field-error[hidden] {
	display: none;
}

/* Honeypot pattern used by urban-commerce's future contact form — hidden
   from sighted users and keyboard tab order, but not display:none, since
   some bots specifically skip display:none fields. */
.urban-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Notices (native WordPress/WooCommerce notices, styled) ---------- */

.urban-notice {
	padding: var(--urban-space-4) var(--urban-space-5);
	border: 1px solid var(--urban-border);
	border-left-width: 3px;
	border-radius: var(--urban-radius-sm);
	font-size: var(--urban-text-small-size);
}

.urban-notice--success {
	border-left-color: var(--urban-success);
	color: var(--urban-success);
}

.urban-notice--warning {
	border-left-color: var(--urban-warning);
	color: var(--urban-warning);
}

.urban-notice--error {
	border-left-color: var(--urban-error);
	color: var(--urban-error);
}

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

.urban-card {
	display: flex;
	flex-direction: column;
	background-color: var(--urban-surface);
}

.urban-card__media {
	aspect-ratio: var(--urban-ratio-product);
	background-color: var(--urban-surface-alt);
	overflow: hidden;
}

.urban-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.urban-card__title {
	margin-top: var(--urban-space-3);
	font-size: var(--urban-text-product-name-size);
	font-weight: var(--urban-text-product-name-weight);
	line-height: var(--urban-text-product-name-leading);
}

.urban-card__price {
	margin-top: var(--urban-space-1);
	font-size: var(--urban-text-price-size);
	font-weight: var(--urban-text-price-weight);
}

.urban-card__meta {
	margin-top: var(--urban-space-1);
	font-size: var(--urban-text-meta-size);
	color: var(--urban-text-muted);
}

/* Product badge primitive — actual badge logic (new/low-stock/etc.) is a
   urban-commerce responsibility (Phase 2F extension point), this is just
   the shared visual token. */
.urban-badge {
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: var(--urban-radius-pill);
	font-size: var(--urban-text-meta-size);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background-color: var(--urban-black);
	color: var(--urban-white);
}

.urban-badge--gold {
	background-color: var(--urban-gold);
	color: var(--urban-black);
}

/*
 * Product card (template-parts/home/product-card.php) — built in Phase 4
 * for the homepage, reused as-is in Phase 5 for Shop/category archives and
 * related products. Moved here from home.css (which only loads on
 * is_front_page()) because the card is no longer homepage-only; it needs
 * to be styled everywhere it's used. Confirmed by measurement: unstyled on
 * the Shop page before this move (display defaulted to the browser's
 * inline default for an <a>, aspect-ratio never applied, name/price
 * rendered side-by-side instead of stacked whenever the product name was
 * short enough not to visually mask the missing flex layout).
 */
.urban-product-card {
	display: flex;
	flex-direction: column;
	gap: var(--urban-space-2);
	color: var(--urban-text);
}

.urban-product-card__media {
	position: relative;
	display: block;
	aspect-ratio: var(--urban-ratio-product);
	overflow: hidden;
	background-color: var(--urban-surface-alt);
}

.urban-product-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.urban-product-card__image--placeholder {
	background-color: var(--urban-surface-alt);
}

.urban-product-card__badge {
	position: absolute;
	top: var(--urban-space-3);
	left: var(--urban-space-3);
	background-color: var(--urban-black);
	color: var(--urban-white);
	font-size: var(--urban-text-small-size);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: var(--urban-space-1) var(--urban-space-3);
}

.urban-product-card__name {
	font-size: var(--urban-text-product-name-size);
	font-weight: var(--urban-text-product-name-weight);
	line-height: var(--urban-text-product-name-leading);
	color: var(--urban-black);
}

.urban-product-card__price {
	font-size: var(--urban-text-price-size);
	font-weight: var(--urban-text-price-weight);
	color: var(--urban-text-muted);
}

.urban-product-card__price ins {
	color: var(--urban-black);
	text-decoration: none;
}

.urban-product-card__price del {
	opacity: 0.6;
	margin-right: var(--urban-space-2);
}