/* general */
html, body { background-color: var(--light, var(--bg)) var(--dark, var(--black)); }

/* headings & text */
header h1 { font-family: var(--light, var(--nav-font-a)) var(--dark, var(--nav-font-b)); } 
h1,h2,h3,h4,h5,h6 { font-family: var(--display-font); width: 100%;}
h3 { color: var(--light, var(--d-blue)) var(--dark, var(--l-green)); margin-top: 0.5em; }
div#steps h3::first-letter { color: var(--light, var(--d-red)) var(--dark, var(--l-red)); }
h4 { color: var(--light, var(--m-blue)) var(--dark, var(--l-blue)); }
h4 > span { color: var(--light, var(--d-orange)) var(--dark, var(--d-orange)); }
h5 { color: var(--light, var(--blue)) var(--dark, var(--m-yellow)); }
div:not(.example) > ul > li::marker { color: var(--light, var(--d-blue)) var(--dark, var(--cyan)); }

/* navs */
#guide-nav { display: none; }
@media ( 320px <= width < 1000px) { #guide-nav { display: flex; } }
#guide-nav {
	flex: 0 1 100%;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	max-height: var(--top-nav-height);
	padding: 10px min(35px, 2%) 0;
	background-color: var(--light, var(--bg)) var(--dark, var(--code-light)); 
	border-bottom: solid 2px var(--light, var(--d-green)) var(--dark, var(--d-yellow));	
	position: -webkit-sticky;
	position: sticky;
	top: var(--top-nav-height);
	z-index: 1;
}
#guide-nav details { flex: 0 1 auto; max-width: max(45vw, 250px); }
#guide-nav summary {
	min-width: max-content;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	color: var(--code-light);
	line-height: 0;
	background-color: var(--light, var(--m-green)) var(--dark, var(--d-yellow));
	border-color: var(--light, var(--d-green)) var(--dark, var(--l-yellow));
	border-width: 2px 2px 0 2px;
	border-style: solid;
	border-radius: var(--border-radius) 3em 0 0;
	padding: 10px 20% 10px 10%;
}
#guide-nav summary:before {
	content: url("/assets/media/icons/plus-light.svg");
	width: 0.85em;
	height: 0.85em;
	margin-right: 1em;
	transition: 0.5s;
}
#guide-nav [open] summary:before { transform: rotateZ(45deg); }
#collapsible-toc {
	position: absolute;
	top: calc(100% + 2px);
	min-width: min(350px, 85vw);
	max-width: 35vw;
	border-style: solid;
	border-width: 0 2px 2px 2px;
	background-color: var(--light, var(--accent)) var(--dark, var(--bg));
	border-color: var(--light, var(--d-green)) var(--dark, var(--d-yellow));
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	box-shadow: var(--box-shadow);
}

#nav-toggle-bar { width: 0; }
#nav-slide, #nav-hide, #nav-show, #nav-jump {
	position: fixed;
	height: 3em;
	width: 3em;
	background-origin: padding-box;
	background-position: center;
	background-size: auto 1em;
	background-repeat: no-repeat;
	border-radius: 50%;
	transition: 0.3s;
	z-index: 10;
}
#nav-slide {
	margin-left: -1.5em;
	bottom: 15vh;
	background-color: var(--m-orange);
	background-image: url("/assets/media/icons/resize-width-accent.png");
	cursor: ew-resize;
}
#nav-hide {
	margin-left: -1.5em;
	bottom: 6vh;
	background-color: var(--m-red);
	background-image: url("/assets/media/icons/close-accent.png");
}
#nav-show {
	left: 5vw;
	bottom: 6vh;
	background-color: var(--d-green);
	background-image: url("/assets/media/icons/arrow-right-accent.png");
	display: none;
}
#nav-jump {
	max-width: 3em;
	right: 2vw;
	bottom: 2vh;
	background-color: var(--light, var(--d-yellow)) var(--dark, var(--l-blue));
	background-image: url("/assets/media/icons/arrow-up-dark.png");
}
#nav-toggle-bar .tooltip:not(#nav-jump) .tooltiptext { top: -75%; left: 100% }
#nav-jump .tooltiptext { top: -75%; left: unset; right: 120%; }

