/**
 * Site header. Values below were read directly out of the live site's own
 * generated Elementor CSS for template 378 (fetched from https://l.web36t.com/
 * and saved at migration/reference-css/home-full.css) rather than approximated —
 * search that file for ".elementor-378" to cross-check any value here.
 */

/* Own stacking context above the hero, so hover dropdowns render over the
   section below (the nav list's transform would otherwise trap them). */
.site-header {
	position: relative;
	z-index: 100;
}

.site-header__topbar {
	background-color: var(--plf-color-secondary);
	padding: 5px 0;
}

/* Matches the original's "hide on tablet + hide on mobile" utility classes. */
@media (max-width: 1024px) {
	.site-header__topbar {
		display: none;
	}
}

/* Gutter pair — see the ".container" comment in base.css. */
.site-header__topbar-inner {
	width: calc(100% - (var(--plf-gutter) * 2));
	max-width: var(--plf-container-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.site-header__contact-list,
.site-header__topbar-links {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__contact-list {
	gap: 15px;
	--icon-size: 18px;
}

.site-header__topbar-links {
	gap: 17px;
}

.site-header__contact-list li,
.site-header__topbar-links li {
	display: flex;
	align-items: center;
}

.site-header__contact-list a,
.site-header__topbar-links a,
.site-header__contact-list span.site-header__item-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--plf-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4em;
	color: var(--plf-color-accent);
	text-decoration: none;
}

.site-header__contact-list i {
	color: var(--plf-color-accent);
	font-size: 18px;
}

.site-header__topbar-links i {
	color: var(--plf-color-primary);
	font-size: 18px;
}

.site-header__main {
	padding: 0;
}

@media (max-width: 1024px) {
	/* Vertical only — .site-header__main-inner owns the horizontal gutter. */
	.site-header__main {
		padding: 10px 0;
	}
}

/* Gutter pair — see the ".container" comment in base.css. */
.site-header__main-inner {
	width: calc(100% - (var(--plf-gutter) * 2));
	max-width: var(--plf-container-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}

.site-header__logo-col {
	width: 20%;
	display: flex;
	justify-content: flex-start;
}

.site-header__logo-col img {
	height: 70px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	/* Slight negative to optically align the logo's edge with the content
	   below it — matches the original logo widget's margin-left: -5px. */
	margin-left: -5px;
}

.site-header__nav-col {
	width: 60%;
	display: flex;
	justify-content: center;
}

.site-header__cta-col {
	width: 20%;
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 1024px) {
	.site-header__logo-col {
		width: 40%;
	}
	.site-header__nav-col {
		width: 20%;
	}
	.site-header__cta-col {
		width: 40%;
	}
}

@media (max-width: 767px) {
	.site-header__logo-col {
		width: auto;
		flex: 1 1 auto;
	}
	/* Hamburger sits top-right beside the logo on one row; the phone-CTA button
	   is hidden on mobile (matches the original — call action lives in the menu). */
	.site-header__nav-col {
		width: auto;
		order: 0;
		justify-content: flex-end;
	}
	.site-header__cta-col {
		display: none;
	}
}

/* Primary nav — desktop horizontal menu, collapses to a hamburger + slide-down
   panel at the same ≤1024px breakpoint the original nav widget used. */
.site-nav {
	position: relative;
}

.site-nav__toggle {
	display: none;
	background: var(--plf-color-primary);
	color: var(--plf-color-accent);
	border: 0;
	width: 45px;
	height: 45px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.site-nav__toggle:hover {
	background: var(--plf-color-secondary);
}

.site-nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Nudge the whole menu slightly right to match the original's position. */
	transform: translateX(25px);
}

.site-nav__list > li {
	position: relative;
}

.site-nav__list > li > a {
	display: block;
	/* Vertical padding fills the header height so the dropdown drops from the
	   header's bottom edge with no hover gap (main padding moved here). */
	padding: 34px 15px;
	font-family: var(--plf-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4em;
	color: var(--plf-color-secondary);
	text-decoration: none;
	white-space: nowrap;
}

.site-nav__list > li:hover > a,
.site-nav__list > li.current-menu-item > a,
.site-nav__list > li.current-menu-ancestor > a {
	color: var(--plf-color-primary);
}

/* Down-caret on items that have a sub-menu (Practice Areas, About). Drawn with
   a mask + currentColor so it follows the link colour, incl. the hover state. */
.site-nav__list > li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
}

.site-nav__list > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: 8px;
	width: 11px;
	height: 7px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.site-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	z-index: 20;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--plf-color-accent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Hover-dropdown is desktop-only; on mobile the sub-menu is a tap accordion. */
@media (min-width: 1025px) {
	.site-nav__list > li:hover > .sub-menu {
		display: block;
	}
}

/* Mobile-drawer chrome (overlay, logo/close head, accordion caret) — off on desktop. */
.site-nav__overlay,
.site-nav__panel-head,
.site-nav__submenu-toggle {
	display: none;
}

.site-nav__list .sub-menu a {
	display: block;
	padding: 12px 22px;
	color: var(--plf-color-secondary);
	text-decoration: none;
	font-family: var(--plf-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4em;
	white-space: nowrap;
}

.site-nav__list .sub-menu li:hover > a,
.site-nav__list .sub-menu a:hover {
	background: var(--plf-color-secondary);
	color: var(--plf-color-accent);
}

@media (max-width: 1024px) {
	.site-nav__toggle {
		display: flex;
	}

	/* Dimmed backdrop behind the drawer. */
	.site-nav__overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s ease;
		z-index: 190;
	}
	.site-nav.is-open .site-nav__overlay {
		opacity: 1;
		visibility: visible;
	}

	/* Off-canvas drawer sliding in from the left. */
	.site-nav__panel {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 90%;
		max-width: 420px;
		background: #f5f4f2;
		transform: translateX(-100%);
		transition: transform 0.35s ease;
		z-index: 200;
		overflow-y: auto;
	}
	.site-nav.is-open .site-nav__panel {
		transform: translateX(0);
	}

	.site-nav__panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: var(--plf-color-accent);
		padding: 8px 0 8px 20px;
	}
	.site-nav__panel-logo img {
		height: 55px;
		width: auto;
		display: block;
	}
	.site-nav__close {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 62px;
		height: 62px;
		border: 0;
		background: var(--plf-color-primary);
		color: var(--plf-color-accent);
		font-size: 24px;
		cursor: pointer;
	}

	/* Vertical menu inside the drawer. */
	.site-nav__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		transform: none;
		width: 100%;
		background: transparent;
	}
	.site-nav__list > li {
		position: relative;
	}
	.site-nav__list > li > a {
		padding: 18px 25px;
		font-size: 16px;
		line-height: 22px;
		color: var(--plf-color-secondary);
	}
	/* Hide the desktop inline caret; the tap-circle is used instead. */
	.site-nav__list > li.menu-item-has-children > a::after {
		display: none;
	}

	/* Accordion sub-menu (expanded via JS toggling .is-expanded). */
	.site-nav__list .sub-menu {
		display: none;
		position: static;
		box-shadow: none;
		background: rgba(28, 58, 89, 0.04);
	}
	.site-nav__list .menu-item-has-children.is-expanded > .sub-menu {
		display: block;
	}
	.site-nav__list .sub-menu a {
		padding: 14px 25px;
		font-size: 16px;
		line-height: 22px;
		color: var(--plf-color-primary);
	}
	.site-nav__list .sub-menu li:hover > a,
	.site-nav__list .sub-menu a:hover {
		background: transparent;
		color: var(--plf-color-primary);
	}

	/* Tappable caret pill on parent items. */
	.site-nav__submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 16px;
		right: 25px;
		width: 46px;
		height: 30px;
		border: 1px solid var(--plf-color-border);
		border-radius: 15px;
		background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%231C3A59' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 7 7.5 13 1.5'/%3E%3C/svg%3E") no-repeat center / 11px;
		cursor: pointer;
		transition: transform 0.2s ease;
	}
	.site-nav__list .menu-item-has-children.is-expanded > .site-nav__submenu-toggle {
		transform: rotate(180deg);
	}
}

.site-header__cta-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--plf-button-bg);
	color: var(--plf-button-color);
	font-family: var(--plf-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4em;
	padding: var(--plf-button-padding-y) var(--plf-button-padding-x);
	border-radius: var(--plf-button-radius);
	text-decoration: none;
	white-space: nowrap;
}

.site-header__cta-button:hover {
	background: var(--plf-button-bg-hover);
}