/* layout */
body {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

body > main {
	flex: 1 1 100%;
}

/* header/footer navigation */
body > header > nav {
	flex-wrap: wrap;
}
body > footer > nav {
	justify-content: center;
}
	body > header > nav > ul,
	body > footer > nav > ul {
		text-align: center;
		flex-wrap: wrap;
	}
	body > footer > nav > ul {
		justify-content: center;
	}

@media (max-width: 768px) {
    body > header > nav > ul,
    body > header > nav > ul:last-of-type > li {
        flex-grow: 1;
    }
    body > header > nav > ul:first-of-type {
        justify-content: center;
    }
    body > header > nav > ul:last-of-type > li > details.dropdown > summary + ul {
        position: initial;
    }
}

nav details.dropdown[open] > summary::before {
  pointer-events: none;
}

/* header */
body > header > h1 {
	text-align: center;
}
body > header > h1 > img {
	max-height: 200px;
}

/* icon button */
button.icon-button svg {
	display: block;
    fill: none;
	height: 1rem;
    stroke: currentColor;
	width: 1rem;
}

/* link button */
button.link-button {
	background: none;
	border: none;
	padding: 0;
	margin: 0;

	color: var(--pico-primary);
	text-decoration: underline;

	font: inherit;
	cursor: pointer;
}
    button.link-button:hover {
        text-decoration: none;
    }
    button.link-button:focus-visible {
        outline: 2px solid var(--pico-primary);
        outline-offset: 2px;
    }

/* tables */
table.hoverable tr:hover td {
    background-color: var(--pico-table-row-stripped-background-color);
}

/* text utilities */
.text-capitalize {
    text-transform: capitalize;
}

.text-error {
    color: var(--pico-del-color);
}

.text-success {
    color: var(--pico-ins-color);
}

/* screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* pico override */
[hidden] {
    display: none !important;
}