/* CEO Circle Languages: header switcher and first-visit notice. Brand tokens from the V2 pages. */
.ccl-switcher {
	--ccl-blue: #2235DD;
	--ccl-navy: #131739;
	--ccl-line: #E4E7FD;
	display: flex;
	justify-content: flex-end;
	/* Takes no room in the page: as rendered (after the header) it floats at the top right of
	   the content, and languages.js then moves it into the header beside Login / Register.
	   As a bar of its own it pushed every page down by 41px. */
	position: absolute;
	right: 20px;
	margin-top: 8px;
	z-index: 100; /* above positioned full-bleed wrappers such as .cc2, like the GTranslate bar */
}
/* Inside the header: part of its row, before the Login / Register button. */
.ccl-switcher.ccl-in-header {
	position: relative;
	right: auto;
	margin: 0 12px 0 0;
	align-items: center;
	z-index: 1000; /* the open list must cover the page below the header */
}
.ccl-dd {
	position: relative;
	/* Not a line box: the inline-flex button sat on a text baseline with the line's descender
	   below it, 6px off the header's middle on phones. */
	display: flex;
	align-items: center;
}
/* Round flags: a circle crops each flag to its middle, which keeps every one recognisable. */
.ccl-flag {
	display: inline-block;
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(19, 23, 57, .14);
	line-height: 0;
}
.ccl-flag svg {
	width: 100%;
	height: 100%;
	display: block;
}
.ccl-dd-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 14px/1 Inter, system-ui, sans-serif;
	color: var(--ccl-navy);
	background: #fff;
	border: 1px solid var(--ccl-line);
	/* Same corners and height as the Login / Register button beside it (10px, 46px); the
	   page buttons use 12px and the same #E4E7FD outline. */
	border-radius: 10px;
	min-height: 46px;
	padding: 0 12px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
/* Astra paints every button:hover/focus in the brand blue; the switcher keeps its own look. */
.ccl-switcher .ccl-dd-toggle:hover,
.ccl-switcher .ccl-dd-toggle:focus,
.ccl-switcher .ccl-dd-toggle:active {
	background: #fff;
	color: var(--ccl-navy);
}
.ccl-switcher .ccl-dd-list button:focus,
.ccl-switcher .ccl-dd-list button:active {
	background: transparent;
	color: var(--ccl-navy);
}
.ccl-switcher .ccl-dd-list button[aria-current="true"]:focus {
	color: var(--ccl-blue);
}
.ccl-dd-toggle:hover,
.ccl-dd-toggle[aria-expanded="true"] {
	border-color: #c5cbf8;
	box-shadow: 0 4px 14px -8px rgba(34, 53, 221, .45);
}
/* Logged in, the header holds plain menu links (Courses Area, Ambassador Area...) with no
   outline, so the switcher drops its border and background to sit among them; a light tint
   on hover and while open still says it can be clicked. Guests keep the outlined button,
   which pairs with the filled Login / Register beside it. Desktop only: the phone header
   needs the outline to show the compact flag-and-caret switcher is a control. */
@media (min-width: 922px) {
	body.logged-in .ccl-in-header .ccl-dd-toggle,
	body.logged-in .ccl-switcher.ccl-in-header .ccl-dd-toggle:focus,
	body.logged-in .ccl-switcher.ccl-in-header .ccl-dd-toggle:active {
		background: transparent;
		border-color: transparent;
		box-shadow: none;
	}
	body.logged-in .ccl-switcher.ccl-in-header .ccl-dd-toggle:hover,
	body.logged-in .ccl-in-header .ccl-dd-toggle[aria-expanded="true"] {
		background: #f0f1fd;
		border-color: transparent;
		box-shadow: none;
	}
}
.ccl-dd-code {
	display: none;
}
.ccl-caret {
	width: 12px;
	height: 12px;
	transition: transform .15s;
}
.ccl-dd-toggle[aria-expanded="true"] .ccl-caret {
	transform: rotate(180deg);
}
.ccl-dd-list {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 180px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ccl-line);
	border-radius: 10px;
	box-shadow: 0 18px 40px -18px rgba(19, 23, 57, .45);
}
.ccl-dd-list[hidden] {
	display: none;
}
/* Logged in only: the sentence above the languages saying the choice also sets the emails'
   language. It fixes the list's width, so the sentence wraps instead of stretching it. */
