html, head, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header, footer {
    flex-shrink: 0;
}

#layout-header {
    background-color: var(--theme-color);
    height: 8rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    flex-basis: 100%;
    margin: 0 0 2rem 0;
    padding: 0;
    border-bottom: 2px solid #e68626;
    position: relative;
}

#navigationRoot {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

#navLogo {
    flex: 0 5 288px;
    min-width: 80px;
}

#navLogo img {
    aspect-ratio: 288 / 106;
    width: 100%;
}

#navMenu {
    list-style: none;
    flex-shrink: 1;
    position: relative;
}

.navbar-nav {
    flex-direction: row !important;
}

.navItem.dropdown {
    position: relative;
}

.navItem.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown-menu {
    z-index: 9999 !important;
    background-color: var(--theme-color) !important;
    min-width: 200px !important;
    border: 2px solid #e68626 !important;
    position: absolute !important;
    inset: unset !important;   /* Bootstrap sets this shorthand, which overrides top/left */
    transform: none !important; /* Bootstrap uses transform for positioning */
    margin: 0 !important;
}

.dropdown-menu .navItem {
    display: block;  /* stack submenu items vertically */
}

.navItem {
    display: inline-block;
    padding: 0;
}

.navItem a {
    color: var(--theme-textcolor-navigation);
    text-decoration: none;
    font-size: clamp(0.5rem, calc(0.3rem + 0.8vw), 1.2rem);
    display: block;
    padding: 0.5rem;     /* move padding to the a instead */
}

.navItem:hover {
    background-color: #e68626;
}

#navSearch {
    border: solid 1px var(--theme-color-40);
    margin: 0px;
    padding: 0px;
    flex-shrink: 2;
    display: flex;
    flex-flow: row nowrap;
}

#navSearch form {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-flow: row nowrap;
}

#navSearch input {
    background-color: var(--theme-color-70);
    padding: 0 10px 0 10px;
    border: 0px;
    width: clamp(30px, 11vw, 160px);
}

#navSearch button {
    background-color: var(--theme-color-40);
    padding: 0px;
    border: 0px;
    aspect-ratio: 1;
    height: 36px;
}

#layout-content {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

#layout-content .container {
    flex: 1;
    display: block;
    width: 100%;
    min-width: 400px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

.content-2080 {
    display: flex;
    flex-flow: row nowrap;
    margin: 0 auto;
    padding: 0;
}
.content-2080 > :nth-child(1) {
    flex: 2;
    max-width: 20%;
    margin-right: 10px;
}
.content-2080 > :nth-child(2) {
    flex: 8;
    max-width: 80%;
    margin-left: 10px;
}

.content-3070 {
    display: flex;
    flex-flow: row nowrap;
    margin: 0 auto;
    padding: 0;
}
.content-3070 > :nth-child(1) {
    flex: 3;
    max-width: 30%;
    margin-right: 10px;
}
.content-3070 > :nth-child(2) {
    flex: 7;
    max-width: 70%;
    margin-left: 10px;
}

.content-4060 {
    display: flex;
    flex-flow: row nowrap;
    margin: 0 auto;
    padding: 0;
}
.content-4060 > :nth-child(1) {
    flex: 4;
    max-width: 40%;
    margin-right: 10px;
}
.content-4060 > :nth-child(2) {
    flex: 6;
    max-width: 60%;
    margin-left: 10px;
}

.content-5050 {
    display: flex;
    flex-flow: row nowrap;
    margin: 0 auto;
    padding: 0;
}
.content-5050 > :nth-child(1) {
    flex: 5;
    max-width: 50%;
    margin-right: 10px;
}
.content-5050 > :nth-child(2) {
    flex: 5;
    max-width: 50%;
    margin-left: 10px;
}

.content-6040 {
    display: flex;
    flex-flow: row nowrap;
    margin: 0 auto;
    padding: 0;
}
.content-6040 > :nth-child(1) {
    flex: 5;
    max-width: 60%;
    margin-right: 10px;
}
.content-6040 > :nth-child(2) {
    flex: 5;
    max-width: 40%;
    margin-left: 10px;
}