/* ==========================================================================
   D'Amore Law Group: header and pop-up cleanup (Juris Digital, Nov 2026)
   Loads after the theme stylesheet (areia-theme). Selectors are scoped under #wrapper
   on purpose: the theme sets color/fill on * with !important in some states
   (#wrapper.internal #header-top *, #header-top.scroll ...).
   Breakpoints follow the theme: mobile/tablet <= 1024px, hamburger < 1280px.
   ========================================================================== */
:root {
	--jd-gold: #BB8E42;
	--jd-gold-ink: #0F1F3D;
	--jd-navy: #13305E;
	--jd-ink: #222222;
	--jd-sparkle: #E2C48C;
	--jd-sparkle-dark: #A87C33;
	--jd-mobile-bar-h: 48px;
	--jd-mobile-row-h: 96px;
}

/* ---------- Icons: theme sets fill and color on *, keep ours stroke-only ---------- */
#wrapper #header-top svg.jd-icon,
#wrapper header#header svg.jd-icon,
html body section#banner svg.jd-icon {
	fill: none !important;
}
#wrapper #header-top svg.jd-icon *,
#wrapper header#header svg.jd-icon *,
html body section#banner svg.jd-icon * {
	fill: none !important;
	color: inherit !important;
}

/* ---------- Utility bar: color states ---------- */
#wrapper #header-top #header-container {
	--jd-tag: #ffffff;
	--jd-fg: #ffffff;
	--jd-outline: rgba(255, 255, 255, 0.85);
	--jd-spark: var(--jd-sparkle);
	--jd-divider: rgba(255, 255, 255, 0.4);
	height: 100%;
}
#wrapper #header-top.scroll #header-container,
#wrapper.internal #header-top #header-container {
	--jd-tag: var(--jd-ink);
	--jd-fg: var(--jd-navy);
	--jd-outline: var(--jd-navy);
	--jd-spark: var(--jd-sparkle-dark);
	--jd-divider: #C9D1DD;
}
#wrapper #header-top #header-container .jd-actions *,
#wrapper #header-top #header-container .jd-util a *,
#wrapper #header-top #header-container .jd-util-tagline {
	font-size: inherit;
	line-height: inherit;
	color: inherit !important;
}

/* ---------- Desktop utility bar (1025px and up) ---------- */
#wrapper #header-top #header-container .jd-util-tagline {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
	color: var(--jd-tag) !important;
}
#wrapper #header-top #header-container .jd-util {
	display: flex;
	align-items: center;
	gap: 14px;
}
#wrapper #header-top #header-container .jd-util-call {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 6px;
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-decoration: none;
	color: var(--jd-fg) !important;
}
#wrapper #header-top #header-container .jd-util-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	box-sizing: border-box;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-decoration: none;
}
#wrapper #header-top #header-container .jd-util-btn--text {
	padding: 0 18px;
	background: var(--jd-gold);
	color: var(--jd-gold-ink) !important;
}
#wrapper #header-top #header-container .jd-util-btn--ai {
	border: 1.5px solid var(--jd-outline);
	color: var(--jd-fg) !important;
}
#wrapper #header-top #header-container .jd-util-btn--ai svg.jd-icon {
	color: var(--jd-spark) !important;
}
#wrapper #header-top #header-container .jd-util-divider {
	width: 1px;
	height: 24px;
	margin: 0 6px;
	background: var(--jd-divider);
}

/* Weglot menu: text only, show only the other language */
#wrapper #header-top #header-container #menu-utility-menu {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
#wrapper #header-top #header-container #menu-utility-menu li {
	margin: 0;
	padding: 0;
}
#wrapper #header-top #header-container #menu-utility-menu a {
	padding: 8px 2px;
	font-size: 16px;
	line-height: 1;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--jd-fg) !important;
}
html[lang^="en"] #wrapper #header-top #menu-utility-menu li.wg-en,
html[lang^="es"] #wrapper #header-top #menu-utility-menu li.wg-es {
	display: none;
}
#wrapper #header-top #menu-utility-menu .weglot-flags > a::before,
#wrapper #header-top #menu-utility-menu .weglot-flags > span::before {
	display: none !important;
}

