/* The menu that comes down from the sky on two ropes once the header is scrolled away (assets/js/sky-menu.js).
   A white cloud with the menu, the blue ladder bird on it; the sub-menus hang under their items like cards on two
   threads. On a phone or a tablet the cloud carries the logo and "Menu", and the menu unrolls from it as a scroll. */

.sky { position: fixed; z-index: 9000; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.sky__drop { position: absolute; left: 12px; right: 12px; top: 38px; display: flex; justify-content: center; transform: translateY(-190%); transition: transform .55s cubic-bezier(.55, 0, .7, .2); }
.sky.is-on .sky__drop { transform: none; transition: transform 1s cubic-bezier(.3, 1.5, .45, 1); }
/* it swings around a point high above the screen: the ropes go up out of sight */
.sky__rig { position: relative; transform-origin: 50% -280px; will-change: transform; }
.sky.is-on .sky__rig { pointer-events: auto; }

/* ---------- The two ropes: a light cord with darker turns, a knot where they hold the cloud ---------- */
.sky__rope { position: absolute; bottom: calc(100% - 10px); width: 4px; height: 340px; border-radius: 2px; background: repeating-linear-gradient(160deg, #b2977b 0 4px, #8a6d52 4px 6px); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .12); }
.sky__rope--l { left: 18%; }
.sky__rope--r { right: 18%; }
.sky__rope::after { content: ''; position: absolute; left: -4px; bottom: -3px; width: 12px; height: 10px; border-radius: 50%; background: #8a6d52; }

/* ---------- The cloud ---------- */
.sky__board {
	position: relative; display: flex; align-items: center; gap: 4px; padding: 8px 14px 8px 12px; border-radius: 44px;
	background: #fff; box-shadow: 0 20px 36px -18px rgba(0, 45, 95, .55), 0 3px 0 rgba(82, 170, 232, .12);
}
/* puffs of the cloud above its top edge */
.sky__board::before {
	content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; top: -22px; height: 44px; pointer-events: none;
	background:
		radial-gradient(circle at 8% 78%, #fff 20px, transparent 21px),
		radial-gradient(circle at 24% 52%, #fff 26px, transparent 27px),
		radial-gradient(circle at 44% 70%, #fff 22px, transparent 23px),
		radial-gradient(circle at 63% 46%, #fff 28px, transparent 29px),
		radial-gradient(circle at 82% 66%, #fff 22px, transparent 23px),
		radial-gradient(circle at 95% 84%, #fff 16px, transparent 17px);
	filter: drop-shadow(0 -2px 3px rgba(0, 45, 95, .07));
}
.sky__logo { flex: none; display: block; margin-right: 6px; transition: transform .35s cubic-bezier(.34, 1.6, .64, 1); }
.sky__logo img { display: block; height: 52px; width: auto; }
.sky__logo:hover { transform: rotate(-6deg) scale(1.06); }

/* the items: the hand-written letters of the site; the one we are in is underlined with a wave */
.sky__nav > ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.sky__nav li { position: relative; margin: 0; padding: 0; list-style: none; }
.sky__nav li::before { display: none; }
.sky__nav > ul > li > a { position: relative; display: block; padding: 10px 11px 12px; font: 400 19px/1 'Cabin Sketch', 'Neucha', Arial, sans-serif; color: #3c4741; text-decoration: none; white-space: nowrap; transition: color .2s, transform .3s cubic-bezier(.34, 1.8, .64, 1); }
html[lang|="bg"] .sky__nav a, html[lang|="bg"] .sky__login, html[lang|="bg"] .sky__burger, html[lang|="bg"] .sky-sheet a { font-family: 'Neucha', Arial, sans-serif; }
.sky__nav > ul > li > a:hover, .sky__nav > ul > li:focus-within > a { color: #2f80c8; transform: translateY(-3px); }
.sky__nav a.active { color: #ff5736; }
.sky__nav > ul > li > a.active::after {
	content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 7px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 7'%3E%3Cpath d='M0 3.5Q3 0 6 3.5T12 3.5T18 3.5T24 3.5' fill='none' stroke='%23ff5736' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 24px 7px;
	animation: sky-wave 2.6s linear infinite;
}
@keyframes sky-wave { to { background-position: 24px 50%; } }

/* a sub-menu: a card hanging on two threads under its item, it comes down swinging */
.sky__nav li ul {
	position: absolute; left: 50%; top: calc(100% + 16px); min-width: 230px; margin: 0; padding: 10px 0; list-style: none;
	background: #fff; border-radius: 16px; box-shadow: 0 22px 40px -18px rgba(0, 45, 95, .5);
	transform-origin: 50% -16px; opacity: 0; visibility: hidden; translate: -50% -10px; rotate: -5deg;
	transition: opacity .2s, visibility 0s linear .25s, translate .25s, rotate .25s;
}
.sky__nav li ul::before, .sky__nav li ul::after { content: ''; position: absolute; top: -16px; width: 2px; height: 16px; background: #a5876a; }
.sky__nav li ul::before { left: 26%; }
.sky__nav li ul::after { right: 26%; }
/* a bridge over the gap, so the pointer can reach the card */
.sky__nav li.with-sub-menu > a::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
.sky__nav li:hover > ul, .sky__nav li:focus-within > ul { opacity: 1; visibility: visible; translate: -50% 0; rotate: 0deg; transition: opacity .2s, visibility 0s, translate .25s; animation: sky-dangle 1.1s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes sky-dangle { 0% { rotate: -9deg; } 35% { rotate: 6deg; } 60% { rotate: -3deg; } 80% { rotate: 1.2deg; } 100% { rotate: 0deg; } }
.sky__nav li ul a { display: block; padding: 8px 22px; font: 400 17px/1.25 'Cabin Sketch', 'Neucha', Arial, sans-serif; color: #3c4741; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, padding-left .25s; }
.sky__nav li ul a:hover, .sky__nav li ul a:focus-visible { background: #f2f8fd; color: #2f80c8; padding-left: 28px; }
.sky__nav li ul a.active { color: #ff5736; }

/* the end of the cloud: "Log in", the language in its sun, and the button of a narrow screen */
.sky__end { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.sky__login { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 20px; background: #52aae8; color: #fff; font: 400 17px/1 'Cabin Sketch', 'Neucha', Arial, sans-serif; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 0 #2f7fb8; transition: background-color .2s, box-shadow .2s, translate .12s; }
.sky__login:hover { background: #ff5736; box-shadow: 0 3px 0 #c43c20; }
.sky__login:active { translate: 0 2px; box-shadow: 0 1px 0 #c43c20; }
.sky__lang { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #ffe400; color: #3c4741; font: 700 14px/1 'Open Sans', Arial, sans-serif; text-decoration: none; box-shadow: 0 0 0 4px rgba(255, 228, 0, .35); transition: transform .5s cubic-bezier(.34, 1.6, .64, 1); }
.sky__lang:hover { transform: rotate(25deg) scale(1.08); }
.sky__lang span { transition: transform .5s cubic-bezier(.34, 1.6, .64, 1); }
.sky__lang:hover span { transform: rotate(-25deg); }
.sky__burger { display: none; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border: 0; border-radius: 22px; background: #ff5736; color: #fff; font: 400 19px/1 'Cabin Sketch', 'Neucha', Arial, sans-serif; cursor: pointer; box-shadow: 0 3px 0 #c43c20; -webkit-tap-highlight-color: transparent; }
.sky__burger-lines { display: grid; gap: 4px; width: 20px; }
.sky__burger-lines i { display: block; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .3s; }
.sky__burger:hover .sky__burger-lines i:nth-child(2) { transform: translateX(4px); }

/* the blue bird of the ladder sits on the cloud and hops when it comes down */
/* (the bird is drawn at the bottom right of its box: the box stands above the cloud so its feet touch the edge) */
.sky__bird { position: absolute; right: 64px; top: -121px; width: 130px; height: 125px; background: url('../images/bird-sprite.svg') no-repeat 0 0; transform: scale(.32); transform-origin: 100% 100%; pointer-events: none; }
.sky.is-on .sky__bird { animation: sky-hop .5s ease-out 1s 2 alternate, sky-blink 5s steps(1, end) 3s infinite; }
@keyframes sky-hop { from { translate: 0 0; } to { translate: 0 -26px; } }
@keyframes sky-blink { 0%, 94% { background-position: 0 0; } 95%, 100% { background-position: -130px 0; } }

/* ---------- A wide screen: calm (it comes when the page is scrolled up and slides away when it goes down) ---------- */
@media only screen and (min-width: 1321px) {
	.sky__drop { transition: transform .28s ease-in; }
	.sky.is-on .sky__drop { transition: transform .38s cubic-bezier(.2, .8, .3, 1); }
	.sky.is-on .sky__bird, .sky__nav > ul > li > a.active::after, .sky__nav li:hover > ul, .sky__nav li:focus-within > ul { animation: none; }
	.sky__nav li ul { rotate: 0deg; }
	.sky__nav > ul > li > a:hover, .sky__nav > ul > li:focus-within > a { transform: none; }
}

/* ---------- A narrower screen: the logo, the language and "Menu" ---------- */
@media only screen and (max-width: 1320px) {
	.sky__nav, .sky__login { display: none; }
	.sky__burger { display: inline-flex; }
	.sky__board { gap: 6px; padding: 7px 10px 7px 10px; }
	.sky__logo img { height: 44px; }
	.sky__drop { top: 36px; }
	.sky__bird { right: auto; left: 40px; transform: scale(.3); transform-origin: 0 100%; }
}
@media only screen and (max-width: 400px) {
	.sky__logo img { height: 38px; }
	.sky__lang { width: 38px; height: 38px; font-size: 13px; }
	.sky__burger { padding: 8px 13px 8px 10px; font-size: 18px; }
}

/* ---------- The menu of a phone: a scroll that unrolls under the cloud ---------- */

.sky-sheet { position: fixed; z-index: 9500; inset: 0; }
.sky-sheet__veil { position: absolute; inset: 0; background: rgba(248, 241, 236, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; }
.sky-sheet.is-open .sky-sheet__veil { opacity: 1; }
.sky-sheet__paper {
	position: absolute; left: 12px; right: 12px; top: 102px; max-width: 520px; margin: 0 auto; max-height: calc(100vh - 116px); max-height: calc(100dvh - 116px);
	overflow-y: auto; overscroll-behavior: contain; padding: 64px 8px 14px; border-radius: 22px; background: #fff;
	box-shadow: 0 30px 60px -24px rgba(0, 45, 95, .55);
	transform-origin: 50% 0; transform: scaleY(.04); opacity: 0;
	transition: transform .5s cubic-bezier(.3, 1.25, .5, 1), opacity .2s;
}
.sky-sheet.is-open .sky-sheet__paper { transform: none; opacity: 1; }
/* the rolled edge at the top, as of a scroll */
.sky-sheet__paper::before { content: ''; position: sticky; top: -64px; display: block; height: 10px; margin: -64px -8px 54px; border-radius: 22px 22px 0 0; background: repeating-linear-gradient(90deg, #ff5736 0 18px, #fff 18px 24px, #52aae8 24px 42px, #fff 42px 48px); }
.sky-sheet__x { position: absolute; right: 12px; top: 18px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #f1ece5; color: #3c4741; font: 400 30px/1 'Cabin Sketch', Arial, sans-serif; cursor: pointer; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, color .2s; }
.sky-sheet__x:hover { transform: rotate(90deg); background: #ff5736; color: #fff; }
.sky-sheet__list { margin: 0; padding: 0 4px; list-style: none; }
.sky-sheet__list li { position: relative; margin: 0; padding: 0; list-style: none; }
.sky-sheet__list li::before { display: none; }
.sky-sheet__list > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px dashed #ece4d8; opacity: 0; translate: 0 -8px; }
.sky-sheet.is-open .sky-sheet__list > li { opacity: 1; translate: 0 0; transition: opacity .3s, translate .4s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(.12s + var(--i, 0) * .035s); }
.sky-sheet__list > li:last-child { border-bottom: 0; }
.sky-sheet__list > li > a { flex: 1 1 0; min-width: 0; padding: 12px 14px; font: 400 23px/1.15 'Cabin Sketch', 'Neucha', Arial, sans-serif; color: #3c4741; text-decoration: none; }
.sky-sheet__list a.active { color: #ff5736; }
.sky-sheet__more { flex: none; width: 46px; height: 46px; margin-right: 4px; padding: 0; border: 0; border-radius: 50%; background: #f2f8fd; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sky-sheet__more i { display: block; width: 10px; height: 10px; margin: -4px auto 0; border: solid #2f80c8; border-width: 0 3px 3px 0; rotate: 45deg; transition: rotate .3s, margin .3s; }
.sky-sheet__list > li.is-open > .sky-sheet__more i { rotate: 225deg; margin-top: 4px; }
.sky-sheet__list ul { display: none; flex-basis: 100%; margin: 0 0 8px; padding: 2px 0 6px 16px; list-style: none; }
.sky-sheet__list > li.is-open > ul { display: block; animation: sky-unroll .35s ease-out; }
@keyframes sky-unroll { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
.sky-sheet__list ul a { display: block; padding: 9px 14px; border-left: 3px solid #e3eef8; font: 400 19px/1.2 'Cabin Sketch', 'Neucha', Arial, sans-serif; color: #4a5650; text-decoration: none; }
.sky-sheet__list ul a.active { border-left-color: #ff5736; }
.sky-sheet__foot { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0 6px; }
.sky-sheet__foot .sky__login { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
	.sky__drop, .sky.is-on .sky__drop { transition: opacity .3s; }
	.sky__drop { transform: none; opacity: 0; }
	.sky.is-on .sky__drop { opacity: 1; }
	.sky__nav li:hover > ul, .sky__nav li:focus-within > ul, .sky.is-on .sky__bird, .sky__nav > ul > li > a.active::after { animation: none; }
	.sky-sheet__paper, .sky-sheet__list > li { transition: opacity .2s !important; transform: none; translate: none; }
}