/* =========================================================================
   ACXPA — live session flags in the main navigation
   -------------------------------------------------------------------------
   Styles the badge and dot injected by js/acxpa-live-nav.js.

   Applies at every width. The badge sits inside the existing menu anchor, so
   it inherits that anchor's box; everything here is deliberately explicit
   (colour AND background on the same rule) so it cannot end up depending on
   a surface the theme may or may not provide — which is exactly how the
   mobile menu ended up dark-on-dark in an earlier revision.

   File: wp-content/themes/kleo-child/css/acxpa-live-nav.css
   ========================================================================= */

/* -------------------------------------------------------------------------
   Badge — sits after the link text, wraps with it rather than clipping
   ---------------------------------------------------------------------- */

#header .navbar-nav a .ax-live-badge,
.kleo-main-header .nav a .ax-live-badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
	padding: 2px 7px;
	border-radius: 3px;
	font-size: 9px !important;
	font-weight: 800 !important;
	line-height: 1.5 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	white-space: nowrap;
	vertical-align: 1px;
}

/* Red for on air. #b3132a on white is 7.4:1; white on #b3132a is the same
   ratio inverted, so it passes AA either way round. */
#header .navbar-nav a .ax-live-badge--live,
.kleo-main-header .nav a .ax-live-badge--live {
	background: #b3132a !important;
	color: #ffffff !important;
}

/* Amber for starting soon. Dark teal text on the brand amber — the amber is
   far too light to carry white text. */
#header .navbar-nav a .ax-live-badge--soon,
.kleo-main-header .nav a .ax-live-badge--soon {
	background: #f8b133 !important;
	color: #08363f !important;
}

/* -------------------------------------------------------------------------
   Dot on the top-level item — HUBS, Learn & Events, Connect, Training…
   ---------------------------------------------------------------------- */

#header .navbar-nav > li > a .ax-live-dot,
.kleo-main-header .nav > li > a .ax-live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 6px;
	border-radius: 50%;
	background: #ff2d4b;
	vertical-align: 2px;
	box-shadow: 0 0 0 0 rgba(255, 45, 75, .65);
	animation: ax-live-pulse 2s infinite;
}

#header .navbar-nav > li.ax-live-parent-soon > a .ax-live-dot,
.kleo-main-header .nav > li.ax-live-parent-soon > a .ax-live-dot {
	background: #f8b133;
	box-shadow: 0 0 0 0 rgba(248, 177, 51, .65);
	animation: none;
}

@keyframes ax-live-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(255, 45, 75, .65); }
	70%  { box-shadow: 0 0 0 7px rgba(255, 45, 75, 0);   }
	100% { box-shadow: 0 0 0 0   rgba(255, 45, 75, 0);   }
}

/* Screen-reader text for the dot, which is otherwise meaningless. */
#header .navbar-nav .ax-live-sr,
.kleo-main-header .nav .ax-live-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Mobile — the menu rows are wider and the type is bigger, so the badge is
   nudged up a size. The rev 6 mobile rules set font-size on the anchor with
   !important, hence !important here too.
   ---------------------------------------------------------------------- */

@media screen and (max-width: 991px) {

	#header .navbar-nav a .ax-live-badge,
	.kleo-main-header .nav a .ax-live-badge {
		font-size: 10px !important;
		padding: 3px 8px;
		margin-left: 10px;
	}

	/* Top-level mobile rows sit on the dark header, where a 8px dot next to
	   white caps type reads small. */
	#header .navbar-nav > li > a .ax-live-dot,
	.kleo-main-header .nav > li > a .ax-live-dot {
		width: 9px;
		height: 9px;
	}
}

/* -------------------------------------------------------------------------
   "Watch live now" row — injected beneath the session's own menu item while
   it is running, and removed the moment it finishes.

   Colour and background are set on the same rule on purpose. The mobile menu
   once ended up dark-on-dark because a text colour was set and the surface
   under it was left to the theme; nothing here relies on inheriting a
   background from anywhere.

   TWO :not(#...) guards, not one. This is the specificity trick used through
   acxpa-mega-menu.css, but one guard is not enough here. The mobile rule in
   that file -
     #header .navbar-nav li.dropdown-submenu > ul.dropdown-menu > li > a:not(#ax-no)
   scores (2 ids, 3 classes, 3 elements). One guard puts this rule at
   (2, 3, 1): level on ids and classes, and it LOSES on element count, which
   is compared before source order. The row then rendered as an ordinary menu
   link with none of its emphasis. Two guards make it (3, 3, 1), which wins
   outright. Measured in the live DOM, not assumed.
   ---------------------------------------------------------------------- */

#header .navbar-nav li.ax-live-watch-li > a.ax-live-watch:not(#ax-no):not(#ax-no2),
.kleo-main-header .nav li.ax-live-watch-li > a.ax-live-watch:not(#ax-no):not(#ax-no2) {
	display: block !important;
	background: #fdeaed !important;
	color: #8f0f21 !important;
	border-left: 3px solid #b3132a !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: normal !important;
	padding: 8px 10px 8px 12px !important;
}

#header .navbar-nav li.ax-live-watch-li > a.ax-live-watch:hover:not(#ax-no):not(#ax-no2),
#header .navbar-nav li.ax-live-watch-li > a.ax-live-watch:focus-visible:not(#ax-no):not(#ax-no2),
.kleo-main-header .nav li.ax-live-watch-li > a.ax-live-watch:hover:not(#ax-no):not(#ax-no2),
.kleo-main-header .nav li.ax-live-watch-li > a.ax-live-watch:focus-visible:not(#ax-no):not(#ax-no2) {
	background: #b3132a !important;
	color: #ffffff !important;
}

/* The little live dot in front of the label. */
#header .navbar-nav li.ax-live-watch-li .ax-live-watch-dot:not(#ax-no):not(#ax-no2),
.kleo-main-header .nav li.ax-live-watch-li .ax-live-watch-dot:not(#ax-no):not(#ax-no2) {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	border-radius: 50%;
	background: #b3132a;
	vertical-align: 1px;
	animation: ax-live-pulse 2s infinite;
}

#header .navbar-nav li.ax-live-watch-li > a.ax-live-watch:hover .ax-live-watch-dot,
.kleo-main-header .nav li.ax-live-watch-li > a.ax-live-watch:hover .ax-live-watch-dot {
	background: #ffffff;
}

/* Defensive: if a session link is ever placed as a direct child of a mega
   panel, its watch row would become a grid cell of its own. Keep it with
   its session rather than letting it start a new column. */
@media screen and (min-width: 992px) {
	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li.ax-live-watch-li {
		grid-column: auto;
		margin-top: -18px;
	}
}

/* Mobile — match the row rhythm of the menu it sits in. */
@media screen and (max-width: 991px) {

	#header .navbar-nav li.ax-live-watch-li > a.ax-live-watch:not(#ax-no):not(#ax-no2),
	.kleo-main-header .nav li.ax-live-watch-li > a.ax-live-watch:not(#ax-no):not(#ax-no2) {
		font-size: 15px !important;
		padding: 11px 18px 11px 30px !important;
		border-left-width: 5px !important;
	}
}

/* -------------------------------------------------------------------------
   Anyone who has asked their device to stop animating gets a solid dot.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	#header .navbar-nav > li > a .ax-live-dot,
	.kleo-main-header .nav > li > a .ax-live-dot,
	#header .navbar-nav li.ax-live-watch-li .ax-live-watch-dot,
	.kleo-main-header .nav li.ax-live-watch-li .ax-live-watch-dot {
		animation: none !important;
		box-shadow: none !important;
	}
}