/* ==========================================================================
	CRASH & BURNHAM - MAIN STYLES
   ========================================================================== */

/* ==========================================================================
   1. IMPORTS & DEPENDENCIES
   ========================================================================== */
@import "/css/image-styles.css";

/* ==========================================================================
   2. CUSTOM PROPERTIES (CSS VARIABLES)
   ========================================================================== */
:root {
	/* Colors */
	--primary-color: #00d4c3;
	--primary-color-alpha: rgba(0, 212, 195, 0.15);
	--text-color-primary: #000000;
	--text-color-secondary: rgba(0, 0, 0, 0.7);
	--text-color-muted: rgba(0, 0, 0, 0.5);
	--border-color: #000000;
	--accent-color: #f3ad00; /* International Orange */
	
	/* Venue Colors */
	--venue-red-rocks: #ff4500;
	--venue-bluebird: #2b529c;
	--venue-ogden: #ee2738;
	--venue-belly-up: #1174b9;
	--venue-vortex: #663399;
	--venue-golden-tri: #ffd700;

	/* Spacing Scale (8px base) */
	--space-xs: 0.25rem;
	/* 4px */
	--space-sm: 0.5rem;
	/* 8px */
	--space-md: 1rem;
	/* 16px */
	--space-lg: 1.5rem;
	/* 24px */
	--space-xl: 2.5rem;
	/* 40px */
	--space-2xl: 5rem;
	/* 80px */

	/* Typography */
	--font-family-ui: ui-rounded, system-ui, sans-serif;
	--font-family-mono: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	
	--font-size-xxxs: 0.45rem;
	--font-size-xxs: 0.65rem;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.85rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.2rem;
	--font-size-xl: 1.5rem;
	
	--font-size-h1: 5rem;
	
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-heavy: 600;
	
	--line-height--base: 1;
	--line-height-compact: 1.3;
	--line-height-airy: 1.5;
	--line-height-loose: 2;
	
	/* Layout */
	--border-radius-sm: 5px;
	--border-radius-md: 20px;
	--container-max-width: 1200px;
	--section-gap: 1em;

	/* Visual Effects */
	--transition-duration: 0.3s;
	--transition-easing: ease-in-out;

	/* Shadows */
	--shadow-main:
		rgba(0, 0, 0, 0.4) 0px 2px 4px,
		rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
		rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

	--shadow-details:
		rgba(0, 128, 128, 0.4) -5px 5px,
		rgba(0, 128, 128, 0.3) -10px 10px,
		rgba(0, 128, 128, 0.2) -15px 15px,
		rgba(0, 128, 128, 0.1) -20px 20px;

	--shadow-media:
		rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
		rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
		rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;

	/* Progress Bars */
	--bar-background: var(--primary-color-alpha);
	--bar-fill: var(--primary-color);
}

/* ==========================================================================
   3. COUNTER STYLES & AT-RULES
   ========================================================================== */
@counter-style star {
	system: cyclic;
	symbols: "\2726";
	suffix: " ";
}

/* ==========================================================================
   4. BASE STYLES & RESET
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	color: var(--text-color-primary);
	font-family: var(--font-family-mono);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-base);
	padding: var(--space-2xl) var(--space-2xl) var(--space-lg) var(--space-2xl);
}

/* ==========================================================================
   5. LAYOUT COMPONENTS
   ========================================================================== */
main {
	padding: var(--space-xl) var(--space-2xl);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-main);
	background-color: var(--color-exif);
}

header {
	padding-bottom: 1em;
}

section {
	display: flex;
	gap: var(--section-gap);
	flex-wrap: wrap;
	justify-content: center;
}

footer {
	padding-top: var(--space-xl);
	text-align: center;
	line-height: var(--line-height-loose);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
abbr {
	text-transform: uppercase;
	text-decoration: underline dotted;
	-webkit-text-decoration: underline dotted;
	cursor: help;
}

address {
	font-style: normal;
	font-variant: all-petite-caps;
}

footer p {
	margin: 0;
}

section p {
	flex: 1;
	text-indent: 5em;
	margin-right: 10px;
	line-height: var(--line-height-airy);
}

small {
	font-weight: var(--font-weight-light);
	font-style: italic;
	opacity: 0.5;
	color: var(--text-color-muted);
}

sup {
	overflow: visible;
	font-style: normal;
	font-size: var(--font-size-sm);
}

.tagline {
	   color: var(--color-accent)
}

/* ==========================================================================
   7. INTERACTIVE ELEMENTS
   ========================================================================== */
/* Details & Summary */
details {
	flex: 1 1 calc(33.333% - var(--space-md));
	min-width: 250px;	
	align-items: center;
	justify-content: center;
	text-align: left;
	padding: var(--space-md) 0 var(--space-md) 0;
}

details summary {
	text-align: center;
	outline: 1px solid var(--border-color);
	cursor: pointer;
	transition: background-color var(--transition-duration) var(--transition-easing);
	padding: var(--space-sm) 0 var(--space-sm) 0;
}

details summary:hover {
	background-color: var(--primary-color-alpha);
}

details h4 {
	margin-bottom: 0;
}

details ul {
	list-style: star;
	margin-top: .5em;
	margin-bottom: 3em;
	padding-bottom: var(--space-sm);
	box-shadow: var(--shadow-details);
}

details li {
	padding-block: var(--space-sm);
}

details li::marker {
	color: var(--color-accent);
}

.experience {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: space-between;
}
/* ==========================================================================
   8. TABLE STYLES
   ========================================================================== */
table {
	width: 100%;
	border: 1px solid var(--border-color);
	border-collapse: collapse;
	font-size: inherit;
}

table hr {
	margin-top: var(--space-sm);
	margin-bottom: var(--space-sm);
	width: 50%
}

tbody {
	max-height: 500px;
	overflow-y: auto;
}

td,
th {
	border: 1px solid var(--border-color);
	padding: var(--space-sm);
	text-align: left;
}

td {
	position: relative;
}

td time {
	/* font-size: var(--font-size-xs); */
	text-align: center;
	text-wrap: nowrap;
}

td sup {
	opacity: 0.5;
	color: var(--text-color-secondary);
}

th {
	text-wrap: nowrap;
	font-weight: var(--font-weight-heavy);
	background-color: var(--primary-color-alpha);
}

tfoot {
	text-wrap: wrap;
	line-height: var(--line-height-compact)
}

caption {
	caption-side: bottom;
	text-align: right;
	padding: var(--space-sm) 0;
	font-style: italic;
	color: var(--text-color-secondary);
}

#productions td:nth-last-child(-n+5) {
	text-align: center;
}

