/* WordPress-side additions to the Dusk port: desktop flyout menus, lightbox, forms, comments. */

/* Accessibility helpers */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.skip-link:focus { position: fixed !important; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; clip-path: none; padding: 10px 16px; background: #FECB00; color: #000; }
.h1-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }

/* Desktop flyout menus. Weebly drew these with JavaScript into #wsite-menus; here they are CSS. */
.desktop-nav { overflow: visible; }
.dusk-header .container { overflow: visible; }
.desktop-nav .wsite-menu-default > li { position: relative; }
.desktop-nav .wsite-menu-wrap { display: none; position: absolute; top: 100%; left: 0; z-index: 20; }
.desktop-nav .wsite-menu .wsite-menu-wrap { top: 0; left: 100%; }
.desktop-nav li:hover > .wsite-menu-wrap,
.desktop-nav li:focus-within > .wsite-menu-wrap { display: block; }
.desktop-nav .wsite-menu { float: none; max-width: none; min-width: 200px; margin: 0; padding: 0; background: #FECB00; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.desktop-nav .wsite-menu li { position: relative; float: none; display: block; }
.desktop-nav .wsite-menu li a { display: block; position: relative; padding: 10px 0 !important; color: black; background: #FECB00; border: 2px solid transparent; font-family: 'Secular One', sans-serif; font-size: 13px; font-weight: normal; line-height: normal; white-space: nowrap; }
.desktop-nav .wsite-menu li a:hover { color: white; background: #C60C30; border: 2px solid black; }
.desktop-nav .wsite-menu-title { display: block; padding: 0 34px 0 18px; }
.desktop-nav .wsite-menu-arrow { position: absolute; top: 50%; right: 12px; margin-top: -6px; color: transparent; font-size: 0; }
.desktop-nav .wsite-menu-arrow:before { display: block; color: black; content: '\203A'; font-family: 'Secular One', sans-serif; font-size: 24px; font-weight: normal; line-height: 11px; }
.desktop-nav .wsite-menu li a:hover .wsite-menu-arrow:before { color: white; }
.desktop-nav .icon-caret { display: none; }
.desktop-nav .wsite-nav-current > a.wsite-menu-subitem { background: #C60C30; color: white; }
/* Very long submenus (e.g. the 75 cartoon episodes) scroll instead of running off screen. */
.desktop-nav .wsite-menu-default > li > .wsite-menu-wrap > .wsite-menu { max-height: calc(100vh - 80px); overflow-y: auto; overflow-x: visible; }
.desktop-nav .wsite-menu-default > li > .wsite-menu-wrap > .wsite-menu:has(.wsite-menu-wrap) { overflow: visible; max-height: none; }
.desktop-nav .wsite-menu .wsite-menu { max-height: calc(100vh - 80px); overflow-y: auto; }
.desktop-nav .wsite-menu .wsite-menu:has(.wsite-menu-wrap) { overflow: visible; max-height: none; }

/* Mobile menu is cloned from the desktop one by dusk.js */
.mobile-nav ul.wsite-menu-default { float: none; max-width: none; }
.dusk-header .hamburger { text-decoration: none; }

/* Lightbox (replaces Weebly's fancybox) */
.mf-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.88); opacity: 0; transition: opacity 200ms ease; touch-action: pan-y; }
.mf-lightbox.is-open { opacity: 1; }
.mf-lightbox figure { margin: 0; max-width: 92vw; max-height: 90vh; text-align: center; }
.mf-lightbox img { display: block; max-width: 92vw; max-height: 84vh; width: auto; height: auto; margin: 0 auto; box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); background: #fff; }
.mf-lightbox figcaption { margin-top: 10px; color: #ddd; font-family: 'Lato', sans-serif; font-size: 14px; }
.mf-lightbox button { position: absolute; border: 0; background: rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer; font: 400 34px/1 'Lato', sans-serif; width: 52px; height: 52px; border-radius: 50%; }
.mf-lightbox button:hover, .mf-lightbox button:focus { background: #C60C30; outline: none; }
.mf-lightbox .mf-lb-close { top: 16px; right: 16px; font-size: 30px; }
.mf-lightbox .mf-lb-prev { left: 16px; top: 50%; margin-top: -26px; }
.mf-lightbox .mf-lb-next { right: 16px; top: 50%; margin-top: -26px; }
.mf-lightbox.is-single .mf-lb-prev, .mf-lightbox.is-single .mf-lb-next { display: none; }
.mf-lightbox .mf-lb-count { position: absolute; bottom: 14px; left: 0; right: 0; color: #aaa; font: 13px 'Lato', sans-serif; text-align: center; }
body.mf-lightbox-open { overflow: hidden; }

/* Forms rendered by the MASKFORCE plugin */
.mf-form-message { margin: 10px 0; padding: 10px 14px; border-radius: 3px; font-family: 'Lato', sans-serif; font-size: 14px; }
.mf-form-message.is-ok { background: #e8f5e9; color: #1b5e20; }
.mf-form-message.is-error { background: #fdecea; color: #8a1c1c; }
.mf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Comment form */
#commentReplyTitle { margin: 30px 0 15px; font-size: 22px !important; }
.comment-form p { margin: 0 0 12px; line-height: normal; }
.comment-form label { display: block; margin-bottom: 5px; color: #626262; font-family: 'Lato', sans-serif; font-size: 14px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; max-width: 500px; box-sizing: border-box; padding: 8px; border: 1px solid #dcdcdc; border-radius: 3px; font-family: 'Lato', sans-serif; font-size: 14px; }
.comment-form .mf-button, .mf-button { display: inline-block; padding: 8px 16px; background: #ff8400; color: #fff; border: 2px solid #ff8400; border-radius: 2px; cursor: pointer; font-family: 'Lato', sans-serif; font-size: 14px; letter-spacing: 0.05em; }
.comment-form .mf-button:hover, .mf-button:hover { background: transparent; color: #ff8400; }

/* Blog and search pages get the content width the Weebly blog used */
.mf-blog, .mf-search { max-width: 1024px; margin: 0 auto; padding: 40px 20px !important; }
.mf-search-results { list-style: none; margin: 20px 0; }
.mf-search-results li { margin: 0 0 18px; }
.mf-search-results a { font-family: 'Futura-ExtraBold', sans-serif; font-size: 18px; }
.mf-search .wsite-search-element { max-width: 400px; margin: 10px 0 20px; }
.blog-content img { max-width: 100%; height: auto; }
@media screen and (max-width: 767px) {
	#blogTable td, #blogTable .blog-sidebar { display: block; width: 100%; padding-left: 0; }
}