@import '../Vars.css';


header {display:flex; background-image:linear-gradient(to bottom, #9bb5e1, var(--site-background-color)); overflow:hidden;}


#logo {flex-basis:163px; height:156px; background-image:url('/images/herne_hill_logo.png');
	   background-repeat:no-repeat; background-size:contain;}


header {justify-content:center;}
header > :not(:last-child) { margin-top: 20px; margin-bottom: 20px; }
#logo { margin-right: 24px; }

#header-title {margin-bottom:10px;}

header h1 {font-size:55px; font-weight:bold; font-family:'Arial Bold',Arial,sans-serif; text-transform:uppercase; color:white; line-height:1; letter-spacing:1px }
	header h1 span { display: block; color: black; margin-bottom: 10px; }
header h1 {text-shadow:6px 5px 5px rgba(0,0,0,0.2)}


#header-text {position:relative; display:flex; flex-direction:column}
#festival-dates {position:absolute; top:0px; right:0px; color:black; font-size:20px; line-height:1.2; margin-top:2px; margin-right:10px; font-weight:bold; text-align:right;}

@media screen and (max-width:414px)
{
	#festival-dates {font-size:16px; line-height:1}
}


#sponsor-icons {flex-grow:1; display:flex; justify-content:space-between}

#sponsor-icons {align-items:flex-start; color:white;}

#sponsor-icons img {flex-basis:212px; height:23px;}

#sponsor-icons > span:first-child {font-size:12px; margin-left:10px;}

#sponsor-icons > a {flex-basis:30px; height:30px; background-size:contain; background-repeat:no-repeat; background-position:center center;}


#sponsor-icons a[href*='facebook'] {background-image:url('/images/social_media/facebook.png');}
#sponsor-icons a[href*='twitter'] {background-image:url('/images/social_media/twitter.png');}
#sponsor-icons a[href*='instagram'] {background-image:url('/images/social_media/instagram.png');}


/* Menu */
#nav {display:flex; flex-grow:1}

nav {background-color: #517AC8; display: flex; flex-grow: 1;}

nav {justify-content:space-around; align-items:center;}

nav a { display: block; text-align: center; color: white; text-transform: uppercase; font-size: 14px; }
nav a.selected {text-decoration:underline;}

nav div {padding:5px; }

header {flex-wrap:wrap;}

#menu-icon, #close-menu { display: none; }

nav:not([data-visible]) #close-menu {display:none;}



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

	nav {overflow:hidden; transition-property:max-height; transition-duration:0.5s; transition-timing-function:ease-out}

	nav { position: absolute; top: 0px; left: 0px; right: 0px; height:auto; z-index:100; max-height:100vh;}

	nav a {font-size:17px;}


		nav:not([data-visible]) { max-height:0px; }

	#menu-icon { display: block;  color:#517AC8}

	nav[data-visible] ~ #menu-icon {display:none;}

	nav { flex-direction:column;}

	#close-menu {display:block; padding:5px; text-align:left; margin-right:4px; align-self:flex-start;}

	#menu-icon, #close-menu {position: absolute; top: 10px; left: 10px; font-size:25px; line-height:1;}

	#nav {flex-grow:0;}

	#logo {margin-top:44px; height:136px; flex-basis:142px;}
	
	header {border-bottom:6px solid white;}
}



@media screen and (max-width:670px)
{
	header { display: block; padding-left:10px; padding-right:10px; }

	#logo { position: absolute; top: 5px; right: 5px; width: 152px; height: 120px; background-position: right top;
			margin-top:0px; margin-right:0px; margin-bottom:0px; opacity:0.3
	}


	#header-text {margin-top:40px;}
}

@media screen and (max-width:550px) {
	header h1 { font-size: 10vw; }

	#sponsor-icons { flex-wrap: wrap;  }
}


@media screen and (max-width:490px)
{
	#sponsor-icons {justify-content:flex-start;}
	#sponsor-icons > img {margin-left:20px;}
	#sponsor-icons a {flex-basis:32%; margin-top:10px; flex-grow:1}
}


@media screen and (min-width:900px) {

	header {flex-wrap:nowrap;}

	header > :not(:last-child) { margin-top: 24px; margin-bottom: 35px; }

	nav div {padding:0px;}

	#nav { margin-left: 20px; flex-direction: column; flex-grow:0;}

	nav { padding: 5px; display: flex; flex-direction: column; justify-content:space-between; align-items:initial; }

	#taper { display:block; flex-basis: 35px; background-image: url('/images/svg/menu_taper.svg'); background-size:100% 100%; background-repeat: no-repeat; }

	header {padding-bottom:20px; border-bottom:5px solid white;}
}