/* infolato */
/* Copyright 2025 Sebastian Zhang */

/* GLOBAL SETTINGS */
/* Variables */
:root {
	--primary-color: #0b0f14;
	--background-color: #FFFFFF;
	--accent-color: #7b60db;
	--medium-accent-color: #ada7c4;
	--light-accent-color: #d8d3ed;
	--lighter-accent-color: #f3f0ff;
	--alert-color: #FF0000;

	--yellow-color: #FFD000;
	--blue-color: #00D5FF;
	--pink-color: #FF00E1;
	--purple-color: #A106FB;
	--red-color: #f06359;
	--green-color: #42ff75;
	
	--link-color: var(--accent-color);
	--link-visited-color: var(--pink-color);
	--link-hover-color: #6b51c9;
	--link-visited-hover-color: #e302c9;
	
	--font-size-default: calc(16px + .2vw);
	--font-size-small: calc(12px + .2vw);
	--font-size-fallback: 16px;
	--font-size-small-fallback: 12px;
	--font-size-large: calc(22px + .2vw);
	--font-size-large-fallback: 22px

	--font-size-mono: calc(12px + .2vw);
	--font-size-mono-fallback: 12px;

	--default-font: barlow, sans-serif;
	--mono-font: jetbrains-mono, monospace;
	
	--default-width: 90%;
	--infobox-width: 95%;
	--index-width: 60%;
	--logo-width: 20%;
	
	--pagefind-ui-scale: 1;
	--pagefind-ui-primary: var(--accent-color);
	--pagefind-ui-text: var(--primary-color);
	--pagefind-ui-background: var(--background-color);
	--pagefind-ui-border: var(--light-accent-color);
	--pagefind-ui-tag: #eeeeee;
	--pagefind-ui-border-width: 2px;
	--pagefind-ui-border-radius: 8px;
	--pagefind-ui-image-border-radius: 8px;
	--pagefind-ui-image-box-ratio: 3 / 2;
	--pagefind-ui-font: barlow, sans-serif;
}

[data-theme="light"] {
	--primary-color: #0b0f14;
	--background-color: #FFFFFF;
	--accent-color: #7b60db;
	--medium-accent-color: #ada7c4;
	--light-accent-color: #d8d3ed;
	--lighter-accent-color: #f3f0ff;
	--alert-color: #FF0000;
	
	--yellow-color: #FFD000;
	--blue-color: #00D5FF;
	--pink-color: #FF00E1;
	--purple-color: #A106FB;
	--red-color: #f06359;
	--green-color: #42ff75;
	
	--link-color: var(--accent-color);
	--link-visited-color: var(--pink-color);
	--link-hover-color: #6b51c9;
	--link-visited-hover-color: #e302c9;
}


[data-theme="dark"] {
	--primary-color: #eaecf0;
	--background-color: #1b1b1b;
	--accent-color: #7b60db;
	--medium-accent-color: #ada7c4;
	--light-accent-color: #424242;
	--lighter-accent-color: #262626;
	--alert-color: #FF0000;
	
	--yellow-color: #FFD000;
	--blue-color: #00D5FF;
	--pink-color: #FF00E1;
	--purple-color: #A106FB;
	--red-color: #8a221a;
	--green-color: #1a913a;
	
	--link-color: var(--accent-color);
	--link-visited-color: var(--pink-color);
	--link-hover-color: #987ff0;
	--link-visited-hover-color: #fc6deb;
		
}

/* Default Font */
body {
	font-family: var(--default-font);
	background-color: var(--background-color);
	color: var(--primary-color);
}

/* Text Highlighting - Webkit/Blink Browsers Only */
::selection {
	background: var(--light-accent-color); 
}

/* Text Modifiers */
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
.light {
	font-weight: 300;
}
.invert {
	color: var(--background-color); 
	background-color: var(--primary-color); 
	padding: 4px;
}
.invert::selection {
	background: var(--accent-color);
}
.mark {
	background-color: var(--lighter-accent-color);
}
mark {
  	background-color: var(--lighter-accent-color) !important;
	font-weight: bold !important;
	color: var(--accent-color) !important;	

}
.color-accent {
	color: var(--accent-color);
}
.color-medium-accent {
	color: var(--medium-accent-color);
}
.color-light-accent {
	color: var(--light-accent-color);
}
.indent {
	margin-left: 4vw;
}