@media (min-width: 1025px) and (max-width: 1199px) {
	#wrapper #header-top #header-container .jd-util-tagline { font-size: 14px; }
	#wrapper #header-top #header-container .jd-util { gap: 10px; }
	#wrapper #header-top #header-container .jd-util-call__label { display: none; }
}

/* ---------- Mobile/tablet action bar (1024px and below) ---------- */
#wrapper #header-top #header-container .jd-action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	font-size: 15px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-decoration: none;
	color: #ffffff !important;
}
#wrapper #header-top #header-container .jd-action--text {
	background: var(--jd-gold);
	color: var(--jd-gold-ink) !important;
}
@media (min-width: 1025px) {
	#wrapper #header-top #header-container .jd-actions { display: none; }
}
@media (max-width: 1024px) {
	#wrapper #header-top {
		height: var(--jd-mobile-bar-h);
	}
	#wrapper #header-top #header-container {
		padding: 0;
		max-width: none !important;
	}
	#wrapper #header-top #header-container .jd-util-tagline,
	#wrapper #header-top #header-container .jd-util {
		display: none;
	}
	#wrapper #header-top #header-container .jd-actions {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
		height: 100%;
		background: var(--jd-navy);
	}
	#wrapper header#header {
		height: var(--jd-mobile-row-h);
	}
	#wrapper header#header img.custom-logo {
		max-width: 96px;
	}
	#wrapper header#header .hamb {
		padding: 30px 10px;
	}
	#wrapper header#header.scroll {
		top: calc(var(--jd-mobile-bar-h) - 1px);
	}
	/* Keep the homepage hero exactly where it is today.
	   Old header 60 + 120 = 180 with top:-185px. New 48 + 96 = 144, so -149px. */
	html body.home section#banner {
		top: -149px;
	}
}

/* ---------- Mobile language link next to the hamburger ---------- */
#wrapper header#header .jd-lang-mobile { display: none; }
@media (max-width: 1024px) {
	#wrapper header#header .jd-lang-mobile {
		display: flex;
		align-items: center;
		float: right;
		height: 63px;
		padding: 0 8px;
		font-size: 15px;
		line-height: 1;
		font-weight: 500;
		text-decoration: underline;
		text-underline-offset: 3px;
		color: #ffffff;
	}
	#wrapper header#header.scroll .jd-lang-mobile,
	#wrapper.internal header#header .jd-lang-mobile {
		color: var(--jd-navy);
	}
}

/* ---------- Hamburger menu additions ---------- */
#wrapper header#header .jd-menu-extras,
#wrapper header#header .jd-menu-utility {
	display: none;
}
@media (max-width: 1279px) {
	#wrapper header#header .jd-menu-extras {
		display: block;
		padding: 16px 0 8px;
	}
	#wrapper header#header .jd-menu-ai {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 14px 16px;
		border: 1px solid rgba(226, 196, 140, 0.6);
		border-radius: 6px;
		background: rgba(255, 255, 255, 0.06);
		text-decoration: none;
		color: #ffffff;
	}
	#wrapper header#header .jd-menu-ai svg.jd-icon {
		flex-shrink: 0;
		color: var(--jd-sparkle);
	}
	#wrapper header#header .jd-menu-ai__text {
		display: flex;
		flex-direction: column;
		gap: 3px;
	}
	#wrapper header#header .jd-menu-ai__title {
		font-size: 16px;
		line-height: 1.3;
		font-weight: 700;
		letter-spacing: 0.3px;
		color: #ffffff;
	}
	#wrapper header#header .jd-menu-ai__sub {
		font-size: 14px;
		line-height: 1.4;
		font-weight: 400;
		color: #D6DEEA;
	}
}
@media (max-width: 1024px) {
	#wrapper header#header .jd-menu-utility {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-top: 18px;
		padding-top: 14px;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}
	#wrapper header#header .jd-menu-utility .jd-lang-menu {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 10px 0;
		font-size: 15px;
		line-height: 1;
		font-weight: 500;
		text-decoration: underline;
		text-underline-offset: 3px;
		color: #ffffff;
	}
	#wrapper header#header .jd-menu-social {
		display: flex;
		gap: 4px;
	}
	#wrapper header#header .jd-menu-social a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		color: #ffffff;
	}
}

