/* Deze CSS bevat alle opmaak voor hoi-hoi.nl.

 Gekozen kleurenpalet:
 - black   <-- tekst content.
 - #fff5e6 <-- achtergrond content.
 - blue    <-- externe links, die tevens in een nieuw venster openen.
 - #fc9f03 <-- tekst header/footer/navigatie.
 - #025250 <-- achtergrond header/footer/navigatie.
 - #fe7c02 <-- interne links, lijnen, kaders, h1 t/m h6, accenten.
 - #044e4c <-- voor subtiel verschil in achtergrond met de achtergrond header/footer/navigatie.
 box-shadow waardes.
 - rgba(254,124,2,0.3) <-- logo
 - rgba(254,124,2,0.7) <-- logo:hover
 - rgba(2,82,80,0.8) <-- divmetfoto
 - rgba(2,82,80,0.6) <-- IMG en VIDEO tags
 
 
 Ter inspiratie: zie ook w3schools.com - color theory, wheels, schemes, enz.
 https://www.w3schools.com/colors/default.asp
 TODO In de toekomst (bij betere browserondersteuning) de kleuren vervangen met de CSS var() functie.

 Het responsive design gaat uit van media queries met scheiding op 60em / 960px voor content bij grotere schermen.
 De site daarvoor opgebouwd in een grid container.
 
 Wat em en px betreft: px voor opbjecten en positioneren, em voor tekst.
 Bij em kan de grootte door de gebruiker worden aangepast in zijn browser.

 */

/* TODO Op zoek naar TTF/OTF en WOFF (voorkeur) fonts...
// https://www.fontsquirrel.com/fonts/list/hot
// http://designlovr.com/30-beautiful-and-free-fonts-you-can-use-with-font-face/
// http://www.dafont.com/brankovic.font?text=Hoi+-+Hoi&psize=l
   Het font voor het logo, kopjes en menu opties en zo. */
@font-face {font-family: MijnFont; src: url() format('woff');}

/*! (subset van) normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {line-height: 1.15; -webkit-text-size-adjust: 100%;}
body {margin: 0;}
main {display: block;}
h1 {font-size: 2em; margin: 0.67em 0; }
hr {box-sizing: content-box; height: 0; overflow: visible;}
pre {font-family: monospace, monospace; font-size: 1em;}
a {background-color: transparent;}
abbr[title] {border-bottom: none; text-decoration: underline; text-decoration: underline dotted;}
b, strong { font-weight: bolder; }
code, kbd, samp {   font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em;}
sup { top: -0.5em;}
img { border-style: none;}
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
button, input { overflow: visible;}
button, select { text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset { padding: 0.35em 0.75em 0.625em;}
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; #fff5e6-space: normal; }
progress { vertical-align: baseline;}
textarea { overflow: auto;}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;  padding: 0;}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;   outline-offset: -2px; }
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;   font: inherit; }
details { display: block;}
summary { display: list-item;}
template { display: none;}
[hidden] { display: none;}
/* Einde subset van normalize.css */

/* De body waar vanalles in komt, conform HTML5  */
/* Verdana = windows, Geneva = Mac, sans-serif = font-familie */
html, body {
 margin:0;border:0;padding:0;height:100%;max-height:100%; 
 color:black;background-color:#fff5e6; 
 font-weight:normal;font-size:1em;font-family:MijnFont,Verdana,Geneva,sans-serif;
 cursor: default;
}
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

/* De structuur voor de website (fixed header, fixed footer, scrollable main, en verplaatsbaar menu)
 * opgesloten in een grid-container om het responsive te zijn.
 */
header {grid-area: header;}
nav {grid-area: menu;}
main {grid-area: content;}
footer {grid-area: footer;}
#grid-website {
    width:100%;height:100%;background-color:#025250;
	display:grid;
	grid-template-columns: auto auto 50px;
}
#grid-website.groter  {grid-template-rows: 5em auto 2em;}
#grid-website.kleiner {grid-template-rows: 2.5em auto 2em;}
/* Voor kleine schermen (mobile), geen footer en menu bestaat uit het hamberger-icon */
#grid-website {
 grid-template-areas:
	'header header menu'
	'content content content'
	'content content content';
}
/* header en menu items in een flexbox */
header {display:flex; flex-direction:row;align-items:flex-start;}
nav {display:flex; flex-direction:column;align-items:flex-start;}

