/* Global Styles & Fonts */
body {
	font-family: 'Inter', sans-serif;
	background-color: #0f172a; /* bg-slate-900 */
	color: #e2e8f0; /* text-slate-200 */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Header & Navigation Styles */
header {
	background-color: #1e293b; /* bg-slate-800 */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
	position: sticky;
	top: 0;
	z-index: 50;
}

.nav-link-hover:hover {
	color: #d946ef; /* fuchsia-500 */
}

.login-button { /* Used for Login, AI Advisor submit, etc. */
	background-color: #6366f1; /* indigo-500 */
	transition: background-color 0.3s ease;
	color: white;
	font-weight: 600; /* semibold */
	border-radius: 0.5rem; /* rounded-lg */
	padding: 0.625rem 1.25rem; /* px-5 py-2.5 for smaller buttons */
	font-size: 0.875rem; /* text-sm */
	border: none; /* remove default border */
	cursor: pointer;
}

.login-button:hover {
	background-color: #4f46e5; /* indigo-600 */
}
.login-button:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #818cf8; /* focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75 (customized) */
}
.login-button:disabled {
	background-color: #475569; /* slate-600 */
	cursor: not-allowed;
	opacity: 0.7;
}


/* Main Content Styles */
main {
	flex-grow: 1;
}

/* Footer Styles */
footer {
	background-color: #1e293b; /* bg-slate-800 */
	border-top: 1px solid #334155; /* border-slate-700 */
}

/* AI Advisor Page Specific Styles */
#aiResponseDisplay { /* This is the container for the AI's text */
	border: 1px solid #4f46e5; /* indigo-600 */
	background-color: #1e293b; /* bg-slate-800 */
	padding: 1.5rem; /* p-6 */
	border-radius: 0.5rem; /* rounded-lg */
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-xl */
}
/* Ensure prose styles within aiResponseDisplay are applied correctly */
#aiResponseDisplay.prose h3 {
	color: #818cf8; /* indigo-400 */
	margin-top: 0;
}
#aiResponseDisplay.prose p {
	color: #cbd5e1; /* slate-300 */
}


.spinner {
	border-top-color: #d946ef; /* fuchsia-500 */
	border-right-color: #d946ef; /* fuchsia-500 */
	border-bottom-color: #d946ef; /* fuchsia-500 */
	border-left-color: #6366f1; /* indigo-500 */
	animation: spin 1s linear infinite;
	border-radius: 9999px; /* rounded-full */
	height: 2rem; /* h-8 */
	width: 2rem; /* w-8 */
	border-width: 4px;
	border-style: solid;
}

@keyframes spin {
  to {
	transform: rotate(360deg);
  }
}

/* Blog Post Specific Styles (Tailwind Typography Plugin handles most of this via classes in HTML) */
/* These are for elements within a '.prose.prose-invert' container if not using full plugin */
.prose-invert a {
	color: #818cf8; /* indigo-400 */
	text-decoration: none;
}
.prose-invert a:hover {
	color: #6366f1; /* indigo-500 */
	text-decoration: underline;
}

.prose-invert blockquote {
	border-left-width: 4px;
	border-left-color: #6366f1; /* indigo-500 */
	color: #cbd5e1; /* slate-300 */
	padding-left: 1rem; /* pl-4 */
	font-style: italic;
	margin-top: 1.5rem; /* my-6 */
	margin-bottom: 1.5rem; /* my-6 */
}

.prose-invert table {
	min-width: 100%;
	/* divide-y divide-slate-700 */
}
.prose-invert table th {
	color: #e2e8f0; /* slate-200 */
	padding: 0.75rem 1.5rem; /* px-6 py-3 */
	text-align: left;
	font-size: 0.75rem; /* text-xs */
	font-weight: 500; /* medium */
	text-transform: uppercase;
	letter-spacing: 0.05em; /* tracking-wider */
}
.prose-invert table td {
	color: #94a3b8; /* slate-400 */
	padding: 1rem 1.5rem; /* px-6 py-4 */
	/* whitespace-nowrap - apply this class in HTML if needed per column */
}
.prose-invert table thead {
	border-bottom-width: 1px;
	border-bottom-color: #475569; /* slate-600 */
	background-color: rgba(30, 41, 59, 0.5); /* bg-slate-800/50 */
}
.prose-invert table tbody tr {
	border-bottom-width: 1px;
	border-bottom-color: rgba(51, 65, 85, 0.5); /* slate-700/50 */
}
.prose-invert table tbody tr:last-child {
	border-bottom-width: 0;
}

/* Utility for screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}