/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @    M A S T H E A D    &     T O P    N A V I G A T I O N:
 * @
 * @    SFMS logo and visually hidden <H1>
 * @    top navigation bar (or burger)
 * @    home-link superimposed over logo (there's no image to wrap)
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 *
 * ----------------------------------------------------------------------------
 *                                               SMALL SCREEN DEFAULT
 *                                menu collapsed into a mobile burger
 *----------------------------------------------------------------------------
 */
#masthead { 
	position: relative;   /* so that absolute positioning will work */
	margin:0;
	padding: .5em 0 0 0;
	background: white;
	}

#sfms-logo { 

	height: 110px;

	background-image: 
		url(../visual_2023/SFMS_skinnybar_header__SusquehannaFolk_guitar.svg),
		url(../visual_2023/SFMS_skinnybar_header__MusicSociety.svg),
		url(../visual_2023/SFMS_skinnybar_header__tall_bar_fafafa.svg);

	background-size: 
		350px auto,
		170px auto,
		auto 120px;
	background-position:   
		top 0px left 5px, 
		top 80px left 170px, 
		top 24px left 0px;
	background-repeat: 
		no-repeat, 
		no-repeat,
		repeat-x; 
	}



#sfms-tagline {
	background-color: #fafafa; 
	color: #666666; 
	padding: 0.25rem 1rem 0.25rem 0.5rem;
	font-family: Rosario, Roboto, Arial, Helvetica, sans-serif;
	font-size: 0.875rem;
	}

	@media screen and (max-width: 500px) { 
	/* on very small screens, display as two lines without using a <br> tag */
		#sfms-tagline .tagline span { white-space: nowrap; display: block; }
	}

#topnav .menu-tabs { display: none; } /* menu collapsed into mobile burger */

#topnav .burger a { color: #0178a3; } 
#topnav .burger { 
	text-align: right; 
	padding-right: 1em; 
	position: relative; 
	top: -2.75em; 
	}

#topnav { 
	background: #fafafa; 
	background-image: linear-gradient(#fafafa, #f4f4f4);
	height: 0.5em; 
	}




/* ----------------------------------------------------------------------------
 *                                              ON WIDER SCREENS (> 800 px)
 *                                   top menu-bar appears, tagline moves up
 *                                             
 * ----------------------------------------------------------------------------
 */

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

	#sfms-tagline {
		/* pull tagline text up above the logo bar, and right-align it */
		/* and allow it to display as a single line */
		margin: -58px 0 0 0;
		height:  50px;
		background-color: transparent;
		padding: 0 2em 0 0;
		text-align: right;
		}
	#sfms-tagline .tagline span { display: inline; }  


	/* REPLACE BURGER WITH NAV BAR */
	#topnav .burger { display: none; }

	#topnav .menu-tabs { display: flex; }

	#topnav { padding: 0.5rem .75rem .5rem 1rem; }
	#topnav { height: auto; }
 }
/* ----------------------------------------------------------------------------
 *                                         ON VERY WIDE SCREENS (> 1100 px)
 *               logo a bit bigger, and "Music Society" above the blue line
 *                                                         tagline centered
 * ----------------------------------------------------------------------------
 */
@media screen and (min-width: 1100px) {

	#sfms-logo {   /* bump up the size a bit */
		height: 120px;

		background-size:          
			400px auto,
			200px auto,
			auto 160px;
		background-position:      
			top 0px left 5px, 
			top 62px left 410px,  /* the words "Music Society */
			top 17px left 0px;
		}
	#sfms-tagline {
			text-align: left;
			padding-left: 670px;  
			margin-top: -58px;    /* tagline position */
			height: 45px;
		}
	#topnav li    { font-size: 1em; }    /* menu text just a little larger */

	#topnav ul { width: 95% } /* prevent overflow close to 1100px */
	.full-social-media {  }
 }

/* ----------------------------------------------------------------------------
 *                                         ON EVEN WIDER SCREENS (> 1200 px)
 * ----------------------------------------------------------------------------
 */
@media screen and (min-width: 1200px) {       /* there's enough space to increase */
	#sfms-tagline { font-size: 0.9375rem; }  /* the tagline font a little bit    */
	#topnav li    { font-size: 1.125em; }    /* menu text a little larger still  */
  }
/* ----------------------------------------------------------------------------
 *                                         ON TEENY WEENY SCREENIES (< 600 px)
 * ----------------------------------------------------------------------------
 */
@media screen and (max-width: 499px) {
	#sfms-logo {                             /* shrink everything */
		height: 75px;

		background-size:          
			250px auto,
			120px auto,
			auto 160px;
		background-position:      
			top 0px left 5px, 
			top 58px left 105px,  /* the words "Music Society */
			top -14px left 0px;
		}
	#sfms-tagline { font-size: 0.75rem; }
 }


/* ============================================================================
 *                               HOME-LINK SUPERIMPOSED ON LOGO AT TOP
 * ============================================================================
 */

#sfms-homelink a { display: block; width: 100%; height: 100%; }  

#sfms-homelink { position: absolute;  top: 0px; left: 0;  height: 50px; width: 310px;  }
@media screen and (min-width: 800px)  {  #sfms-homelink { height: 67px; width: 310px; } }
@media screen and (min-width: 1100px) {  #sfms-homelink { height: 78px; width: 350px; } }




/* ============================================================================
 *                            medium & wide screens only: top SOCIAL MEDIA
 * ============================================================================
 */
#masthead .full-social-media { display: none; } /* on small screens */


/* ------------------------------ MEDIUM SCREENS AND UP */
@media screen and (min-width: 600px) {
	#masthead .full-social-media   { 
		display: block;
		position: absolute; top: 0.5rem; right: 1rem;
		font-size: 1.25em; 
		max-width: 600px; 
		border: solid 0px blue;
	}
	#masthead .full-social-media .icon  { margin: 0 0.75em; } 
}
/* ----------- ON WIDE SCREENS, ENLARGE THE ICONS A BIT and shift left a bit */
@media screen and (min-width: 1100px) { 
	#masthead .full-social-media   { font-size: 1.5em; top: 1.25rem; right: 5rem;}
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @    TOP NAVBAR menu behavior
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */

#topnav ul { margin: 0; padding: 0; }
#topnav li {
	display: inline-block;  
	margin: 0 0.75em;
	padding: 0;
	position: relative;
	}
#topnav a,
#topnav a:visited { 
	color: #555555; 
	background: transparent; 
	font-weight: normal; 
	text-decoration: none; 
	white-space: nowrap;
	}  


#topnav .menu-tabs { justify-content: space-around; }
/* set to display:flex above */

/*	                                indicate the active trail */
#canvas.tab_home      #topnav .tab.home:after,
#canvas.tab_events    #topnav .tab.events:after,
#canvas.tab_festival  #topnav .tab.festival:after,
#canvas.tab_community #topnav .tab.community:after,
#canvas.tab_support   #topnav .tab.support:after,
#canvas.tab_about_us  #topnav .tab.about_us:after
		{
		content:' ';
		display: block;
		height: 0; width: 0;
		position: absolute;
		left: 50%; 
		transform: translateX(-50%) translateY(.4375em);
		border-left: solid 30px transparent;
		border-right: solid 30px transparent;
		border-bottom: solid 1px transparent;
		/*  - - - - - - - - - - active tab gets an arrow pointing down */
		border-top: solid 1em #f4f4f4; 
		}