/* Site logo to the left of the site title */
#header .logo h3 a {
    display: inline-flex;
    align-items: center;
}
#header .logo .site-logo {
    height: 4rem;
    width: auto;
    margin-right: 0.8rem;
    border-radius: 4px;
    vertical-align: middle;
}
@media only all and (max-width: 47.938em) {
    #header .logo .site-logo {
        height: 3rem;
        margin-right: 0.5rem;
    }
}

/* Page title shown as a continuation of the site title in the top bar.
   Kept on ONE line so the h3 never grows past its row and overlaps the menu. */
#header .logo h3 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}
#header .logo .page-title-cont {
    color: #87b672;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
#header .logo .page-title-cont::before {
    content: "·";
    color: #bbb;
    margin: 0 0.55rem;
}

/* Top bar always keeps its own solid background, and stays fixed while scrolling */
#header {
    background-color: #fff !important;
    position: fixed !important;
    top: 0;
    left: 0;
}

/* Vertically center the header rows with flexbox instead of the theme's
   transform: translateY(-50%) — transforms on children of a position:fixed
   header cause the menu to "jump" onto the title during scroll. */
#header .logo,
#header #navbar {
    display: flex !important;
    align-items: center;
}
#header .logo h3,
#header .logo ul.social-icons,
#header #navbar ul.navigation,
#header #navbar .search-box,
#header #navbar .panel-activation {
    position: static !important;
    top: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
}
#header #navbar ul.navigation {
    float: none !important;
}
#header #navbar .search-box {
    float: none !important;
    margin-left: auto;
}

/* Wallpaper as a clearly visible page background.
   NOTE: background-attachment is intentionally NOT 'fixed' — combined with the
   position:fixed header it causes repaint jank (header appears to shift on scroll). */
body {
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    background-repeat: no-repeat;
}
html {
    background: #2f3b29;
}

/* Content sits on a readable card; wallpaper shows around it */
#body {
    background: transparent !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.content-card {
    max-width: 62rem;
    margin: 0 auto 3rem;
    background: #fff;
    padding: 2rem 2.5rem;
    box-shadow: 0 0.3rem 1.6rem rgba(0, 0, 0, 0.35);
    border-radius: 5px;
}
@media only all and (max-width: 47.938em) {
    .content-card { padding: 1.2rem 1.2rem; }
}

/* Dropdown submenus: size to content, keep each item on one line */
#header #navbar ul.navigation li:hover > ul {
    width: auto;
    min-width: 12rem;
    background: #fff;
}
#header #navbar ul.navigation li ul li {
    width: 100%;
}
#header #navbar ul.navigation li ul li a {
    white-space: nowrap;
    text-transform: none;
}