/* Stylesheet for DokuWiki Nuropa template
 * by Sascha Leib
 * File name: layout.css
 */

/* Root styles */

body {
	color: @ini_text;
	background-color: @ini_background;
	max-width: 100%;
	text-rendering: optimizeLegibility;
	font-family: @ini_default_fonts;
	margin: 0;
	padding: 0;
	scrollbar-gutter: auto;
	scrollbar-width: thin;
	scrollbar-color: @ini_background_alt @ini_background;
	overflow-x: hidden;
}
html {
	scroll-behavior: smooth;
	font-size: @ini_default_font_size;
}

* {
	margin: 0;
	padding: 0;
}

/* utility classes: */
.sr-only { display: none; }

/* Skip Link */
#skip-link {
	position: fixed;
	left: 4pt;
	top: 4pt;
	width: auto;
	z-index: 9999;
}
#skip-link a {
	position: absolute;
	background-color: @ini_background;
	font-size: 1.25em;
	color: @ini_link;
	height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
#skip-link a:focus {
	position: static;
	display: inline-block;
	padding: 8px;
	height: auto;
	clip: auto;
	overflow: visible;
}

/* general link settings */
body.dokuwiki {
	a:link, a:visited {
		color: @ini_link;
		text-decoration: underline;
		border-radius: 3px;
	}
	a[href^="#"] {
		text-decoration-style: dashed;
	}
	a:hover {
		text-decoration: underline;
	}
	a:focus {
		text-decoration: underline;
		outline: @ini_focus_outline 2px solid;
	}
}

body > #header-layout {
    & {
        width: 100%;
        clear: both;
    }
	#searchbar-layout {
		width: 100%;
		clear: both;
		background-color: @ini_searchbar_background;
		color: @ini_searchbar_text;
	}
    #menu-layout {
		width: 100%;
		clear: both;
		background-color: @ini_menubar_background;
		color: @ini_menubar_text;
	}
}
body > #main-layout {
    & {
        width: 100%;
        clear: both;
		padding-bottom: 1rem;
    }
	#main-sidebar-layout {
		& {
			width: 100%;
			max-width: @ini_site_width;
			margin: 0 auto;
			display: grid;
			grid-template-columns: @ini_sidebar_width auto 0;
		}
		&.toggle_collapse {
			& {
				grid-template-columns: 1rem auto;
				gap: 0;
			}
			#sidebar > nav {
				display: none;
			}
		}
		main {
			& {
				width: auto;
			}
		}
		
		/* "to top" button: */
		#to-top-block {
			& {
				display: block;
				float: right;
				position: sticky;
				bottom: 1rem;
				width: 32px; height: 32px;
				height: 0;
			}
			a:link, a:visited {
				display: block;
				width: 32px; height: 32px;
				position: relative;
				top: -2em; left: 4em;
				background-color: @ini_background_alt;
				border: @ini_border_color solid 1pt;
				border-radius: 50%;
			}
			a:hover {
				filter: ~"brightness(80%) contrast(120%)";
			}
			svg {
				width: 24px; height: 24px;
				margin: 4px;
				fill: @ini_link_inpage;
			}
		}
	}
}

/* general button formatting */
button {
	border: @ini_form_btn_outline solid 1px;
	background-color: @ini_form_btn_bg;
	color: @ini_form_btn_text;
	padding: .5em 1em;
	border-radius: .5em;
	cursor: pointer;
}
button[type=submit] {
	border-color: @ini_form_submit_btn_text;
	background-color: @ini_form_submit_btn_bg;
	color: @ini_form_submit_btn_text;
}
button[type=submit]:disabled {
	filter:  ~"opacity(0.6) saturate(0.67)";
}
/*button:hover, button:focus {
	filter: ~"brightness(80%) contrast(150%)";
}*/
button[type=submit]:hover, button[type=submit]:focus {
	border-color: @ini_form_submit_btn_text;
	background-color: @ini_form_submit_btn_bg;
	color: @ini_form_submit_btn_text;
	filter: ~"brightness(67%) contrast(150%)";
}

