/* layout*/

/* Set up fluid type scale. Major third for smaller screens
   and perfect fourth for larger screens.
   Allow override using --font-level-X.

   https://set.studio/some-simple-ways-to-make-content-look-good/
*/

:root {
  --_font-level-0: var(--font-level-0,
		       clamp(1rem,
			     0.96rem + 0.22vw,
			     1.13rem)
		      );
  --_font-level-1: var(--font-level-1,
		       clamp(
			   1.25 * var(--_font-level-0),
			   1.16rem + 0.43vw,
			   1.5rem)
		      );
  --_font-level-2: var(--font-level-2,
		       clamp(
			   1.25 * var(--_font-level-1),
			   1.41rem + 0.76vw,
			   2rem)
		      );
  --_font-level-3: var(--font-level-3,
		       clamp(
			   1.25 * var(--_font-level-2),
			   1.71rem + 1.24vw,
			   2.66rem)
		      );
  --_font-level-4: var(--font-level-4,
		       clamp(
			   1.25 * var(--_font-level-3),
			   2.05rem + 1.93vw,
			   3.55rem)
		      );
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    /* Larger spacing before header and smaller after to make
       header part of following section */
    margin-block-end: 0.3em;
}

h1 {
    font-size: var(--_font-level-4);
}

/* remove whitespace at top of main column */ 
main h1 { margin-block-start: 0; }

h2 {
  font-size: var(--_font-level-3);
}

h3 {
  font-size: var(--_font-level-2);
}

h4 {
  font-size: var(--_font-level-1);
}

/* snug header up to first paragraph of it's section. */
:is(h1,h2,h3,h4,h5,h6) + p {
    margin-block-start: 0;
}

body 
{
  background-color: #f5f5f5;
  color: #222;
  font-family: sans-serif, Arial, Helvetica;
  font-size: var(--_font-level-0);
  margin:0;
  padding: 0 3em 0 14em;
}

/* -14em is size of table of contents/nav */
body > .header { margin: 0 0 0 -14em;}
body > .header div.label { font-size: 2em; font-weight: bold; margin: 0.67em 0 0.67em 1em;}
body > .footer { margin: 1em 0 1em -14em; clear:both;}
body > .navigation 
{
  margin-left: -14em;
  width: 14em;
  float: left;
}
body > .content 
{
  margin: 0;
  width: 100%;
}
body > .header > #searchbox { position: absolute; right: 1em; top: 1em;}
body > .content > #subnav    { position: absolute; right: 1.5em; top: 6em;}

/* limit width of main column to 65 characters. On wider screens can
   be 100+ chars: too wide */
main {
  max-width: 65ch;
  line-height: calc(1.5 * 1em);
}

/* style */

