/**
 * dg-hero.css
 * Homepage hero (template-parts/sections/dg-hero.php).
 *
 * Every selector is scoped under .dg-hero / .dg-hero-* so nothing here can
 * touch the site header or other sections. Surface/border/text colors reuse
 * the existing --dg-* tokens; the purple accent ramp is local to the hero
 * (the sitewide --dg-primary is a near-black violet, the hero brief asks for
 * a brighter purple), so it is defined here as --dg-hero-* instead of
 * overriding the global tokens.
 *
 * Layout (RTL: the first grid column sits on the right):
 *   < 768   one column: intro → search → visual → features (2×2)
 *   768+    intro | visual, then search and features full width below
 *   1024+   intro + search + features stacked in one column | visual
 */

.dg-hero {
	--dg-hero-primary: #6D28D9;
	--dg-hero-primary-hover: #5B21B6;
	--dg-hero-secondary: #8B5CF6;
	--dg-hero-accent: #A855F7;
	--dg-hero-tint: #F3EEFF;
	--dg-hero-tint-border: #E4D8FF;
	--dg-hero-ring: rgba(109, 40, 217, 0.18);
	--dg-hero-search-h: 56px;
	--dg-hero-btn-w: 120px;

	position: relative;
	padding-block: clamp(28px, 5vw, 72px) clamp(36px, 6vw, 88px);
	background:
		radial-gradient(60% 70% at 18% 40%, rgba(139, 92, 246, 0.07), transparent 70%),
		var(--dg-background, #F8F8FC);
	color: var(--dg-text-primary, #111827);
	/* Clip (not hide): no scroll container, just guarantees the soft
	   backdrop can never create horizontal overflow. */
	overflow-x: clip;
}

.dg-hero__sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ---------- Grid ---------- */
.dg-hero__inner {
	position: relative;
	/* Same stacking as the previous hero: sits above the sticky header so the
	   search plugin's results panel is never painted over or clipped. */
	z-index: var(--z-hero-search, 150);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"intro"
		"search"
		"visual"
		"features";
	gap: 0;
	align-items: start;
}

.dg-hero__inner > * {
	min-width: 0;
}

.dg-hero__intro    { grid-area: intro; }
.dg-hero-search    { grid-area: search; }
.dg-hero__visual   { grid-area: visual; }
.dg-hero-features  { grid-area: features; }

/* ---------- Intro ---------- */
.dg-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	margin: 0 0 18px;
	padding: 6px 14px;
	border: 1px solid var(--dg-hero-tint-border);
	border-radius: var(--radius-full, 999px);
	background: var(--dg-hero-tint);
	color: var(--dg-hero-primary);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.6;
}

.dg-hero__eyebrow::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dg-hero-accent);
}

