/*
 * wp-directory — theme utilities.
 *
 * Keep this file minimal by design. Per project convention we build with
 * Bootstrap 5 utilities/components ONLY; a custom class belongs here only when
 * Bootstrap genuinely cannot do the job (fixed pixel dimensions, print
 * flattening, etc.). Each addition must carry a comment justifying the gap.
 */

/*
 * Print flattening: drop the site nav header and footer when printing so legal
 * pages (and any printed listing) come out as clean documents. Bootstrap's
 * d-print-none would require editing the shared header/footer markup for a
 * print-only concern; a scoped @media print rule is the smaller change.
 */
@media print {
	.site-header,
	.site-footer {
		display: none !important;
	}
}

/*
 * Avatars. Bootstrap has rounded-circle but no fixed-size utility, and
 * object-fit-cover needs a constrained box to work. Fixed pixel sizes are the
 * documented escape-hatch case. The <span> placeholder variant sizes its
 * Font Awesome icon to match. Ported from OMO.
 */
.wpd-avatar-preview {
	width: 72px;
	height: 72px;
	min-width: 72px;
	max-width: 72px;
	min-height: 72px;
	max-height: 72px;
	flex: 0 0 72px;
}
.wpd-avatar-preview > i { line-height: 1; font-size: 32px; }

/* Standardized display avatar sizes (wpd_user_avatar). Always a circle;
   flex-basis stops it shrinking inside flex rows. */
.wpd-avatar-xl  { width: 125px; height: 125px; flex: 0 0 125px; object-fit: cover; }
.wpd-avatar-lg  { width: 96px;  height: 96px;  flex: 0 0 96px;  object-fit: cover; }
.wpd-avatar-sm  { width: 48px;  height: 48px;  flex: 0 0 48px;  object-fit: cover; }
.wpd-avatar-nav { width: 28px;  height: 28px;  flex: 0 0 28px;  object-fit: cover; }
span.wpd-avatar-xl  { font-size: 57px; }
span.wpd-avatar-lg  { font-size: 44px; }
span.wpd-avatar-sm  { font-size: 22px; }
span.wpd-avatar-nav { font-size: 15px; }

/* The uploader preview doubles as a click / drag-drop target. */
.js-wpd-avatar-preview { cursor: pointer; }
.js-wpd-avatar-preview.wpd-dropzone--over {
	outline: 3px dashed var(--bs-primary);
	outline-offset: 2px;
}

/*
 * Drag-and-drop photo manager (listing-photos.js). Bootstrap has no dropzone or
 * fixed-aspect thumbnail primitive; colors use Bootstrap variables so it tracks
 * the Design tab. Ported from OMO.
 */
.wpd-dropzone {
	border: 2px dashed var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.wpd-dropzone:hover,
.wpd-dropzone:focus-visible {
	border-color: var(--bs-primary);
	outline: none;
}
.wpd-dropzone--over {
	border-color: var(--bs-primary);
	background-color: var(--bs-primary-bg-subtle);
}
.wpd-photos__item {
	aspect-ratio: 1 / 1;
	cursor: grab;
}
.wpd-photos__item img { width: 100%; height: 100%; }
.wpd-photos__item--drag { opacity: .45; }
.wpd-photos__cover { position: absolute; top: .25rem; left: .25rem; }
.wpd-photos__cover-btn {
	position: absolute;
	top: .25rem;
	left: .25rem;
	padding: 0 .35rem;
	line-height: 1.4;
	opacity: .9;
}
.wpd-photos__remove {
	position: absolute;
	top: .25rem;
	right: .25rem;
	padding: 0 .4rem;
	line-height: 1.4;
}