/**********************************************************************
 * Variables
 */

:root {
	/* Colors */
	--ctext:#000; /* Text */
	--clink:#0160f2; /* Link text */
	--cprimary:#232c99; /* Main blue (for backgrounds) */
	--chighlight:#26b1ed; /* Highlight blue (for borders) */
	--chighlighttxt:#fffaab; /* Highlight yellow (text bg) */
	--cborder:#555f60; /* Dark border */
	--caccent:#d1d8db; /* Light accent border */ 
	--caccentbg:#eff0f1; /* Light accent background */
	--cerror:#b30002; /* Error text */
}

/* Other important things:
	- Mobile breakpoint	 <  660px
	- Desktop breakpoint >= 880px
*/


/**********************************************************************
 * Core styles
 */

html {
	background:var(--caccentbg);
	color:var(--ctext);
	scroll-behavior:smooth;
}
body {
	background:white;
	font:300 100%/1.4 "Atkinson Hyperlegible Next",sans-serif;
	margin:0;
	padding:0;
}
@media screen and (width >= 660px) {
	body {
		font-size:115%;
	}
}

/*-----------------------------------------------------------
 * Headings
 */

h1,h2,h3,h4,h5,h6 {
	margin:0.88em 0 0.5rem;
	line-height:1.1;
	font-weight:500;
}
h1 {
	margin-top:0;
	font-size:260%;
}
h2 {
	font-size:190%;
}
h3 {
	font-size:162%;
	font-weight:400;
}
h4 {
	font-size:138%;
}
h5 {
	font-size:117%;
	font-weight:400;
}
h6 {
	font-size:100%;	
}
h2+h3, h3+h4, h4+h5 {
	margin-top:0;
}

/*-----------------------------------------------------------
 * Heading groups
 */

hgroup p {
	font-size:117%;
}

/*-----------------------------------------------------------
 * Text / lists
 */

p,address,ul,ol {
	margin:0 0 1.25rem;
}
ul,ol {
	padding:0 0 0 2rem;
}
li {
	margin:0 0 0.5rem;
}
li ul, li ol {
	margin:0.5rem 0 0;
}

/*-----------------------------------------------------------
 * Links (global)
 */

a {
	color:var(--clink);
}
a:focus {
	outline:2px solid var(--chighlight);
}

/*-----------------------------------------------------------
 * Horizontal rules
 */

hr {
	border:0.1rem solid var(--caccent);
}

/*-----------------------------------------------------------
 * Images
 */

img {
	max-width:100%;
	height:auto;
}
a img {
	border:none;
}

/*-----------------------------------------------------------
 * Misc formatting
 */

strong {
	font-weight:500;
}
strong strong {
	font-weight:700;
}
mark,
code {
	background:var(--chighlighttxt);
}


/**********************************************************************
 * Header
 */

body>header {
	background:var(--cprimary);
	border-bottom:0.35rem solid var(--chighlight);
	padding:1rem max(calc(2vw + 1rem), calc(50vw - 34rem));
	color:white;
	display:flex;
	flex-flow:row wrap;
	align-items:center;
}
body>header a {
	color:inherit;
}

/*-----------------------------------------------------------
 * Logo
 */

.logo {
	text-decoration:none;
	font-size:120%;
	font-weight:300;
}
@media screen and (width >= 880px) {
	.logo {
		font-size:162%;
	}
}
.logo::before {
	content:url("/assets/uwec-wordmark-13b44e21.svg") 'University of Wisconsin-Eau Claire ';
	display:inline-block;
	vertical-align:middle;
	width:7em;
	height:2em;
	margin:0 0.75em 0 0;
	padding:0 0.5em 0 0;
	border-right:1px solid white;
	overflow:hidden;
}

/*-----------------------------------------------------------
 * Top links
 */

#top {
	flex:1 0 40%;
	text-align:right;
	font-weight:400;
}
@media screen and (width >= 880px) {
	#top {
		font-size:117%;
	}
}
#top ul {
	list-style:none;
	margin:0;
	padding:0;
}
#top li {
	display:inline-block;
}
#top li+li {
	border-left:1px solid white;
	padding-left:0.2em;
}
#top a {
	display:block;
	padding:0.25em 0.5em;
}
#top a.menu::before {
	content:'\2630';
	display:inline-block;
	margin:0 0.5rem 0 0;
}