.statistics {
	text-align: center;
}

.year-summary-row {
	background-color: var(--primary-color-alpha);
	border: none;
}

.year-summary-row td {
	vertical-align: middle;
}

/* Specific styling for the text part of the summary */
.year-summary-row td:first-child {
	text-align: left; /* Keep text aligned to the left */
}

.year-summary-row td:last-child {
	text-align: left; /* Keep text aligned to the left */
}

/* ===========================================
   8a. PROGRESS BAR COMPONENT
   =========================================== */
.peak-progress {
	position: relative;
	z-index: 0;
}

.peak-progress>* {
	color: var(--text-color);
	position: relative;
	z-index: 1;
}

.peak-progress::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--bar-bg);
	z-index: 0;
}

.peak-progress::after {
	content: "";
	position: absolute;
	inset: 0;
	width: var(--width);
	background-color: var(--bar-fill);
	z-index: 0;
	transition: width 0.5s ease;
}

/* ===========================================
   8b. VENUE COLOR SYSTEM
   =========================================== */
.venue--red-rocks,
.red-rocks {
	color: var(--venue-red-rocks);
}

.venue--bluebird,
.bluebird {
	color: var(--venue-bluebird);
}

.venue--ogden,
.ogden {
	color: var(--venue-ogden);
}

.venue--belly-up,
.belly-up {
	color: var(--venue-belly-up);
}

.venue--vortex,
.vortex {
	color: var(--venue-vortex);
}

.venue--fiddlers,
.fiddlers {
	color: var(--venue-fiddlers);
}

.venue--golden-tri,
.golden-tri {
	color: var(--venue-golden-tri);
}

/* ==========================================================================
   9. MEDIA & CONTENT
   ========================================================================== */
/* Horizontal Rules */
hr {
	margin-top: var(--space-md);
	margin-bottom: var(--space-md);
	  border: none;         /* remove default border */
	  height: 1px;          /* set thickness */
	  background: #333;     /* set color */
	  box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}

/* Video Components */
.video-wrapper {
	position: relative;
	width: 30%;
	/* aspect-ratio: 16/9; */
	overflow: hidden;
	border-radius: var(--border-radius-sm);
}

video {
	border-radius: var(--border-radius-sm);
	box-shadow: var(--shadow-media);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}



/* ==========================================================================
   10. UTILITY CLASSES
   ========================================================================== */
.flex-item {
	   flex: 1;
	   min-width: 300px; /* Prevents tables from getting too narrow */
}
   
.nowrap {
	text-wrap: nowrap;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.mb-sm {
	margin-bottom: var(--space-sm);
}

.mb-md {
	margin-bottom: var(--space-md);
}

.mb-lg {
	margin-bottom: var(--space-lg);
}

.mt-sm {
	margin-top: var(--space-sm);
}

.mt-md {
	margin-top: var(--space-md);
}

.mt-lg {
	margin-top: var(--space-lg);
}

.p-sm {
	padding: var(--space-sm);
}

.p-md {
	padding: var(--space-md);
}

.p-lg {
	padding: var(--space-lg);
}

/* ==========================================================================
   11. RESPONSIVE DESIGN
   ========================================================================== */
/* Mobile First Approach */
@media (max-width: 768px) {
	html {
		padding: var(--space-md);
		font-size: 14px;
	}

	main {
		padding: var(--space-md);
	}

	section {
		flex-direction: column;
		gap: var(--space-md);
		padding-bottom: 1em;
	}

	section p {
		text-indent: 2em;
		/* Reduced indent on mobile */
		margin-right: 0;
	}

	.video-wrapper {
		width: 100%;
	}

	/* Stack details on mobile */
	.details-container details {
		flex: 1 1 100%;
	}
}

@media (max-width: 480px) {
	html {
		padding: var(--space-sm);
	}

	main {
		padding: var(--space-sm);
		border-radius: var(--space-sm);
	}

	section p {
		text-indent: 1em;
	}
	
	
}

@media (max-width: 768px) {
	section.data-tables {
		flex-direction: column;
	}
	
	section.data-tables .flex-item {
		min-width: 100%;
	}
	td time {
		font-size: var(--font-size-xs);
		text-wrap: wrap;
	}
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
	.details-container details {
		flex: 1 1 calc(50% - var(--space-md));
	}
}

/* Large screens */
@media (min-width: 1400px) {
	html {
		font-size: 16px;
	}

	.container {
		max-width: 1400px;
	}
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	:root {
		--primary-color: #0066cc;
		--border-color: #000000;
		--text-color-primary: #000000;
	}
}