/*!
 * Writ v1.0.4
 *
 * Copyright © 2015, Curtis McEnroe <curtis@cmcenroe.me>
 *
 * https://cmcenroe.me/writ/LICENSE (ISC)
 */

/* Brand Colors */
:root
{
	--primary-purple: #663399;
	--primary-purple-hover: #512b84;
	--light-purple: #ffe6ff;
	--purple-dark: #4b287c;
}

/* Fonts, sizes & vertical rhythm */
html
{
	font-family: -apple-system-ui-serif, ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	font-size: 16px;
	line-height: 1.5rem;
}

code, pre, samp, kbd
{
	font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
	font-size: 0.833rem;
}

kbd { font-weight: bold; }
h1, h2, h3, h4, h5, h6, th { font-weight: bold; }

/* Minor third */
h1 { font-size: 2.488em; }
h2 { font-size: 2.074em; }
h3 { font-size: 1.728em; }
h4 { font-size: 1.44em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }
small { font-size: 0.833em; }
h1, h2, h3 { line-height: 3rem; }
p, ul, ol, dl, table, blockquote, pre, h1, h2, h3, h4, h5, h6 { margin: 1.5rem 0 0; }
ul ul, ol ol, ul ol, ol ul { margin: 0; }

hr
{
	margin: 0;
	border: none;
	padding: 1.5rem 0 0;
}

/* Accounting for borders */
table
{
	line-height: calc(1.5rem - 1px);
	margin-bottom: -1px;
}

pre
{
	margin-top: calc(1.5rem - 1px);
	margin-bottom: -1px;
}