header {color:#fc9f03;background-color:#025250;}
nav    {color:#fc9f03;background-color:#025250;height:100%;overflow-y:auto;}
main   {color:black;background-color:#fff5e6;overflow:auto;}
footer {color:#fc9f03;background-color:#025250;}

/*
 * Alle opmaak voor schermen smaller dan 60em / 960px.
 * Het groter/kleiner heeft te maken bij het omlaag scrollen, om content meer ruimte te bieden.
 */

/* Het logo tevens home-knop */
#logo {
 border:1px solid #fe7c02;background-color:#fff5e6;color:#fe7c02;
 margin:10px;padding:5px;text-decoration:none;text-align:center;
 box-shadow: 0 4px 6px rgba(254,124,2,0.3);
 transform:rotate(-20deg); 
 transition: all .1s linear;
}
#logo:hover {transform:rotate(0deg);transform:scale(1.2);box-shadow: 0 10px 20px rgba(254,124,2,0.7);}
#logo > span {font-weight:bold;}
header.groter  > #logo > span {font-size:1.5em;}
header.kleiner > #logo > span {font-size:0.9em;}
/* De koptekst */
#kop {color:inherit;background-color:inherit;font-weight:bold;}
header.groter  > #kop  {margin-top:0.5em;font-size:4vw;}
header.kleiner > #kop {margin-top:0.1em;font-size:3vw;}
/* De menu icon (hamburger) */
#menu-ico {z-index:1100;cursor:pointer;
 border:1px solid #fc9f03;color:inherit;background-color:inherit;
 font-weight:normal;font-size:1.5em;width:35px;height:35px;
 margin:auto;display:flex;justify-content:center;align-items: center; /* icon symbool gecentreerd */
}
nav.groter  > #menu-ico {}
nav.kleiner > #menu-ico {}
/* De lijst met menuopties */
#menu-lijst {border:2px solid #fc9f03;color:inherit;background-color:inherit;padding:10px 10px 0px 10px;
 position:fixed;top:0;right:0;bottom:0;overflow-y:auto;z-index:1200;height: 100%;
 display:none;flex-direction:column;flex-wrap:nowrap;
 }
/* De opties zelf */
#menu-lijst > div {background-color:inherit;}
#menu-lijst > div.even {background-color:#044e4c;}
#menu-lijst > div  > a  {color:inherit;text-decoration:none;
 width:100%;display:block;padding-bottom:3px;}
#menu-lijst > div  > a:hover {opacity:0.7;}
#menu-lijst > div  > span  {color:#fe7c02;} /* Huidige actieve menuoptie */
/* Voor de groter-kleiner overgang */
#grid-website, header, nav, #logo, #logo > span, #kop, #menu-ico, footer {transition: all 1s;}
/* De footer wordt niet getoond */
footer {display:none;}
/* De main met daarbinnen de content */
main {font-size:0.8em;padding:0.5em;}
#content {}
/* knop om terug naar het begin van de pagina te springen */
#back2top {color:#fc9f03;background-color:#fe7c02;border:1px solid #fc9f03;opacity:0.5;
 width:2em;line-height:2em;font-size:1.5em;text-align:center;text-decoration:none;cursor:pointer;
 position:fixed;bottom:0em;right:1em;z-index:999;transform: rotate(270deg);
}
#back2top:hover {opacity:1;}
#back2top.verdwijnen {display:none;}
#back2top.verschijnen {display:block;}
/* Einde opzet structuur website voor smalle schermen */

/* De media queries: scheiding op 60em / 960px voor opzet bij grotere schermen. */
@media only screen and (min-width: 60em) {
	/* Een andere layout waarbij het menu en footer zichtbaar zijn */
	#grid-website {
	 grid-template-areas:
		'header header header'
		'menu content content'
		'menu footer footer'
	}
	#grid-website.groter  {grid-template-rows: 5em auto 2em;}
	#grid-website.kleiner {grid-template-rows: 3em auto 1em;}
	#menu-ico {display:none;}
	#menu-lijst {position:static;z-index:auto;display:flex;padding-top:50px;}
	/* Voor een flexibele header */
	header.groter  {min-height:8em;height:8em;}
	header.kleiner {min-height:5em;height:5em;}
	header.groter  > #logo {margin:20px;}
	header.kleiner > #logo {margin:10px;}
	header.groter  > #logo > span {font-size:2em;}
	header.kleiner > #logo > span {font-size:1.5em;}
	header.groter  > #kop {margin-top:0em;font-size:3vw;}
	header.kleiner > #kop {margin-top:0em;font-size:2vw;}
	/* De footer tonen, content gecentreerd */
	footer {display:flex;justify-content:center;align-items:center;} /* content gecentreerd */
	footer.groter  {font-size:1em;}
	footer.kleiner {font-size:0.8em;}

	#back2top {bottom:1em}
	/* De main met content */
	main {font-size:0.9em;padding:1em;}
	#content {}
}

