/**
 * DarNest supplementary styles.
 * theme.json + block supports handle colors/typography/spacing; this file
 * only adds the signature visual motifs that core blocks can't express
 * through block supports alone, applied via "additional CSS class" on
 * ordinary Group/Image/Cover blocks inside the patterns.
 */

/* ---------- Signature arch frame (used on hero + about + listing hero images) ---------- */
.has-arch-frame {
	border-radius: 52% 52% 0 0 / 62% 62% 0 0;
	overflow: hidden;
	position: relative;
}
.has-arch-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.has-arch-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 6px rgba(251, 248, 243, 0.9);
	pointer-events: none;
}

/* ---------- Mashrabiya lattice texture (dark sections: hero, CTA bands, footer) ---------- */
.has-lattice-bg {
	position: relative;
	overflow: hidden;
}
.has-lattice-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.14;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 10px 10px, transparent 6px, var(--wp--preset--color--gold) 6.5px, var(--wp--preset--color--gold) 7px, transparent 7.5px),
		repeating-linear-gradient(45deg, transparent 0 18px, rgba(201, 161, 92, 0.5) 18px 19px),
		repeating-linear-gradient(-45deg, transparent 0 18px, rgba(201, 161, 92, 0.5) 18px 19px);
	background-size: 36px 36px, 36px 36px, 36px 36px;
}
.has-lattice-bg > * {
	position: relative;
	z-index: 2;
}

/* ---------- Hero floating stat badge ---------- */
.darnest-hero-badge {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border-radius: 16px;
	box-shadow: 0 20px 50px -25px rgba(18, 36, 31, 0.35);
	padding: 18px 22px !important;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	max-width: 230px;
}

/* ---------- Icon badge container (wraps a small Image block icon) ---------- */
.darnest-icon-badge {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(31, 111, 84, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.darnest-icon-badge.is-gold {
	background: rgba(201, 161, 92, 0.15);
}
.darnest-icon-badge img {
	width: 26px;
	height: 26px;
	display: block;
}

/* ---------- Generic card hover lift, used on benefit/service cards ---------- */
.darnest-hover-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.darnest-hover-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 50px -25px rgba(18, 36, 31, 0.35);
}

/* ---------- Eyebrow label above section headings ---------- */
.darnest-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--emerald);
	letter-spacing: 0.03em;
}
.darnest-eyebrow::before {
	content: "";
	width: 20px;
	height: 2px;
	background: var(--wp--preset--color--gold);
	display: inline-block;
}

/* ---------- RTL-safe corrections (site is authored with logical properties
   already via theme.json, this covers the few remaining physical-direction
   edge cases from core blocks) ---------- */
html[dir="rtl"] .darnest-hero-badge {
	right: auto;
}

/* ---------- Small screens: keep sections comfortable ---------- */
@media (max-width: 600px) {
	.has-arch-frame {
		border-radius: 36px 36px 0 0 / 44px 44px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.darnest-hover-card,
	.has-arch-frame,
	* {
		transition: none !important;
	}
}