/* Elba - Airport Shuttle - style.css
   © Eric Reboux Software - Mac V.F. 25/09/2025 */

@import "normalize.css";
@import "fonts.css";

* {
	--hilton_color: #002f60;
	--link_color: var(--hilton_color);
	--link_selected_color: #0053ae;
	--page_width: 1200px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
}

body
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 100vh;
	font-family: "Hilton Sans",system-ui,-apple-system,BlinkMacSystemFont,Inter,Arial,"Helvetica Neue","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

body > *
{
	width: 100%;
}

h1, h2, h3, h4, h5, h6
{
	font-family: "Hilton Serif";
	font-weight: 500;
}

a
{
	text-decoration: none;
	color: var(--hilton_color);
	transition: 0.2s ease;
}

a:hover
{
	color: var(--link_selected_color);
	transition: 0.1s ease;
}

#top_bar
{
	display: flex;
	align-items: center;
	gap: 16px;
	height: 48px;
	padding: 0 40px;
	background: linear-gradient(135deg, #002c50, #1c343e);
	color: #fffd;
}

#top_bar a
{
	color: inherit;
	transition: color 0.1s ease;
}

#top_bar a:hover
{
	color: white;
	transition: color 0.2s ease;
}

#top_bar .left
{
	width: 172px;
}

#top_bar .center
{
	flex-grow: 1;
	text-align: center;
}

#top_bar .center .phone, #top_bar .center .phone a
{

}

#top_bar .center .phone a
{
	font-weight: 600;
	white-space: nowrap;
}

#top_bar .center .phone a svg
{
	margin-bottom: -5px;
}

#top_bar .right
{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#top_bar .right .language_menu
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

#top_bar .right .language_menu .language_select
{
	position: relative;
	display: inline-flex;
	align-items: center;
}

#top_bar .right .language_menu .language_select:hover
{
	color: #fff;
	cursor: pointer;
}

#top_bar .right .language_menu .selected_option
{
	display: inline-flex;
	align-items: center;
	font-weight: 600;
}

#top_bar .right .language_menu .selected_option img
{
	margin-right: 10px;
	width: 24px;
	height: 24px;
}

#top_bar .right .language_menu .language_down_arrow
{
	margin: 8px 0 0 4px;
	width: 16px;
	height: 16px;
}

#top_bar .right .language_menu .language_down_arrow svg
{
	width: 32px;
	height: 16px;
}

#top_bar .right .language_menu .options
{
	position: absolute;
	top: 24px;
	right: -4px;
	padding: 0;
	margin: 0;
	list-style: none;
	white-space: nowrap;
	border: 1px solid #0003;
	background: #fffd;
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 16px #0003;
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
	z-index: 10;
}

#top_bar .right .language_menu .options.open
{
	opacity: 1;
	visibility: visible;
	transition: opacity 0.1s ease, visibility 0.1s ease;
}

#top_bar .right .language_menu .options li
{
	display: flex;
	align-items: center;
	padding: 12px;
	color: #000;
	cursor: pointer;
	transition: background 0.1s ease;
}

#top_bar .right .language_menu .options li:first-of-type
{
	border-radius: 8px 8px 0 0;
}

#top_bar .right .language_menu .options li:last-of-type
{
	border-radius: 0 0 8px 8px;
}

#top_bar .right .language_menu .options li:hover
{
	background-color: #ddd;
}

#top_bar .right .language_menu .options li img
{
	margin-right: 10px;
	width: 24px;
	height: 24px;
	filter: drop-shadow(0 1px 4px #0004);
}

#title_bar
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	max-width: var(--page_width);
	margin: 0 auto;
	padding: 40px;
}

#title_bar h1
{
	margin: 0;
	color: var(--hilton_color);
}

#title_bar h2
{
	font-family: "Hilton Sans";
	font-size: 28px;
	font-weight: 400;
	color: #757575;
}

#title_bar .mobile_menu
{
	display: none;
	position: relative;
}

#title_bar .mobile_menu ul
{
	position: absolute;
	top: 64px;
	left: -8px;
	padding: 0;
	margin: 0;
	list-style: none;
	white-space: nowrap;
	border: 1px solid #0003;
	background: #fffd;
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 16px #0003;
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
	z-index: 10;
}

#title_bar .mobile_menu ul.open
{
	opacity: 1;
	visibility: visible;
	transition: opacity 0.1s ease, visibility 0.1s ease;
}

#title_bar .mobile_menu ul li
{
	color: #fff;
	transition: background 0.2s ease-out;
}

#title_bar .mobile_menu ul li:hover
{
	background-color: #ddd;
	transition: background 0.1s ease;
}

#title_bar .mobile_menu ul li a
{
	display: inline-block;
	padding: 12px;
	color: #000;
	font-size: 20px;
}

#title_bar .mobile_menu ul li a:hover
{
	color: #000;
}

#title_bar .mobile_menu .menu_icon:hover
{
	cursor: pointer;
}

nav.desktop_menu
{
	background: linear-gradient(135deg, #104c97, #395f76);
	color: #fff:
}

nav.desktop_menu ul
{
	display: flex;
	max-width: var(--page_width);
	margin: 0 auto;
	padding: 0 24px;
	list-style-type: none;
}

nav.desktop_menu li
{

}

nav.desktop_menu a
{
	display: inline-block;
	padding: 16px;
	color: #fff;
	transition: 0.2s ease;
}

nav.desktop_menu a.selected
{
	font-weight: 600;
}

nav.desktop_menu a:hover
{
	background: linear-gradient(320deg, #1157af, #1963c0);
	color: #fff;
	transition: 0.1s ease;
}

main
{
	flex: 1;
	max-width: var(--page_width);
	margin: 0 auto;
	padding: 40px;
}

footer
{
	border-top: 2px solid var(--hilton_color);
}

footer .content
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	max-width: var(--page_width);
	margin: 0 auto;
	padding: 20px 40px;
}

footer .content .footer_menu
{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 4px;
	list-style-type: none;
}

footer .content .footer_menu li:not(:last-of-type)
{
	padding-right: 4px;
	border-right: 1px solid #888;
}

@media only screen and (max-width: 1200px)
{
	#top_bar .left
	{
		display: none;
	}

	#top_bar .center
	{
		width: 80%;
		text-align: left;
	}
}

@media only screen and (max-width: 1000px)
{
	#top_bar
	{
		padding: 0 20px;
	}

	#top_bar .right .language_menu .language_label
	{
		display: none;
	}

	footer .content
	{
		flex-direction: column-reverse;
	}
}

@media only screen and (max-width: 800px)
{
	#top_bar .right .language_menu .options li
	{
		font-size: 20px;
	}

	#title_bar
	{
		padding: 20px;
		border-bottom: 2px solid var(--hilton_color);
	}

	#title_bar .mobile_menu
	{
		display: flex;
	}

	nav.desktop_menu
	{
		display: none;
	}

	#title_bar .site_message
	{
		width: 38px;
		height: 32px;
		font-size: 0px;
		opacity: 0;
	}
}

@media only screen and (max-width: 650px)
{
	#top_bar .right
	{
		width: initial;
	}

	#top_bar .right .language_menu .selected_option .language_name
	{
		display: none;
	}

	footer .content .footer_menu
	{
		flex-direction: column;
		gap: 12px;
	}

	footer .content .footer_menu li:not(:last-of-type)
	{
		border: none;
	}
}

@media only screen and (max-width: 500px)
{
	#top_bar .center .phone, #top_bar .center .phone a
	{
		font-size: 15px;
	}

	#title_bar
	{
		gap: 10px;
	}

	#title_bar h1
	{
		font-size: calc(28px * 100vw / 500px);
	}
}

@media only screen and (max-width: 420px)
{
	#top_bar .center .phone, #top_bar .center .phone a
	{
		font-size: 13px;
	}
}

@media only screen and (max-width: 370px)
{
	#title_bar h1
	{
		font-size: calc(28px * 100vw / 550px);
	}
}