/* Stylesheet for DokuWiki Nuropa template
 * by Sascha Leib
 * File name: site-header.css
 */

body > #header-layout {

	#searchbar-layout {

		a:link, a:visited {
			color: @ini_searchbar_link;
			text-decoration: none;
		}
		a svg {
			fill: @ini_searchbar_link;
		}
		#searchbar {
			& {
				width: 100%;
				max-width: @ini_site_width;
				margin: 0 auto;
				padding: .5em 0;
				display: grid;
				grid-template-columns: 3fr 5fr 3fr;
				gap: .5em;
				align-items: center;
				justify-items: center;
			}
			#site-logo {
				& {
					width: 100%; height: auto;
					max-width: 160px;
					max-height: 80px;
					/* justify-self: start; */
				}
				a {
					display: block;
				}
			}
			#search-group {
				& {
					width: 100%;
					position: relative;
				}
				#dw__search {
					& {
						border-radius: 2px;
					}
					&:focus-within {
						outline: @ini_focus_outline solid 2px;
					}

					div.no {
						& {
							width: 100%;
							display: grid;
							grid-template-columns: auto 4.5em;
							border: @ini_form_field_outline solid 1px;
							margin: 2rem 0;
						}
						input {
							line-height: 1rem;
							border: transparent 0 none;
						}
						input:focus {
							outline: none;
						}
						button {
							background-color: @ini_form_btn_bg;
							color: @ini_form_btn_text;
							border: none; border-radius: 0;
						}
						button:hover,
						button:focus {
							outline: none;
						}
					}
				}
			}
			#qsearch__out {
				& {
					position: absolute;
					width: 100%;
					margin-top: ~"calc(1.5rem + 5px)";
					padding: 0;
					white-space: nowrap;
					font-size: 1rem;
					z-index: 103;
					background-color: @ini_background;
					-webkit-box-shadow:	2px 2px 2px 0 rgba(0,0,0,.5);
					box-shadow:	2px 2px 2px 0 rgba(0,0,0,.5);
					overflow: hidden auto;
				}
				strong {
					display: none;
					padding: 2pt;
					font-weight: normal;
				}
				ul {
					border: @ini_border_color solid 1px;
					border-top-width: 0;
					max-height: 11em;
				}
				li {
					border-top: @ini_border_color solid 1px;
				}
				a {
					display: block;
					padding: 2pt 0 2pt 4pt;
					border: transparent solid 2px;
					overflow: hidden;
					text-overflow: '\2025';
				}
				a:focus {
					border-color: @ini_focus_outline;
				}
			}
			#user-group {
				svg {
					fill: @ini_searchbar_link;
				}
				button {
					& {
						display: flex;
						border: transparent 0 none;
						border-radius: 0;
						background: transparent;
						color: @ini_searchbar_link;
						font-size: .86em;
						cursor: pointer;
					}
				}
				ul {
					& {
						position: absolute;
						background-color: @ini_background;
						list-style: none inside;
					    font-size: .86em;
						border: @ini_border_color solid 1px;
						box-shadow: 1.5px 1.5px 1px .5px rgba(0,0,0,.4);
						padding: .25em;
						margin-top: 10px;
						margin-left: -10px;
						z-index: 100;
					}
					&::before, &::after {
						content: '';
						width: 0;
						height: 0;
						bottom: 100%;
						left:  ~"calc(50% - 5px)";
						position: absolute;
						border: solid transparent;
						pointer-events: none;
					}
					&::before {
						border-bottom-color: @ini_border_color;
						border-width: 10px;
						margin-left: -10px;
					}
					&::after {
						border-bottom-color: @ini_background;
						border-width: 9px;
						margin-left: -9px;
					}
					a {
						display: flex;
						min-width: 8em;
						padding: .25em;
						gap: .25em;
					}						
				}
				/*#user-action-buttons {
					& {
						list-style: none;
					    font-size: .86em;
					}
					a {
						display: flex;
					}
				}*/
			}
		}
	}
    #menu-layout {
		a:link, a:visited {
		    color: @ini_menubar_link;
		    text-decoration: none;
		}
		#menu-block {
			& {
				width: 100%;
				max-width: @ini_site_width;
				margin: 0 auto;
		    }
		    #menubar-breadcrumbs {
		        & {
		            padding: .25rem 0 .5rem 0;
		        }
		        ul, ol {
		            & {
						display: flex;
						align-items: center;
                        list-style: none;
                        padding: .5rem 0 0 0;
						font-size: .75rem;
						font-weight: 600;
						white-space: nowrap;
						width: min-content;						
                    }
                    li {
                        & {
							display: inline-flex;
						}
						&:after {
							content: '\203A';
							margin: 0 .5em;
							color: @ini_menubar_text;
						}
						&:first-child, &:last-child {
						}
						&:last-child::after {
							content: none !important;
						}
						&.hasicon {
							a {
								& {
									display: inline-flex;
									align: center;
								}
								svg {
									width: 1.1em; height: auto;
									fill: @ini_menubar_link;
								}
								span {
									width: 0; overflow: hidden;
								}
							}
						}
						bdi {
						}
					}
					&.youarehere li:after {
						content: "\002F";
					}
                }
		    }
			#page-headline-layout {
				& > div {
					padding: 1rem 0 1rem 0;
				}
				h1, h2 {
					font-family: @ini_headline_fonts;
					font-size: 2rem;
					line-height: 2.5rem;
					margin: 0; padding: 0;
					font-weight: 600;
				}
				p.tagline {
					font-family: @ini_headline_fonts;
					font-size: 1.25rem;
					line-height: 1.75rem;
					margin: 0; padding: 0;
					font-weight: 400;
				}
			}
        }
    }
	#post-header-layout {
		& {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		#post-header {
			& {
				width: 100%;
				max-width: @ini_site_width;
				margin: 0 auto;
			}
			.breadcrumbs-nav {
				& {
					margin: .5rem 0;
				}
			}
			#post-header-breadcrumbs {
				& {}
		        ul, ol {
		            & {
						display: flex;
						align-items: center;
						width: max-content;
                        list-style: none;
                        padding: .25em .5em;
						font-size: .75rem;
						font-weight: 300;
						background-color: @ini_background;
                    }
					li {
						& {
							display: inline-flex;
						}
						&::after {
							content: '\203A';
							margin: 0 .5em;
							color: @ini_text;
							display: inline-block;
						}
						&.current::after, &:last-of-type::after {
							content: none !important;
						}
						&.hasicon {
							a {
								& {
									display: inline-flex;
									align: baseline;
								}
								svg {
									width: 1.1em; height: auto;
									fill: @ini_link;
								}
								span {
									width: 0; overflow: hidden;
								}
							}
						}
						a:link, a:visited {
							font-size: .86rem;
							line-height: 1em;
							text-decoration: none;
						}
						a:hover {
							text-decoration: underline;
						}
					}
					&.youarehere li::after {
						content: "\002F";
					}
                }
			}
		}
	}
}

body #main-layout main.nopageheadline h1:first-of-type {
	display: none;
}