/* ==========================================================================
   iBroadcast site header — shared across pages.
   Self-contained: no dependency on the including page's styles or tokens.
   Every selector is namespaced under .ib-nav so it cannot collide with
   main.css or a page's own rules.

   Usage:  <link rel="stylesheet" href="/common/css/ib-nav.css">
           ...markup...
           <script src="/common/js/ib-nav.js"></script>
   ========================================================================== */

@font-face {
	font-family: 'DMSans';
	src: url("/fonts/DMSans-Regular.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'DMSans';
	src: url("/fonts/DMSans-Medium.ttf") format("truetype");
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'DMSans';
	src: url("/fonts/DMSans-Bold.woff2") format("woff2");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

/* The bar is full-bleed, so pages that include it drop the default body margin. */
body { margin: 0; }

.ib-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(12, 16, 36, .82);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, .09);
	font-family: 'DMSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.5;
	text-align: left;
}
.ib-nav *, .ib-nav *::before, .ib-nav *::after { box-sizing: border-box; }

.ib-nav__wrap {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 22px;
}
.ib-nav__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 72px;
}

.ib-nav__logo { flex: none; display: block; line-height: 0; }
/* official reversed wordmark from logo.ibroadcast.com */
.ib-nav__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }

.ib-nav__links {
	display: none;
	align-items: center;
	gap: 4px;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}
.ib-nav__links > a:not(.ib-nav__cta),
.ib-nav__links button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: .96rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .82);
	background: none;
	border: 0;
	margin: 0;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease;
}
.ib-nav__links > a:not(.ib-nav__cta):hover, .ib-nav__links button:hover,
.ib-nav__links > a:not(.ib-nav__cta):focus-visible, .ib-nav__links button:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, .1);
	text-decoration: none;
}
.ib-nav [aria-current="page"] { color: #fff; }

.ib-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 8px;
	padding: 12px 22px;
	border-radius: 14px;
	background: linear-gradient(96deg, #495AFF 0%, #0ACFFE 100%);
	background-origin: border-box;
	color: #fff !important;
	font-weight: 700;
	font-size: .96rem;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(58, 84, 255, .35);
	transition: transform .18s ease, box-shadow .18s ease;
}
.ib-nav__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(58, 84, 255, .45);
	text-decoration: none;
}
.ib-nav a:focus-visible, .ib-nav button:focus-visible {
	outline: 3px solid #0ACFFE;
	outline-offset: 3px;
}

/* ---- Get App menu (shown only where the platform is unknown, i.e. desktop) ---- */
.ib-nav__appmenu { position: relative; }
.ib-nav__appmenu > button::after {
	content: "";
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}
.ib-nav__appmenu.is-open > button::after { transform: translateY(1px) rotate(-135deg); }

.ib-nav__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 244px;
	padding: 8px;
	background: #fff;
	border: 1px solid #E6E9F0;
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(20, 28, 61, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.ib-nav__appmenu.is-open .ib-nav__panel { opacity: 1; visibility: visible; transform: none; }
.ib-nav__panel a {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 11px 12px;
	border-radius: 11px;
	color: #14161F;
	font-weight: 500;
	font-size: .95rem;
	text-decoration: none;
}
.ib-nav__panel a:hover { background: #F5F7FB; text-decoration: none; }
.ib-nav__panel svg { flex: none; width: 22px; height: 22px; fill: #14161F; }
.ib-nav__panel small { display: block; font-size: .78rem; color: #858C9C; font-weight: 400; }

/* ---- burger ---- */
.ib-nav__burger {
	margin-left: auto;
	width: 44px; height: 44px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: none;
	border: 0;
	padding: 0;
	border-radius: 10px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ib-nav__burger span {
	display: block;
	width: 22px; height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .22s ease, opacity .18s ease;
}
.ib-nav.is-menu-open .ib-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ib-nav.is-menu-open .ib-nav__burger span:nth-child(2) { opacity: 0; }
.ib-nav.is-menu-open .ib-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- mobile drawer ---- */
.ib-nav__drawer {
	display: block;
	overflow: hidden;
	max-height: 0;
	transition: max-height .3s ease;
	border-top: 1px solid rgba(255, 255, 255, 0);
}
.ib-nav.is-menu-open .ib-nav__drawer {
	max-height: 560px;
	border-top-color: rgba(255, 255, 255, .09);
}
.ib-nav__drawer ul { margin: 0; padding: 12px 0 22px; list-style: none; }
.ib-nav__drawer li { margin: 0; }
.ib-nav__drawer li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.ib-nav__drawer ul a {
	display: flex;
	align-items: center;
	padding: 15px 2px;
	color: rgba(255, 255, 255, .88);
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
}
.ib-nav__drawer ul a:hover { color: #fff; text-decoration: none; }
.ib-nav__drawer .ib-nav__cta { width: 100%; margin: 16px 0 24px; padding: 15px 28px; font-size: 1rem; }

@media (min-width: 980px) {
	.ib-nav__links { display: flex; }
	.ib-nav__burger, .ib-nav__drawer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ib-nav *, .ib-nav *::before, .ib-nav *::after {
		transition-duration: .01ms !important;
	}
}