/*version 20250120

changes made
20250120: header align-items: start zodat header bij hover niet naar boven schoof
20250114: error fixing, black and white to its own style
20241231: black and white theme, plus note the color scheme is assigned to the shared root and not body element, so we might reference them in other style elements
20240502: rgb colors
20240213: z-index on header and details > summary to not show the details in the header
20240216: consist use of rem and em, max function applied for nested tables
20240325: shadow removed from lists

see code\webstorm\settings.css for latest version. Update using settings\editor\(new projects) ...file and code templates
*/

/*color scheme*/

:root {
	--font-family-primary:      'Syntax', 'Verdana', 'Nunito', sans-serif;
	--font-family-secondary:    'Nunito', sans-serif;

	--green_hex:                #67b173;
	--green_rgb:                103, 177, 115;
	--green-darker_hex:         #589662;
	--green-darker_rgb:         88, 150, 98;
	--standoutgreen:            var(--green_hex); /*in dark theme a bit brighter to be able to read letters*/

	--gray-max_hex:             #cfd2e3;
	--gray-max_rgb:             207, 210, 227;
	--gray-min_hex:             #e9eaf5;
	--gray-min_rgb:             233, 234, 245;
	--nav-gray_hex:             #6d7080;
	--nav-gray_rgb:             109, 112, 128;
	--primarygrey:              #878a99;
	--soft-black-hex:           #444; /*RGB(68,68,68)*/
	--soft-black-rgb:           68, 68, 68;
	--primaryblue_hex:          #3D78E3;
	--primaryblue_rgb:          61, 120, 227;


	--p-dark-blue_hex:          #2d4f93;
	--p-dark-blue_rgb:          45, 79, 147;
	--p-light-blue_hex:         #4172d6; /*RGB (65, 114, 214)  #4172d6*/
	--p-light-blue_rgb:         65, 114, 214;
	--p-orange_hex:             #ff6212; /*RGB(255, 98, 18)*/
	--p-orange_rgb:             255, 98, 18;
	--p-light-orange_hex:       #f1834a;
	--p-light-orange_rgb:       241, 131, 74;
	--p-white-soft-hex:         #fff;
	--p-white-soft-rgb:         255, 255, 255;
	--p-white_hex:              #f2faff;
	--p-white_rgb:              242, 250, 255;

	--font-size-header:         clamp(10px, 3.5vw, 20px);
	--font-size-input:          clamp(10px, 2.5vw, 16px);
	--font-size-images:         clamp(6px, 1vw, 10px);

	/*white theme settings*/
	--main-backgroundcolor_hex: var(--p-white-soft-hex); /*RGB(255,255,255)*/
	--main_backgroundcolor_rgb: var(--p-white-soft-rgb);
	--header-background_hex:    var(--gray-min_hex);
	--main-color_hex:           var(--soft-black-hex);
	--main-color-rgb:           var(--soft-black-rgb);
	--header-color:             var(--p-dark-blue_hex);
	--footer-color:             var(--p-dark-blue_hex);
	--emphasis-color:           var(--p-light-blue_hex);
	--border-color:             var(--gray-max_hex);
	--box-shadow:               RGB(68, 68, 68, 0.15); /*RGB main-backgroundcolor*/
	--button-color_hex:         var(--green_hex);
	--button-color-focus_hex:   var(--green-darker_hex);
	--signal-color_hex:         var(--p-light-orange_hex);

	--heightHeader:             4rem;
	--heightFooter:             6rem;
}

@font-face {
	font-family:  "Syntax";
	src:          url("./../fonts/Syntax.woff2") format("woff2");
	font-weight:  normal;
	font-style:   normal;
	font-display: swap;
}

html {
	transition: color 300ms, background-color 300ms;
	background: var(--main-backgroundcolor_hex);
	color:      var(--main-color_hex);
}

/*remove any browser inserted margins and paddings*/
html, body {
	padding: 0;
	margin:  0;
}

/*page grid --> header, main, footer*/
body {
	font-family:            var(--font-family-primary);
	display:                grid;
	grid-template-rows:     var(--heightHeader) 1fr var(--heightFooter); /* Header, content, footer layout */
	grid-template-columns:  1fr; /* Single-column layout */
	min-height:             100vh; /* Full viewport height */
	margin:                 0; /* Remove default browser margins */
}

/* Header at the top */
header {
	grid-row:         1;
	position:         sticky; /* Sticky header */
	top:              0;
	text-align:       center;
	background-color: var(--header-background_hex);
	z-index:          100;
}

