/* General page structure */
html {
    overflow-y: scroll;
}
body { /* This centers us in the page, and handles the "too wide" case */
    padding: 0;
    margin: 0 auto;
    background-color: $background-color;
    max-width: calc(#{$medium-width + $navi-width} + 1px); /* add the right-hand "navi" space for centering - and the border... ;-) */
}
#-frame { /* Add a frame, full height */
    margin: 0 $navi-width;
    padding-top: $outer-margin; /* distance of top to window border */
    padding-bottom: $outer-margin; /* distance of page-bottom to window border */
    border-left: solid $text-color 1px;
    min-height: calc(100vh - #{2*$outer-margin});
}

/* The content of the frame */
#-content {
    margin-left: $intrusion-width;
    padding-left: $outer-margin; /* Distance to the end of the intrusion */
    padding-right: $outer-margin; /* Distance to the end of the window */
    padding-top: 1px; /* If we use 0 here, some paddings add up things get ugly. What?!? */
}

/* The footer */
#-footer {
    padding-top: 3em;
    text-align: center;
}

/* Navigation menu */
#-navi {
    padding: 0;
    margin: 0;
    margin-left: -#{$navi-indent};
    width: #{$navi-width + $navi-indent};
    /* Put it into the right spot */
    float: left;
    position: relative;
    left: calc(-#{$navi-width} - 1px);
    /* Make it not take space away from the main text */
    height: 0;
    overflow: visible;

    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        /* Indentation for nested nodes */
        margin-left: $navi-indent;
    }
    a {
        display: block;
        width: calc(100% - 2*0.25em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */
        padding: 0.08em 0.25em 0.02em; /* top left-right bottom */
        /* Always have *one* border, for the width to stay constant */
        border-left: solid transparent 1px;
    
        font-size:110%;
        text-align: left;
    }
    a.current {
        padding-top: 0.12em;
        border: solid $text-color 1px;
        border-right: none; /* solid $background-color 1px; */
        background-color: $background-color;
    }
    a.root {
        margin-top: 0.7em;
        border-bottom: solid $text-color 1px;
        margin-bottom: 0.3em;
    }
}

/* Medium-size screens */
@media screen and (max-width:#{ $medium-width + $navi-width } ) {
    body {
        margin-left: 0;
        max-width: calc(#{ $medium-width} + 1px); /* add the left-hand *only* navi space for centering - and the border... ;-) */
    }
    #-frame {
        margin-right: 0;
    }
}

/* Small screens */
@media screen and (max-width:#{ $small-width } ) {
    html {
        overflow-y: auto;
    }
    body, #-frame, #-content, #-navi {
        margin: 0;
        padding: 0;
        height: auto;
        width: auto;
        max-width: none;
        clear: both;
        float: none;
        position: static;
        border: none;
    }
    #-content {
        padding: #{ $outer-margin * 0.75 };
    }
    #-navi {
        padding: #{ $outer-margin * 0.75 };
        border-bottom: solid $text-color 1px;

        ul {
            display: inline;
            padding: 0;
            margin: 0;
        }
        li {
            display: inline-block;
        }
        /* Display only parent and children, and decorate them appropriately */
        a {
            display:inline-block;
            margin: 0 0.3em !important;
            padding: 0 !important;
            border: none !important;
            width: auto !important;
        }
        a.sibling {
            display:none;
        }
        a.current {
            text-decoration: underline;
        }
        li.parent::before, li.current:before {
            content: "»";
        }
        li.child::before {
            content: "»";
        }
        li.child + li.child::before {
            content: "|";
        }
    }
}

/* Printing */
@media print {
    body {
        background-color: white;
    }
    body, #-frame, #-content {
        margin: 0;
        padding: 0;
        width: auto;
        max-width: none;
        border: none;
    }
    #-title h1 {
        border: none;
    }
    #-navi {
        display: none;
    }
}

/* Title and Title-asides spacing */
.side {
    float: right;
}
.subtitle {
    margin-top: 2em;
    
    h1, h2 {
        display: inline-block;
        margin: 0;
    }
    .side {
        margin-left: 0.5em;
        margin-top: 0.45em;
    }
}
.title {
    margin-top: 0.2em;
    margin-bottom: 1.2em;
    
    h1, h2 {
        display: inline-block;
        margin: 0;
    }
    .side {
        margin-left: 0.5em;
        margin-top: 0.8em;
    }
}

/* Images (~350px wide) floating to the right but only if there is enough space */
.float-right-350 {
  float: right;
  margin-left: 0.8em;
  margin-bottom: 0.3em;
}
@media screen and (max-width:600px) {
    .float-right-350 {
        max-width: 300px;
        float: none;
        margin: auto;
    }
}