/* Stone's Custom Stylesheet 
    Theme: Dark, WoW-inspired Gold and Muted Tones
*/

/* ================================== */
/* BASIC & RESET 					 					 */
/* ================================== */
body {
	background-color: #1E1E1E;
	font-family: Helvetica, sans-serif;
	font-size: small;
	color: #F5F5DC;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

h2 {
	color: #C4A15A;
	/* REMOVE: text-align: center; */
	text-align: left; 
}

/* ================================== */
/* MAIN LAYOUT 					 					 */
/* ================================== */
.container {
	display: flex;
	max-width: 1200px;
	margin: 20px auto;
	padding: 0 10px;
	flex-grow: 1;
	/* FIX: Prevents children (sidebar) from stretching vertically */
	align-items: flex-start;	
}

/* --- Sidebar Styling (Scripts / TOC) --- */
.sidebar {
	/* Layout */
	flex: 0 0 250px;
	margin-right: 20px;
	position: sticky;
	top: 20px;	
	
	/* FIX: Prevents stretching by limiting height to content size */
	height: fit-content;	
	
	/* Aesthetic */
	background-color: #2D3035;
	padding: 5px 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	border: 1px solid #484E54;	
	
	/* Alignment: Force content to stack from the top */
	display: flex;	
	flex-direction: column;
	align-items: flex-start;
}

.sidebar h2 {
	color: #C4A15A;
	border-bottom: 2px solid #C4A15A;
	text-align: left;
	margin: 0;
	padding-bottom: 0;	
	width: 100%;
}

.sidebar ul {
	list-style: none;
	margin: 0;	
	padding: 10px 0 10px 0;
	width: 100%;
	
	/* Alignment: Ensure the list contents start at the top */
	display: flex;
	flex-direction: column;	
	justify-content: flex-start;
}

.sidebar li {
	margin: 0;
	padding: 0;
	line-height: 1;	
	/* FIX: Reduced space between items from 5px to 2px */
	margin-bottom: 0;
}

/* --- Table of Contents Link Colors & Hover Fix --- */
.sidebar li a {
	display: block;
	/* FIX: Reduced vertical padding from 8px to 5px to tighten link height */
	padding: 5px 10px 5px 10px;
	/* FIX: Reserve the space with a transparent border to prevent layout shift */
	border-left: 5px solid transparent;	
	text-decoration: none;
	color: #C4A15A;
	transition: all 0.2s ease-in-out;
	border-radius: 4px;
	line-height: 1;
}

.sidebar li a:hover {
	background-color: #484E54;
	color: #FFDE59;
	/* FIX: Only change the color of the border, preserving element width */
	border-left-color: #FFDE59;	
}

/* ================================== */
/* MAIN CONTENT & LINKS 			 		*/
/* ================================== */
.main-content {
	flex-grow: 1;
	background-color: transparent; /* CHANGE 1: Set background to transparent */
	padding: 0;	 				 /* CHANGE 2: Remove inner padding */
	border-radius: 0;	 			 /* CHANGE 3: Remove rounded corners */
	box-shadow: none;	 			 /* CHANGE 4: Remove box shadow */
	border: none;	 				 /* CHANGE 5: Remove border */
}

/* New rule for the main content header to mimic sidebar h2 */
.page-title-header {
	color: #C4A15A;
	/* border-bottom: 2px solid #C4A15A; <-- REMOVED */
	text-align: left; /* Default: Left-aligned for desktop */
	margin: 0;
	padding-bottom: 5px; /* Add some space under the line */
	width: 100%;
	margin-bottom: 20px; /* Space before the generator starts */
}

/* REMOVED: .page-title-header.centered-title {} */

/* NEW: Custom style for the To-Do List title. Uses the brighter gold, left-aligned. */
.page-title-header.todo-title {
	color: #FFDE59; 
    text-align: left; /* Explicitly left-aligned */
	padding-bottom: 0;
    margin-bottom: 15px; 
    font-size: 1.5em;
    text-shadow: 1px 1px 2px #000000;
}


/* New rule for the button wrapper */
.reload-button-wrapper {
	/* Desktop default: Left-aligned */
	text-align: left;	
	margin-top: 25px; /* Restores the spacing we removed from inline style */
	padding-left: 10px; /* Optional: Add padding if you want it offset from the edge */
	width: 100%;
}

/* General Link Styling (outside of TOC) */
a {
	color: #C4A15A;
	text-decoration: none;	
}

a:visited {
	color: #8B7549;	
}

a:hover {
	color: #FFDE59;
	text-decoration: underline;	
}

/* ================================== */
/* HEADER & FOOTER (FOOTER RULE REMOVED) */
/* ================================== */
header {
	background-color: #000000;
	color: #F5F5DC;
	padding: 10px 0;	
	text-align: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	border-bottom: 2px solid #C4A15A;
}

header h1 {
	margin: 0;
}

/* ================================== */
/* GENERATOR SPECIFIC 			 		*/
/* ================================== */
.generator-container {
	display: flex;
	gap: 30px;
	align-items: flex-start;
	text-align: center;
	font-family: sans-serif;	

	background-color: #2D3035;	
	padding: 20px 30px;	
	border-radius: 10px;	
	
	/* MODIFIED: Removed the gold glow and replaced it with a simple dark shadow for depth. */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);	
	
	width: fit-content;	
	margin: 20px auto;	
	border: 1px solid #C4A15A;	
}