/*-----------------------------------------------------------
 * Environment notice
 */

#env-ribbon {
	position:sticky;
	color:white;
	background:var(--cerror);
	text-align:center;
	font-size:90%;
	z-index:20;
	padding:0.25rem 0.5rem;
	margin:0;
	top:0;
}


/**********************************************************************
 * Navigation
 */

/*-----------------------------------------------------------
 * Menu
 */

#menu:not(:target) {
	display:none;
}
#menu {
	position:relative;
	padding:1.5rem max(2vw, calc(50vw - 35rem)) 0;
	/*columns:16rem;*/
	background:var(--caccentbg);
}
#menu::after {
	content:' ';
	display:block;
	flex:100%;
	/*column-span:all;*/
	margin:2rem 0 0;
	border-bottom:0.2rem solid var(--cborder);
}
#menu ul::before {
	content:attr(aria-label);
	text-transform:capitalize;
	font-weight:500;
	font-size:117%;
	display:block;
	column-span:all;
	margin:0 0 0.5em -1rem;
}
#menu ul {
	margin:0 1rem 1rem;
	break-inside:avoid;
}
#menu a[href="#top"] {
	position:absolute;
	right:max(2vw, calc(50vw - 35rem));
	top:1rem;
	font-size:162%;
	width:1em;
	height:1em;
	overflow:hidden;
}
#menu a[href="#top"]::before { /* x */
	content:'\D7';
	display:inline-block;
	vertical-align:top;
	text-align:center;
	line-height:1em;
	width:1em;
}

/* Columns */
@media screen and (width >= 660px) {
	#menu {
		display:flex;
		flex-flow:row wrap;
		justify-content:end;
	}
	#menu ul {
		flex:1;
		max-width:15rem;
	}
	#menu ul.double {
		flex:2;
		max-width:30rem;
		columns:2;
		gap:1rem;
	}
}

/*-----------------------------------------------------------
 * Breadcrumb
 */

nav.breadcrumb {
	padding:1.25rem max(2vw, calc(50vw - 35rem)) 0;
}
nav.breadcrumb ol {
	border-bottom:0.2rem solid var(--cborder);
	list-style:none;
	margin:0;
	padding:0 1rem 1.5rem;
}
nav.breadcrumb li {
	display:inline;
}
nav.breadcrumb li+li::before {
	content:'  \203a  ';
	margin:0 0.25rem;
}
nav.breadcrumb a {
	color:inherit;
}


/**********************************************************************
 * Main
 */

main {
	min-height:40rem;
	padding:1rem max(2vw, calc(50vw - 35rem));
}

/*-----------------------------------------------------------
 * Content header
 */

main>header {
	padding:1rem 1rem 0.5rem;
}
main>header form,
main>header p {
	max-width:45rem;
}

/* Header buttons (admin) */
main>header h1:has(+ .button) {
	display:inline-block;
	vertical-align:middle;
	margin-right:1rem;
}

/*-----------------------------------------------------------
 * Content columns
 */

/* Primary */
main>article {
	border-top:0.2rem solid var(--caccent);
	padding:1.5rem 1rem;
}

/* Sidebar */
.sidebar {
	border-top:0.2rem solid var(--chighlight);
	padding:1.5rem 1rem 0;
}
.sidebar h2 {
	font-weight:400;
	font-size:120%;
	margin:0 0 0.5rem;
}

/*-----------------------------------------------------------
 * Responsive flexy
 */

@media screen and (width >= 880px) {
	main {
		display:flex;
		align-content:start;
		flex-flow:row wrap;
		gap:0 3.5rem;
	}
	main>header {
		flex:100%;
	}
	main>article {
		flex:1 0 60%;
		max-width:45rem;
	}
	.sidebar {
		box-sizing:border-box;
		min-width:15rem;
		flex:0 1 27%;
		order:2;
	}

	/* Sticky TOC */
	.sidebar.sticky {
		position:sticky;
		max-height:calc(100vh - 2rem);
		overflow:auto;
		top:1rem;
	}
	/* Gradient to signal content scrolls */
	.sidebar.sticky::after {
		content:' ';
		display:block;
		position:sticky;
		background-image:linear-gradient(to top, white, rgba(255,255,255,0));
		height:1.5rem;
		bottom:0;
		right:0;
		left:0;
	}
}

