/*
 * Phones and narrow windows (static-site addition). The page links this file with
 * media="screen and (max-width: 989px)", so the 2015 fixed layout (990 px) never sees it.
 * One column: content, then the sidebars, then the footer; the menus open with a "Menu" button.
 */
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; }
img { max-width: 100%; height: auto; }
iframe, embed, object, video { max-width: 100%; }
#content iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.entry-content, .comment-content, .textwidget { overflow-wrap: anywhere; }
.entry-content table { display: block; max-width: 100%; overflow-x: auto; }

/* Header, menus */
#top-menu, #nav, #header { min-width: 0; }
#top-menu-content, #nav-content, #branding { width: auto; }
#branding { padding: 0 10px; }
.logo { float: none; max-width: none; padding: 12px 0 8px; }
.blog-name a { width: 100% !important; max-width: 480px; height: auto !important; aspect-ratio: 4 / 1; background-size: contain !important; }
#searchbar { float: none; margin: 0 0 10px; }
#searchbar .searchform { display: flex; }
#searchbar .s { flex: 1; min-width: 0; font-size: 16px; }

.mobile-only { display: block; }
.menu-toggle {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 12px 14px;
  border: 0; background: #1f1b1b; color: #fff; font: bold 15px/1 Arial, sans-serif; text-align: left; cursor: pointer;
}
.menu-toggle::before { content: "\2630"; margin-right: 8px; }
.js #top-menu .sf-menu, .js #nav .sf-menu { display: none; }
.js.menu-open #top-menu .sf-menu, .js.menu-open #nav .sf-menu { display: block; }
#top-menu-content { height: auto; padding: 0; }
#top-menu-content .sf-menu, #nav .sf-menu { float: none; width: auto; max-width: none; margin: 0; }
.sf-menu li { float: none; width: auto !important; }
#top-menu .sf-menu a, #nav .sf-menu a, #top-menu .sf-menu li li a, #nav .sf-menu li li a {
  padding: 13px 14px; font-size: 15px; line-height: 1.2; border: 0; border-bottom: 1px solid #333;
}
#top-menu .sf-menu ul li, #nav .sf-menu ul li { border: 0; margin: 0; }
.sf-menu ul {
  position: static !important; left: auto !important; width: auto !important;
  display: block !important; visibility: visible !important; opacity: 1 !important; box-shadow: none !important;
}
#top-menu .sf-menu li li a, #nav .sf-menu li li a { padding-left: 34px; font-size: 14px; background: #181515; }
.sf-sub-indicator, .sf-shadow ul { background: none !important; }
.sf-sub-indicator { display: none !important; }
#nav .quick-nav { display: none; }

/* Main column */
#main { width: auto; padding: 0 8px; box-sizing: border-box; }
#container, #content { width: auto; float: none; }
#main .module, #main .single-post { margin-right: 0; }
.main-aside { width: auto; float: none; margin-top: 20px; }
.single-post-meta { float: none; width: auto; margin: 1em 0; }

/* Home: slideshow (site.js stacks the slides), featured and latest posts */
.featured { height: auto !important; margin-right: 0; }
#featured-slideshow { width: auto !important; height: auto !important; aspect-ratio: 32 / 15; overflow: hidden; }
.featured-slideshow-inner { width: 100%; height: 100% !important; }
.featured-article, .featured-article img { width: 100% !important; height: 100% !important; object-fit: cover; }
.featured-entry { position: absolute !important; left: 0; right: 0; bottom: 0; top: auto !important; height: auto !important; }
.featured-entry .entry-summary { display: none; }
#controls { display: none; }
#main .posts-default { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.posts-default::after { display: none; }
.posts-default li { float: none; width: auto !important; height: auto !important; margin: 0 0 16px !important; }
.posts-default .entry-thumbnails, .posts-default .entry-meta { width: 100% !important; height: auto !important; }
.posts-default img, .posts-default .entry-thumbnails-link { width: 100% !important; height: auto !important; box-sizing: border-box; }
.posts-quick { margin-right: 0; }
.posts-quick .entry-thumbnails { margin-right: 12px; }
.posts-quick .entry-thumbnails img { width: 90px !important; height: 90px !important; }
.posts-quick .entry-meta { width: 90px !important; }
#bottom-content-1, #bottom-content-2 { width: auto; float: none; }

/* Comments, forms */
#commentlist .children { margin-left: 8px; padding-left: 0; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea,
.hommages-form input[type=text], .hommages-form textarea { width: 100%; box-sizing: border-box; font-size: 16px; }

/* Footer */
#footer { width: auto; margin: 20px 8px 0; }
.footer-sidebar { width: auto !important; float: none; }
#footer .widgetcontainer { float: none; margin-right: 0; }
#footer .footer-message .floatright { float: none; margin: 0 0 0.5em; }