/*
 * TMT nav — rounded-tab reskin of the parent .main-navigation, to match the
 * Suffusion `#nav` "tab" bar (suf_nav_item_type = tab). Structural behaviour
 * (dropdowns, mobile toggle, keyboard) comes from the parent michael-cards-pro
 * nav CSS + JS — this only restyles. Markup is flat: every top-level tab is a
 * direct <li> child of ul.menu (no extra nesting — #145: a nested wrapper for
 * the last two tabs kept falling through to submenu-level styling).
 */

.main-navigation.tmt-nav {
	background: transparent;
	border: 0;
	/* michael-cards-pro's .main-navigation has `box-shadow: 0 4px 12px
	   rgba(0,0,0,.3)` for its dark bar; against the earth backdrop it renders as
	   an ugly grey band above/below the tab row. Kill it. */
	box-shadow: none;
}

.tmt-nav .nav-inner {
	max-width: 990px;
	margin: 0 auto;
	padding: 0 8px;
}

/* --- top-level row of tabs -------------------------------------------------- */
.tmt-nav .nav-inner > ul.menu {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tmt-nav .nav-inner > ul.menu > li.menu-item {
	position: relative;
	list-style: none;
}

.tmt-nav .nav-inner > ul.menu > li.menu-item > a {
	display: block;
	padding: 9px 14px;
	white-space: nowrap;      /* a tab label never wraps to a second line */
	text-transform: capitalize;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: #444;
	background: #f4f4f4;
	border: 1px solid #ccc;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
}

.tmt-nav .nav-inner > ul.menu > li.menu-item > a:hover,
.tmt-nav .nav-inner > ul.menu > li.menu-item > a:focus,
.tmt-nav .nav-inner > ul.menu > li.menu-item:hover > a,
.tmt-nav .nav-inner > ul.menu > li.current-menu-item > a,
.tmt-nav .nav-inner > ul.menu > li.current-menu-ancestor > a {
	color: #111;
	background: #fff;
}

/* Rounded-tab-pill treatment at EVERY width. Row FLOW splits at 768px:

   > 768px:   one line. ≤900px tightens the tab padding so all the tabs keep
              fitting on a single line down to the breakpoint.
   ≤ 768px:   the shared nav module's wrap-overflow mode takes over
              (functions.php sets mmcNavConfig.overflowMode = 'wrap'). It
              measures the real tab widths, splits them across a balanced
              number of rows for WHATEVER the live top-level count is, and
              flex-grows each row to fill edge-to-edge with proportional
              widths. overflow.js owns the mechanism — the rules below only
              set the pill gaps + keep the labels legible when they narrow.
              768px is michael-cards-pro's homepage 3→2 content-grid
              breakpoint, so the nav and the content re-flow together. */
@media (max-width: 900px) {
	.tmt-nav .nav-inner > ul.menu {
		gap: 1px;
	}
	.tmt-nav .nav-inner > ul.menu > li.menu-item > a {
		padding: 8px clamp(5px, 1.1vw, 14px);
		letter-spacing: -0.1px;
	}
}

@media (max-width: 768px) {
	.tmt-nav .nav-inner > ul.menu {
		column-gap: 3px;
		row-gap: 6px;   /* breathing room between wrapped rows */
	}
	.tmt-nav .nav-inner > ul.menu > li.menu-item > a {
		padding-left: clamp(4px, 1.4vw, 14px);
		padding-right: clamp(4px, 1.4vw, 14px);
		text-align: center;
	}
}

/* Chevrons: DO NOT add our own ::after — michael-cards-pro's nav JS injects real
   .menu-arrow--top / .menu-arrow--nested elements (and suppresses a::after) and
   binds the expand/collapse handlers to the nested BUTTON. An overlaid ::after
   fought that: it sat on the real nested toggle button, so clicking the visible
   chevron hit the link and navigated instead of expanding the sub-submenu
   (agent-workspace.trinity-staging1#145). We only reskin the injected arrows. */
.tmt-nav .nav-inner > ul.menu > li.menu-item > a > .menu-arrow--top {
	color: inherit;
}

.tmt-nav .menu-arrow--nested {
	color: #666;
}

.tmt-nav .menu-arrow--nested:hover,
.tmt-nav ul.sub-menu li.menu-item:hover > .menu-arrow--nested,
.tmt-nav ul.sub-menu li.menu-item.menu-open > .menu-arrow--nested {
	color: #111;
	background: rgba(0, 0, 0, 0.06);
}

/* --- sub-menus ----------------------------------------------------------- */
.tmt-nav ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	/* Must match michael-cards-pro's own `.main-navigation ul ul { z-index: 9999 }`.
	   Our old 1000 (a more specific selector) dropped the sub-menu BELOW the
	   parent nav JS's scroll-clamp hover-guard (z-index 9998), so when a tall
	   menu clamped (short viewport) the invisible guard sat on top and ate every
	   click on the sub-menu links (agent-workspace.trinity-staging1#145). */
	z-index: 9999;
	min-width: 210px;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 0 4px 4px 4px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
	display: none;
}

/* Sub-menu visibility is entirely michael-cards-pro's JS (.menu-open class +
   its own !important display rules) — no CSS :hover reveal here, it would just
   fight the JS. This block only styles the sub-menu box. */

.tmt-nav ul.sub-menu li.menu-item {
	position: relative;
	list-style: none;
}

.tmt-nav ul.sub-menu a {
	display: block;
	padding: 8px 40px 8px 14px;   /* right room for the injected .menu-arrow--nested button */
	text-decoration: none;
	font-size: 13px;
	color: #333;
	white-space: nowrap;
}

.tmt-nav ul.sub-menu a:hover,
.tmt-nav ul.sub-menu a:focus {
	background: #f0f0f0;
	color: #111;
}

/* nested (3rd level +) flies out to the right */
.tmt-nav ul.sub-menu ul.sub-menu {
	top: -5px;
	left: 100%;
	border-radius: 4px;
}

/* No separate ≤480px layout — the 3 + 3 pill grid above carries down to the
   smallest phone. (The old block switched to a full-width flat-row column and a
   static sub-menu, a different visual treatment that broke on mobile Safari.) */