/* Font Loading */
@font-face {
	font-family: barlow;
	src: url(assets/fonts/Barlow/Barlow-Regular.woff2);
}
@font-face {
	font-family: barlow;
	src: url(/assets/fonts/Barlow/Barlow-Italic.woff2);
	font-style: italic;
}
@font-face {
	font-family: barlow;
	src: url(assets/fonts/Barlow/Barlow-Bold.woff2);
	font-weight: bold;
}
@font-face {
	font-family: barlow;
	src: url(/assets/fonts/Barlow/Barlow-BoldItalic.woff2);
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: barlow;
	src: url(/assets/fonts/Barlow/Barlow-Light.woff2);
	font-weight: 300;
}
@font-face {
	font-family: barlow;
	src: url(/assets/fonts/Barlow/Barlow-LightItalic.woff2);
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: jetbrains-mono;
	src: url(/assets/fonts/JetBrains-Mono/JetBrainsMono-Regular.woff2);
}

/* Links */
a {
	text-decoration: none;
	color: var(--link-color);
}
a:visited {
	color: var(--link-visited-color);

}
a:visited:hover {
	color: var(--link-visited-hover-color);

}
a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	color: var(--link-hover-color);


}


/* Lists */


/* iframes - Used for YouTube Embedded Content */
.youtube {
	border: none;
	height: 65vh;
	width: 110vh;
	resize: both;
	margin: 0 auto;
}

/* video */
video {
	height: 65vh;
	width: 110vh;
}

/* Paragraphs */
p {
	line-height: 1.5;
}

hr {
	color: var(--light-accent-color);
	background-color: var(--light-accent-color);
	border-width: 0px;  
	border-style: solid;
	height:2px;
	margin-bottom: 20px;
}

svg {
 @font-face {
      font-family: "barlow";
      src:
		url("/assets/fonts/Barlow/Barlow-Regular.woff2")
          format("woff2"),
        url("/assets/fonts/Barlow/Barlow-Bold.woff2")
          format("woff2");
    }
}

/* Headers */

h1 {
	margin-top: 0.67em;
	font-weight: 200;
}

h2 {
	margin-top: 0.67em;
	font-weight: 300;
}

h3 {
	margin-top: 0.67em;
	font-weight: bold;
}

/* LOCAL SETTINGS */
/* Header */
.header {
	padding: 40px 0 0 0;
	display: block;
	width: var(--default-width);
	margin: auto;
	
	font-size: var(--font-size-small-fallback);
	font-size: var(--font-size-small-default);

	animation-name: fade-in;
	animation-duration: 1s;
	text-align: center;

}
.logo {
	display: block;
	margin: auto;
	width: var(--logo-width);
	height: 10%;

	fill: var(--primary-color);
	transition: .5s;
}
.logo:hover {
	fill: var(--accent-color);
}
.navlogo {
	display: block;
	margin: auto;
	width: 100%;
	height: 100%;

	fill: var(--primary-color);
	transition: .5s;
}
/* navbar on non-index pages */

.navbar {
	padding: 20px 0 0 0;
	display: block;
	display: flex;
	justify-content: center;
	align-items: center;
}


.navbar-search {
	width: var(--default-width);

}

.logo-image-container {
	text-align: center;
}

.blockquote {
	padding: 0 50px 0 50px;
	font-size: var(--font-size-large-fallback);
	font-size: var(--font-size-large);
	font-weight: 200;
}

/* Search */
.search {
	display: block;
	margin: auto;
	width: var(--default-width);
	padding: 20px 0 10px 0;
	text-align: center;

	font-size: var(--font-size-fallback);
	font-size: var(--font-size-default);

}

input {
	width: 100%;
	padding: 10px;
	font-size: var(--font-size-fallback);
	font-size: var(--font-size-default);
	font-family: var(--default-font);
	box-sizing: border-box;
	border: 2px solid var(--light-accent-color);
	transition: .5s;
	background-image: url('media/search.svg');
	background-position: 12px 13px;
	background-repeat: no-repeat;
	padding-left: 40px;
}
input::placeholder{
	color: var(--medium-accent-color); 
}
input:focus{
	outline: none;
	background-color: var(--lighter-accent-color);
}

/* Navigation */
.navigation {
	display: block;
	margin: auto;
	width: var(--default-width);
	padding: 0 0 0 0;
	text-align: center;
	
	font-size: var(--font-size-fallback);
	font-size: var(--font-size-default);
}