/* Persian: never add letter-spacing (it breaks the letter joins). */
.dg-hero__title {
	margin: 0 0 16px;
	font-size: clamp(2rem, 1.35rem + 3vw, 3.5rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--dg-text-primary, #111827);
	text-wrap: balance;
}

.dg-hero__brand {
	color: var(--dg-hero-primary);
}

.dg-hero__description {
	margin: 0 0 28px;
	max-width: 36em;
	font-size: clamp(1rem, 0.92rem + 0.4vw, 1.1875rem);
	line-height: 1.9;
	color: var(--dg-text-secondary, #6B7280);
	text-wrap: pretty;
}

/* ---------- Search ----------
   Works for both the [dgfs_search] plugin markup and the core fallback form:
   the input is the pill, the submit button rides inside it at the inline end.
   The button is positioned from the TOP using the fixed field height, so an
   open results panel below the field can never shift it. */
.dg-hero-search {
	position: relative;
	/* Above every other element in the hero (visual, features) so the
	   results panel the plugin opens is never covered. */
	z-index: 10;
	width: 100%;
	max-width: 620px;
	margin-bottom: 32px;
}

.dg-hero-search form {
	position: relative;
	margin: 0;
}

.dg-hero-search input[type="search"],
.dg-hero-search input[type="text"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: var(--dg-hero-search-h);
	margin: 0;
	padding-block: 0;
	/* start: room for the magnifier; end: room for the button + gap */
	padding-inline-start: 48px;
	padding-inline-end: calc(var(--dg-hero-btn-w) + 18px);
	border: 1px solid var(--dg-border, #E7E7EF);
	border-radius: var(--radius-full, 999px);
	background: var(--dg-surface, #fff);
	box-shadow: 0 10px 28px rgba(109, 40, 217, 0.08);
	font: inherit;
	font-size: 1rem; /* 16px: prevents iOS focus zoom */
	color: var(--dg-text-primary, #111827);
	text-align: start;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dg-hero-search input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

.dg-hero-search input[type="search"]::placeholder,
.dg-hero-search input[type="text"]::placeholder {
	color: var(--dg-text-secondary, #6B7280);
	opacity: 1;
	text-overflow: ellipsis;
}

.dg-hero-search input[type="search"]:focus,
.dg-hero-search input[type="text"]:focus {
	outline: none;
	border-color: var(--dg-hero-primary);
	box-shadow: 0 0 0 4px var(--dg-hero-ring), 0 10px 28px rgba(109, 40, 217, 0.1);
}

/* Fallback form: magnifier inside the field, at the inline start. */
.dg-hero-search__icon {
	position: absolute;
	top: calc(var(--dg-hero-search-h) / 2 - 10px);
	inset-inline-start: 18px;
	width: 20px;
	height: 20px;
	color: var(--dg-text-secondary, #6B7280);
	pointer-events: none;
}

/* Submit button (plugin's <button>/<input type=submit>, or the fallback's). */
.dg-hero-search button,
.dg-hero-search input[type="submit"] {
	position: absolute;
	top: 6px;
	inset-inline-end: 6px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: var(--dg-hero-btn-w);
	height: calc(var(--dg-hero-search-h) - 12px);
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: var(--radius-full, 999px);
	background: var(--dg-hero-primary);
	color: #fff;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transform: none;
	transition: background-color 0.15s ease;
}

.dg-hero-search button:hover,
.dg-hero-search input[type="submit"]:hover {
	background: var(--dg-hero-primary-hover);
}

.dg-hero-search button:focus-visible,
.dg-hero-search input[type="submit"]:focus-visible {
	outline: 3px solid var(--dg-hero-accent);
	outline-offset: 2px;
}

.dg-hero-search button svg {
	flex: none;
	width: 18px;
	height: 18px;
}

/* Icons inside the field stay a quiet gray outline; the button's icon is white. */
.dg-hero-search svg,
.dg-hero-search svg * {
	color: var(--dg-text-secondary, #6B7280) !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2px;
}

.dg-hero-search button svg,
.dg-hero-search button svg * {
	color: #fff !important;
}

/* Button label (added by dg-hero.js if the plugin's button is icon-only). */
.dg-hero-search__label {
	display: inline;
}

/* ---------- Illustration ---------- */
.dg-hero__visual {
	min-width: 0;
	margin-bottom: 28px;
}

.dg-hero__art {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
	/* Reserve the box up front → no layout shift. */
	aspect-ratio: 560 / 480;
	overflow: hidden;
}

.dg-hero__svg {
	display: block;
	width: 100%;
	height: auto;
}

.dg-hero__svg text {
	font-family: inherit;
}

@media (prefers-reduced-motion: no-preference) {
	.dg-hero-float {
		animation: dg-hero-float 7s ease-in-out infinite;
	}

	.dg-hero-float--chart  { animation-duration: 8s; animation-delay: -2s; }
	.dg-hero-float--trust  { animation-duration: 9s; animation-delay: -4s; }
	.dg-hero-float--bubble { animation-duration: 8.5s; animation-delay: -3s; }
	.dg-hero-float--map    { animation-duration: 9.5s; animation-delay: -5s; }
}

@keyframes dg-hero-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

/* ---------- Features ---------- */
.dg-hero-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-hero-features__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	padding: 16px 14px;
}

/* Mobile 2×2: hairlines between cells, no heavy cards. */
.dg-hero-features__item:nth-child(even) {
	border-inline-start: 1px solid var(--dg-border, #E7E7EF);
}

.dg-hero-features__item:nth-child(n + 3) {
	border-block-start: 1px solid var(--dg-border, #E7E7EF);
}

.dg-hero-features__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--dg-hero-tint);
	color: var(--dg-hero-primary);
}

.dg-hero-features__icon svg {
	width: 22px;
	height: 22px;
}

.dg-hero-features__body {
	display: block;
	min-width: 0;
}

.dg-hero-features__title {
	display: block;
	margin-bottom: 2px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dg-text-primary, #111827);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.dg-hero-features__text {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--dg-text-secondary, #6B7280);
	overflow-wrap: anywhere;
}

/* ================= Responsive ================= */

/* ---- Mobile only (< 768): dedicated single column ---- */
@media (max-width: 767.98px) {
	/* Mobile: everything is centered, not start-aligned. */
	.dg-hero__intro,
	.dg-hero-search {
		max-width: 520px;
		margin-inline: auto;
	}

	.dg-hero__intro {
		text-align: center;
	}

	.dg-hero__description {
		margin-inline: auto;
	}

	.dg-hero-features__item {
		align-items: center;
		text-align: center;
	}

	/* The illustration is identical at every width (nothing hidden or
	   cropped); it simply scales down with the column. */
	.dg-hero__art {
		max-width: 460px;
	}

	.dg-hero__visual {
		margin-bottom: 20px;
	}
}

/* ---- Narrow phones (< 480): compact, icon-only button ---- */
@media (max-width: 479.98px) {
	.dg-hero {
		--dg-hero-search-h: 54px;
		--dg-hero-btn-w: 42px;
	}

	.dg-hero__eyebrow {
		font-size: 0.75rem;
		padding-inline: 12px;
	}

	.dg-hero__description {
		margin-bottom: 22px;
	}

	.dg-hero-search {
		margin-bottom: 20px;
	}

	.dg-hero-search input[type="search"],
	.dg-hero-search input[type="text"] {
		padding-inline-start: 44px;
		padding-inline-end: calc(var(--dg-hero-btn-w) + 14px);
		font-size: 1rem;
	}

	.dg-hero-search__icon {
		inset-inline-start: 15px;
	}

	/* Label stays in the DOM for screen readers. */
	.dg-hero-search__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.dg-hero-search button,
	.dg-hero-search input[type="submit"] {
		padding: 0;
	}

	.dg-hero-features__item {
		padding: 14px 10px;
	}

	.dg-hero-features__item:nth-child(odd) {
		padding-inline-start: 4px;
	}
}

/* ---- Tablet (768–1023): intro | visual, search + features full width ---- */
@media (min-width: 768px) {
	.dg-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"intro  visual"
			"search search"
			"features features";
		column-gap: clamp(24px, 4vw, 48px);
		align-items: center;
	}

	.dg-hero__intro {
		align-self: center;
		margin-bottom: 8px;
	}

	.dg-hero__description {
		margin-bottom: 0;
	}

	.dg-hero__visual {
		margin-bottom: 0;
	}

	.dg-hero__art {
		max-width: 420px;
	}

	.dg-hero-search {
		max-width: 680px;
		margin-block: 12px 28px;
	}

	.dg-hero-features {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding-block-start: 8px;
		border-block-start: 1px solid var(--dg-border, #E7E7EF);
	}

	.dg-hero-features__item,
	.dg-hero-features__item:nth-child(odd),
	.dg-hero-features__item:nth-child(even),
	.dg-hero-features__item:nth-child(n + 3) {
		padding: 16px 18px;
		border-block-start: 0;
		border-inline-start: 0;
	}

	.dg-hero-features__item + .dg-hero-features__item {
		border-inline-start: 1px solid var(--dg-border, #E7E7EF);
	}

	.dg-hero-features__item:first-child {
		padding-inline-start: 0;
	}
}

/* ---- Desktop (1024+): two columns, visual spans the left side ---- */
@media (min-width: 1024px) {
	.dg-hero {
		--dg-hero-search-h: 60px;
		--dg-hero-btn-w: 128px;
	}

	.dg-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		grid-template-areas:
			"intro    visual"
			"search   visual"
			"features visual";
		column-gap: clamp(32px, 4vw, 72px);
		align-items: start;
		align-content: center;
	}

	.dg-hero__intro {
		align-self: end;
		margin-bottom: 0;
	}

	.dg-hero__description {
		margin-bottom: 28px;
	}

	.dg-hero-search {
		margin-block: 0 32px;
	}

	.dg-hero__visual {
		align-self: center;
	}

	.dg-hero__art {
		max-width: 560px;
	}

	.dg-hero-features {
		align-self: start;
	}

	.dg-hero-features__item,
	.dg-hero-features__item:nth-child(odd),
	.dg-hero-features__item:nth-child(even),
	.dg-hero-features__item:nth-child(n + 3) {
		padding: 4px 10px;
	}

	.dg-hero-features__item:first-child {
		padding-inline-start: 0;
	}
}

@media (min-width: 1280px) {
	.dg-hero-features__item,
	.dg-hero-features__item:nth-child(odd),
	.dg-hero-features__item:nth-child(even),
	.dg-hero-features__item:nth-child(n + 3) {
		padding-inline: 18px;
	}

	.dg-hero-features__item:first-child {
		padding-inline-start: 0;
	}
}

/* ---------- "All businesses" button (centered under the illustration, all sizes) ---------- */
.dg-hero-all-wrap {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.dg-hero-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 12px 28px;
	border: 1.5px solid var(--dg-hero-primary);
	border-radius: 12px;
	background: var(--dg-hero-primary);
	color: #fff;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dg-hero-all:hover,
.dg-hero-all:focus-visible {
	background: #fff;
	color: var(--dg-hero-primary);
}

.dg-hero-all:focus-visible {
	outline: 3px solid var(--dg-hero-ring);
	outline-offset: 2px;
}