/*-----------------------------------------------------------
 * Target highlighting
 */

main :target {
	animation:0.25s ease-in-out 0.5s 4 alternate highlight;
}
@keyframes highlight {
	from {
		background-color:transparent;
	}
	to {
		background-color:var(--chighlighttxt);
	}
}


/**********************************************************************
 * Footer
 */

body>footer {
	padding:2rem max(calc(2vw + 1rem), calc(50vw - 34rem));
	background:var(--caccentbg);
}
body>footer address {
	font-weight:500;
	font-style:normal;
	margin:0 0 0.5rem;
}
body>footer ul {
	list-style:none;
	margin-top:2rem;
	padding:0;
}
body>footer li {
	display:inline;
}
body>footer li+li::before {
	content:'  |  ';
	margin:0 0.25rem;
}


/**********************************************************************
 * Content blocks
 */

/*-----------------------------------------------------------
 * Article base styles
 */

article {

}
article h2:first-child {
	margin-top:0;
}
article>hr {
	margin:1.5rem -1rem;
}

/*-----------------------------------------------------------
 * Generic grid
 */

@media screen and (width >= 880px) {
	.grid {
		display:flex;
		flex-flow:row wrap;
		gap:1.5rem;
	}
	.grid>* {
		flex:100%;
	}
	.half {
		flex:1 0 40%;
	}
	.third {
		flex:1 0 30%;
	}
	.quarter {
		flex:1 0 20%;
	}
}

/*-----------------------------------------------------------
 * Links list
 */

.links {
	padding:0 0 0 1.25rem;
}
.links li::marker {
	content:'\2013  ';
}
.links .h3 {
	margin-left:1.5rem;
}
.links .h4 {
	margin-left:3rem;
}
.links .h5 {
	margin-left:4.5rem;
}
.links .h6 {
	margin-left:6rem;
}


/**********************************************************************
 * Specialty links
 */

/*-----------------------------------------------------------
 * Skip links
 */

a.skip {
	position:fixed;
	padding:0.25rem 0.5rem;
	background:var(--clink);
	color:white;
	z-index:21;
	left:2vw;
	top:0;
}
a.skip:not(:focus):not(:active) {
	clip-path:inset(50%);
}

/*-----------------------------------------------------------
 * External links (add icon w/ alt text)
 */

@media screen {
	a[target="_blank"]::after{
		content:'  (this link opens in a new window)';
		vertical-align:middle;
		display:inline-block;
		overflow:hidden;
		text-indent:1rem;
		opacity:0.75;
		margin:0 0 0 0.1rem;
		height:0.9rem;
		width:1rem;
		background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3Epolyline%7Bfill:none;stroke:%230160f2;stroke-width:8;stroke-linejoin:round%7D%3C/style%3E%3Cpolyline points='65,15 15,15 15,85 85,85 85,35' /%3E%3Cpolyline points='70,5 95,5 95,30' /%3E%3Cpolyline points='95,5 55,45' /%3E%3C/svg%3E");
		background-size:100% 100%;
	}
}

/*-----------------------------------------------------------
 * Anchor links (indended to display beside headings)
 */

@media screen {
	:is(h1,h2,h3,h4,h5,h6):has(+a.anchor) {
		display:inline-block;
		margin-right:0.1em;
	}
	a.anchor {
		display:inline-block;
		vertical-align:text-bottom;
		width:2em;
		height:2em;
		text-indent:2em;
		white-space:nowrap;
		overflow:hidden;
		background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M35,65 L65,35 M25,40 l-5,5 a1,1 0 0,0 35,35 l5,-5 M40,25 l5,-5 a1,1 0 0,1 35,35 l-5,5' fill='none' stroke='%23555f60' stroke-width='8' /%3E%3C/svg%3E") no-repeat center center;
		background-size:80%;
	}
	h4+a.anchor {
		width:1.75em;
		height:1.75em;
	}
	:is(h5,h6)+a.anchor {
		width:1.5em;
		height:1.5em;
	}
}
@media print {
	a.anchor {
		display:none;
	}
}

