/* Site header polish pass — desktop nav, country selector, cart badge,
   sticky-on-scroll, mobile menu. Layers on top of the theme's existing
   header markup/CSS in main.css; doesn't replace it. */

/* ---------- Sticky header + scroll shadow ---------- */
.site-header {
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.site-header.tll-header-scrolled {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	background: #fff !important;
	box-shadow: 0 4px 24px rgba(15, 20, 50, 0.1);
	z-index: 999;
}
/* Homepage header sits transparent/absolute over the hero by default
   (theme CSS); once scrolled, force it solid + give its (light-colored,
   made for the dark hero) nav text a readable color. */
.page-template-home-page .site-header.tll-header-scrolled .main-navigation ul .menu-item a {
	color: #1a1a2e !important;
}
/* Reserve the header's height once it's pulled out of flow via fixed
   positioning, so page content doesn't jump upward underneath it. */
body.tll-header-scroll-spacer {
	padding-top: var(--tll-header-height, 70px);
}
.page-template-home-page.tll-header-scroll-spacer {
	padding-top: 0; /* homepage header is already absolute, not in normal flow */
}

/* ---------- Dropdown submenus (e.g. "Practice Areas") ---------- */
.sub-menu {
	background: #fff;
	border: 1px solid #eceef4;
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(15, 20, 50, 0.14);
	padding: 8px;
	margin-top: 8px;
	overflow: hidden;
}
.sub-menu li {
	line-height: normal !important;
}
.sub-menu li a {
	background: transparent !important;
	color: #1a1a2e !important;
	border-radius: 8px;
	padding: 10px 14px !important;
	font-weight: 500;
	background-image: none !important; /* don't inherit the top-level underline-on-hover effect here */
}
.sub-menu li a:hover {
	background-color: #f4f6fb !important;
	color: var(--primary-color) !important;
}

/* ---------- Nav links: animated underline + active state ---------- */
/* An explicit ::after bar with its own `bottom` offset, rather than a
   background-image trick — gives a real, visible gap below the text
   instead of sitting flush against it, and doesn't depend on getting
   the link's own (non-obvious) box height/line-height exactly right. */
.main-navigation ul .menu-item a {
	position: relative;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: color 0.2s ease;
}
.main-navigation ul .menu-item a::after {
	content: '';
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: -6px;
	height: 2px;
	background: var(--primary-color);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.main-navigation ul .menu-item a:hover {
	color: var(--primary-color);
}
.main-navigation ul .menu-item a:hover::after {
	transform: scaleX(1);
}
.main-navigation ul .current-menu-item > a,
.main-navigation ul .current_page_item > a {
	color: var(--primary-color) !important;
	font-weight: 700;
}
.main-navigation ul .current-menu-item > a::after,
.main-navigation ul .current_page_item > a::after {
	transform: scaleX(1);
}
/* The mobile menu (.mobile-header-content) reuses the same .main-navigation
   markup, but as a full-width stacked list, not a narrow inline nav item —
   the underline bar above would render edge-to-edge there instead of a
   tidy line under short text. Mobile already has its own active-state
   treatment (left border accent, see below), so switch this off there. */
.mobile-header-content ul .menu-item a::after {
	content: none;
}

/* ---------- Cart icon: icon + small count badge ---------- */
.tll-cart-link {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	padding: 0 20px !important;
}
.tll-cart-link i {
	font-size: 16px;
}
.tll-cart-count {
	position: absolute;
	top: 14px;
	right: 10px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	background: #22c55e;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	border-radius: 999px;
}

/* ---------- Country selector: pill button + polished dropdown ---------- */
.country-selector {
	margin-left: 14px;
}
.country-button {
	background: #f4f6fb;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 7px 14px 7px 7px;
	font-size: 13px;
	font-weight: 700;
	color: #1a1a2e;
	gap: 7px;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.country-button:hover {
	background: #eceffb;
	box-shadow: 0 2px 10px rgba(15, 20, 50, 0.08);
}
.country-button img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
#country-dropdown {
	border: 1px solid #eceef4;
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(15, 20, 50, 0.16);
	padding: 6px;
	width: 176px;
	margin-top: 8px;
	overflow: hidden;
}
#country-dropdown li {
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 600;
	color: #1a1a2e;
	transition: background-color 0.15s ease;
}
#country-dropdown li img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
#country-dropdown li:hover {
	background: #f4f6fb;
}

/* ---------- Mobile menu polish ---------- */
.mobile-header-content {
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04);
}
.mobile-header-content ul .menu-item a {
	font-weight: 600;
	color: #1a1a2e;
	transition: background-color 0.15s ease, padding-left 0.15s ease;
}
.mobile-header-content ul .menu-item a:hover,
.mobile-header-content ul .menu-item a:active {
	background: #eceffb;
	padding-left: 26px !important;
	color: var(--primary-color);
}
.mobile-header-content ul .current-menu-item > a {
	color: var(--primary-color);
	border-left: 3px solid var(--primary-color);
	padding-left: 17px !important;
}
.main-header-menu-toggle {
	box-shadow: 0 2px 10px rgba(15, 20, 50, 0.08);
	transition: box-shadow 0.15s ease;
}
.main-header-menu-toggle:hover {
	box-shadow: 0 4px 16px rgba(15, 20, 50, 0.14);
}