/* main page content */
#page-container { gap: 2em; padding-bottom: calc(2.5em + var(--top-nav-height));}
#page-container.wide {
	padding-left: clamp(5vw, 15vw,  50vw);
	padding-right:clamp(5vw, 15vw,  50vw);
}
#page-container > div {
	flex: 1 1 100%;
	min-height: max-content;
	display: flex;
	flex-flow: row wrap;
	background-color: var(--light, var(--accent)) var(--dark, var(--bg));
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	padding: 2.25em 4vmin;
}

#page-container > div { gap: 0.5em 2em;}
h2 { flex: 1 1 auto; border-bottom: 2px dashed var(--m-yellow); } 
#page-container > div:not(#steps) h2 { margin-bottom: 0.25em; }
div#steps > h4, 
div#steps > h4 + div  { 
	flex: 1 1 100%;
	margin-left: 2vmin;
	border-style: dashed;
	border-color: var(--light, var(--m-blue)) var(--dark, var(--l-blue));
}
div#steps > h4  {
	padding: 15px 0 10px 2vmin;
	border-width: 0 0 0 1px;
	margin-bottom: -0.25em;
}
div#steps > h4 + div  {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.5em;
	padding: 5px 0 30px 2vmin;
	border-width: 0 0 1px 1px;
}
div#steps > h4 + div > h5 {
	font-size: calc(var(--clamp)*0.5);
	margin-top: 0.25em;
}

div#helpful, div#requirements { min-width: min(100%,360px); }
div#requirements { flex: 1 1 0%; width: fit-content }
div#helpful { flex: 1 0 40%; }

div#general-info [open] summary:after { content: "U"; }
div#general-info summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	min-width: max-content;
	line-height: 0;
	padding: 5px 25px;
	list-style: none;
	font-family: var(--display-font);
	font-size: 1.6rem;
	color: var(--light, var(--accent)) var(--dark, var(--cream));
	background-color: var(--light, var(--m-blue)) var(--dark, var(--d-green));
	border-radius: var(--border-radius);
}
div#general-info details[open] {
	border-style: solid;
	border-width: 0px 1px 1px;
	border-color: var(--light, var(--m-blue)) var(--dark, var(--d-green));
	border-radius: var(--border-radius);
}

div#general-info [open] summary { border-radius: var(--border-radius) var(--border-radius) 0 0; }
div#general-info summary:after {
	font-family: "icon";
	font-size: 1rem;
	content: "D";
	line-height: 2;
}
.link-list li:hover { color: var(--link-hover); animation: target 0.3s linear 0s; }
div:has(h2:first-child):target > :first-child, div:has(> details:only-child):target summary, h3:target, h4:target { animation: target 0.5s linear 0s; }
div:target, h3:target, h4:target { scroll-snap-align: start; scroll-margin: calc(var(--top-nav-height) * 3)}
div#steps > *, div#additional-notes > *, div#related-resources > * { flex: 1 0 100%; }
/* tables */
table {
	border: 1px solid var(--m-yellow);
	border-radius: var(--border-radius);
}

tbody {
}

th {
	font-size: 0.95rem;
	background-color: var(--cream);
	padding: 0.25em 0.5em;
}

tr {
	overflow-x: auto;
}

tr > :nth-child(n):hover {
	background-color:aliceblue;
}

td {
	font-size: 0.85rem;
	padding: 0.75em;
}

