/* ==========================================================================
   Navigation — header chrome, primary menu, Our Brands dropdown, mobile toggle.
   Targets GeneratePress markup (.site-header, .main-navigation, .sub-menu).
   ========================================================================== */

.site-header {
	/* Clean white ground per Figma (no line texture). */
	background-color: var(--wf-hero-bg);
	box-shadow: var(--wf-shadow-header);
	padding-block: 20px;
}

.inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wf-lg);
}

.site-logo img,
.site-header .custom-logo {
	max-height: 40px;
	width: auto;
}

/* --- Primary menu links ------------------------------------------------- */

.main-navigation {
	background: transparent;
}

.main-navigation .main-nav > ul > li > a,
.main-navigation .menu > li > a {
	font-family: var(--wf-font-nav);   /* Figma: Tenon Medium (self-host required) */
	font-size: 1.125rem;   /* 18px — Figma */
	font-weight: 500;      /* Figma: Tenon Medium */
	line-height: 1.222;    /* 22px / 18px */
	letter-spacing: 0;     /* Figma: 0% */
	color: var(--wf-secondary);
	transition: color var(--wf-transition);
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a {
	color: var(--wf-primary);
}

/* --- Our Brands dropdown (icon + title + tagline rows) ------------------ */

.main-navigation .sub-menu {
	background: var(--wf-white);
	border-radius: var(--wf-radius-dropdown);
	box-shadow: var(--wf-shadow-dropdown);
	padding: 0.6rem;
	min-width: 320px;
	border: 0;
}

.main-navigation .sub-menu li a {
	border-radius: 12px;
	padding: 0.6rem 0.9rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wf-secondary);
}

.main-navigation .sub-menu li a:hover {
	background: var(--wf-light-bg);
	color: var(--wf-primary);
}

/* Brand row: circular icon + title + grey tagline (wellfield.io style) */
.main-navigation .sub-menu li a.wf-brand-menu {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.6rem 0.75rem;
}

.wf-brand-menu__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: contain;
	background: var(--wf-white);
}

.wf-brand-menu__body {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.wf-brand-menu__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wf-secondary);
}

.wf-brand-menu__desc {
	font-size: 0.82rem;
	font-weight: 400;
	color: rgba( 28, 32, 36, .55 );
	margin-top: 1px;
}

/* Keep the title slate (not coral) on hover; only the row tints */
.main-navigation .sub-menu li a.wf-brand-menu:hover {
	color: var(--wf-secondary);
}

.main-navigation .sub-menu li a.wf-brand-menu:hover .wf-brand-menu__title {
	color: var(--wf-primary);
}

/* Smooth dropdown reveal */
.main-navigation .main-nav ul ul {
	transition: opacity .18s ease, transform .18s ease;
}

/* --- Investors pill button (add CSS class "menu-item-investors" to the
       menu item in Appearance > Menus) ----------------------------------- */

/* Specificity matches the general nav-link rule (.main-nav > ul > li > a) so the
   coral text colour wins instead of inheriting slate. */
.main-navigation .main-nav > ul > li.menu-item-investors > a,
.main-navigation .menu > li.menu-item-investors > a {
	border: 1.5px solid var(--wf-primary);
	color: var(--wf-primary);
	border-radius: var(--wf-radius-pill);
	padding: 8px 20px !important;
	transition: all var(--wf-transition);
}

.main-navigation .main-nav > ul > li.menu-item-investors > a:hover,
.main-navigation .menu > li.menu-item-investors > a:hover {
	background: var(--wf-primary);
	color: var(--wf-white);
}

/* --- Mobile toggle ----------------------------------------------------- */

.menu-toggle {
	border-radius: 10px;
	width: 44px;
	height: 44px;
	transition: background var(--wf-transition);
}

.menu-toggle:hover {
	background: rgba(28, 32, 36, .07);
}

@media (max-width: 768px) {
	.main-navigation .menu-item-investors > a {
		display: inline-block;
	}

	/* Compact mobile header bar — fixed 84px height, no extra block padding,
	   per Figma. */
	.site-header { padding-block: 0; }
	.has-inline-mobile-toggle .inside-header { height: 84px; }

	/* Hamburger: drop the chip background, centre it on the logo's line, neutral
	   grey icon (#8a8a8a). Selector out-specifies GP core's button.menu-toggle. */
	.inside-header .menu-toggle,
	.inside-header .menu-toggle:hover,
	.inside-header .menu-toggle:focus {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;          /* GP's 60px line-height dropped the icon ~6px low */
		background: transparent;
		color: #8a8a8a;
		align-self: center;
	}
	.menu-toggle .gp-icon,
	.menu-toggle .gp-icon svg { color: #8a8a8a; fill: currentColor; }
}

/* --- Mobile menu panel (≤768px) ---------------------------------------
   The theme runs a transparent header nav, which left the toggled mobile
   menu transparent and overlapping the hero. Rebuild it as a clean,
   full-width white panel that drops beneath the header bar. */
@media (max-width: 768px) {
	/* Let the absolutely-positioned panel escape the fixed-height header. */
	.site-header { overflow: visible; }

	/* Every rule below is scoped to .toggled so the CLOSED menu stays hidden by
	   GeneratePress (these #id selectors would otherwise out-specify GP's
	   display:none and leave the menu open + transparent over the hero). */
	#site-navigation.main-navigation.toggled {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		background: var(--wf-white);
		border-top: 1px solid rgba(0, 0, 0, .06);
		box-shadow: 0 16px 28px rgba(0, 0, 0, .14);
		z-index: 200;
	}
	#site-navigation.toggled .inside-navigation { padding: var(--wf-xs) 0; }

	/* Stack the top-level items full width with hairline dividers. */
	#site-navigation.toggled .main-nav > ul { display: block; }
	#site-navigation.toggled .main-nav > ul > li {
		position: relative;
		display: block;
		width: 100%;
		float: none;
		border-bottom: 1px solid rgba(0, 0, 0, .07);
	}
	#site-navigation.toggled .main-nav > ul > li:last-child { border-bottom: 0; }
	#site-navigation.toggled .main-nav > ul > li > a {
		display: block;
		padding: 15px 24px;
		font-size: 18px;
		line-height: 1.3;
		color: var(--wf-secondary);
	}

	/* GP sub-menu expand chevron pinned to the right of the "Our Brands" row. */
	#site-navigation.toggled .main-nav .dropdown-menu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		padding: 15px 24px;
		line-height: 1.3;
	}

	/* "Our Brands" sub-menu expands inline (indented, light ground) — not a
	   floating card. */
	#site-navigation.toggled .main-nav .sub-menu {
		position: static;
		width: 100%;
		min-width: 0;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		background: var(--wf-light-bg);
	}
	#site-navigation.toggled .main-nav .sub-menu li a,
	#site-navigation.toggled .main-nav .sub-menu li a.wf-brand-menu {
		padding: 12px 24px 12px 36px;
	}

	/* Investors: a left-aligned coral pill in its own row. */
	#site-navigation.toggled .main-nav > ul > li.menu-item-investors {
		padding: 12px 24px;
		border-bottom: 0;
	}
	#site-navigation.toggled .main-nav > ul > li.menu-item-investors > a {
		display: inline-block;
		padding: 8px 22px !important;
	}
}