@import "fonts.css";
@import "reset.css";
@import url(//fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700,700italic);

/* use of units: absolute values in *px* for borders, *cm* for larger margins. all others in *em* (relative to current font size) or *rem* (relative to root font size) */

*:root, input,select, textarea, button {
  /* general font settings */
  --font-size: 12pt;
  font-family:"Noto Sans",sans-serif;
  font-size:var(--font-size);
  
  /* measurement variables */
  --navbar-width: 200px;
  --main-width: 1250px;
  --headerbar-height: 65px;
  --headerbar-lineheight:2.25em;
  --border-thickness:.07em;
  --main-page-margins:1cm;
  --footer__min-height: 40px;
  --footer__max-height: auto;

  /*  media queries do not support variables but here are the  values used. */
  --breakpoint-mobile: 800px;
  --breakpoint-large-screen: 1250px;
  --breakpoint-widescreen: 1500px;

  /*  color definitions */
  --jb-blauw:#253776;
  --jb-groen:#335525;
  --lichtblauw:#def;
  --lichtgrijs:#e2e2e2;
  --lichtgeel:#ffd;
  --grijsblauw:#abc;
  --fuchsia:#ce83ce;
  
  /* light-dark from benjamins.com */
  --main-bg-light: #fdfdfd;
  --main-bg-dark: #222;
  --main-bg: light-dark( var(--main-bg-light), var(--main-bg-dark) );

  --side-bg: light-dark(var(--stopverf), hsl(from antiquewhite h 30 10) );
  --side-bg-gradient-color: light-dark(#eadedb, hsl(from antiquewhite h 50 15) );
    
  --searchbox-bg: light-dark(#def, #544);
  --filterbox-bg: light-dark(#ffd, hsl( from fuchsia h 30 30) );
  --jb-blauw-dark: hsl( from var(--jb-blauw) h 30 75);
  --jb-blauw-ld: light-dark( var(--jb-blauw), var(--jb-blauw-dark) );



  
  /* color applications, use 'background,text,border' as suffixes for coloring */
  
  --header__background:var(--jb-blauw);
  --nav__background:var(--grijsblauw);
  --footer__background: light-dark( var(--lichtblauw), #544);
  
  --nav-button__background:var(--jb-groen);
  --nav-button__text:white;
  
  --main-button__border:var(--jb-groen);
  --main-button__background:var(--jb-groen);
  --main-button__text:white;
  
  --main-h1__background: light-dark( var(--lichtblauw), hsl(from brown h 30 30));
  --main-h1__text:CanvasText;

  --main-form__border:var(--lichtgrijs);
  --main-form__background:var(--filterbox-bg);
    
  color-scheme: light dark;
  --bold: bold;
    
}
body {
    display:grid;
    grid-template-areas: 
        'header-left header'
        'menu main'
        'menu footer';
    grid-template-columns:var(--navbar-width) 1fr;
    grid-template-rows:var(--headerbar-height) 1fr minmax(var(--footer__min-height),var(--footer__max-height));    
    margin:0;
    height:100vh;
    width:100vw;
    overflow:hidden;
}
body::before {
    content: "";
    background-color:var(--header__background);
    grid-area:header-left;
}
body::after {
    content: "";
    background-color:var(--header__background);
    grid-area:header-right;
}

@media screen and ( min-width: 1200px ) {
    body {
        grid-template-areas: 'header-left header header-right'
              'menu main right'
              'menu footer bottom-right';
        grid-template-columns:var(--navbar-width) var(--main-width) 1fr;
        grid-template-rows:var(--headerbar-height) 1fr minmax(var(--footer__min-height),var(--footer__max-height));
        background-color: var(--side-bg);
    }

}
@media screen and ( min-width: 1750px ) {
    body {
        grid-template-areas: 'header-left header header header'
              '. menu main right'
              '. menu footer bottom-right';
        grid-template-columns:1fr var(--navbar-width) var(--main-width) 1fr;
        grid-template-rows:var(--headerbar-height) 1fr minmax(var(--footer__min-height),var(--footer__max-height));
    }
}
body > header {
    grid-area: header;
    background-color:var(--header__background);
    color:white;
    text-align:center;
    line-height:var(--headerbar-height);
    vertical-align:middle;
    display:flex;
    font-size:2em;
}
/*  hamburger menu trigger for smaller screens */
input#nav-trigger, .hamburger {
    display: none;
}
input#nav-trigger:checked ~ nav {
    display: block;
    margin-left:0;
}
.svg-menu-toggle {
  fill: #fff;
  pointer-events: all;
  cursor: pointer;
}
.svg-menu-toggle .bar {
  -webkit-transform: rotate(0) translateY(0) translateX(0);
  transform: rotate(0) translateY(0) translateX(0);
  opacity: 1;
  -webkit-transform-origin: 20px 10px;
  transform-origin: 20px 10px;
  -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
  transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
}
.svg-menu-toggle .bar:nth-of-type(1) {
  -webkit-transform-origin: 20px 10px;
  transform-origin: 20px 10px;
}
.svg-menu-toggle .bar:nth-of-type(3) {
  -webkit-transform-origin: 20px 20px;
  transform-origin: 20px 20px;
}
input[type=checkbox]:checked ~ header .svg-menu-toggle .bar:nth-of-type(1) {
  -webkit-transform: rotate(-45deg) translateY(0) translateX(0);
  transform: rotate(-45deg) translateY(0) translateX(0);
}
input[type=checkbox]:checked ~ header .svg-menu-toggle .bar:nth-of-type(2) {
  opacity: 0;
}
input[type=checkbox]:checked ~ header .svg-menu-toggle .bar:nth-of-type(3) {
  -webkit-transform: rotate(45deg) translateY(0em) translateX(0em);
  transform: rotate(45deg) translateY(0em) translateX(0em);
}

/* jb logo */
.jb-logo {
    grid-area:header-menu;
    background-color:var(--jb-blauw);
    vertical-align:middle;
    text-align:center;
    margin:auto;
    width:100%;
}
.jb-logo svg {
    fill:white;
    height:var(--headerbar-height);
}

nav {
    grid-area:menu;
    background-color:var(--nav__background);
}
nav > form p {
    padding:1em;
    padding-bottom:.25em;
    line-height:1.5em;
}
main {
  grid-area:main;
  background-color: var(--main-bg);
  line-height:1.65em;
  overflow:auto;
}
main > div {
        padding:var(--main-page-margins);
}
main > h1, .main-page h1 {
    padding:1em var(--main-page-margins);
    margin-top:0;
    background-color:var(--main-h1__background);
    font-size:1.4rem;
    color:var(--main-h1__text);
    font-weight: var(--bold);
}
.main-page h1 {
    margin: calc( 0px - var(--main-page-margins) );
    margin-bottom: 2em;
}
main > form, .main-page > form {
    border: var(--border-thickness) solid var(--main-form__border);
    background-color:var(--main-form__background);
    border-radius:.25em;
    padding:0 1em;
    margin:2em 0 1em;
}
main > form p, .main-page > form p {
    margin: 1em 0 .5em;
}
aside {
    grid-area:right;
    background-color:#eee;
}
footer, .main-page header {
    background-color:var(--footer__background);
    grid-area:footer;
    padding:.5em 1cm;
}
h2.question {
    font-style:italic;
    margin-top:1em;
    margin-bottom:.33em;
}
p + h2 {
  margin-top: 1.2em;
}
h2 + ul {
    margin-top:0;
}
ul, ol {
    margin:1em 0 1em 2em ;
}
ul > li, ol > li {
    margin-left: 0em;
    list-style-position:outside;
}

pre {
    white-space:pre-wrap;
}
button {
    font-size: .95em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .15em;
    padding:.1em .5em .15em .5em;
    border-radius:.25em;
    cursor:pointer;
    border-width: .07em;
    
}
main button {
	background-color:var(--main-button__background);
	color:var(--main-button__text);
    border:solid 1px var(--main-button__border);
    margin:.5em 1em .5em 0;
}

nav button {
    background-color:var(--nav-button__background);
	color:var(--nav-button__text);
    display:block;
    margin:1em;
    border:none;
}

*:invalid {
  border-color:red;
}



a {
    text-decoration:none;
}
.header-divider {
    color: #def;
    font-weight: normal;
    font-size:.9em;
}
.header-divider:after {
    content: "|";
    padding:.3em;
}
.result {
    padding:.5em;
    font-weight:bold;
    border-radius:.25em;
}
.result.log {
    background-color:yellow;
}
.result.success-true {
    background-color:lime;
    color:black;
}
.result.success-false {
    background-color:red;
    color:white;
}
warning {
  color:red;
}

/* forms */
select {
  height: 1.75em;
}
select[multiple] {
  height:auto;
}
input, select { 
  margin-left:1em;
}
input:first-child, select:first-child, legend + * {
  margin-left:0;
}
legend {
  margin-bottom:.5em;
}

@media screen and (max-width:800px) {
  body {
        grid-template-areas: 'header'
              'main'
              'footer'; 
        grid-template-columns: 1fr;
  }
  body > nav {
    grid-area:auto;
    display:block;
    position:absolute;
    left:0;
    top: var(--headerbar-height);
    z-index:3;
    margin-left: calc( 0px - var(--navbar-width) );
    width:var(--navbar-width);
    transition: margin .5s ease-in-out;
  }
}

@media screen and (prefers-color-scheme:dark) {
  :root {
    --bold : normal;
    --letter-spacing-when-dark: .025em;
  }
  
}