/* example box */
.example {
	font-family: inherit;
	padding: 0.25em 1em 0.5em 1em;
	border: 2px dotted var(--border-color);
	border-radius: var(--border-radius);
	margin-top: 0.5em;
}
.example::before {
	content: "For example:";
	font-weight: 600;
	line-height: 2;
}
#page-container .example li.right,
#page-container .example li.wrong {
	padding-left: 0;
	padding-right: 0;
}
.example .right, .example .wrong {
	display: flex;
	align-content: center;
}
.example .right { color: var(--light, #4A9400) var(--dark, var(--green)); }
.example .wrong { color: var(--light, var(--d-red)) var(--dark, var(--l-red)); }
.example .right::before, .example .wrong::before { font-size: 1.1rem; margin-right: 0.75em; }
.example .right::before { content: "✔"; }
.example .wrong::before {	content: "✕"; }
.example > :not(.last) { padding: 0.25em 1.5em 0.25em 1.5em; }

/* modules */
div[class$="box"] {
	flex: 1 0 100%;
	font-family: var(--serif-font);
	color: var(--light, var(--d-grey)) var(--dark, var(--l-yellow));
}

/* info box module */
.info-box {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	padding: 1em 1.25em 1.25em;
	border-radius: var(--border-radius);
	background-color: var(--box-bg);
	border-block-start-width: 1.25em;
	border-block-start-style: solid;
	border-block-start-color: var(--light, var(--l-red)) var(--dark, var(--blue));
	margin: 1em 0 0.75em;
}
.info-box::before {
	content: url("/assets/media/icons/pin.svg");
	height: 0px;
	width: 1.25em;
	position: absolute;
	top: -2em;
	left: calc(50% - 0.625em);
	transform: rotate(-20deg)
}
.info-box p + p { margin-top: 0.5em; }

/* callout box module */
.callout-box {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	height: fit-content;
	border: 1px solid var(--light, var(--m-yellow)) var(--dark, var(--d-yellow));
	border-radius: var(--border-radius);
	margin: 1em 0;
	overflow: clip;
}
.callout-box .title:before, .callout-box .title:after {
	content: "!";
	font-family: "icon";
	font-size: 1.5rem;
}
.callout-box >  .title {
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	font-size: 1.1rem;
	color: var(--black);
	background-color: var(--light, var(--m-yellow)) var(--dark, var(--d-yellow));
	padding: 0.25em 1em;
}
.callout-box .content {
	flex: 1 0 100%;
	display: flex;
	flex-flow: column nowrap;
	gap: 0.75em;
	color: var(--light, var(--d-grey)) var(--dark, var(--cream));
	background-color: var(--light, var(--l-yellow)) var(--dark, var(--black));
	padding: 1em 1.5em 1.25em;
}
.callout-box  ol, .callout-box  ul { padding: 0 0 0 1.25em; }
.callout-box li:not(:first-child) { margin-top: 0.5em; }
.callout-box li::marker {	font-weight: 700; }
.callout-box li > :is(div,p + p) { margin-top: 0.5em; }
.callout-box li > p:first-child { font-weight: 600; }
.callout-box .example { border-color: var(--light, var(--d-orange)) var(--dark, var(--l-orange)); }

/* code block module */
details.code {
	flex: 1 0 100%;
	background-color: var(--light, var(--l-grey)) var(--dark, transparent);
	border-radius: var(--border-radius);
	border-color: var(--light, var(--m-orange)) var(--dark, var(--d-yellow));
	border-style: solid;
	border-width: 0;
	overflow: clip;
}
details.code summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--code-font);
	line-height: 1;
	color: var(--light,var(--accent)) var(--dark, var(--black));
	background-color: var(--light,var(--d-blue)) var(--dark, var(--m-orange));
	border-style: solid;
	border-color: var(--light, var(--m-blue)) var(--dark, var(--l-orange));
	border-width: 1px;
	border-radius: var(--border-radius);
	padding: 15px 25px;
	word-wrap: break-word;
}

details.code summary::after { font-family: "icon"; content: "D"; }
details.code[open] summary::after { content: "U"; }

details.code summary:hover, details.code[open] summary {
	color: var(--light, var(--black)) var(--dark, var(--d-grey));
	background: var(--light, var(--l-orange)) var(--dark, var(--m-yellow));
	border-color: var(--light, var(--m-orange)) var(--dark, var(--d-yellow));
}

