/* ===========================================================
   GPI Top Navigation — premium, US-platform-style header
   =========================================================== */

/* Hide the theme (Blocksy) header, offcanvas and footer — we render our own. */
#header.ct-header,
#offcanvas.ct-header,
.ct-header-trigger,
.ct-header-spacer { display: none !important; }

#colophon.ct-footer,
.ct-footer,
#footer.ct-footer,
.site-footer { display: none !important; }

:root {
	--gpi-nav-height: 64px;
	--gpi-bottom-nav-height: 60px;
	--gpi-nav-bg: #0f2744;
	--gpi-nav-border: rgba(255, 255, 255, 0.10);
	--gpi-teal: #0e7c86;
	--gpi-teal-dark: #0a646d;
	--gpi-navy: #0b1f2a;
}

/* Pages with a hero banner: nav overlaps the banner, no spacer gap */
body.gpi-has-banner .gpi-nav-spacer { display: none; }

.gpi-topnav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100000;
	height: var(--gpi-nav-height);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #fff;
}

/* WordPress admin bar pushes the nav down so it is not hidden behind it. */
body.admin-bar .gpi-topnav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .gpi-topnav { top: 46px; } }

/* Homepage: nav overlays the hero banner (no white gap) but stays fixed so it
   remains visible after scrolling. The .gpi-topnav-home class toggles the
   transparent-vs-solid look via the .is-scrolled state in JS. */
