/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @    S I T E W I D E :
 * @
 * @    FUNDAMENTAL / BASELINE STYLES for pretty much all HTML elements
 * @    LINK behavior -- I have hover-underlines on .grant a (eventpages)
 * @    LINK behavior -- I have no underlines on .enews.container a
 * @
 * @    COMMON PAGE ELEMENTS
 * @    PRINT STYLES
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */

html { box-sizing: border-box; }
html * , html *::before, html *::after { box-sizing: inherit; }

html { background: url(mist-noise-background.png) #b1c0c6; }
body { max-width: 2000px; background: white; margin: 0 auto; }


html { font-size: 16px;   /* Boilerplate only sets it to 1em. */
	font-family: Roboto, Arial, Helvetica, sans-serif; 
	color: #333;
}

a { color: #0178a3; }  /* or a little brighter? */
a:hover { text-decoration: underline; }
a.phonelink { text-decoration: none; white-space: nowrap; color: #333; }

em.mocklink { color: #0178a3; text-decoration: underline; font-style: normal; }


h2 a, h3 a, nav a, h3 .mocklink { text-decoration: none; }

nav a:hover { text-decoration: none; }

h1 { font-size: 2em;     font-weight: bold; margin: 0; padding: 0; margin-bottom: 0.125em;}
h2 { font-size: 1.5em;   font-weight: bold; margin: 0; padding: 0; } 
h3 { font-size: 1.125em; font-weight: bold; margin: 0; padding: 0; } 
p  { font-size: 1em;   margin: 0 0 1em 0; }
li { margin: 0.25em 0; }

figure { margin:0; padding: 0; }
iframe { border: none; }

h1, h2, h3,         /* many H2's re-fonted below -- */
.basics-bit.date,
.fest-gridbox.text,
.statestreet h2,
.tab_support .call-to-action .button a,
.fancyfont { font-family: 'Roboto Slab', Roboto, Arial, Helvetica,sans-serif; }

.menu-tabs { font-family:       Rosario, Roboto, Arial, Helvetica,sans-serif; }


section > div > h2, 
section > aside > h2, 
.for-calendar h2, 
.for-calendar-menu h2,
.homepage #features h2, 
.rosario
 { 
	font-family: Rosario, Roboto, Arial, Helvetica, sans-serif; 
	font-weight: normal;
	color: #777777; 
	}

.for-page-content h2:first-of-type { margin-top: 0; }  

.photo-credit { 
	font-size: 0.75em; 
	color: #88aaaa; 
	text-align: right; 
	margin: 0 1.5rem 0 0;
	}
.grant { font-size: 0.8125em; color: #88aaaa; }
.gig-info .grant { color: #669999; }



/* ============================================================================
 *                                            WHITESPACE AT EDGES OF PAGE
 * ============================================================================
 */
@media screen and (max-width: 699px) { 

	#main .for-calendar,
	#main .for-basics, 
	#main .for-page-content { margin: 0 1rem 0 1.5rem; }

	#main .for-page-content { margin-bottom: 3rem }

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

	#main .for-calendar,
	#main .for-basics, 
	#main .for-page-content { margin: 0; }

	#main .for-calendar { max-width: 50em; }

	#main .for-basics {  margin: 0.5rem 0 1.5rem 1rem; }
}



/* ----------------------------------------------------------------------------
 *                                     graphic filler for excess whitespace
 * ----------------------------------------------------------------------------
 */
section.tile-background { display: none; }

@media screen and (min-width: 1100px)  {
	section.tile-background {
		display: block;
		grid-row: 3; grid-column: 3;
		height: 100%;
		background-image: url(../visual_2023/silver_tile_background.png);
		background-repeat: space;
		background-size: calc(95%/2), calc(95%/2);
		}

	/* might just be eventpages in general */
	.page_id__susquehannafolkfestival section.tile-background { 
		grid-row: 3; grid-column: 4;
		}

}
@media screen and (min-width: 1200px)  {
	section.tile-background {
		background-size: calc(95%/3), calc(95%/3);
	}
}


/* ============================================================================
 *                                    HEADINGS WITH UNDER-LINES (or not)
 * ============================================================================
 */
        #whatsnew h3,
        .calendar h3,
           .enews h3,
        .resource h2,
.for-page-content h2 {   /* should not need separate   .for-page-content.wide */
 	border-bottom: solid 3px #0178a3; 
	margin: 1.25rem 0 0.5rem;
	}
h3.no-border { border-bottom: none; }


/* ============================================================================
 *                                                      UNORDERED LISTS
 * ============================================================================
 */
ul { list-style-type: none; margin: 0; padding: 0 0 0 1.25rem; }
li { margin: 0 0 0.5em -1rem; padding: 0 0 0 1rem; text-indent: -1rem;}

ul li:before {
	content: ' ';
	display: inline-block;
	height: 0.5rem;
	width: 0.5rem;
	margin-right: 0.5rem;
	}
        li:before { background: #445588; }
.teal   li:before { background: #0178a3; }
.gold   li:before { background: #fb4;    }
.silver li:before { background: #c0c0c0; }

.larger li:before { height: 0.75rem; width: 0.75rem; }

/* EXCEPTIONS: MOVE THESE LATER */
.statestreet .flyerlist ul { margin-bottom: 1em; }
.statestreet .flyerlist li { margin-bottom: 0.25em; }

.enews .flyerlist ul { margin-bottom: 1em; }
.enews .flyerlist li { margin-bottom: 0.25em; }
/* THE ABOVE GET ADJUSTED FOR MOBILE


.resource #categories li:before { margin-right: 0.25em; }

/* NEGATE STYLES FOR NAV LISTS -- and for "plain" lists */
nav ul, nav li, ul.plain { list-style-type: none; margin: 0; padding: 0; text-indent: 0;}
nav li:before, ul.plain li:before { content: ''; display: none; margin-right: 0; background-color: transparent; }

/* more for "plain" lists */
ul.plain.disc { list-style-type: disc; margin: 1em;  }
ul.plain.disc li { margin-left: 0; }


li h3 { display: inline; }

/* FIXES -- SOME COMPONENTS INSIDE LI's DON'T PLAY NICE */
.page_id__summary li p { text-indent: 0; padding-left: 0.5rem; }
.enews li,
.statestreet li { text-indent: 0; }






/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @    COMMON ELEMENTS used in a variety of contexts
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */

.center { text-align: center;  }

.nowrap { white-space: nowrap; }

   .red { color: crimson;      }  

 em.red { font-style: normal;   }





/* ============================================================================
 *                                                            IMAGES
 * ============================================================================
 */
#main img { text-align: center; font-size: 0.75em; } /* in case it's missing */

.performer-photo img { min-height: 100px; }


img.icon.svg { height: 1em; } /* control image height with font-size on container */

img.icon.svg.sfms-facebook { height: 1.25em; } /* Facebook F is a little taller */



/* ============================================================================
 *                                                       DIAMOND DINGBAT
 * ============================================================================
 */
.dingbat { 
	display: inline-block; 
	margin: 0 0.5rem 0 0.125rem;
	width: 0.5em; 
	height: 0.5em; 
	transform: rotate(45deg) translateY(-0.25rem); 
	background: #557788;
}

/* On small screens, turn that dingbat into a line break */
@media screen and (max-width: 599px) {
	#footer .dingbat,
	.basics-bit.dingbat { height: 0 !important; width: 0 !important; 
				display: table !important; }
}

/* ============================================================================
 *                                             LINK FOLLOWED BY ARROW >
/* .                             arrow-after used in DIRECTIONS pages 
 *        .                           readmore used in EVENT LISTINGS
 * ============================================================================
 */

.readmore, .arrow-after { white-space: nowrap; }

   .readmore:after, 
.arrow-after:after  { 
	content: ' '; 
	display: inline-block; 
	height: 0; width: 0;
	border-left: solid 0.5rem transparent;
	border-right: solid 0.5rem transparent;
	border-top: solid 0.375rem transparent;
	border-bottom: solid 0.375rem transparent;
	border-left-color: #0178a3;
	margin-left: 0.5em;
	} 


.readmore { font-size: 0.75em; }  
.readmore:after { 
/*
	border-left: solid 0.7em #0178a3; 
	border-right: solid 0 transparent;
	border-top: solid 0.45em transparent;
	border-bottom: solid 0.45em transparent;
*/	margin-left: 0.3125em;

	border-left-width:   0.7em;
	border-right-width:  0;
	border-top-width:    0.45em;
	border-bottom-width: 0.45em;
	}

.button .readmore:after { border-left-color: white; } 

/* ============================================================================
 *                                                        ATTENTION BOX
 * ============================================================================
 */
.attention-box { background: cornsilk; padding: 1rem; margin-bottom: 1em; } 
				/* same as blogpost */
#basics .attention-box { background: #fea; display: inline-block; margin: 0 -1rem;}

.attention-box p:last-child { margin-bottom: 0; }

.description .attention-box { margin-left: -1em; }

@media screen and (max-width: 699px) { 
	.description .attention-box { margin-right: -1em; } 
 }
/* ALERT check this */

/* ============================================================================
 *                                        HEADING WITH A BIG SQUARE BULLET
 * ============================================================================
 */
h3.bigbullet { margin-top: 1.5em; }
h3.bigbullet.before-list { margin-bottom: 0.5em; }

.bigbullet:before { 
	content: ' ';
	display: inline-block;
	background: #fb4;
	height: 1em;
	width: 1em;
	margin-right: 0.5em;
 	}


/* ============================================================================
 *                                                      GENERIC BUTTONS
 * ============================================================================
 */
.button a { color: white; text-decoration: none; } /* override */

.button { margin: 0.5rem; text-align: center; border-radius: .25rem;}
.button a { display: block; padding: 0.25em 1em;  }
.button.teal   { background-color: #189cb0; text-shadow: 1px 1px 2px #015883; }
.button.gold   { background-color: #ffbb44; text-shadow: 1px 1px 2px #d6511a;} /* e9703e */
.button.orange { background-color: #e9703e; }
.button.red    { background-color: crimson; }

.button-row    { display: flex; justify-content: space-around; flex-wrap: wrap; }
.button-column { display: flex; flex-direction: column; }

.button-row .single   { flex: 1 0 auto; }
.button-row .two-up   { flex: 1 0 auto; }
.button-row .three-up { flex: 1 0 auto; }

.center .button { display: inline-block; margin: /*inherit Jan2021 */ auto; }



/* ============================================================================
 *                                     RESPONSIVE FOLK ARTS CENTER LOGO(s)
 * which cannot be in the FAC stylesheet because they can get used elsewhere
 * ============================================================================
 */
.folkarts-logo-responsive { 
	background-size: cover; 
	box-sizing: content-box; 
	width: 90%; 
	height: 0; 
	padding: 0; 
	background-image: url(../folkarts/fac_images/logo_FolkArtsCenter_4.svg); 
	padding-bottom: calc(90% * 79/390);  
	}
.folkarts-logo-responsive.full-width { 
	width: 100%; 
	padding-bottom: calc(100% * 79/390);
	}
.folkarts-logo-responsive-wrapper {
	max-width: 32em; margin: 0 auto 1em auto;
	}

.gig-info .folkarts-logo-responsive::before { content: ' '; display:block; height: 1em; }




/* Typically on pages requesting folkarts support, but not always! */
aside.folkarts-event-blurb { padding-top: 1rem; }
aside.folkarts-event-blurb .folkarts-logo-responsive { margin: 1rem auto; }
aside.folkarts-event-blurb .logo.folkarts_partner { margin: 0 auto 1rem auto; text-align: center;}


/* ============================================================================
 *                                                         PAGE BASICS
 * ============================================================================
 */
#basics p  { margin: 0 0 0.5rem 0; color: #446677; }

#basics .preheading { font-size: 1.25rem; line-height: 1.375rem; color: #335566; display: block;}

.basics-bit { display: block; }
.basics-bit.date { font-weight: normal; font-size: 1.25em; }
.basics-bit.time, .basics-bit.venue { display: inline; } 

.basics-bit.directions .dingbat { width: 0.375em; height: 0.375em;}
h1 .basics-bit.dingbat { background: #333; width: 0.375em; height: 0.375em; }


/* ALERT - standard breakover at 700 */

/* MEDIUM SCREENS AND UP */
@media screen and (min-width: 600px) { 
	#basics h1 { font-size: 2.5em; line-height: 1.1em; }  /* maybe only for large screens */
	.basics-bit { display: inline; }
	.basics-bit.dingbat { display: inline-block; background: #446677; width: 0.5rem; height: 0.5rem; }

	.red .basics-bit.dingbat { background: crimson; }

	.basics-bit.dingbat.mini { width: 0.375rem; height: 0.375rem; /*opacity: Jan2021 */ background: #79a; }
}


/* BUT IF IT HAPPENS TO BE IN THE DESCRIPTIONS SECTION: 
	(that was in contests.css but applied everywhere)
*/
   .description .basics-bit.dingbat { background: #444; height: 0.33rem; width: 0.33rem;  }



/* ============================================================================
 *                                                      THUMBNAIL GRIDS
 *  homepage  *  ticket info  *  sponsor  ( all TH2C ) 
 *  BigNews 
 *  community landing page
 *  festival landing page  
 *  Folk Arts Center page  &  Artists Gallery page
 *  Folk Artists Gathering event page -- montage
 * ============================================================================
 */

.thumbnail-grid .container { 
	display: flex; 
	flex-wrap: wrap;
	justify-content: center; 
	align-content: space-around;
	gap: 10px;
	margin: 0 auto;
	}

.thumbnail-grid .grid-item {  
	display: flex;
	flex: 0 1 calc( (100% - 30px)/4 );  /* by default, display 4-up */
	text-align: center;
	}


	/* TH2C = old-style rectangular thumbnails */
	.thumbnail-grid.TH2C .grid-item   {  flex: 0 1 auto;  }
	.thumbnail-grid.TH2C .grid-item img { max-width: 124px;  } /* 55% of 224px  */


.thumbnail-grid a { text-decoration: none; }

.thumbnail-grid .grid-item img { width: 100%;  } 

/* in case a thumbnail montage takes the place of a performer photo */
.performer-photo .thumbnail-grid img { min-height: 0; }


/* SPECIFIC TO FOLK ARTS CENTER */
.gallery-montage  {  background: black;  padding: 10px;  margin-bottom: 2em; }

/* to "glue together" multiple montages structurally separated by content */
    @media screen and (min-width: 900px) {
		.right-wrapper            .gallery-montage { margin-bottom: 0; }
		.right-wrapper.additional .gallery-montage { margin-bottom: 2em; padding-top: 0; }
	}


/* DEFAULT LAYOUT (not TH2C) -- usually 4 unless it takes the place of a performer photo */
    @media screen and (max-width: 499px) {
		.thumbnail-grid  .grid-item {  flex: 0 0 calc( (100% - 20px)/3 );  }
		.performer-photo .grid-item {  flex: 0 0 calc( (100% - 20px)/3 );  }
   	}
    @media screen and (min-width: 500px) 
                  and (max-width: 699px) {
		.thumbnail-grid  .grid-item {  flex: 0 0 calc( (100% - 30px)/4 );  }
		.performer-photo .grid-item {  flex: 0 0 calc( (100% - 20px)/3 );  }
   	}
    @media screen and (min-width: 700px) 
                  and (max-width: 1199px) {
		.thumbnail-grid  .grid-item {  flex: 0 0 calc( (100% - 30px)/4 );  }
		.performer-photo .grid-item {  flex: 0 0 calc( (100% - 20px)/3 );  }
        .for-page-content-wide  .grid-item {  flex: 0 0 calc( (100% - 40px)/5 );  }
   	}
    @media screen and (min-width: 1200px) {
        .thumbnail-grid  .grid-item {  flex: 0 0 calc( (100% - 40px)/5 );  }
		.performer-photo .grid-item {  flex: 0 0 calc( (100% - 20px)/3 );  }
        .for-page-content-wide .grid-item {  flex: 0 0 calc( (100% - 50px)/6 );  }
 
    /* except where we want it to max out at four or three */
	.thumbnail-grid.max-4-up  .grid-item {  flex: 0 0 calc( (100% - 30px)/4 ); }
	.pix-12up  /* folkarts */ .grid-item {  flex: 0 0 calc( (100% - 30px)/4 ); }
	.thumbnail-grid.max-3-up  .grid-item {  flex: 0 0 calc( (100% - 20px)/3 );  }
 	}

/* AWKWARD WIDE-ISH RANGE  */

	@media screen and (min-width: 1100px)  and (max-width: 1349px) {  
		.performer-photo .grid-item {  flex: 0 0 calc( (100% - 10px)/2 );  }
	}

/* OVERRIDE FOR SPECIFIC ARRANGEMENT */
.thumbnail-grid.only-3-up  .grid-item {  flex: 0 0 calc( (100% - 20px)/3 ) !important;  }
.thumbnail-grid.only-2-up  .grid-item {  flex: 0 0 calc( (100% - 10px)/2 ) !important;  }



/* AWKWARD RANGE FOR FESTIVAL GRID (because of text boxes) */
    @media screen and (min-width: 700px) 
                  and (max-width: 799px) {
		.fest-grid .grid-item {  flex: 0 0 calc( (100% - 20px)/3 );  }
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @                                   S P O N S O R   L O G O S   B O X 
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */
.box-o-logos { 
	margin-top: 1.5rem; 
	text-align: center; 
	display: flex; 
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.5em;
	}
.box-o-logos .grantlogo { 
	flex: 0 0 auto;
	margin: 0 0.5rem 1.5rem 0.5rem; 
	width: 120px; 
	}
/* For sponsors that don't have a logo */
.box-o-logos u.grantlogo { 
	background: #669999; 
	border: double 3px white;
	color: white;
	font-size: 0.625em;
	text-decoration: none;
	display: inline-flex;
	justify-content: center;
	padding: 0.5em 1em;
	margin: 0 1rem 1.5rem 1rem;
	max-width: 100px; 
	}
.box-o-logos u.grantlogo.sfms {
	background: #0178a3;
	font-size: 0.75em;
	}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @    PRINT STYLES
 * @    ...adding to those defined in HTML5 Boilerplate
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */

#sfms-logo-for-print { display: none; }



@media print {

	/* Do not show URL for links in these situations: */

    a[href^=""]:after,  /* unfortately, this selector doesn't do anything */
	nav a[href]:after,
	a[href].phonelink:after,
	.box-o-logos a[href]:after,
	#footer-addendum a[href]:after,
	.senior_thumb a[href]:after,
	.fest-gridbox a[href]:after, 
	.calendar h3 a[href]:after, 
	.calendar .thumbs-and-locale a[href]:after {
        content: "";
    }



    /* Hide certain elements not useful in print */
    #sfms-homelink, 
    #masthead-facebook-link,
    .burger,
    .back-and-forth,
    .for-calendar .show-more,
    nav.sidemenu,
    .colorblock-buttons,
    .quicklinks-wrapper,
	.senior-next,
	.senior-back,
	.senior audio, 
	.fest-gridbox .text,
	.video-embed .video-inner,
	.video-embed .video-inner iframe,
	.directions .map-pane
    	 { display: none; }


    .page_id__support  nav.sidemenu,
    .page_id__community nav.sidemenu,
    .page_id__directions-hub nav.sidemenu { display: block; margin-left: 1rem; }





    .button { border: solid 2px coral; }

    .gig-info .button { max-width: none; margin: 0 0 0.5rem 0; display: inline-block; }
    .gig-info .general-ticket-info { text-align: left; margin-left: 1rem;}
    #ticket-info ul { padding-left: 0; padding-top: 0.5rem; }

    .tab_support.page_id__advertise .call-to-action         
    	{ 
    	max-width: none; 
    	text-align: center;
   		}
    .tab_support.page_id__advertise .call-to-action .button { max-width: none; border: none;}


    .box-layout .flex-box .box-header h2 { border-bottom: solid 3px #0178a3; }
    .box-layout .flex-box .box-header    { display: block; }




    /* Adjust Masthead for print */
    #sfms-logo { min-height: 1em; }
/*
    MAYBE-NOT-NEEDED#sfms-logo h1.visuallyhidden {
    	clip:unset;
    	height: auto;
    	width: auto;
    	margin: 0 0 0 2rem;
    	overflow: auto;
    	position: static;
    	font-size: 3em;
    } */
    #sfms-tagline { margin-left: 1.75rem; }
    #sfms-tagline .tagline span { display: inline-block; }

    #sfms-logo-for-print { display: block; }


    /* Grant acknowledgments really don't need links underlined. */
    #footer-addendum a { text-decoration: none; }

    #footer .homelink { font-weight: normal; }


} /* END media print */