/* FNAF Blog - Global Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	--accent: #e94560;
	--accent-dark: #c73e54;
	--bg: #0d0d1a;
	--bg-card: #141428;
	--bg-card2: #1a1a35;
	--border: #2a2a4a;
	--text: #e2e2f0;
	--text-muted: #7a7a9a;
	--radius: 10px;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: 'Inter', 'Arial', sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.6;
	min-height: 100vh;
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.2s;
}

a:hover {
	color: var(--accent-dark);
}

/* ── Buttons ── */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.5rem 1.1rem;
	background: var(--bg-card2);
	color: var(--text);
	text-decoration: none;
	border-radius: 6px;
	border: 1px solid var(--border);
	cursor: pointer;
	font-size: 0.9rem;
	font-family: inherit;
	font-weight: 500;
	transition: all 0.2s;
	white-space: nowrap;
}

.btn:hover {
	background: #22223d;
	border-color: var(--accent);
	color: #fff;
	transform: translateY(-1px);
}

.btn-sm {
	padding: 0.3rem 0.75rem;
	font-size: 0.82rem;
}

.btn-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	font-weight: 600;
}

.btn-primary:hover {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
	color: #fff;
}

.btn-edit {
	background: #1a3a1a;
	border-color: #2a5a2a;
	color: #6fcf6f;
}

.btn-edit:hover {
	background: #224422;
	border-color: #3a7a3a;
	color: #8fe88f;
}

.btn-danger {
	background: #3a0d0d;
	border-color: #6b1a1a;
	color: #f87171;
}

.btn-danger:hover {
	background: #4a1010;
	border-color: var(--accent);
	color: #fca5a5;
}

/* ── Flash messages ── */
.flash {
	padding: 0.85rem 1.25rem;
	margin: 1rem 0;
	border-radius: 8px;
	font-weight: 500;
	border-left: 4px solid;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.flash.success {
	background: rgba(40, 167, 69, 0.12);
	border-color: #28a745;
	color: #5fd880;
}

.flash.error {
	background: rgba(233, 69, 96, 0.12);
	border-color: var(--accent);
	color: #f87171;
}

.flash.warning {
	background: rgba(255, 193, 7, 0.1);
	border-color: #ffc107;
	color: #ffd35b;
}

.flash.info {
	background: rgba(23, 162, 184, 0.1);
	border-color: #17a2b8;
	color: #56d8ea;
}

/* ── Header / Nav ── */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(13, 13, 26, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

.main-nav {
max-width: 900px;
margin: 0 auto;
padding: 0 1.25rem;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}

.nav-brand {
color: #fff !important;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 0.4rem;
text-decoration: none;
}

.nav-brand-icon {
font-size: 1.1em;
}

.nav-brand:hover {
color: var(--accent) !important;
}

.nav-links {
display: flex;
align-items: center;
gap: 0.25rem;
}

.nav-link {
color: var(--text-muted);
padding: 0.35rem 0.7rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.2s;
text-decoration: none;
}

.nav-link:hover {
color: #fff;
background: var(--bg-card2);
}

.nav-link-admin {
color: #c8b4ff;
}

.nav-link-admin:hover {
background: rgba(180, 140, 255, 0.1);
color: #d8c4ff;
}

.nav-link-new {
color: #6fcf6f;
}

.nav-link-new:hover {
background: rgba(111, 207, 111, 0.1);
color: #8fe88f;
}

.nav-link-out {
color: var(--text-muted);
font-size: 0.82rem;
}

.nav-link-out:hover {
color: var(--accent);
}

.nav-user {
display: flex;
align-items: center;
gap: 0.1rem;
padding: 0.2rem 0.5rem 0.2rem 0.7rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 20px;
margin-left: 0.4rem;
}

.nav-username {
font-size: 0.82rem;
color: var(--text-muted);
font-weight: 500;
padding-right: 0.4rem;
border-right: 1px solid var(--border);
margin-right: 0.1rem;
}

/* ── Flash wrap ── */
.flash-wrap {
max-width: 860px;
margin: 0 auto;
padding: 0.5rem 1.25rem 0;
}

/* ── Main content ── */
.main-content {
min-height: calc(100vh - 60px - 52px);
}

/* ── Footer ── */
.site-footer {
border-top: 1px solid var(--border);
margin-top: 3rem;
padding: 1rem 1.25rem;
text-align: center;
}

.footer-inner {
max-width: 900px;
margin: 0 auto;
color: var(--text-muted);
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
}

.footer-brand {
color: var(--text);
font-weight: 600;
}

.footer-sep {
opacity: 0.4;
}