/* Beta notice: ribbon above the Greece 2.0 banner + hover tooltip on every phone number */

.sc-beta-ribbon {
	background-color: #FFBD16;
	color: #001836;
	text-align: center;
	padding: 9px 16px;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 500;
}

.sc-beta-ribbon__pill {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background-color: #001836;
	color: #FFBD16;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	vertical-align: 1px;
}

/* Tooltip. Only rendered while hovered or focused, so it never adds width to the page. */
.sc-beta-tip {
	position: relative;
	cursor: help;
}

.sc-beta-tip:hover::after,
.sc-beta-tip:focus::after,
.sc-beta-tip:focus-within::after {
	content: attr(data-beta-tip);
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 100000;
	width: max-content;
	max-width: min(290px, calc(100vw - 32px));
	padding: 10px 12px;
	border-radius: 8px;
	background-color: #001836;
	color: #ffffff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.45;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
	box-shadow: 0 8px 24px rgba(0, 24, 54, 0.22);
	pointer-events: none;
	animation: sc-beta-tip-in 0.15s ease-out;
}

.sc-beta-tip:hover::before,
.sc-beta-tip:focus::before,
.sc-beta-tip:focus-within::before {
	content: "";
	position: absolute;
	top: calc(100% + 4px);
	left: 14px;
	z-index: 100000;
	border: 6px solid transparent;
	border-top: 0;
	border-bottom-color: #001836;
	pointer-events: none;
	animation: sc-beta-tip-in 0.15s ease-out;
}

/* Header phone sits at the right edge, so open the tooltip towards the left. */
.site-header .sc-beta-tip:hover::after,
.site-header .sc-beta-tip:focus::after,
.site-header .sc-beta-tip:focus-within::after {
	left: auto;
	right: 0;
}

.site-header .sc-beta-tip:hover::before,
.site-header .sc-beta-tip:focus::before,
.site-header .sc-beta-tip:focus-within::before {
	left: auto;
	right: 14px;
}

@keyframes sc-beta-tip-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.sc-beta-tip::before,
	.sc-beta-tip::after {
		animation: none !important;
	}
}