.gpi-topnav-home { position: fixed; }
.gpi-topnav-home + .gpi-nav-spacer { display: none; }
.gpi-topnav-home .gpi-nav-backdrop {
	background: rgba(15, 39, 68, .92);
	border-bottom: 1px solid rgba(255,255,255,.10);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.14);
	transition: background .2s, border-color .2s, backdrop-filter .2s, box-shadow .2s;
}
.gpi-topnav-home.is-scrolled .gpi-nav-backdrop {
	background: #0f2744;
	border-bottom: 1px solid rgba(255,255,255,.10);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.14);
}
.gpi-topnav-home .gpi-logo,
.gpi-topnav-home .gpi-logo span { color: #fff; transition: color .2s; }
.gpi-topnav-home.is-scrolled .gpi-logo { color: #fff; }
.gpi-topnav-home .gpi-logo span { color: #4facfe; }
.gpi-topnav-home .gpi-menu-item > a,
.gpi-topnav-home .gpi-nav-link {
	color: rgba(255,255,255,.88);
	transition: color .2s, background .2s;
}
.gpi-topnav-home.is-scrolled .gpi-menu-item > a,
.gpi-topnav-home.is-scrolled .gpi-nav-link { color: rgba(255,255,255,.9); }
.gpi-topnav-home .gpi-menu-item > a:hover,
.gpi-topnav-home .gpi-nav-link:hover {
	background: rgba(255,255,255,.12);
	color: #fff;
}
.gpi-topnav-home.is-scrolled .gpi-menu-item > a:hover,
.gpi-topnav-home.is-scrolled .gpi-nav-link:hover {
	background: rgba(255,255,255,.12);
	color: #fff;
}
.gpi-topnav-home .gpi-menu-item.is-active > a,
.gpi-topnav-home.is-scrolled .gpi-menu-item.is-active > a {
	color: #fff;
	background: rgba(255, 255, 255, 0.18);
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.gpi-topnav-home .gpi-menu-item.is-active > a::after,
.gpi-topnav-home.is-scrolled .gpi-menu-item.is-active > a::after {
	background: #fff;
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
	width: 22px;
}
.gpi-topnav-home .gpi-burger { background: rgba(255,255,255,.12); }
.gpi-topnav-home.is-scrolled .gpi-burger { background: rgba(255,255,255,.12); }
.gpi-topnav-home .gpi-burger span { background: #fff; }
.gpi-topnav-home.is-scrolled .gpi-burger span { background: #fff; }

.gpi-nav-backdrop {
	position: absolute;
	inset: 0;
	background: var(--gpi-nav-bg);
	border-bottom: 1px solid var(--gpi-nav-border);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.14);
}

.gpi-nav-spacer {
	height: var(--gpi-nav-height);
	pointer-events: none;
}

.gpi-nav-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1400px;
	height: 100%;
	margin: 0 auto;
	padding: 0 24px;
}

/* Logo — flex-shrink:0 keeps the brand visible even when the menu+search cluster
   is wide (prevents the leading "G" of GlobalPetIndex from being clipped on
   mid-width viewports). */
.gpi-logo {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.4px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}
.gpi-logo span { color: #4facfe; }

/* Persistent search form */
.gpi-search-form {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: 200px;
	height: 40px;
	background: rgba(255, 255, 255, 0.10);
	border: none;
	border-radius: 20px;
	padding: 2px;
	transition: width .2s ease, background .2s;
	outline: none;
	box-shadow: none;
}
.gpi-search-form input {
	flex: 1;
	width: 100%;
	height: 100%;
	border: none !important;
	border-radius: 18px;
	background: #fff !important;
	font-size: 13.5px;
	color: #15294d !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	padding: 0 14px;
}
.gpi-topnav .gpi-search-icon { display: none !important; }
.gpi-search-form input:focus {
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
}
.gpi-search-form input::placeholder { color: #8a97aa; }
.gpi-search-form:hover,
.gpi-search-form:focus-within {
	width: 300px;
	background: rgba(255, 255, 255, 0.25);
	border: none;
	outline: none;
	box-shadow: none;
}

/* Homepage transparent nav search form variants */
.gpi-topnav-home .gpi-search-form { background: rgba(255,255,255,.12); border: none; outline: none; box-shadow: none; }
.gpi-topnav-home .gpi-search-form:hover,
.gpi-topnav-home .gpi-search-form:focus-within { background: rgba(255,255,255,.22); border: none; outline: none; box-shadow: none; }
.gpi-topnav-home.is-scrolled .gpi-search-form { background: rgba(255,255,255,.10); border: none; outline: none; box-shadow: none; }
.gpi-topnav-home .gpi-search-form input { color: #15294d !important; }
.gpi-topnav-home .gpi-search-form input::placeholder { color: #8a97aa; }

/* Primary menu — min-width:0 lets the menu shrink so the brand logo and the
   right-side cluster never get clipped when the viewport is mid-width. */
.gpi-menu { flex: 0 1 auto; margin-right: 8px; min-width: 0; }
.gpi-menu-list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gpi-menu-item { position: relative; }
.gpi-menu-item > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 8px 11px;
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	border-radius: 6px;
	transition: color .15s, background .15s;
}
.gpi-menu-item > a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* Active menu item — "white highlight" style: pure-white text on a translucent
   white pill + white underline indicator. (Was #4facfe light-blue text, which
   read as muted/non-current against the dark navy nav.) */
.gpi-menu-item.is-active > a {
	color: #fff;
	background: rgba(255, 255, 255, 0.18);
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.gpi-menu-item.is-active > a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 22px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
}
.gpi-menu-item.has-mega > a::after {
	position: static;
	transform: none;
	width: auto;
	height: auto;
	background: none;
	content: "▾";
	font-size: 10px;
	margin-left: 2px;
	opacity: .55;
}

/* Mega menu */
.gpi-mega {
	display: none;
	position: absolute;
	left: -60px;
	top: 100%;
	padding-top: 12px;
	z-index: 1001;
}
.gpi-menu-item.has-mega:hover .gpi-mega { display: block; }
.gpi-mega-inner {
	background: #fff;
	border: 1px solid var(--gpi-nav-border);
	border-radius: 12px;
	box-shadow: 0 24px 48px rgba(11, 31, 42, 0.14);
	padding: 28px;
	display: grid;
	grid-template-columns: repeat(4, minmax(180px, 1fr));
	gap: 34px;
	min-width: 780px;
}
.gpi-mega-col h4 {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--gpi-teal);
}
.gpi-mega-products .gpi-mega-col h4 { color: #FF9900; }
.gpi-mega-col ul { list-style: none; margin: 0; padding: 0; }
.gpi-mega-col li a {
	display: block;
	padding: 6px 0;
	font-size: 13.5px;
	color: #4a5c68;
	text-decoration: none;
	transition: color .15s, transform .15s;
}
.gpi-mega-col li a:hover { color: var(--gpi-teal); transform: translateX(2px); }

/* Right cluster */
.gpi-nav-right {
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
	margin-left: auto;
}
.gpi-nav-link {
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	padding: 8px 10px;
	border-radius: 6px;
}
.gpi-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* ===== Multilingual switcher (TranslatePress) restored into the top nav =====
   The switcher ships light-themed via inline --bg/--text custom properties; we
   override them so it matches the navy nav. !important is required to beat the
   inline style attribute TranslatePress emits on the wrapper. */
.gpi-lang-switch { display: inline-flex; align-items: center; flex-shrink: 0; }
.gpi-lang-switch .trp-shortcode-switcher__wrapper {
	--bg: #0f2744 !important;
	--bg-hover: #1a3a5c !important;
	--text: #ffffff !important;
	--text-hover: #ffffff !important;
	--border-color: rgba(255, 255, 255, 0.22) !important;
	--border-width: 1px !important;
	--border-radius: 8px !important;
	--flag-size: 18px !important;
	--font-size: 13.5px !important;
	--flag-radius: 2px !important;
	z-index: 100001;
}
.gpi-lang-switch .trp-switcher-dropdown-list {
	background: #0f2744 !important;
	border: 1px solid rgba(255, 255, 255, 0.20) !important;
	border-radius: 8px !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35) !important;
}
.gpi-lang-switch .trp-language-item,
.gpi-lang-switch .trp-language-item__current { color: #fff !important; }
.gpi-lang-switch .trp-language-item:hover,
.gpi-lang-switch .trp-language-item:focus { background: #1a3a5c !important; color: #fff !important; }
.gpi-lang-switch .trp-shortcode-arrow path { stroke: #fff !important; }
.gpi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13.5px;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 8px;
	text-decoration: none;
	transition: transform .1s, box-shadow .15s, background .15s;
}
.gpi-btn:hover { transform: translateY(-1px); }
.gpi-btn-primary {
	background: linear-gradient(135deg, #0e7c86 0%, #4facfe 100%);
	color: #fff;
	box-shadow: 0 4px 12px rgba(14, 124, 134, 0.35), 0 2px 4px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 10px 22px;
	font-size: 14px;
	letter-spacing: 0.2px;
}
.gpi-btn-primary:hover {
	background: linear-gradient(135deg, #0a646d 0%, #3b9af5 100%);
	box-shadow: 0 6px 16px rgba(14, 124, 134, 0.45), 0 3px 6px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
}
.gpi-btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(14, 124, 134, 0.3); }

/* Burger (mobile) */
.gpi-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	border-radius: 8px;
	cursor: pointer;
}
.gpi-burger span {
	display: block;
	width: 20px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .2s, opacity .2s;
}
.gpi-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gpi-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gpi-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer overlay */
.gpi-menu-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 999;
}
.gpi-menu.is-open ~ .gpi-menu-overlay,
body.gpi-menu-open .gpi-menu-overlay { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	.gpi-nav-inner { gap: 10px; padding: 0 14px; }
	.gpi-menu-item > a { padding: 8px 7px; font-size: 12.5px; }
	.gpi-logo { font-size: 19px; }
	.gpi-btn { padding: 8px 12px; font-size: 12.5px; }
	.gpi-search-form { width: 170px; padding-right: 12px; }
	.gpi-search-form:hover,
	.gpi-search-form:focus-within { width: 240px; }
}

@media (max-width: 1020px) {
	.gpi-search-form {
		width: 150px;
		padding-right: 10px;
	}
	.gpi-search-form:hover,
	.gpi-search-form:focus-within { width: 220px; }
	.gpi-burger { display: flex; }
	.gpi-menu {
		display: none;
		position: fixed;
		inset: var(--gpi-nav-height) 0 0 auto;
		width: min(320px, 86vw);
		background: #0f2744;
		border-left: 1px solid rgba(255,255,255,.10);
		box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25);
		padding: 16px;
		overflow-y: auto;
		z-index: 100002;
		transform: translateX(110%);
		transition: transform .25s ease;
	}
	body.admin-bar .gpi-menu { inset: calc(var(--gpi-nav-height) + 32px) 0 0 auto; }
	.gpi-menu.is-open {
		display: block;
		transform: translateX(0);
	}
	.gpi-menu-list { flex-direction: column; align-items: stretch; gap: 0; }
	.gpi-menu-item > a { padding: 12px 10px; border-radius: 8px; color: rgba(255,255,255,.9); }
	.gpi-menu-item > a:hover { background: rgba(255,255,255,.12); color: #fff; }
	.gpi-menu-item.is-active > a::after { display: none; }
	.gpi-mega {
		position: static;
		display: none;
		padding-top: 0;
		margin: 4px 0 8px;
	}
	.gpi-menu-item.has-mega.is-open .gpi-mega { display: block; }
	.gpi-mega-inner {
		grid-template-columns: 1fr;
		gap: 16px;
		min-width: auto;
		padding: 14px;
		box-shadow: none;
		border: 1px solid rgba(255,255,255,.10);
		border-left: 2px solid #4facfe;
		border-radius: 8px;
		background: #0a1e36;
	}
	.gpi-mega-col h4 { margin-bottom: 6px; color: #4facfe; }
	.gpi-mega-col li a { color: rgba(255,255,255,.75); }
	.gpi-mega-col li a:hover { color: #fff; }
	.gpi-nav-right { margin-left: auto; }
	.gpi-nav-right .gpi-btn { padding: 8px 12px; font-size: 13px; }
	.gpi-nav-right .gpi-nav-link { display: none; }
	body.admin-bar .gpi-menu-overlay { top: 32px; height: calc(100% - 32px); }
}

@media (max-width: 782px) {
	body.admin-bar .gpi-menu { inset: calc(var(--gpi-nav-height) + 46px) 0 0 auto; }
	body.admin-bar .gpi-menu-overlay { top: 46px; height: calc(100% - 46px); }
}

@media (max-width: 620px) {
	:root { --gpi-nav-height: 58px; }
	.gpi-logo { font-size: 18px; }
	.gpi-nav-inner { padding: 0 12px; }
	.gpi-nav-right .gpi-btn { display: none; }
	.gpi-burger { display: inline-flex; }
	/* Flag-only language pill on phones to avoid crowding the search + burger */
	.gpi-lang-switch .trp-language-item-name { display: none; }
	.gpi-lang-switch .trp-shortcode-switcher__wrapper { --flag-size: 16px !important; }
	.gpi-lang-switch .trp-shortcode-arrow { display: none; }
}

/* ===== Mobile UX polish (2026-07-17) ===== */
/* Auth CTAs live inside the mobile drawer so phones can Sign In / Join Free
   (the top-bar links are hidden on small screens). */
.gpi-menu-auth { display: none; }
@media (max-width: 1020px) {
	.gpi-menu-auth {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, .10);
	}
	.gpi-menu-auth .gpi-nav-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		min-height: 46px;
		padding: 10px 14px;
		border: 1px solid rgba(255, 255, 255, .18);
		border-radius: 8px;
		color: #fff;
		background: transparent;
	}
	.gpi-menu-auth .gpi-nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
	.gpi-menu-auth .gpi-menu-join { flex: 1; min-height: 46px; }
	/* Larger tap targets for drawer items */
	.gpi-menu-list .gpi-menu-item > a { min-height: 46px; }
}

/* Prevent the persistent search bar from overflowing / pushing the burger off
   on phones — disable the focus-expand and cap its width. */
@media (max-width: 620px) {
	.gpi-search-form,
	.gpi-search-form:hover,
	.gpi-search-form:focus-within {
		width: 132px;
		flex: 0 0 auto;
	}
}

/* ===== Mobile sticky bottom navigation ===== */
.gpi-mobile-nav { display: none; }
@media (max-width: 768px) {
	body {
		padding-bottom: var(--gpi-bottom-nav-height);
	}
	.gpi-mobile-nav {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100001;
		height: var(--gpi-bottom-nav-height);
		background: var(--gpi-nav-bg, #0f2744);
		border-top: 1px solid var(--gpi-nav-border, rgba(255,255,255,.10));
		box-shadow: 0 -2px 12px rgba(0,0,0,.15);
		backdrop-filter: blur(8px) saturate(160%);
		-webkit-backdrop-filter: blur(8px) saturate(160%);
	}
	.gpi-mobile-nav ul {
		display: flex;
		justify-content: space-around;
		align-items: stretch;
		height: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.gpi-mobile-nav li {
		flex: 1 1 0;
		display: flex;
		align-items: stretch;
		justify-content: center;
		min-width: 0;
	}
	.gpi-mobile-nav a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		width: 100%;
		color: rgba(255,255,255,.65);
		text-decoration: none;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .2px;
		line-height: 1.1;
		padding: 6px 4px;
		transition: color .15s, background .15s;
		/* 6 tabs (Home/Companies/Invest/Products/Affiliate/Account): never let
		   labels wrap and push the icon out of the 60px bar — truncate instead. */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}
	.gpi-mobile-nav a:hover,
	.gpi-mobile-nav a.is-active {
		color: #fff;
		background: rgba(255,255,255,.08);
	}
	.gpi-mobile-nav a.is-active svg { color: #4facfe; }
	.gpi-mobile-nav svg {
		width: 22px;
		height: 22px;
		color: rgba(255,255,255,.65);
		transition: color .15s;
	}
	.gpi-mobile-nav a:hover svg,
	.gpi-mobile-nav a.is-active svg { color: #fff; }

	/* Make sure the bottom nav floats above the mobile drawer/backdrop */
	.gpi-mobile-nav { z-index: 100001; }
	.gpi-menu-open .gpi-mobile-nav { z-index: 99998; }
}

/* 6-tab bottom nav on very narrow phones (≤380px): shrink type + icon + gap so
   the six labels (Home/Companies/Invest/Products/Affiliate/Account) never
   overflow or wrap. Labels already truncate via white-space:nowrap above. */
@media (max-width: 380px) {
	.gpi-mobile-nav a {
		font-size: 9px;
		padding: 5px 2px;
		gap: 2px;
	}
	.gpi-mobile-nav svg {
		width: 20px;
		height: 20px;
	}
}