/* Content */
.content-index {
	display: block;
	width: var(--index-width);
	margin: auto;
	
	font-size: var(--font-size-fallback);
	font-size: var(--font-size-default);

	animation-name: fade-in;
	animation-duration: 1s;
	
}

.content {
	display: block;
	width: var(--default-width);
	margin: auto;
	
	font-size: var(--font-size-fallback);
	font-size: var(--font-size-default);

	animation-name: fade-in;
	animation-duration: 1s;
	padding-top: 50px
}


/* file download button */
.download-button {
	border: 2px solid var(--light-accent-color);
	line-height: 1.5;
    padding: 10px 20px;
	text-align: center;
	width: auto;
		
	font-size: var(--font-size-small-fallback);
	font-size: var(--font-size-small-default);
	
	font-family: var(--default-font);
	
	color: var(--primary-color);
	background-color: var(--background-color);
	transition: .5s;
}	
.download-button:hover {
	background-color: var(--lighter-accent-color);
	cursor: pointer;
}

/* Navigation marker on top */
.directory {
	color: var(--accent-color);
	display: block;
	margin: auto;
	width: var(--default-width);
	padding: 25px 0 0 0;

	font-size: var(--font-size-small-fallback);
	font-size: var(--font-size-small-default);

	animation-name: fade-in;
	animation-duration: 1s;
}

.directory-p {
	background-color: var(--lighter-accent-color);
	padding: 2px 10px 2px 10px;
}

.directory-p-right {
	background-color: var(--lighter-accent-color);
	padding: 2px 10px 2px 10px;
	float:right;
}

/* Infobox */

.infobox-wrapper {
	width: var(--infobox-width);
	
}

.infobox {
	float: right;
	font-size: var(--font-size-small-fallback);
	font-size: var(--font-size-small-default);


}

.infobox-table {
	background-color: var(--lighter-accent-color);
	border-collapse: collapse;
	text-align: left;
	margin: 0 10px  0 0 ;
}


.infobox-table-header {
	background-color: var(--light-accent-color);
	text-align: center;
	padding: 4px;
	border:6px solid var(--lighter-accent-color);
	vertical-align: top;

}
.infobox-left-header {
	font-weight: bold;
}
.infobox-table-cell {
	padding: 7px;
	vertical-align: top;
}

