/* Settings that WordPress used to print into each page, plus a few additions for the static site */
/* Menu: dark navy text on the turquoise bar; on mouseover a navy box with white text (easier to read) */
.primary-menu-cont > ul > li { padding: 0; }
.primary-menu-cont > ul > li > a { color: #0a1a4f; padding: 0 15px; }
.primary-menu-cont > ul > li > a:hover,
.primary-menu-cont > ul > li > a:focus-visible { color: #fff !important; background: #0a1a4f; top: 0; outline: none; }
.primary-menu-cont > ul > li > a span.underline { display: none !important; }
.main-navigation { background-image: url(/images/menu_bg.png); border-radius: inherit; }
header.site-header { background-image: url(/wp-content/uploads/2018/04/cropped-uspbanner4.png); }
body.custom-background { background-color: #565656; background-image: url(/images/bg.jpg); background-position: left top; background-repeat: repeat; }

/* Phone menu (buttons instead of divs so keyboards can use them) */
button.responsive-menu-bar, button.menu-close-bar { font: inherit; cursor: pointer; }
button.responsive-menu-bar { width: 100%; text-align: left; }
button.menu-close-bar { background: none; border: 0; }
#responsive-menu.open { display: block; }
#responsive-menu ul { margin: 0; }
#responsive-menu ul > li { list-style: none; }
#back_top { border: 0; display: none; padding: 0; }

/* Videos fill the column at 16:9 */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 1.5em; }
.video-embed iframe, .video-embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.post-entry-media img { max-width: 100%; height: auto; }
.entry-content a { overflow-wrap: anywhere; }

.usp-pager { margin-top: 1.5em; }

/* Read-aloud buttons */
.listen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.listen button, .listen select {
	font: inherit; font-size: 15px; line-height: 1.2; padding: 7px 14px; border-radius: 4px; cursor: pointer;
	border: 1px solid #202c8c; background: #fff; color: #202c8c;
}
.listen .listen-play { background: #202c8c; color: #fff; font-weight: 700; }
.listen .listen-play .fa { margin-right: 4px; }
.listen button:hover, .listen button:focus-visible { background: #FEEA3A; color: #111; }
.listen [hidden] { display: none; }
.speaking { background: #fff6b3; box-shadow: 0 0 0 6px #fff6b3; border-radius: 2px; }

/* Box headings on the right: the deepest sky blue (top right) of the home page photo (was faint turquoise #00B0C8) */
.widget-area .widget-title { color: #0d5fa8; }

/* Nine menu items: on mid-size screens (tablets, small windows) tighten them so the bar stays on one line */
@media only screen and (min-width: 800px) and (max-width: 1000px) {
	.primary-menu-cont > ul > li > a { padding: 0 8px; font-size: 16px; }
}

/* My Representation: list of states */
.state-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.state-list a { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border: 2px solid #0a1a4f; border-radius: 6px; font-size: 22px; font-weight: 700; color: #0a1a4f; text-decoration: none; background: #fff; }
.state-list a:hover, .state-list a:focus-visible { background: #0a1a4f; color: #fff; }
.state-list .mini-flag svg { display: block; width: 60px; height: 40px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.state-list-title { margin-top: 1.4em; }