/* general text-field styles */
input[type=text], input[type=password], input[type=email], input[type=url], textarea {
	background-color: @ini_form_field_bg;
	color: @ini_form_field_text;
	border: @ini_form_field_outline solid 1px;
	border-radius: .125em;
	font-family: @ini_mono_fonts;
	font-size: @ini_mono_font_size;
	padding: .25em .5em;
	box-sizing: border-box;
}
input[type=text]:focus, input[type=password]:focus, input[type=url]:focus, textarea:focus {
	outline: @ini_focus_outline solid 2pt;
	-webkit-box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,.5);
	box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,.5);
}

/* checkboxes */
input[type=checkbox] {
	width: 1.25em; height: 1.25em;
}

/* url field */
input[type=url] {
	font-size: smaller;
	background: @ini_form_field_bg url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABdklEQVR4AWMgAVRo1zY3rGk41rC+rqvCBCJWBpPM4WoomLHtdtuv/t9Lfk263TtrQ0t7Oj9cbzZDc/W6s/8T7khD+P+F/8bv29PZlswJVVBu0vPuVZyNYHFZbmAqE1SR0cbjXR6pjGBO58am962Ta3e3ftqy6B5LCcMasOj7gInrm9jBzI4vTX+bfjT/7/4/p/w/zFXybUmt71u4wJzGfxP/t/xvA+KaP2XnQSKVFpWPav/U/6+HKJjz++OVJUDp1n9N/+r+19QyMCz1mPC/8X/X/26Igrn3GiUeL5n/v+F/8//6/9NOMTC0hDUDefP/L4MoOL6ickVeSQ1QqAGooPdBJE/lnloge/fhixBHftFd9bLkR83/+n/1QAXVP8qX1Pyv/L/s/12f/4xQNz8s3Pa/6X/Vvzqgour/5f/r/q//f2fmLy54WP7lfJN74eMSoKIyoNFz/5/+9ar+Px9aZL3Xfjvz7aO3/96+eLvsnSVE7CPhOAYA9nvIX0UoNU8AAAAASUVORK5CYII=') 5px center no-repeat;
	border-radius: 1.25em;
	padding: .25em .5em .25em 24px;
}

/* select popup styles */
select {
	background-color: @ini_form_field_bg;
	color: @ini_form_field_text;
	border: @ini_form_field_outline solid 1px;
	padding: .25em 1.5em .25em .5em;
	border-radius: .125em;
}
select:hover, select:focus {
	-webkit-box-shadow:	1px 1px 1px 0 rgba(0,0,0,.3);
	box-shadow:	1px 1px 1px 0 rgba(0,0,0,.3);
}

/* fieldset styles */
fieldset {
	& {
		padding: .5em 1em;
	}
	legend {
		font-family: @ini_headline_fonts;
		padding: 0 .25em;
	}
}

/* tab list */
ul.tabs {
	& {
		margin: .5em 0; padding: 0 0 0 1em;
		list-style: none inside;
		line-height: 1.4em;
		border-bottom: @ini_border_color solid 1.5pt;
		display: flex;
		gap: .5em;
	}
	li {
		& {
			display: inline-block;
			margin: 0; padding: 0 0 2pt 0;
		}
		&.active {
			background-color: transparent;
		}
		& > * {
			padding: .5em 1em;
			font-size: smaller;
			border-bottom: transparent solid 1.5pt;
		}
		& > a, & > strong {
			color: @ini_form_btn_text !important;
			text-decoration: none !important;
			border-radius: .25em .25em 0 0;
		}
		& > a:hover,
		& > a:focus {
			border-bottom-color: @ini_form_btn_outline !important;
		}
		&.active > a,
		& > strong {
			background-color: @ini_background;
			border: @ini_border_color solid 1px !important;
			border-top: @ini_theme_color solid 2pt !important;
			border-bottom: @ini_background solid 1.5pt !important;
			font-weight: 700;
			text-decoration: none;
		}
	}
}

/* click overlay: */
#overlay {
	display: block;
	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: @ini_overlay_color;
	z-index: 99;
}
