/* Additions layered on top of the original style_site.css.
   The original file is left untouched so the desktop look stays identical. */

.clear {clear:both;}

/* Accessibility
----------------------------------------*/
.skip-link {position:absolute; left:-9999px; top:0; z-index:10000; background:#543d93; color:#fff !important; padding:10px 15px; text-decoration:none;}
.skip-link:focus {left:10px; top:10px;}

a:focus-visible {outline:2px solid #756132; outline-offset:2px;}
#top_nav a:focus-visible, #footer a:focus-visible {outline-color:#fff;}
#rightcol:focus {outline:none;}

/* Let keyboard users open the dropdowns the same way hover does */
#top_nav li:focus-within > ul {visibility:visible; left:auto;}

#header p a.tel {color:inherit; text-decoration:none;}
#header p a.tel:hover {text-decoration:underline;}

.leftcol-cap {display:block;}
.statcounter {position:absolute; width:1px; height:1px; overflow:hidden;}

/* Header
   The logo image is taller than the 186px header in style_site.css, which let it
   hang into the nav bar. Letting the header grow to fit the logo puts the menu
   back where it sits on the live site. */
#header {height:auto; min-height:186px; overflow:hidden; padding-bottom:4px;}

/* Space between the dropdown labels and their arrow */
#top_nav li a.dropdown_link {padding-right:16px; box-sizing:border-box;}

/* Main copy is justified on the live site */
#content #rightcol p {text-align:justify;}

/* Gaps between the groups in the staff lists */
#bottom_lists ul li.group-start {padding-top:14px;}

/* Slideshow crossfade (JS adds the classes)
   Every slide stays laid out and stacked; the incoming slide fades in on top
   while the outgoing one stays fully visible underneath, so there is no dip. */
#slideshow > div, #slideshow_inside > div {display:block; opacity:0; z-index:1; transition:opacity 1.5s ease-in-out;}
#slideshow > div.prev, #slideshow_inside > div.prev {opacity:1; z-index:2; transition:none;}
#slideshow > div.active, #slideshow_inside > div.active {opacity:1; z-index:3;}
#slideshow #egg_timer, #slideshow_inside #egg_timer {margin:-16px 0 0 -16px; z-index:0;}

@media (prefers-reduced-motion: reduce) {
	#slideshow > div, #slideshow_inside > div {transition:none;}
}

/* Content images
   The live CMS positioned these with inline styles that the export did not show,
   so these are a close match rather than a copy. Adjust per page if needed. */
.profile-img {float:left; margin:0 15px 10px 0; max-width:40%; height:auto;}
.profile-img--right {float:right; margin:0 0 10px 15px;}
.content-img {float:right; margin:0 0 15px 20px; max-width:45%; height:auto;}
#content p.quals {line-height:1.5; text-align:left;}
#content ul.alpha {list-style:none; margin-left:15px;}
.todo-note {color:#a59366; font-style:italic;}

/* Tablet
----------------------------------------*/
@media (max-width: 860px) {
	#header {padding:0 2%; box-sizing:border-box;}
	#slideshow {height:auto; aspect-ratio:850 / 403;}
	#slideshow_inside {height:auto; aspect-ratio:850 / 200;}
	#top_nav li {padding:0 10px;}
	#top_nav li a {font-size:16px;}
}

/* Mobile
----------------------------------------*/
@media (max-width: 767px) {
	#header {height:auto; overflow:hidden; text-align:center; padding:0 4% 15px;}
	#header_logo {float:none; margin:20px auto 0; height:150px; background-size:contain; background-position:center;}
	#header p {float:none; width:100%; text-align:center; margin:15px 0 0;}
	#header_contact {float:none; display:inline-block; margin-top:10px;}

	#nav_bar {height:auto; min-height:50px;}
	#mobile_nav {display:block; color:#c7ba96; text-decoration:none; font-size:18px; line-height:50px; text-align:center; letter-spacing:1px;}
	#mobile_nav:hover, #mobile_nav:focus {color:#fff;}

	#top_nav {display:none; background:#47357a;}
	#top_nav.open {display:block;}
	#top_nav li {float:none; padding:0; line-height:44px; border-top:1px solid #3a2969;}
	#top_nav li a {padding:0 20px; line-height:44px; box-sizing:border-box;}
	#top_nav ul, #top_nav ul ul {position:static; visibility:visible; left:auto; width:100%; margin:0; background:#3a2969;}
	#top_nav ul li, #top_nav ul li a {width:100%;}
	#top_nav ul li a {padding-left:35px;}
	#top_nav ul ul li a {padding-left:50px;}
	#top_nav ul {display:none;}
	#top_nav li.sub-open > ul {display:block;}
	.dropdown_link {background-position:right 20px center;}
	#closeM {display:block;}

	#slideshow, #slideshow_inside {margin-bottom:15px;}
	.profile-img, .profile-img--right, .content-img {float:none; display:block; margin:0 0 15px; max-width:100%;}

	#leftcol, #rightcol {float:none; width:100%;}
	#leftcol {display:none;} /* duplicated by the main menu on small screens */
	#rightcol {padding:0 5%;}
	#content #rightcol p {text-align:left;}
	#bottom_lists ul {float:none; margin:0 0 15px 0;}

	#footer_logo {position:static; display:block; text-align:center; padding:0 0 20px;}
	#footer_left ul {height:auto; overflow:hidden;}
}