/* Main content scrollable */
main {
	grid-row:         2;
	background-color: var(--main-backgroundcolor_hex, #444);
	z-index:          1;
}

/* Footer at the bottom */
footer {
	color:            var(--footer-color, darkblue);
	grid-row:         3;
	position:         relative; /* Relative to ensure it's part of the flow */
	text-align:       center;
	background-color: var(--header-background_hex);
	height:           var(--heightFooter);
	font-size:        small;
	z-index:          10;
}

footer button {
	background-color: var(--green-darker_hex, darkgreen);
}

footer ul, footer ol {
	list-style: none;
}

h1, header {
	color:     var(--header-color);
	font-size: var(--font-size-header);
	margin:    0;
}

h2 {
	color:           var(--button-color_hex);
	font-size:       calc(0.9 * var(--font-size-header));
	text-decoration: underline .1rem;
}

h3 {
	color:     var(--button-color-focus_hex);
	font-size: calc(0.8 * var(--font-size-header));
}

h4 {
	font-size: calc(0.75 * var(--font-size-header));
}

small {
	font-size: 0.8rem;
}

mark {
	color: var(--signal-color_hex);
}

code {
	display:          inline-block;
	font-family:      var(--font-family-primary);
	font-size:        0.85rem;
	background-color: var(--p-dark-blue_hex);
	color:            var(--gray-min_hex);
}


/*normal table*/
table {
	/*table*/
	width:           95%;
	border-collapse: collapse;
}

table thead {
	background-color: var(--header-background_hex, rgb(200, 200, 200));
}

table td, table th {
	color:          var(--main-color_hex);
	border:         .1rem solid var(--header-background_hex, rgb(200, 200, 200));
	text-align:     left;
	vertical-align: top;
}

/* LISTS */

/*nested lists*/
ol ol li {
	font-size: max(0.9em, .5rem);
}

/*links*/
a {
	text-decoration: none;
	color:           var(--emphasis-color);
}

figcaption {
	color: var(--button-color_hex);
}

/*input*/
section.input {
	display:        flex;
	flex-direction: column;
	align-items:    start;
	width:          max-content;
	padding:        .1rem;
	gap:            .2rem;
	border:         .1rem solid var(--border-color, darkgray);
	box-shadow:     .1rem .2rem 2.5rem 0 var(--box-shadow); /*3px x-as, 4px y-as, 5px blur, 0px spread*/
}

input::placeholder {
	font-size: 0.75rem;
}

button {
	/*	position:         relative;*/
	overflow:         hidden;
	transition:       background 400ms;
	color:            var(--main-color_hex);
	background-color: var(--button-color_hex, lightgreen);
	font-family:      var(--font-family-primary);
	font-size:        .8rem;
	outline:          0;
	border:           0;
	border-radius:    0.25rem;
	box-shadow:       0 0 0.5rem 0.1rem var(--gray-max_hex); /* var(--gray-max_hex) */
	cursor:           pointer;
	margin:           1rem;
	padding:          .1rem;
	max-width:        12rem;
	max-height:       2rem;
	/*ripple effect*/
	position:         relative;
}

a button div {
	position:         absolute;
	width:            5rem;
	height:           5rem;
	top:              50%;
	left:             50%;
	border-radius:    50%;
	transform:        translate(-50%, -50%) scale(0); /* Start centered & small */
	background-color: var(--green-darker_hex, darkgreen);
	color:            var(--border-color, orange);
	opacity:          0;
}

a button[aria-label='rippleEffect']:hover div {
	animation: ripple 200ms ease-in-out forwards;
}

button[aria-label='rippleEffect'] {
	position: relative;
	overflow: hidden;
}

button[aria-label='rippleEffect']:active > div {
	position:         absolute; /* The absolute position we mentioned earlier */
	width:            200%;
	height:           200%;
	top:              -50%;
	left:             -50%;
	border-radius:    50%;
	transform:        scale(0);
	animation:        ripple 2s linear;
	background-color: var(--button-color-focus_hex, darkgreen);
}

@keyframes ripple {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity:   0;
	}
	99% {
		transform: translate(-50%, -50%) scale(4);
		opacity:   1;
	}
	100% {
		transform: translate(-50%, -50%) scale(0);
		opacity:   0;
	}
}


/* Hide the default arrow */
details > summary {
	list-style-type: none;
	position:        relative; /*to position the pseudo elements*/
}

/* Use CSS to style our own custom arrow using the ::after pseudo-element */
details > summary::after {
	content:   "...klik voor details...";
	font-size: 0.8em;
}

/* When the details element is open, we can change the arrow text */
details[open] > summary::after {
	content: "...sluit details...";
}