/* Competition History Table */
.competition-table {
	width: 100%;
	text-align: left;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	overflow-x: hidden;
	width: 100%
	
}
.competition-table-div {
	overflow-x: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
.competition-table-div::-webkit-scrollbar {
	display: none;
}
.competition-table-cell {
	border: 2px solid var(--light-accent-color);
	padding: 5px;

}
.competition-table-cell-win {
		border: 2px solid var(--light-accent-color);
	background-color: var(--green-color);
}
.competition-table-cell-loss {
		border: 2px solid var(--light-accent-color);
	background-color: var(--red-color);
}

.competition-table-cell-tie {
		border: 2px solid var(--light-accent-color);
}
.competition-table-cell-grad {
	background-color: var(--primary-color);
	color: var(--background-color);
	font-style: italic;
	text-align: center;
}

/* index table */

.index-table {
	width: 100%;
	text-align: left;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	overflow-x: hidden;
	
}

.index-table-div {
	width: 100%;
	overflow-x: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
.index-table-div::-webkit-scrollbar {
	display: none;
}
.index-table-cell {
	border: 2px solid var(--light-accent-color);
	padding: 5px;
}

table.index-table th {
	padding: 0px;
	width: 25%;
}

table.index-table th span {
   float:right;
   cursor: pointer;
}

table.index-table th[aria-sort="descending"] span::after {
  background-image: url("/assets/media/sort-desc.svg");
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: contain;
  content: "";
  width: 16px;
  height: 16px;
  color: current;
  font-size: 100%;
  top: 0;
  cursor: pointer;
    display: inline-block;

}

table.index-table th[aria-sort="ascending"] span::after {
  background-image: url("/assets/media/sort-asc.svg");
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: contain;
  content: "";
  width: 16px;
  height: 16px;
  color: current;
  font-size: 100%;
  top: 0;
  cursor: pointer;
    display: inline-block;

}

table.index-table th:not([aria-sort]) button:focus span::after,
table.index-table th:not([aria-sort]) button:hover span::after {
  background-image: url("/assets/media/sort-hover.svg");
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: contain;
  content: "";
  width: 16px;
  height: 16px;
  color: current;
  font-size: 100%;
  top: 0;
  cursor: pointer;
  display: inline-block;
}


.index-table-header-button {
	background-color: var(--background-color);
	border: none;
	font-family: var(--default-font);
	font-size: var(--font-size);
	padding: 5px;
	margin: 0px;
	width: 100%;
	font-weight: bold;
	text-align: left;
	color: var(--primary-color);
}

.index-table-header-button:hover, .index-table-header-button:focus {
	background-color: var(--lighter-accent-color);
	  cursor: pointer;

}

/* Pagefind config */
.pagefind-ui__result-thumb {
	display: none;
}

.pagefind-ui__result-inner {
	margin-top: 0px !important;
}

.pagefind-ui__result {
	padding: 10px !important;
}

.pagefind-ui__search-input {
	font-weight: normal !important;
}

.pagefind-ui__search-input::placeholder {
	color: var(--light-accent-color) !important;
	opacity: 1 !important;
}

.pagefind-ui__form::before {
	background-color: var(--light-accent-color) !important;
	opacity: 1 !important;
}

.pagefind-ui__search-clear {
	background-image: url("/assets/media/cancel.svg") !important;
	background-repeat: no-repeat, repeat;
	background-position: center; /* Center the image */
	font-size: 0px !important;
	right: 20px !important;
}

.pagefind-ui__button {
	margin-bottom: 10px !important;
}

/* hub index columns */

.hub-index-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 20px;
}

.hub-index-component {
	margin-top: -20px;
}

/* image grid */
.image-flex-container {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 20px;
}
.image-flex {

}


/* Sticky Notes */
.sticky-yellow {
	background-color: var(--yellow-color); 
	padding: 20px;
}
.sticky-blue {
	background-color: var(--blue-color); 
	padding: 20px;
}
.sticky-pink {
	background-color: var(--pink-color); 
	padding: 20px;
}
.sticky-purple {
	background-color: var(--purple-color); 
	padding: 20px;
}
.sticky-black {
	background-color: var(--primary-color); 
	color: var(--background-color);
	padding: 20px;
}

/* Outline */
.outline {
	border-style: solid;
	border-color: var(--primary-color);
	border-width: 2px;
	padding: 20px;
	line-height: 1.5;
}

/* use when you end an outlined box with something that isn't a <p>*/
.outlinenob {
	border-style: solid;
	border-color: var(--primary-color);
	border-width: 2px;
	padding: 20px 20px 5px 20px;
	line-height: 1.5;
}

/* Lists */
ul {
	padding: 0px 0px 0px 20px;
	list-style-type: disc;
	line-height: 1.5;
}

/* Code Blocks */
.code-block {
	font-family: var(--mono-font);
	font-size: var(--font-size-mono-fallback);
	font-size: var(--font-size-mono);
	background-color: var(--lighter-accent-color);
	padding: 20px;
}
.code-block::selection {
	background-color: var(--medium-accent-color);
}


/* Footer */
.footer {
	color: var(--medium-accent-color);
	display: block;
	width: var(--default-width);
	margin: auto;
	
	font-size: var(--font-size-small-fallback);
	font-size: var(--font-size-small-default);

	animation-name: fade-in;
	animation-duration: 1s;
	padding: 25px 0 25px 0;
	text-align: left;
}

/* temporary fix to make font size smaller, not sure why it doesn't work, something wrong with calc()*/
.footer-paragraph {
	font-size: var(--font-size-small-fallback);

}

/* theme button switcher (dark and light mode) */
.theme-button {
	background-color: var(--background-color);
	color: var(--link-color);
	font-family: var(--default-font);
	font-size: var(--font-size-small-fallback);
	border: none;
	cursor: pointer;
	width: 20px;
}
.theme-button:hover {
	color: var(--link-hover-color);

}
.theme-button-icon {
		width: 20px;
		height: 30px;
}

.theme-button-icon path  {
	fill: var(--light-accent-color);
	  transition: all ease 0.2s;
}


.theme-button-icon:hover path  {
	fill: var(--primary-color);
	
}

/* 404 and 403 Errors */

.page-error {
	padding: 10px;
	margin: auto;
	width: 50%;
	text-align: center;
	border-radius: 5px;
	
	color: var(--background-color);
	background-color: var(--primary-color);
}
.page-error::selection {
	background-color: var(--accent-color);
}


/* Development Warning */
.warning {
	position: fixed;
	top: 0;
	left: 0;
	height: auto;
	width: 100%;
	padding: 10px 0 10px 0;
	
	line-height: 1.5;
	text-align: center;
	
	color: var(--background-color);
	background-color: var(--alert-color);
}
.warning::selection {
	background-color: var(--primary-color);
}

/* Redirects */
.redirect {
	text-align: center;
	padding: 40px;
}

/* prevent glyph score images from overlapping with infobox */
.glyph-score-rhythm {
	width: 67%;
}

/* article image - responsivity on images in articles*/
.article-image {
	width: 50%;
}

/* RESPONSITIVITY */
/* Smartphones */
@media only screen 
and (any-hover: none) {
	.youtube {
		height: 22.5vh;
		width: 100%
	}
	video {
		height: 22.5vh;
		width: 100%
	}
	.logo {
		width: 85%;
	}
	.navigation {
		width: 90%;
	}
	.content {
		width: 90%;
		padding-top: 0px;
	}
	.download-button {
		width: 100%;
	}
	.screenshot {
		width: 100%;
	}
	.infobox {
		float: none;
		margin: 0 auto;
		padding: 0 20px 0 20px;
		width: 100%;
	}
	.infobox-table {
		width: 87%;

	}	
	.infobox-wrapper {
		width: 100%;
		display: inline-block;
		text-align: center;
	}
	.glyph-score-rhythm {
	width: 100%;
	}	
	.article-image {
	width: 100%;
	}
	.hub-index-grid {
	  display: inline-grid;
	  grid-template-columns: auto;
	  gap: 20px;
	}
	.image-flex-container {
	  display: inline-grid;
	  grid-template-columns: auto;
	  gap: 20px;
	}
}

/* Tablets - Portrait 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.youtube {
		height: 37vh;
		width: 35vh;
	}
	video {
		height: 22.5vh;
		width: 100%
	}
	.logo {
		width: 50%;
	}
	.navigation {
		width: 90%;
	}
	.content {
		width: 90%;
	}
	.download-button {
		width: 50%;
	}
	.glyph-score-rhythm {
	width: 100%;
	}

}
*/
/* Tablets - Landscape 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	.youtube {
		height: 45vh;
		width: 100vh;
	}
	video {
		height: 22.5vh;
		width: 100%
	}
	.logo {
		width: 60%;
	}
	.navigation {
		width: 60%;
	}
	.content {
		width: 60%;
	}
	.download-button {
		width: 60%;
	}
}
*/
/*
@media (prefers-color-scheme: dark) {
	:root {
		--primary-color: #eaecf0;
		--background-color: #1b1b1b;
		--accent-color: #7b60db;
		--medium-accent-color: #ada7c4;
		--light-accent-color: #424242;
		--lighter-accent-color: #262626;
		--alert-color: #FF0000;
		--link-hover-color: #987ff0;
		--link-visited-hover-color: #fc6deb;
	}
	table.index-table th[aria-sort="descending"] span::after {
	  background-image: url("/assets/media/sort-desc-dark.svg");
	}

	table.index-table th[aria-sort="ascending"] span::after {
	  background-image: url("/assets/media/sort-asc-dark.svg");
	}
	table.index-table th:not([aria-sort]) button:focus span::after,
	table.index-table th:not([aria-sort]) button:hover span::after {
	  background-image: url("/assets/media/sort-hover-dark.svg");
	}
	.pagefind-ui__search-clear {
	background-image: url("/assets/media/cancel-dark.svg") !important;
}
*/

/* dark mode change icons to dark version */

	[data-theme="dark"] table.index-table th[aria-sort="descending"] span::after {
	  background-image: url("/assets/media/sort-desc-dark.svg");
	}

	[data-theme="dark"] table.index-table th[aria-sort="ascending"] span::after {
	  background-image: url("/assets/media/sort-asc-dark.svg");
	}
	[data-theme="dark"] table.index-table th:not([aria-sort]) button:focus span::after,
	[data-theme="dark"] table.index-table th:not([aria-sort]) button:hover span::after {
	  background-image: url("/assets/media/sort-hover-dark.svg");
	}
	[data-theme="dark"] .pagefind-ui__search-clear {
	background-image: url("/assets/media/cancel-dark.svg") !important;
	}
	
	[data-theme="dark"] .score-image {
	filter: invert(1);
	}
	
	[data-theme="dark"] .glyph-image {
	filter: invert(1);
	}
	
	[data-theme="dark"] .glyph-score-image {
	filter: invert(1);
	}