details.code[open] { border-width: 0 1px 1px; }
details.code[open] summary {
	border-width: 1px 0px;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* code blocks and preformatted text */
pre {
	font-family: var(--code-font);
	line-height: 1.5;
	white-space: pre-wrap;
}
.code-block { 
	padding: 0px 10px 20px;
}
.code-block.standalone { border-radius: var(--border-radius); }
.code-block pre {
	position: relative;
	max-width: 100%;
	overflow-wrap: break-word;
	tab-size: 2;
	border-right: 1px dashed;
	padding: 20px 40px 20px 10px;
}
.code-controls {
	position: relative;
	border-bottom: 1px dashed;
	padding: 10px 5px;
	margin: 0 20px 15px;
}
.code-controls > div:first-child::before {
	position: absolute;
	left: 0;
	bottom: 10px;
	font-family: var(--code-font);
	font-size: 1rem; 
	text-transform: uppercase;
}
.code-controls  {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	align-items: center;
	-webkit-align-items: center;
	gap: 2vmin;
	z-index: 20;
}
.code-controls .tooltip {
	color: inherit;
	background-color: inherit;
	padding: 0;
	border: none;
	z-index: 99
}
.code-controls .tooltiptext { 
	top: 1.85rem; 
	right: 2rem;
	font-family: var(--code-font);
	font-size: 0.95rem;
	color: inherit;
}
.code-controls .spacer {
	height: 24px; 
	border-left: 1px dashed;
}
.code-container {
	min-height: fit-content;
	max-height: 65vh;
	padding: 0 10px; 
	scrollbar-gutter: stable both-edges;
	scroll-snap-type: y proximity;
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
}

.code-container::-webkit-scrollbar-track { background: inherit; }
.code-container::-webkit-scrollbar{ width: 12px; }
.code-container::-webkit-scrollbar-thumb { border-radius: var(--border-radius); border: 1px dashed; }
.code-container::-webkit-scrollbar-thumb { border-radius: var(--border-radius); border: 1px dashed; }

.code-block:has([class*="language-bash"]) .code-controls > div:first-child::before { content: "bash" }
.code-block:has([class*="language-css"]) .code-controls > div:first-child::before { content: "css" }
.code-block:has([class*="language-go"]) .code-controls > div:first-child::before { content: "go" }
.code-block:has([class*="language-html"]) .code-controls > div:first-child::before { content: "html" }
.code-block:has([class*="language-javascript"]) .code-controls > div:first-child::before { content: "javascript" }
.code-block:has([class*="language-json"]) .code-controls > div:first-child::before { content: "json" }
.code-block:has([class*="language-liquid"]) .code-controls > div:first-child::before { content: "liquid" }
.code-block:has([class*="language-lua"]) .code-controls > div:first-child::before { content: "lua" }
.code-block:has([class*="language-javascript"]) .code-controls > div:first-child::before { content: "javascript" }
.code-block:has([class*="language-markdown"]) .code-controls > div:first-child::before { content: "markdown" }
.code-block:has([class*="language-python"]) .code-controls > div:first-child::before { content: "python" }

.tool {
	flex: 1 1 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 2vmin;
	background-color: var(--light, var(--bg)) var(--dark, var(--black));
	border: 3px solid var(--light, var(--d-green)) var(--dark, var(--blue));
}
.tool, .tool :not(div, span, pre, code) { border-radius: var(--border-radius); }
.tool fieldset { border-color: var(--light, var(--l-yellow)) var(--dark, var(--l-blue)); }
.tool-title {
	flex: 1 1 100%;
	font-family: var(--nav-font-a);
	font-size: calc(var(--clamp)*0.55);
	font-weight: 500;
	background-color: var(--light, var(--d-green)) var(--dark, var(--blue));
	padding: 0.25em;
}
.tool form, .tool fieldset, .tool label {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}
.tool form {
	flex: 1 1 100%;
	justify-content: space-between;
	gap: 2vmin;
}
.tool label, .tool-title { font-weight: 500; color: var(--light, var(--black)) var(--dark, var(--text-color)); }
.tool legend {
	font-family: var(--nav-font-a);
	font-size: calc(var(--clamp)*0.55);
	line-height: 0;
	color: var(--light, var(--d-green)) var(--dark, var(--m-orange));
	min-width: fit-content;
	white-space: break-spaces;
	padding: 0 0.25em;
}
.tool input[type="text"], .tool [type="url"], .tool select {
	color: var(--light, var(--d-grey)) var(--dark, var(--accent));
	background-color: var(--light, var(--info-bg)) var(--dark, var(--black));
	border: solid var(--light, var(--grey)) var(--dark, var(--l-yellow));
	border-width: 1px 3px 3px 1px;
	caret-color: var(--light, var(--d-green)) var(--dark, var(--m-orange));
}
.tool input[type="text"], .tool form [type="url"] { padding: 0.5em 0.75em; }
.tool select { padding: 0.25em 0.5em; text-align: center; font-weight: 400; }
.tool input[type="submit"] {
	font-weight: 600;
	font-size: calc(var(--clamp)*0.45);
	text-transform: uppercase;
	color: var(--black);
	border: 2px solid var(--light, var(--bg)) var(--dark, var(--black));
	padding: 0.5em;
	cursor: pointer;
}
.tool input[type="submit"] {
	flex: 0 0 50%;
	background-color: var(--light, var(--blue)) var(--dark, var(--d-orange));
}
.tool input[type="submit"]:hover {
	font-weight: 700;
	background-color: var(--m-green);
	border-color: var(--cream);
	box-shadow: var(--box-shadow);
}
.tool label { gap: 0.25em 0.5em; min-width: min-content; }
.tool label > :focus {
	outline: 1px solid var(--light, var(--l-orange)) var(--dark, var(--m-green));
	border-color: var(--light, var(--l-orange)) var(--dark, var(--m-green));
}
.tool > .waiting { flex: 1 0 100%; text-align: center; padding: 0 2vmin 3vmin; }

@media ( width > 1000px) { #nav-jump { display: none; } }
@media ( width < 1000px) { #nav-jump { display: initial; } }

@keyframes target {
	0% {
		background:
		var(--light, linear-gradient(to right, var(--yellow) 15%, transparent 0))
	var(--dark, linear-gradient(to right, var(--l-yellow) 15%, transparent 0));}
	10% {
		background:
		var(--light, linear-gradient(to right, var(--yellow) 20%, transparent 0))
	var(--dark, linear-gradient(to right, var(--l-yellow) 20%, transparent 0));}
	20% {
		background:
		var(--light, linear-gradient(to right, var(--yellow) 30%, transparent 0))
	var(--dark, linear-gradient(to right, var(--l-yellow) 30%, transparent 0));}
	30% {
		background:
		var(--light, linear-gradient(to right, var(--yellow) 35%, transparent 0))
	var(--dark, linear-gradient(to right, var(--l-yellow) 35%, transparent 0));}
	40% {
		background:
		var(--light, linear-gradient(to right, var(--yellow) 45%, transparent 0))
	var(--dark, linear-gradient(to right, var(--l-yellow) 45%, transparent 0));}
	50% {
		background:
		var(--light, linear-gradient(to left, var(--yellow) 55%, transparent 0))
	var(--dark, linear-gradient(to left, var(--l-yellow) 55%, transparent 0));}
	60% {
		background:
		var(--light, linear-gradient(to left, var(--yellow) 45%, transparent 0))
	var(--dark, linear-gradient(to left, var(--l-yellow) 45%, transparent 0));}
	70% {
		background:
		var(--light, linear-gradient(to left, var(--yellow) 35%, transparent 0))
	var(--dark, linear-gradient(to left, var(--l-yellow) 35%, transparent 0));}
	80% {
		background:
		var(--light, linear-gradient(to left, var(--yellow) 30%, transparent 0))
	var(--dark, linear-gradient(to left, var(--l-yellow) 30%, transparent 0));}
	90% {
		background:
		var(--light, linear-gradient(to left, var(--yellow) 20%, transparent 0))
	var(--dark, linear-gradient(to left, var(--l-yellow) 20%, transparent 0));}
	100% {
		background:
		var(--light, linear-gradient(to left, var(--yellow) 15%, transparent 0))
	var(--dark, linear-gradient(to left, var(--l-yellow) 15%, transparent 0));}
}