/* Colors */
body { color: #222; }
code, pre, samp, kbd { color: #111; }
mark { color: inherit; }
code, pre, samp, thead, tfoot { background-color: rgba(0, 0, 0, 0.05); }
mark { background-color: #fe0; }
main aside, blockquote, ins { border: solid rgba(0, 0, 0, 0.05); }
pre, code, samp { border: solid rgba(0, 0, 0, 0.1); }
th, td { border: solid #dbdbdb; }

/* Brand-specific link colors */
a, header nav a:visited, a code { color: var(--primary-purple); }
header nav a:visited { color: blue; }
a:visited, a:visited code { color: var(--purple-dark); }
a:hover { color: var(--primary-purple-hover); }

/* Layout */
body { margin: 0; }
body > header { text-align: center; }

main, body > footer
{
	display: block;
	/* Just in case */
	max-width: 78ch;
	margin: auto;
	padding: 0 1ch;
}

main figure, main aside
{
	float: right;
	margin: 1.5rem 0 0 1ch;
}

main aside
{
	max-width: 26ch;
	border-width: 0 0 0 0.5ch;
	padding: 0 0 0 0.5ch;
}

/* Full-width header with logo */
.brand-header
{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--primary-purple);
	padding: 3rem 0;
	text-align: center;
	margin-bottom: 3rem;
	margin-top: 0;
}

.brand-header img
{
	max-height: 120px;
	width: auto;
}

/* Copy blocks */
blockquote
{
	margin-right: 3ch;
	margin-left: 1.5ch;
	border-width: 0 0 0 0.5ch;
	padding: 0 0 0 1ch;
}

pre
{
	border-width: 1px;
	border-radius: 2px;
	padding: 0 0.5ch;
	overflow-x: auto;
}

pre code
{
	border: none;
	padding: 0;
	background-color: transparent;
	white-space: inherit;
}

img { max-width: 100%; }

/* Lists */
ul, ol, dd { padding: 0 0 0 3ch; }
dd { margin: 0; }
ul > li { list-style-type: disc; }
li ul > li { list-style-type: circle; }
li li ul > li { list-style-type: square; }
ol > li { list-style-type: decimal; }
li ol > li { list-style-type: lower-roman; }
li li ol > li { list-style-type: lower-alpha; }

nav ul
{
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

nav ul li
{
	display: flex;
	align-items: center;
	white-space: nowrap;
}

nav ul li:not(:last-child)::after
{
	content: "";
	width: 1px;
	height: 1rem;
	background-color: var(--primary-purple);
	opacity: 0.3;
	margin: 0 1rem;
}

nav ul li a
{
	font-size: 1.25rem;
	color: blue;
	text-decoration: underline;
	padding: 0.5rem 0;
	transition: color 0.2s ease;
	display: block;
}

nav ul li a:hover,
nav ul li a:focus { color: var(--purple-dark); }

/* Navigation line break control */
.nav-break
{
	flex-basis: 100%;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* Kaleidoscope Table */
.kaleidoscope-level-tables
{
	max-width: 720pt;
	padding: 20px;
	margin: 0 auto;
}

.kaleidoscope-level-tables table
{
	margin: 0 0 20px -5.4pt;
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}

.kaleidoscope-level-tables table td,
    .kaleidoscope-level-tables table th
{
	padding: 5.4pt;
	border: 1pt solid #000000;
	vertical-align: top;
	font-size: 20px;
	line-height: 1.0;
}

.kaleidoscope-level-tables h1
{
	font-weight: 700;
	font-size: 20px;
	margin: 0;
	padding: 0;
}

.kaleidoscope-level-tables h2
{
	font-size: 20px;
	margin: 0;
	padding: 0;
}

.kaleidoscope-level-tables p
{
	margin: 0;
	font-size: 20px;
}

/* Header styles */
.kaleidoscope-level-tables .header-bass { background-color: #ff6161; }
.kaleidoscope-level-tables .header-cello { background-color: #ccffcc; }
.kaleidoscope-level-tables .header-viola { background-color: #cc99ff; }
.kaleidoscope-level-tables .header-violin { background-color: #99ccff; }

/* Progress indicator colors */
.kaleidoscope-level-tables .level-1 { background-color: #ffff00; }

/* Yellow */
.kaleidoscope-level-tables .level-2 { background-color: #ff9900; }

/* Orange */
.kaleidoscope-level-tables .level-3 { background-color: #ff0000; }

/* Red */
.kaleidoscope-level-tables .level-4 { background-color: #800080; }

/* Purple */
.kaleidoscope-level-tables .level-5 { background-color: #0000ff; }

/* Blue */
.kaleidoscope-level-tables .level-6 { background-color: #008000; }

/* Green */
.kaleidoscope-level-tables .level-7 { background-color: #993300; }

/* Brown */
.kaleidoscope-level-tables .level-8
{
	background-color: #000000;
	color: white;
}

/* Black */
.kaleidoscope-level-tables .instrument-label
{
	width: 60px;
	text-align: center;
}

.kaleidoscope-level-tables .requirement-col { width: 40%; }
.kaleidoscope-level-tables .performance-col { width: 40%; }

.kaleidoscope-level-tables sup
{
	vertical-align: super;
	font-size: 0.8em;
}

/* Tables */
table
{
	width: 100%;
	border-collapse: collapse;
	overflow-x: auto;
}

th, td
{
	border-width: 1px;
	padding: 0 0.5ch;
}

/* Copy inline */
a { text-decoration: none; }

sup, sub
{
	font-size: 0.75em;
	line-height: 1em;
}

ins
{
	border-width: 1px;
	padding: 1px;
	text-decoration: none;
}

mark { padding: 1px; }

code, samp
{
	border-width: 1px;
	border-radius: 2px;
	padding: 0.1em 0.2em;
	white-space: nowrap;
}

/* Details and Summary */
details
{
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	margin: 1.5rem 0;
	background-color: #fafafa;
}

summary
{
	padding: 1rem 1.5rem;
	cursor: pointer;
	font-weight: 500;
	color: var(--primary-purple);
	border-bottom: 1px solid transparent;
	transition: all 0.2s ease;
	user-select: none;
	position: relative;
	list-style: none;
}

summary:hover
{
	background-color: var(--light-purple);
	color: var(--primary-purple-hover);
}

summary::-webkit-details-marker { display: none; }
summary::-moz-list-bullet { list-style-type: none; }
summary::marker { display: none; }

summary::before
{
	content: "▶";
	display: inline-block;
	margin-right: 0.5rem;
	transition: transform 0.2s ease;
	font-size: 0.8em;
	color: var(--primary-purple);
}

details[open] summary::before { transform: rotate(90deg); }

details[open] summary
{
	border-bottom-color: #e0e0e0;
	background-color: var(--light-purple);
}

details > *:not(summary) { padding: 0 1.5rem 1.5rem; }
details > *:not(summary):first-of-type { padding-top: 1rem; }

/* Custom homepage styles */
.hero
{
	text-align: center;
	margin: 3rem 0;
}

/* Event details styling */
.event-details
{
	color: var(--primary-purple);
	font-weight: 600;
	font-size: 1.2em;
	margin: 0.5rem 0;
}

.features
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
	gap: 3rem;
	margin: 3rem 0;
}

.feature { text-align: center; }

/* Subtitle/tagline style */
.subtitle
{
	font-size: 1.2em;
	color: var(--text-muted, #666);
	margin: 0.75rem 0 1.5rem;
	line-height: 1.4;
	position: relative;
}

.subtitle::after
{
	content: '';
	/* Essential for pseudo-elements */
	display: block;
	/* Make it a block to control its width and center it */
	width: 50px;
	/* Adjust width as desired */
	height: 2px;
	/* Thickness of the line */
	background-color: var(--purple-dark);
	/* Use your brand's primary
color or an accent */
	margin: 0.75rem auto 0;
	/* Top margin to separate from text, auto for
horizontal centering, 0 for bottom */
	border-radius: 1px;
	/* Slightly rounded ends */
}

/* Call to action / attention paragraph */
.callout
{
	color: var(--primary-purple);
	font-weight: 700;
	font-size: 1.1em;
	border: 2px solid var(--primary-purple);
	border-radius: 4px;
	padding: 1rem 1.5rem;
	background-color: var(--light-purple);
	text-align: center;
}

.stats
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));
	gap: 1.5rem;
	margin: 3rem 0;
	text-align: center;
}

.stat-number
{
	font-size: 2.074em;
	font-weight: bold;
	color: var(--primary-purple);
}

/* Card-style links */
.card-links
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18ch, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0;
}

.card-link
{
	background-color: #fafafa;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 1.5rem 1ch;
	text-align: center;
	transition: all 0.2s ease;
	display: block;
	text-decoration: none;
	color: #333;
}

.card-link:hover,
.card-link:focus
{
	background-color: var(--light-purple);
	border-color: var(--primary-purple);
	color: var(--primary-purple);
}

.card-link:visited { color: #333; }
.card-link:visited:hover { color: var(--primary-purple); }

/* Responsive Design */

@media (max-width: 600px)
{
	.features { grid-template-columns: 1fr; }
	.card-links { grid-template-columns: 1fr; }
	.stats { grid-template-columns: repeat(2, 1fr); }
	.brand-header { padding: 2rem 0; }
	.brand-header img { max-height: 80px; }
}

/* Dark Mode */

@media (prefers-color-scheme: dark)
{
	:root
	{
		--text-dark: #e0e0e0;
		--text-light: #b0b0b0;
		--text-muted: #888888;
		--bg-white: #1a1a1a;
		--bg-light: #2a2a2a;
		--bg-form: #2d2d2d;
		--bg-input: #374151;
		--border-light: #404040;
		--border-medium: #555555;
		--border-dark: #666666;
		--border-input: #555555;
	}
	
	/* Base colors */
	body
	{
		background-color: var(--bg-white);
		color: var(--text-dark);
	}
	
	/* Code and pre elements */
	code, pre, samp, kbd
	{
		color: var(--text-dark);
		background-color: var(--bg-form);
		border-color: var(--border-medium);
	}
	
	pre code { background-color: transparent; }
	thead, tfoot { background-color: var(--bg-form); }
	
	/* Tables */
	th, td { border-color: var(--border-medium); }
	
	/* Borders and backgrounds */
	main aside, blockquote, ins { border-color: var(--border-light); }
	
	/* Card links dark mode */
	.card-link
	{
		background-color: var(--bg-light);
		border-color: var(--border-light);
		color: var(--text-dark);
	}
	
	.card-link:hover,
				  .card-link:focus
	{
		background-color: var(--bg-form);
		border-color: var(--primary-purple);
		color: var(--primary-purple);
	}
	
	.card-link:visited { color: var(--text-dark); }
	.card-link:visited:hover { color: var(--primary-purple); }
	
	/* dark links */
	nav ul li a { color: goldenrod; }
	a, header nav a:visited, a code { color: goldenrod; }
	
	/* Navigation dividers */
	nav ul li:not(:last-child)::after { background-color: var(--text-muted); }
	
	/* Mark/highlight elements */
	mark
	{
		background-color: #4a3a00;
		color: var(--text-dark);
	}
	
	/* Form elements (if any are added later) */
	input, textarea, select
	{
		background-color: var(--bg-input);
		border-color: var(--border-input);
		color: var(--text-dark);
	}
	
	input:focus, textarea:focus, select:focus { border-color: var(--primary-purple); }
	
	/* Blockquote styling */
	blockquote { color: var(--text-light); }
	
	/* Small text and muted content */
	small { color: var(--text-light); }
	.subtitle { color: var(--text-light); }
	
	/* Event details in dark mode */
	.event-details
	{
		color: var(--text-light);
	}
	
	/* Callout in dark mode */
	.callout
	{
		background-color: var(--purple-dark);
		color: goldenrod;
	}
	
	/* Details and Summary dark mode */
	details
	{
		border-color: var(--border-light);
		background-color: var(--bg-light);
	}
	
	.kaleidoscope-level-tables 
	{ 
	    background-color: ivory;
	    color: black; 
	}
	
	summary { color: goldenrod; }
	
	summary:hover
	{
		background-color: var(--bg-form);
		color: #ffd700;
	}
	
	summary::before { color: goldenrod; }
	
	details[open] summary
	{
		border-bottom-color: var(--border-light);
		background-color: var(--bg-form);
	}
	
	/* Footer text */
	footer small { color: var(--text-muted); }
}