.generator-container h3 {
	color: #FFDE59;
	margin: 0 0 5px;	
	font-weight: bold;
	text-shadow: 1px 1px 2px #000000;
}

.generator-container p {
	margin: 5px 0 0;	
	font-size: 0.9em;
	color: #B0B0B0;
}

/* ================================== */
/* WARBAND SPECIFIC (UPDATED) 		*/
/* ================================== */

/* Grid container for the entire warband list */
.warband-list-container {
	display: grid;
	/* CHANGE HERE: Force a single column for the roster view */
	grid-template-columns: 1fr;	
	gap: 15px; /* Space between character cards */
	margin-top: 20px;
	padding: 0 10px;
}

/* Ensure individual character blocks (generator-container) fit well */
.warband-list-container .generator-container {
	/* Override fixed width and margins used for the single generator */
	margin: 0 auto; /* Center the list items horizontally */
	max-width: 800px; /* Optional: Limit the width of the card for better readability */
	width: 100%;
	/* Override flex-start from the generator container to center everything */
	justify-content: center;
	/* Reduce padding/gap for the multi-item view */
	padding: 15px;	
	gap: 30px; /* Keep gap large for wide separation between columns */
}

/* ================================== */
/* WOW LEVELING PATH CARD 			*/
/* ================================== */

/* 1. Main Container (Mimics .generator-container style for the "card" look) */
.leveling-path-card {
	/* Layout & Centering (Similar to .generator-container, but simplified) */
	width: 90%;	
	max-width: 600px; /* Good size for detail readability */
	margin: 20px auto;
	padding: 20px 30px; /* Use the same padding as the generator-container */
	
	/* Aesthetic Styling (Pulled directly from .generator-container) */
	background-color: #2D3035;
	border: 1px solid #C4A15A; /* Gold Border */
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
	color: #F5F5DC; /* Base text color */
}

/* 2. Styling the Path Details (Internal layout for Lvl 10-70, etc.) */
.path-detail {
	display: flex;
	justify-content: space-between; /* Aligns label left, value right */
	align-items: center;
	padding: 10px 0;
	margin-bottom: 2px; /* Slightly tighter spacing */
	border-bottom: 1px dashed #484E54; /* Use a sidebar/border color for subtle separation */
	font-size: 1em;
}

/* 3. Remove border from the last detail item */
.leveling-path-card .path-detail:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

/* 4. Styling the Labels (e.g., Lvl 10-70 (Chromie Time)) */
.path-label {
	font-weight: 700;
	color: #B0B0B0; /* Muted gray for the label */
	text-transform: uppercase;
	font-size: 0.9em;
}

/* 5. Styling the Randomly Chosen Values (The highlight) */
.path-value {
	font-weight: 600;
	color: #FFDE59; /* Bright Gold for the result, matching generator h3 color */
	text-align: right;
	text-shadow: 1px 1px 2px #000000;
}

/* 6. Styling the blockquote note */
.path-note {
	background-color: #1E1E1E; /* Use the main body background color for contrast */
	border-left: 4px solid #C4A15A; /* WoW Gold for the accent */
	padding: 10px 15px;
	margin-top: 15px;
	font-size: 0.9em;
	color: #B0B0B0;
	border-radius: 0 6px 6px 0; /* Match the rounded corners of the main card */
}

/* 7. Mobile Adjustments for the Card */
@media (max-width: 768px) {
	.leveling-path-card {
		width: 100%;
		max-width: 100%;
		padding: 15px; /* Reduced padding on mobile */
	}
}

/* ================================== */
/* WOW RANDOM TO-DO LIST CARD 	*/
/* ================================== */