:link { color: #bb0000; text-decoration: none;}
:link:hover {text-decoration: underline;}
:visited { color: #770000; text-decoration: none;}
a.toc-backref { color: #000000; }

.header h1 { margin-left: 1em; }

.menu { padding: 0; margin-right: 1em;}
.menu ul 
{
  padding: 0;
  margin: 0;
}
.menu li
{
  margin: 5pt 0;
}
.menu > ul > li > *
{ 
  display: block;
  padding: 2pt 2pt 2pt 10pt;
  border: solid thin #dadada;
  background-color:#ffffff;
}
.menu > ul > li.current > *
{ 
  background-color:#dddddd;
}

.menu ul li:first-child { margin-top:0;}
.menu ul { list-style-type:none;}

/* sub-menus are indented */ 
.menu > ul > li > ul,
.menu > ul > li.current > ul
{
  border:none;
  background-color: inherit;
}
.menu ul ul 
{
  margin-left: 1em;
  font-size: smaller;
}

/* sub-menu items draw a separator */
.menu ul ul > li 
{  
  margin: 0;
  padding: 0;
  border: none;
  border-top: solid thin #dadada;
  background-color: inherit;
}
.menu ul ul > li:first-child
{  
  border-top: none;
}

.menu ul li.toctree-l2.current {
  background-color: #dddddd;
  pading-block: 0.25em;
}

/* related */
div.related 
{
  width: 100%;
  font-size: 90%;
}
div.related-top { border-bottom: solid thin #dadada;}
div.related-bottom { border-top: solid thin #dadada;}

div.related ul 
{
  margin: 0;
  padding: 0 0 0 10px;
  list-style: none;
}

div.related li { display: inline;}

div.related li.right 
{
  float: right;
  margin-right: 5px;
}

.footer
{
  font-size: small;
  text-align: center;
  color: black;
}

.footer img {
  vertical-align: middle;
}

.content
{ 
  padding: 1em;
  border: solid thin #dadada;
  background-color: #f7f7f7;
}

/* This is a little hack to inject a 'news' block into the title
   page without having to set up a custom directive. */
#roundup-issue-tracker .note
{
  float: right;
  width: auto;
  border: solid thin #dadada;
  background-color:#f5f5f5;
  padding: 1em;
  margin: 1em;
}
#roundup-issue-tracker .note .admonition-title { display: none; }

table
{ 
  border-collapse: collapse;
  border-spacing: 1px;
  background-color: #fafafa;
}

table:has(caption) {
    margin-block: 1em;
}

table caption { font-weight: bold; font-size: smaller; }

table.footnote {
  font-size: calc(1em - 1pt);
}

td {
  /* pull text away from borders */
  padding-inline: 0.5em;
}

td > p {
  /* remove top margin on a p inside table cell so that
     columns with paragraphs align at top of cell rather
     than leaving a blank margin */
  margin-block-start: 0px;
}

input, textarea { border-width: 1px; }

a.headerlink {
  font-size: 0.8em;
  margin-left: 0.3em;
  color: #c99;
}

div.admonition {
  padding-inline: 1em;
  padding-block: 0.25em;
  border-inline-start: grey solid 4px;
  background-color: #dfdfdf;
}

div.admonition.caution {
  border-inline-start: red solid 4px;
}

div.admonition.warning {
  border-inline-start: yellow solid 4px;
}

p.admonition-title {
  border-block-end: grey solid 2px;
  font-weight: bold;
  font-size: larger;
  margin-block: 0;
}

div.admonition.caution p.admonition-title {
  border-block-end: red solid 2px;
}

dt { font-weight: bold; margin-block-start: 1em;}
dd p.first { margin-block-start: 0; }

#skiplink { display: block;
                   margin-block-start: 1em;
                   margin-inline-start: 1em;}
#skiplink a {
  /* force stuff for screenreader off screen */
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  padding: 0 0.75em;
  font-weight: bold;
}
#skiplink a:focus { position: static;
                    width: auto;
                    height: auto; }

/* remove solid black border when focus is around the main section
   due to activation of skip-link. Page jumps there, that's enough. */
#main:focus-visible {outline: none;}

/* website only */
/* assume desktop reader for local html files, also no contact
   page for local doc files */

@media only screen and (max-width:960px) {
    /* setup for layout/page frame */
    body { padding-inline-start: unset; /* remove space for float menu */}
    body > .header { margin-inline-start: unset;
	             margin-block-start: 3em; /* move down from search */}
    body > .navigation { margin-inline-start: unset;
			 float: none;}
    body > .navigation li > ul > li { padding-block: 1em;
    /* move links away from each other */ }
    #roundup-issue-tracker .note { float: none; /* download box */}
    body > .footer { margin-inline-start: unset; }

    /* changes for content */
    /* stop paths and things from overflowing the viewport. */
    div.content { overflow-wrap: break-word; }
    /* add spaces around items in TOC to make hitting the links easier */
    div.contents ul.simple li { padding-block: .5em; }
    ul.simple li a { min-height: 48px;
		     display: block;}
    /* make examples with long lines scrollable */
    div.highlight pre { overflow: auto;}
}

/* Contact page */
div#contact table td {
  white-space: nowrap;
  padding: 1pt 1em;
}