/*-----------------------------------------------------------
 * Back to Contents
 */

.back-toc a::before {
	content:'\25b2';
	display:inline-block;
	margin-right:0.2rem;
}
@media screen and (width < 880px) {
	.back-toc {
		background:linear-gradient(to top, white 80%, rgba(255,255,255,0.95));
		border-top:0.1rem solid var(--caccent);
		padding:0.5rem 0 1rem;
		position:sticky;
		bottom:0;
	}
}
@media screen and (width >= 880px) {
	/* Visually hide it */
	.back-toc a:not(:focus):not(:active) {
		position:absolute;
		clip-path:inset(50%);
	}
}

/*-----------------------------------------------------------
 * Help links
 */

a.help {
	font-size:90%;
	font-weight:400;
	color:transparent;
	display:inline-block;
}
a.help::before {
	content:'?  ';
	display:inline-block;
	box-sizing:border-box;
	margin:0 0.25rem 0 0;
	border:0.1rem solid currentColor;
	border-radius:100%;
	width:1.25em;
	height:1.25em;
	text-align:center;
	font-weight:500;
	font-size:117%;
	line-height:1.1em;
	color:var(--clink);
}
a.help:hover,
a.help:active,
a.help:focus {
	color:var(--clink);
}


/**********************************************************************
 * Admin management
 */

.manage {
	max-width:none;
	display:grid;
	grid-template-areas:
		'aa aa ss ss ss ss'
		'l1 l2 l3 l4 l5 l6'
		'ft ft ft ft ft ft';
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
	gap:1rem 1.5rem;
}
.manage nav {
	grid-area:aa;
}
.manage search {
	grid-area:ss;
	margin:0;
}
.manage>turbo-frame,
.manage>table,
.manage>section {
	grid-area:l1 / l1 / l1 / l6;
}
.manage>footer {
	grid-area:ft;
}

/* No search present */
.manage nav:has(+ :not(search)) {
	grid-area:aa / aa / aa / ss;
}

/* Columns */
.manage>.half {
	grid-area:l1 / l1 / l1 / l3;
}
.manage>.half+.half {
	grid-area:l4 / l4 / l4 / l6;
}

/* Header buttons (admin) */
.manage h2:has(+ .button) {
	display:inline-block;
	vertical-align:middle;
	margin-right:1rem;
}

/*-----------------------------------------------------------
 * Pagy pagination
 */
.pagy {
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	gap:0.25rem;
}
.pagy a {
	padding:0.5rem;
	min-width:1.5rem;
	text-align:center;
	font-weight:400;
}

/* Dead links */
.pagy a:not([href]) {
	color:inherit;
	opacity:0.8;
}

/* Current link */
.pagy a.current {
	font-weight:500;
}

/* Next / previous links */
.pagy a[aria-label="Previous"],
.pagy a[aria-label="Next"] {
	white-space:nowrap;
	overflow:hidden;
	width:1.5rem;
}
.pagy a[aria-label="Previous"]::before,
.pagy a[aria-label="Next"]::before {
	display:inline-block;
	font-size:138%;
	width:1.5rem;
	margin-right:0.5rem;
	text-align:center;
	line-height:0;
}
.pagy a[aria-label="Previous"]::before {
	content:'\2039';
}
.pagy a[aria-label="Next"]::before {
	content:'\203A';
}

/*-----------------------------------------------------------
 * Tree view
 */

.tree ul {
	border-left:0.1rem solid var(--caccent);
	padding:0 0 0 2.5rem;
	margin-left:1rem;
}
.tree li {
	padding:0.75rem 0 0;
}
.tree li::marker {
	content:'\2014\2014  ';
	color:var(--caccent);
}

/*-----------------------------------------------------------
 * Tables
 */