/* 1. Main Container (Uses .leveling-path-card styles for consistency) */
.todo-list-card {
    /* Pulled directly from .leveling-path-card to ensure consistent styling */
    width: 90%; 
	max-width: 600px; /* Adjusted max width to fit 5 items well */
	margin: 0 auto; /* Removed top margin, relying on title margin */
	padding: 20px 30px; 
	
	background-color: #2D3035;
	border: 1px solid #C4A15A; 
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
	color: #F5F5DC; 
}

/* 3. The Ordered List */
.todo-list-card ol {
	list-style-type: none; 
	padding: 0;
	/* UPDATED: Remove column layout for single stacking list */
	column-count: 1; 
	column-gap: 0;
}

/* 4. Individual List Items */
.todo-list-card li {
	padding: 8px 0; /* Slightly more padding for the short list */
	border-bottom: 1px dotted #484E54; 
	font-size: 1.1em; /* Made text slightly larger */
	margin-bottom: 0;
	line-height: 1.3;
	/* Ensure list items don't break across columns in the middle */
    break-inside: avoid-column;
}

/* Remove border from the last item in the list */
.todo-list-card ol li:last-of-type {
    border-bottom: none;
}

/* 5. Emphasize the action word (from the bold tag added in PHP) */
.todo-list-card li strong {
    color: #FFDE59; /* Highlight the action with bright gold */
    font-weight: bold;
}

/* ================================== */
/* WOW GENERATOR BUTTON STYLING 	 		*/
/* ================================== */
.wow-button {
	/* Base Button Appearance */
	padding: 10px 20px;
	background-color: #3A3F44; /* Dark Gray background */
	color: #FFDE59; /* Bright Gold text */
	border: 2px solid #C4A15A; /* WoW Gold border */
	border-radius: 6px;
	font-size: 1.1em;
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
	
	/* Ensure no text selection on click */
	user-select: none;
}

.wow-button:hover {
	background-color: #484E54; /* Slightly lighter dark gray on hover */
	color: #FFFFFF; /* White text on hover for contrast */
	border-color: #FFDE59; /* Brighten the border on hover */
	box-shadow: 0 4px 8px rgba(255, 222, 89, 0.3); /* Subtle glow effect */
}

.wow-button:active {
	background-color: #2D3035; /* Darker click state */
	transform: translateY(1px); /* Pressed effect */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* ================================== */
/* RESPONSIVENESS (Mobile/Small Screens) */
/* ================================== */

@media (max-width: 768px) {
	.container {
		flex-direction: column;
		align-items: stretch;
	}

	/* Header Title Adjustment */
	header h1 {
		font-size: 1.8em;	
		padding: 0 5px;
		/* FIX: Ensure margin is zeroed out in mobile view as well */
		margin: 0;
	}
	
	/* Sidebar Layout Adjustment */
	.sidebar {
		flex: auto;
		margin-right: 0;
		margin-bottom: 20px;
		position: relative;
		top: 0;
		padding: 10px;
	}
	
	.sidebar ul {
		display: block;
	}
	
	.sidebar li {
		margin-bottom: 0;
	}
	
	.sidebar li a {
		padding: 10px 15px;
		border-bottom: 1px solid #2D3035;
	}

	/* Generator Container Revert (Mobile Stacking) */
	.generator-container {
		flex-direction: column;	
		align-items: center;	
		gap: 10px;	
		width: 100%;	
		max-width: 100%;
		margin: 10px auto;
		padding: 10px;
	}
	
	/* Ensure the internal profession flex container stacks too */
	.generator-container > div:nth-child(4) > div:nth-child(2) {
		flex-direction: column;
	}

	/* Remove fixed sizing from inner columns on mobile */
	.generator-container > div {
		max-width: 100%;
		min-width: unset;
	}

	/* Warband Mobile Stacking */
	.warband-list-container {
		grid-template-columns: 1fr; /* 1 column for mobile */
		gap: 10px;
	}

	/* Main Content Adjustment */
	.main-content {
		padding: 15px;
	}

	/* Center the main content title on mobile */
	.page-title-header {
		text-align: center;	
	}
    
    /* Ensure the To-Do Title remains consistent on mobile */
    .page-title-header.todo-title {
        text-align: center;
    }


	/* Center the reload button on mobile */
	.reload-button-wrapper {
		text-align: center;
		padding-left: 0;
	}
	
	/* Mobile Adjustment for Button */
	.wow-button {
		width: 90%;	
		font-size: 1em;
	}

    /* Mobile Adjustment for To-Do List */
    .todo-list-card {
        width: 100%;
        max-width: 100%;
        padding: 15px;
    }
    
    .todo-list-card ol {
        column-count: 1; /* Already 1, but keep for explicit mobile control */
    }
}