/* ---------- Homepage hero: overlay + AI link ---------- */
html body.home section#banner.global-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(8, 18, 36, 0.5) 0, rgba(8, 18, 36, 0) 260px),
		linear-gradient(90deg, rgba(8, 18, 36, 0.05) 35%, rgba(8, 18, 36, 0.45) 100%);
}
@media (max-width: 1024px) {
	html body.home section#banner.global-banner::before {
		background: linear-gradient(180deg,
			rgba(8, 18, 36, 0.55) 0,
			rgba(8, 18, 36, 0.05) 220px,
			rgba(8, 18, 36, 0.05) 380px,
			rgba(8, 18, 36, 0.72) 100%);
	}
}
html body.home section#banner .jd-hero-ai {
	margin: 12px 0 0;
	padding-left: var(--space-8);
}
html body.home section#banner .jd-hero-ai a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 500;
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 4px;
}
html body.home section#banner .jd-hero-ai a span {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
}
html body.home section#banner .jd-hero-ai svg.jd-icon {
	flex-shrink: 0;
	color: var(--jd-sparkle);
}
@media (max-width: 1024px) {
	html body.home section#banner .jd-hero-ai {
		margin-top: 6px;
		padding-left: 0;
	}
	html body.home section#banner .jd-hero-ai a {
		gap: 8px;
		font-size: 16px;
	}
}

/* ---------- Internal-page offsets (theme uses 60px for the old bar height) ---------- */
@media (max-width: 1024px) {
	html body:not(.home) #wrapper header#header {
		top: var(--jd-mobile-bar-h);                       /* theme: 60px */
	}
	html body:not(.home) #wrapper header#header.scroll {
		top: calc(var(--jd-mobile-bar-h) - 1px);           /* theme: 59px */
	}
	html body:not(.home) section#banner,
	html body.page-template-page-about section#banner,
	html body:not(.home) main {
		top: var(--jd-mobile-bar-h) !important;            /* theme: 60px */
	}
}

/* Kenect: the floating launcher button and its prompt bubble are hidden. The widget itself stays installed and
   the header "Text Us" buttons open its chat panel (assets/js/jd-header-cleanup.js). The chat panel
   (#iframe-wrapper-*) is a separate element and is not affected. */
body > div[id^="widget-"]:has(> div[id^="button-"]),
#widget-kyvncSimhvXLmkKPPYGvJy {
	display: none !important;
}

/* Close button laid over the Kenect chat panel's header (see assets/js/jd-header-cleanup.js, section 4). */
.jd-kenect-close {
	position: fixed;
	z-index: 2147483001;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.18);
	color: #fff;
	cursor: pointer;
}
.jd-kenect-close[hidden] {
	display: none;
}
.jd-kenect-close:hover {
	background: rgba(0, 0, 0, 0.32);
}
.jd-kenect-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---------- Homepage hero on phones and tablets: centre the photo on the man ---------- */
/* The template sets the hero photo to "center", which crops it to the middle of the image and cuts his face off at the left edge.
   His face sits at about 38% of the image width, so shift the crop there. Desktop (>= 1024px) keeps the template's own position. */
@media (max-width: 1023px) {
	html body.home #banner.global-banner {
		background-position: 34% center !important;
	}
}