table {
	border-collapse:collapse;
	margin:0.5rem 0 1rem;
	width:100%;
}
thead {
	background:var(--cprimary);
	color:#fff;
}
thead a {
	color:inherit;
}
th, td {
	padding:0.5rem 0.75rem;
}
tbody tr:nth-child(even) {
	background:color-mix(in srgb, var(--caccentbg) 50%, white);
}


/**********************************************************************
 * Search
 */

/*-----------------------------------------------------------
 * Form
 */

search {
	margin:0 0 1rem;
}
search form {
	display:flex;
	align-items:center;
	gap:0.5rem;
}
search label:not(:first-child) {
	margin-left:0.5rem;
}
search select {
	font-size:117%;
	width:auto;
	max-width:25rem;
}
search input[type="search"] {
	font-size:117%;
	width:auto;
	flex:1;
}

/*-----------------------------------------------------------
 * Results
 */

.results {
	border-top:0.2rem solid var(--chighlight);
}
.results ol {
	list-style:none;
	margin:0 -1rem 1.25rem;
	padding:0;
}
.results li {
	border-top:0.2rem solid var(--caccent);
	padding:1.25rem 1rem;
}
.results ol a:first-child {
	font-weight:500;
}
.results li p:last-child {
	margin:0;
}


/**********************************************************************
 * Dialogs
 */

dialog {
	box-sizing:border-box;
	border:0.2rem solid var(--cborder);
	width:min(50rem, 90%);
	padding:min(4vw, 2rem);
}
dialog header {
	border-bottom:0.2rem solid var(--caccent);
	margin:0 0 1rem;
}
dialog h2:first-child {
	margin-top:0;
}
dialog button.close {
	background:transparent;
	color:inherit;
	position:absolute;
	overflow:hidden;
	height:3rem;
	width:3rem;
	padding:0;
	margin:0;
	right:1rem;
	top:1rem;
}
dialog button.close::before {
	content:'\D7';
	display:block;
	font-weight:200;
	font-size:3rem;
	height:3rem;
}


/**********************************************************************
 * Flash messages
 */

.flash {
	margin:auto;
}
.flash p {
	background:color-mix(in srgb, var(--chighlight) 10%, white);
	padding:1rem 1.5rem;
	border:0.1rem solid var(--chighlight);
	color:var(--cprimary);
	font-weight:400;
}
.flash.alert p {
	background:color-mix(in srgb, var(--cerror) 10%, white);
	border-color:var(--cerror);
	color:var(--cerror);
}


/**********************************************************************
 * Forms
 */

main>form {
	border-top:0.2rem solid var(--caccent);
	padding:1.25rem 1rem;
}
@media screen and (width >= 880px) {
	main>form {
		flex:1 0 60%;
	}
}

/* Reduce redundant borders */
main>form:has(input[type="hidden"]+fieldset) {
	border-top:none;
	padding-top:0;
}


/*-----------------------------------------------------------
 * Fieldset
 */

fieldset {
	border:none;
	border-top:0.1rem solid var(--chighlight);
	margin:0 -1rem 1.5rem;
	padding:1rem;
}
legend {
	font-size:138%;
	font-weight:400;
	padding:0 0.25rem;
	margin-left:-0.25rem;
}

/*-----------------------------------------------------------
 * Field layout
 */

ol.fields {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	gap:1.5rem;
	list-style:none;
	margin:0;
	padding:0;
}
ol.fields>li {
	flex:100%;
	margin:0;
}

/*-----------------------------------------------------------
 * Labels
 */

label {
	font-weight:400;
}
ol.fields label:first-child {
	display:inline-block;
	margin:0 0 0.25rem;
}

/*-----------------------------------------------------------
 * Columns (responsive)
 */

@media screen and (width >= 880px) {
	ol.fields>li.half {
		flex:1 0 40%;
	}
	ol.fields>li.third {
		flex:1 0 30%;
	}
}

/*-----------------------------------------------------------
 * Required
 */

ol.fields li.req label::after {
	content:'*Required';
	font-size:90%;
	color:var(--cerror);
	margin:0 0 0 0.5rem;
}

/*-----------------------------------------------------------
 * Field notes
 */

