/**
 * DHUKR utility classes. Small, single-purpose helpers shared by blocks and
 * templates. Depends on tokens.css.
 */

/* Visually hidden but available to screen readers (e.g. WPForms labels). */
.dh-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.dh-text-center { text-align: center; }

.dh-uppercase { text-transform: uppercase; }

/* Strip list styling (menus, logo rows, card lists). */
.dh-list-reset {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cover image inside a sized wrapper (cards, split hero). */
.dh-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Rounded media (cards, images in content-image). */
.dh-rounded { border-radius: var(--dh-radius-card); }

/* Hide on a breakpoint range (same ranges as the padding fields). */
@media only screen and (min-width: 1201px) {
	.dh-hide-desktop { display: none !important; }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
	.dh-hide-tablet { display: none !important; }
}

@media only screen and (max-width: 768px) {
	.dh-hide-mobile { display: none !important; }
}

/* ==========================================================================
   Section vertical spacing
   Used in the "Section classes" field of every block except the hero.
   Format: dh-{pt|pb}-{d|t|m}-{px}   e.g. dh-pt-d-96 dh-pb-d-96 dh-pt-m-48
   pt = padding-top, pb = padding-bottom; d / t / m = desktop / tablet / mobile.
   Values: 0 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 120 px.
   ========================================================================== */

/* Desktop: >= 1201px */
@media only screen and (min-width: 1201px) {
	.dh-pt-d-0 { padding-top: 0px; }
	.dh-pt-d-16 { padding-top: 16px; }
	.dh-pt-d-24 { padding-top: 24px; }
	.dh-pt-d-32 { padding-top: 32px; }
	.dh-pt-d-48 { padding-top: 48px; }
	.dh-pt-d-64 { padding-top: 64px; }
	.dh-pt-d-80 { padding-top: 80px; }
	.dh-pt-d-96 { padding-top: 96px; }
	.dh-pt-d-120 { padding-top: 120px; }
	.dh-pb-d-0 { padding-bottom: 0px; }
	.dh-pb-d-16 { padding-bottom: 16px; }
	.dh-pb-d-24 { padding-bottom: 24px; }
	.dh-pb-d-32 { padding-bottom: 32px; }
	.dh-pb-d-48 { padding-bottom: 48px; }
	.dh-pb-d-64 { padding-bottom: 64px; }
	.dh-pb-d-80 { padding-bottom: 80px; }
	.dh-pb-d-96 { padding-bottom: 96px; }
	.dh-pb-d-120 { padding-bottom: 120px; }
}

/* Tablet: 769px - 1200px */
@media screen and (min-width: 769px) and (max-width: 1200px) {
	.dh-pt-t-0 { padding-top: 0px; }
	.dh-pt-t-16 { padding-top: 16px; }
	.dh-pt-t-24 { padding-top: 24px; }
	.dh-pt-t-32 { padding-top: 32px; }
	.dh-pt-t-48 { padding-top: 48px; }
	.dh-pt-t-64 { padding-top: 64px; }
	.dh-pt-t-80 { padding-top: 80px; }
	.dh-pt-t-96 { padding-top: 96px; }
	.dh-pt-t-120 { padding-top: 120px; }
	.dh-pb-t-0 { padding-bottom: 0px; }
	.dh-pb-t-16 { padding-bottom: 16px; }
	.dh-pb-t-24 { padding-bottom: 24px; }
	.dh-pb-t-32 { padding-bottom: 32px; }
	.dh-pb-t-48 { padding-bottom: 48px; }
	.dh-pb-t-64 { padding-bottom: 64px; }
	.dh-pb-t-80 { padding-bottom: 80px; }
	.dh-pb-t-96 { padding-bottom: 96px; }
	.dh-pb-t-120 { padding-bottom: 120px; }
}

/* Mobile: <= 768px */
@media only screen and (max-width: 768px) {
	.dh-pt-m-0 { padding-top: 0px; }
	.dh-pt-m-16 { padding-top: 16px; }
	.dh-pt-m-24 { padding-top: 24px; }
	.dh-pt-m-32 { padding-top: 32px; }
	.dh-pt-m-48 { padding-top: 48px; }
	.dh-pt-m-64 { padding-top: 64px; }
	.dh-pt-m-80 { padding-top: 80px; }
	.dh-pt-m-96 { padding-top: 96px; }
	.dh-pt-m-120 { padding-top: 120px; }
	.dh-pb-m-0 { padding-bottom: 0px; }
	.dh-pb-m-16 { padding-bottom: 16px; }
	.dh-pb-m-24 { padding-bottom: 24px; }
	.dh-pb-m-32 { padding-bottom: 32px; }
	.dh-pb-m-48 { padding-bottom: 48px; }
	.dh-pb-m-64 { padding-bottom: 64px; }
	.dh-pb-m-80 { padding-bottom: 80px; }
	.dh-pb-m-96 { padding-bottom: 96px; }
	.dh-pb-m-120 { padding-bottom: 120px; }
}