/**
 * War Brief Live - Custom Theme Styles
 * Shared styles for all templates
 */

/* Material Symbols fix */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
}

/* Tactical Shadow */
.tactical-shadow {
	box-shadow: 4px 4px 0px 0px rgba(15, 23, 42, 1);
}

/* Article Shadow (lighter variant) */
.article-shadow {
	box-shadow: 4px 4px 0px 0px rgba(226, 232, 240, 1);
}

.tactical-shadow-hover:hover {
	box-shadow: 6px 6px 0px 0px rgba(187, 1, 18, 1);
	transform: translate(-2px, -2px);
	transition: all 0.2s ease-in-out;
}

/* Active Nav Link */
.active-nav-link {
	border-bottom: 3px solid #bb0112;
	padding-bottom: 4px;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #000;
	border-radius: 0;
}

/* No Scrollbar Utility */
.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* Filter Blur */
.filter-blur {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Transition All Fast */
.transition-all-fast {
	transition: all 0.15s ease-in-out;
}

/* Line Clamp */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Prose Styles for Long-form Content */
.prose-warbrief {
	font-family: 'Source Serif 4', Georgia, serif;
	line-height: 1.8;
}

.prose-warbrief p {
	margin-bottom: 1.5rem;
	font-size: 1.25rem;
	line-height: 1.8;
}

.prose-warbrief h3 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1.625rem;
	line-height: 2.125rem;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

/* Admin Bar Offset */
body.admin-bar .sticky.top-0 {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .sticky.top-0 {
		top: 46px;
	}
}

/* Responsive Utilities */
@media (max-width: 768px) {
	.font-display-xl {
		font-size: 2.375rem;
		line-height: 2.875rem;
	}
}

/* Selection Color */
::selection {
	background-color: #bb0112;
	color: #ffffff;
}

/* Focus States */
input:focus,
select:focus,
textarea:focus {
	outline: none;
}

/* Table Styles */
table {
	border-collapse: collapse;
}

th, td {
	text-align: left;
}

/* Button Active State */
button:active,
a:active {
	transform: translateY(1px);
}

/* Link Underline Animation */
a {
	text-decoration-thickness: 0;
	text-underline-offset: 2px;
	transition: text-decoration-color 0.2s ease;
}