@import url('fonts/Montserrat.css');
@import url('fonts/Open_Sans.css');
@import url('fonts/IBM_Plex_Mono.css');

:root {
  /* Colors from the Brand Guidelines palette */
  --asf-color-navy: #28265E;       /* Navy */
  --asf-color-purple: #7C297D;     /* Purple */
  --asf-color-red: #D22128;        /* Red */
  --asf-color-orange: #DD552C;     /* Orange */
  --asf-color-yellow: #F79A23;     /* Yellow */
  --asf-color-lightblue: #DCE8F2;  /* Light Blue */
  --asf-color-white: #FFFFFF;      /* White */
  --asf-color-black: #000000;      /* Black */

  /* Colors */
  --apr-bg: var(--asf-color-white);
  --apr-fg: var(--asf-color-black);
  --apr-fg-a: var(--asf-color-navy);
  --apr-bg-h1: var(--asf-color-purple);;
  --apr-fg-h1: var(--asf-color-white);
  --apr-bg-h2: var(--asf-color-lightblue);
  --apr-fg-h2: var(--apr-fg);
  --apr-bg-logo: var(--asf-color-navy);
  --apr-fg-border: var(--asf-color-navy);

  /* Dimensions */
  --apr-site-nav-width: 15em;
  --apr-content-left: calc(var(--apr-site-nav-width) + 0.1em);
  --apr-logo-height: 6em;
  --apr-logo-space: 1em;
  --apr-logo-left: calc(var(--apr-content-left) - 1 * var(--apr-logo-height));
  --apr-logo-bar-height: calc(0.382 * var(--apr-logo-height));
  --apr-logo-bar-shift: calc(0.618 * var(--apr-logo-height));
  --apr-font-weight: 400;
  --apr-h1-font-weight: 700;
  --apr-h2-font-weight: 300;
  --apr-code-font-weight: 600;

  /* Global */
  background: var(--apr-bg);
  color: var(--apr-fg);

  font-family: "Open Sans", sans-serif;
  font-size: medium;
  font-style: normal;
  font-weight: var(--apr-font-weight);
  font-variation-settings: "wdth" 100;
}

b, strong {
  font-weight: var(--apr-h1-font-weight);
}
pre, code, tt {
  font-family: "IBM Plex Mono", monospace;
  font-size: 95%;
}
code b, code strong, tt b, tt strong {
  font-weight: var(--apr-code-font-weight);
}

a {
  color: var(--apr-fg-a);
}
p.note {
  border-style: double;
  border-color: var(--apr-fg-border);
  padding: 0.5em;
}

table, th, td {
  border: 1px solid var(--apr-fg-border);
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  background: var(--apr-bg-h2);
  color: var(--apr-fg-h2);
  padding: 0.25em;
  padding-left: 0.5em;
  font-family: "Montserrat", sans-serif;
  font-weight: var(--apr-h2-font-weight);
  text-align: left;
}
td {
  padding: 0.25em 0.25em 0.25em 0.5em;
}
td.yesno {
  border-right: none;
}
td.semver {
  border-left: none;
}
td > ul {
  margin-block-start: 0px;
  margin-block-end: 0px;
}
td.mlh {
  width: 50%
}
.covError > td {
  background: #ffffff;
}
.covLT33 > td {
  background: #ffaaaa;
}
.covLT66 > td {
  background: #ffff77;
}
.covGE66 > td {
  background: #aaffaa;
}
#logo {
  height: var(--apr-logo-height);
  width: 100%;
  margin-top: var(--apr-logo-space);
  margin-bottom: var(--apr-logo-space);
}
#logo > a {
  position: relative;
  left: var(--apr-logo-left);
  top: calc(-1 * var(--apr-logo-bar-height));
}
#logo > a > img {
  height: 100%;
  width: auto;
}
#logo > div {
  background: var(--apr-bg-logo);
  position: relative;
  top: var(--apr-logo-bar-shift);
  height: var(--apr-logo-bar-height);
  width: 100%;

  display: flex;
  justify-content: left;
  align-items: center;
}
#page {
  overflow: auto;
}
#site-nav {
  float: left;
  width: var(--apr-site-nav-width);
}
#site-content {
  margin-left: var(--apr-content-left);
}
#footer {
  text-align: center;
  font-size: small;
}
h1 {
  background: var(--apr-bg-h1);
  color: var(--apr-fg-h1);
  font-weight: var(--apr-h1-font-weight);
}
h2 {
  background: var(--apr-bg-h2);
  color: var(--apr-fg-h2);
  font-weight: var(--apr-h2-font-weight);
}
h1, h2 {
  font-family: "Montserrat", sans-serif;
  font-size: medium;
  padding: 0.25em 0.25em 0.25em 0.5em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
}

#site-nav-menu > dl,
#site-nav-menu > dl > dd {
  margin: 0px;
}
#site-nav-menu > dl > dt {
  font-family: "Montserrat", sans-serif;
  font-size: medium;
  font-weight: var(--apr-h1-font-weight);
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  padding-top: 0.25em;
}

label[for="hamburger"] {
  color: var(--apr-bg);
  font-family: "Montserrat", sans-serif;
  font-size: large;
  font-weight: var(--apr-h2-font-weight);
  padding: 0px 0.25em 0px 0.25em;
  cursor: pointer;
  /* FIXME: This is a visual hint, but do we really need it? The catch is
            that there are two link anchors side by side on narrow screens. */
  border-right: 1px dotted var(--apr-bg);
}
#hamburger {
  display: none;
}

@media screen {
  label[for="hamburger"] {
    display: none;
  }
}

@media screen and (max-width: 815px) {
  :root {
    --apr-logo-height: 4em;
    --apr-logo-space: 0.67em;
  }
  #site-nav {
    width: 100%;
    float: none;
  }
  label[for="hamburger"] {
    display: inline-block;
  }
  #site-nav-menu { display: none }
  #site-nav input:checked + #site-nav-menu { display: block; }
  #site-content { margin-left: 0px; }
  #logo > a { left: var(--apr-logo-bar-height); }
  blockquote, dd {
    margin-inline-start: 1em;
    margin-inline-end: 0px;
  }
}


/**
 ** (Emacs)
 ** Local Variables:
 ** mode: css
 ** css-indent-offset: 2
 ** End:
 **/