/*
 * Grouped navigation: drop-down menu, section tabs, group tiles, jump bar.
 * Loaded after the skin and before mobile.css.
 */

/* ---------- Main menu with sections ---------- */
.nav .menu > li { position: relative; }
.nav .sub-menu { display: block; list-style: none; margin: 0; padding: 0; }
.nav .sub-menu a { display: block; border-radius: 12px; padding: 10px 12px; font-size: .95rem; line-height: 1.25; }
.nav .sub-menu a small { display: block; margin-top: 2px; font-size: .8rem; font-weight: 500; color: var(--muted); }
.nav .current-menu-ancestor > a, .nav .current-menu-parent > a { background: var(--steel-2); color: var(--navy); }
.sub-toggle {
	border: 0; background: none; color: inherit; cursor: pointer; padding: 0;
	display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
}
.sub-toggle::before {
	content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--spring, ease);
}
.sub-open > .sub-toggle::before { transform: translateY(2px) rotate(-135deg); }

@media (min-width: 981px) {
	.nav .menu > li { display: flex; align-items: center; }
	.nav .menu > li > a { padding-right: 4px; }
	.nav .menu > li > .sub-toggle { margin-right: 6px; }
	.nav .sub-menu {
		position: absolute; top: calc(100% + 8px); left: 0; z-index: 130; width: 300px;
		padding: 8px; background: var(--card); color: var(--fg);
		border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .35);
		opacity: 0; visibility: hidden; transform: translateY(6px);
		transition: opacity .2s, transform .3s var(--spring, ease), visibility 0s linear .3s;
	}
	/* a bridge, so the pointer can travel from the link to the panel */
	.nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
	.nav .menu > li:hover > .sub-menu,
	.nav .menu > li:focus-within > .sub-menu,
	.nav .menu > li.sub-open > .sub-menu {
		opacity: 1; visibility: visible; transform: none;
		transition: opacity .2s, transform .3s var(--spring, ease), visibility 0s;
	}
	.nav .menu > li.sub-closed > .sub-menu { opacity: 0; visibility: hidden; }
	.nav .menu > li:last-child > .sub-menu, .nav .menu > li:nth-last-child(2) > .sub-menu { left: auto; right: 0; }
	[dir="rtl"] .nav .sub-menu { left: auto; right: 0; }
	[dir="rtl"] .nav .menu > li:last-child > .sub-menu, [dir="rtl"] .nav .menu > li:nth-last-child(2) > .sub-menu { right: auto; left: 0; }
	.nav .sub-menu a:hover { background: var(--steel-2); }
	html[data-theme="dark"] .nav .sub-menu a:hover { background: var(--bg); }
}

@media (max-width: 980px) {
	.nav .menu > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--line); }
	.nav .menu > li > a { grid-column: 1; }
	.nav .menu > li > .sub-toggle { grid-column: 2; width: 48px; height: 48px; }
	.nav .sub-menu { grid-column: 1 / -1; display: none; padding: 0 0 12px 10px; }
	[dir="rtl"] .nav .sub-menu { padding: 0 10px 12px 0; }
	.nav .menu > li.sub-open > .sub-menu { display: block; }
	.nav .sub-menu a { font-size: 1rem; padding: 10px 12px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
}

/* ---------- Section tabs under a page title ---------- */
.subnav { margin-top: 18px; }
.subnav ul {
	list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 8px;
	overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav li { flex: none; scroll-snap-align: start; }
.subnav a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .22); color: inherit; text-decoration: none; font-weight: 600; font-size: .92rem;
	white-space: nowrap; transition: background .2s, border-color .2s;
}
.subnav a:hover { border-color: rgba(255, 255, 255, .55); }
.subnav a[aria-current="page"] { background: var(--green, var(--orange)); border-color: transparent; color: var(--black, #fff); }
html:not([data-skin="emerald"]) .subnav a[aria-current="page"] { color: #fff; background: var(--orange-btn, var(--orange)); }

/* ---------- Tiles: trade groups on the homepage, sectors ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.tile {
	display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--r-m, 18px);
	background: var(--card); border: 1px solid var(--line); color: var(--fg); text-decoration: none;
	transition: transform .45s var(--spring, ease), box-shadow .3s, border-color .3s;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--green, var(--orange)); }
.tile .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--steel-2); color: var(--green-deep, var(--navy)); margin-bottom: 6px; }
.tile strong { font-size: 1.12rem; }
.tile span { color: var(--muted); font-size: .94rem; line-height: 1.45; }
.tile em { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: .88rem; color: var(--green-deep, var(--orange-ink)); }
html[data-theme="dark"] .tile em { color: var(--green-bright, var(--orange-2)); }
.tile-more { margin: 22px 0 0; }
@media (min-width: 900px) { .tile-grid.groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Jump bar on the services page ---------- */
.jumpbar { margin: 0 0 30px; }
.jumpbar ul { list-style: none; margin: 0; padding: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.jumpbar a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px;
	border: 1px solid var(--line); background: var(--card); color: var(--fg); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.jumpbar a:hover { border-color: var(--green, var(--orange)); }
.svc-group { scroll-margin-top: 110px; }

/* ---------- Footer columns from the same map ---------- */
.fgrid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; }
.fnav h4 + ul { margin-bottom: 22px; }
.fnav h4 a { color: inherit; text-decoration: none; }
@media (max-width: 1100px) { .fgrid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 860px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fgrid { grid-template-columns: 1fr; } }

@media (max-width: 760px) {
	.subnav a, .jumpbar a { min-height: 44px; }
	.jumpbar ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.jumpbar ul::-webkit-scrollbar { display: none; }
	.jumpbar li { flex: none; }
	.tile { padding: 18px; }
}

/* ---------- Site map page ---------- */
.sitemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 28px 36px; }
.sitemap h2 { font-size: 1.15rem; margin: 0 0 10px; }
.sitemap h2 a { color: inherit; text-decoration: none; }
.sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap li { padding: 5px 0; }
.sitemap li a { font-weight: 600; }
.sitemap .muted { display: block; font-size: .85rem; }
.sitemap-sub { margin-top: 8px; }
.sitemap-sub ul { padding-left: 12px; border-left: 2px solid var(--line); margin-top: 4px; }
.sitemap-sub li a { font-weight: 500; }