.ccl-dd-list:has(.ccl-dd-note) {
	width: min(240px, calc(100vw - 32px));
}
.ccl-dd-note {
	font: 500 12.5px/1.4 Inter, system-ui, sans-serif;
	color: #5b6080;
	padding: 6px 10px 10px;
	margin: 0 0 4px;
	border-bottom: 1px solid var(--ccl-line);
	white-space: normal;
}
.ccl-dd-list li {
	margin: 0;
}
.ccl-dd-list button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	font: 500 14px/1.2 Inter, system-ui, sans-serif;
	color: var(--ccl-navy);
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 6px;
	padding: 9px 10px;
	text-align: left;
	cursor: pointer;
}
.ccl-switcher .ccl-dd-list button:hover,
.ccl-switcher .ccl-dd-list button:focus-visible {
	background: #f0f1fd;
	color: var(--ccl-navy);
}
.ccl-switcher .ccl-dd-list button[aria-current="true"] {
	font-weight: 700;
	color: var(--ccl-blue);
}
.ccl-dd-list .ccl-dd-name {
	flex: 1;
}
.ccl-check {
	width: 16px;
	height: 16px;
	flex: none;
}
@media (max-width: 544px) {
	.ccl-switcher {
		right: 16px;
	}
	.ccl-dd-toggle .ccl-dd-name {
		display: none;
	}
	.ccl-dd-toggle .ccl-dd-code {
		display: inline;
	}
}
/* Phone header: logo, switcher and Login / Register share one row. The switcher shrinks to its
   flag and caret, and the logo is not allowed to give way (squeezed, CEO CIRCLE wrapped one
   letter per line and the header grew to 284px). */
@media (max-width: 921px) {
	.ccl-switcher.ccl-in-header {
		margin-right: 6px;
	}
	.ccl-in-header .ccl-dd-toggle {
		gap: 4px;
		min-height: 41px; /* as Astra's menu toggle beside it when logged in */
		padding: 0 8px;
	}
	/* The switcher sits just right of the logo here: the list opens rightwards from it, or the
	   wider logged-in list would run off the left edge. */
	.ccl-in-header .ccl-dd-list {
		right: auto;
		left: 0;
	}
	.ccl-in-header .ccl-dd-toggle .ccl-dd-name,
	.ccl-in-header .ccl-dd-toggle .ccl-dd-code {
		display: none;
	}
	#masthead .site-branding,
	#masthead .site-title,
	#masthead .site-header-primary-section-left {
		flex-shrink: 0;
		white-space: nowrap;
	}
}
.ccl-switcher button:focus-visible,
.ccl-notice button:focus-visible {
	outline: 2px solid var(--ccl-blue, #2235DD);
	outline-offset: 2px;
}

.ccl-notice {
	position: fixed;
	left: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 99999;
	max-width: min(360px, calc(100vw - 32px));
	background: #fff;
	color: #131739;
	border: 1px solid #E4E7FD;
	border-radius: 14px;
	box-shadow: 0 14px 40px -18px rgba(19, 23, 57, .45);
	padding: 16px 18px;
	font: 500 15px/1.45 Inter, system-ui, sans-serif;
}
.ccl-notice p {
	margin: 0 0 12px;
}
.ccl-notice-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ccl-notice button {
	font: 600 14px/1 Inter, system-ui, sans-serif;
	border-radius: 9px;
	padding: 9px 14px;
	cursor: pointer;
	border: 1px solid #E4E7FD;
	background: #f0f1fd;
	color: #131739;
}
.ccl-notice .ccl-notice-yes {
	background: #2235DD;
	border-color: #2235DD;
	color: #fff;
}