/**
 * Stylesheet for a typical left-side navigation site like the example layout shown below.
 * -- Header --
 *  M   Content
 *  e   Goes
 *  n   Here
 *  u
 * -- Footer --
 *
 * Available properties are shown below with their default values.
 *   --spartan-pen: black;
 *   --spartan-paper: white;
 *   --spartan-header-pen: #FFFFFFC0;
 *   --spartan-header-paper: #000000C0;
 *   --spartan-header-height: 2rem;
 *   --spartan-menu-pen: #FFFFFFA0;
 *   --spartan-menu-paper: #000000A0;
 *   --spartan-menu-width: 15rem;
 *   --spartan-content-pen: var(--spartan-pen);
 *   --spartan-content-paper: var(--spartan-paper);
 *   --spartan-footer-pen: #FFFFFFC0;
 *   --spartan-footer-paper: #000000C0;
 *   --spartan-footer-height: 1rem;
 */

:root {
  --spartan-pen: black;
  --spartan-paper: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --spartan-pen: whitesmoke;
    --spartan-paper: indigo;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;  /* Remove browser default values for better consistency. */
}

*[onclick] {
  cursor: pointer;
}

html {
  font-family: sans-serif;
  font-size: calc(11px + 2.5vw);  /* Maintain a minimum size but grow to fit wider screens. On a 360px wide portrait mode mobile screen it's 11px + 2.5 x 360 / 100, or 20px */
}

@media screen and (min-aspect-ratio: 1/1) {
  html {
    font-size: calc(11px + 0.5vw);  /* Maintain a minimum size but grow to fit wider screens. On a 16x9 1080p landscape screen it's 11px + 0.5 x 1920 / 100, or 20.6px */
  }
}

body {
  background-color: var(--spartan-paper);
  color: var(--spartan-pen);
  height: 100vh;
  width: 100vw;
}

header {
  background-color: var(--spartan-header-paper, #000000C0);
  color: var(--spartan-header-pen, #FFFFFFC0);
  font-size: calc(0.85 * var(--spartan-header-height, 2rem));  /* Ensure text fits without looking too crowded. */
  font-variant: small-caps;
  height: var(--spartan-header-height, 2rem);
}

header > h1 {
  font-size: inherit;  /* Block browser default to avoid double-size. */
}

nav {
  background-color: var(--spartan-menu-paper, #000000A0);
  color: var(--spartan-menu-pen, #FFFFFFA0);
  width: 100%;  /* Portrait mode design stacks navigation on top of main content. */
}

@media screen and (min-aspect-ratio: 1/1) {
  nav {
    display: block;  /* Show navigation menu by default on landscape mode screens. */
    float: left;
    height: calc(100vh - var(--spartan-header-height, 2rem) - var(--spartan-footer-height, 1em));
    width: var(--spartan-menu-width, 15rem);
  }
}

nav a {
  color: inherit;  /* Use text color instead of blue for links. */
  display: block;
  text-decoration: none;
}

nav > a, nav > details > summary, nav > details > a {
  border-left: 0.2em solid transparent;  /* Reserve space for selection indicator. */
  padding: 0.4em;
}

nav > details > a {
  padding-left: 1em;
}

nav a.selected {
  background: #FFFFFF30;
  color: #FFFFFFC0;
  border-left: 0.2em solid currentColor;  /* same size as solid transparent border-left above */
}

nav > a:hover, nav > details > summary:hover, nav > details > a:hover {
  background: #FFFFFF60;
}

nav details summary {
  list-style: none;
  transition: margin 250ms ease-out;
}

nav details[open] summary {
  margin-bottom: 0.2em;
}

nav summary:after {
  content: " \025B8";  /* Unicode small right-pointing triangle */
}

nav details[open] summary:after {
  content: " \025BE";  /* Unicode small down-pointing triangle */
}

main {
  background-color: var(--spartan-content-paper, var(--paper));
  color: var(--spartan-content-pen, var(--pen));
  padding: 0.2em;
  width: 100%;  /* Portrait mode design stacks navigation on top of main content. */
}

@media screen and (min-aspect-ratio: 1/1) {
  main {
    float: left;  /* Landscape mode is side by side. */
    height: calc(100vh - var(--spartan-header-height, 2rem) - var(--spartan-footer-height, 1em));
    width: calc(100vw - var(--spartan-menu-width, 15rem));
  }
}

footer {
  background-color: var(--spartan-footer-paper, #000000C0);
  color: var(--spartan-footer-pen, #FFFFFFC0);
  bottom: 0;
  font-size: calc(0.85 * var(--spartan-footer-height, 1rem));  /* Ensure text fits without looking too crowded. */
  height: var(--spartan-footer-height, 1rem);
  position: fixed;
  text-align: center;
  width: 100%;
}