ol.fields small {
	display:block;
	margin:0.25rem 0 0;
	font-size:90%;
}

/*-----------------------------------------------------------
 * Embedded fieldsets (e.g. for checkbox / radio sets)
 */

ol.fields fieldset {
	border:none;
	margin:0;
	padding:0;
}
ol.fields legend {
	font-weight:400;
	font-size:100%;
	margin:0 0 0.25rem;
	padding:0;
}

/*-----------------------------------------------------------
 * Checkbox set
 */

ul.checks {
	list-style:none;
	margin:0.75rem 0 0;
	padding:0;
	columns:12rem;
	gap:1.5rem;
}
ul.checks li {
	break-inside:avoid;
}
ul.checks small { /* Extra notes or tips */
	font-size:90%;
	display:block;
}
ul.checks.wide { /* Wider columns */
	columns:24rem;
}

/*-----------------------------------------------------------
 * Sticky buttons
 */

footer.buttons {
	position:sticky;
	z-index:2;
	bottom:0;
	background:linear-gradient(to top, white 80%, rgba(255,255,255,0.95));
	border-top:0.1rem solid var(--caccent);
	margin:1.5rem -1rem 0;
	padding:0.75rem;
	display:flex;
	justify-content:center;
	gap:1rem;
}

/*-----------------------------------------------------------
 * Field inputs
 */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="number"],
select,
textarea {
	box-sizing:border-box;
	border:0.1rem solid var(--caccent);
	background-color:white;
	font:inherit;
	display:block;
	width:100%;
	padding:0.5rem;
}
textarea {
	min-height:3rem;
}

input:focus,
select:focus,
textarea:focus {
	outline:2px solid var(--chighlight);
}

/* Kill Safari styles on search inputs */
input[type="search"] {
	-webkit-appearance:none;
}
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance:none;
}

/*-----------------------------------------------------------
 * Buttons
 */

.button,
button {
	display:inline-block;
	margin:0.25rem 0;
	padding:0.5rem 1.5rem;
	border:none;
	text-align:center;
	font-size:117%;
	background:var(--clink);
	color:white;
	cursor:pointer;
	line-height:2rem;
	text-decoration:none;
}
.button::-moz-focus-inner,
button::-moz-focus-inner {
	border:none;
	padding:0;
}

button:focus,
.button:focus {
	outline:2px solid var(--chighlight);
}
button:hover,
.button:hover {
	opacity:0.9;
}

.button.alt,
.button.back,
button.alt,
button.back {
	background-color:var(--cborder);
}

.button.back::before,
button.back::before {
	content:'\2039  ';
	font-size:138%;
	line-height:0;
}

/*-----------------------------------------------------------
 * Errors
 */

.field_with_errors {
	display:inline;
}
.field_with_errors select,
.field_with_errors input,
.field_with_errors textarea {
	outline:0.1rem solid var(--cerror);
}

.errors {
	background:color-mix(in srgb, var(--cerror) 10%, white);
	border:0.1rem solid var(--cerror);
	color:var(--cerror);
	padding:1rem 1.5rem;
	margin:0 0 1.25rem;
}
.errors p,
.errors ul {
	margin:0 0 0.5rem;
}


/**********************************************************************
 * Print (global)
 */

@media print {
	html,
	body {
		background:none;
	}
	body>header,
	body>footer,
	.sidebar,
	.back-toc {
		display:none;
	}
	main {
		display:block;
		min-height:none;
		padding:0;
	}
	a {
		color:inherit;
	}
	main a::after {
		content:' (' attr(href) ')';
		font-size:90%;
	}
}


/**********************************************************************
 * Miscellaneous
 */

/*-----------------------------------------------------------
 * Special: Images grid [TODO: Where is this used?]
 */

.image-grid {
	display:grid;
	grid-gap:1rem;
	grid-template-columns:repeat(auto-fill, minmax(15rem,1fr));
}
.image-grid input {
	position:absolute;
	z-index:-1;
}
.image-grid img {
	width:100%;
}
.image-grid input:checked+label {
	outline:0.1rem solid var(--caccent);
	opacity:0.9;
}