/* De (modal) DIV #divmetfoto voor het optimaal tonen van een vergroting van een foto */
/* Deze DIV staat buiten de container #content */
#divmetfoto {z-index:9999;position:fixed;top:0;left:0;width:100%;height:100%;
 display:none;background:rgba(2,82,80,0.8);cursor:pointer;}
#divmetfoto > img {max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
#divmetfoto > div {font-size:1em;color:yellow;background-color:transparent;position:absolute;bottom:0;width:100%;text-align:center;}

/* Aangepaste CSS voor de (modal) DIV bij grotere schermen */
@media screen and (min-width: 60em) {
	#divmetfoto > img {border:1px solid #fc9f03;}
}

/* Alle CSS voor opmaak van content in MAIN */
/* Alle images in content */
#content img {background-color:inherit;border:1px solid #fe7c02;
 padding:1px;cursor:pointer;
 box-shadow:0.3em 0.3em 0.3em rgba(2,82,80,0.6);
 margin-bottom:0.8em;margin-right:10%;width:90%;height:auto;clear:both;
}
#content img:hover {opacity:0.7;cursor:zoom-in;}
/* Een video in content */
#content video {width:90%;max-width:100%;height:auto;
 background-color:inherit;border:1px solid #fe7c02;
 padding:1px;cursor:pointer;
 box-shadow:0.3em 0.3em 0.3em rgba(2,82,80,0.6);
 margin-bottom:0.8em;margin-right:25%;clear:both;
}
#content video:hover {opacity:0.7;}

/* Elke paragraaf, een nieuwe alinea */
#content p {clear:both;}
#content p:empty {clear:both;} /* zeker een lege alinea */
/* De standaard stijl voor interne bookmarks/ankers (die hebben geen href)*/
#content a:not([href]) {display:block;margin-top:1.5em;} 
/* De standaard stijl voor alle links  */
#content a {color:#fe7c02;text-decoration:underline;}
#content a:link,a:visited,a:hover {#fff5e6-space:nowrap;}
#content a:hover {opacity:0.7;}
/* Externe links met een nieuw venster (target=_blank)*/
#content a[target="_blank"] {color:blue;}
#content a[target="_blank"]:after {content: "\a0\2197";}
/* De standaard stijl voor headers */
#content h1,#content h2,#content h3,#content h4,#content h5,#content h6 {text-align:left;clear:both;}
#content h1 {color:#fe7c02;font-size:2.0em;}
#content h2 {color:#fe7c02;font-size:1.5em;}
#content h3 {color:#fe7c02;font-size:1.1em;letter-spacing:2px;}
#content h4 {color:#fe7c02;font-size:1.0em;font-variant:small-caps;}
#content h5 {color:#fe7c02;font-size:0.9em;}
#content h6 {color:#fe7c02;font-size:0.9em;}
/* De standaard stijl voor een horizontaal lijntje  */
#content hr {color:#fe7c02;width:100%;height:2px;margin-top:1em;margin-bottom:1em;}
/* De standaard stijl voor een ongenummerde lijst */
#content ul {list-style:none;text-align:left;margin-left:-2em;}
/* De standaard stijl voor een genummerde lijst */
#content ol {list-style:decimal outside;text-align:left;margin-left:-2em;}
/* Een lijst-element */
#content li {margin-bottom:0.5em;}
#content ul > li::before {content:"•";color:#fe7c02;
  display:inline-block;width:1em;
  margin-left:-1em
}
/* Stijl voor een tabel */
#content table {
 border-collapse:separate;border:1px solid #fe7c02;border-spacing:0px;
 margin:0px;padding:1px;
}
#content table tr {border:0px;margin:0px;padding: 0px;}
#content table th, #content table td
 {border:1px solid #fe7c02;margin:0px;padding:5px;text-align:left;font-size:small;font-family:inherit;}
#content table th {color:#fe7c02;font-weight:bold;letter-spacing:1px;vertical-align:bottom;}
#content table td {color:black;font-weight:normal;vertical-align:top;}

/* Aangepaste CSS voor content bij grotere schermen */
@media screen and (min-width: 60em) {
	#content img   {margin-right:0.8em;object-fit:cover;width:23%;height:200px;float:left;clear:none;}
	#content video {margin-right:0.8em;width:23%;float:left;clear:none;}
	#content ul    {margin-left:0em;}
	#content ol    {margin-left:0em;}
	#content li    {margin-bottom:0.8em;}
}