/* Forum stylesheet — 12-column grid, CSS variables, flexbox, responsive.
   Preserves legacy color scheme (parchment #F2E5B1, dark-red #8f0000). */

/* ===== CSS Variables ===== */
:root {
	--forum-bg: #3D3D3B;
	--forum-parchment: #F2E5B1;
	--forum-parchment-hover: #EBDCA0;
	--forum-title: #8f0000;
	--forum-text: #000000;
	--forum-border: #837B5C;
	--forum-border-light: #C4BFAA;
	--forum-link: #524936;
	--forum-link-visited: #633525;
	--forum-link-active: #77684D;
	--forum-link-hover: #1E1E1E;
	--forum-date: #007000;
	--forum-input-bg: #DED7BD;
	--forum-input-border: #302F2A;
	--font-ui: var(--font-ui, Verdana, Helvetica, Arial, Tahoma, sans-serif);
	--font-mono: var(--font-mono, Courier, monospace);
	--forum-max-width: 1440px;
}

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

html { height: 100%; }

body {
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--forum-bg);
	font-size: 10pt;
	font-family: var(--font-ui);
	color: var(--forum-text);
	display: flex;
	flex-direction: column;
}

img { border: none; max-width: 100%; }

a:link { color: var(--forum-link); text-decoration: none; }
a:visited { color: var(--forum-link-visited); text-decoration: none; }
a:active { color: var(--forum-link-active); text-decoration: none; }
a:hover { color: var(--forum-link-hover); text-decoration: underline; }

/* ===== 12-column grid layout ===== */
/* The forum's header used to be a 132x135 near-black tile stretched edge to edge (line_capitalcity),
   with the flat RGB logo square floating in the middle of the void. It is the site's own bar now:
   the transparent wordmark on the left, a way back into the game and the rest of the site on the
   right -- the forum reads as part of Ashveil rather than a page that loaded wrong. */
#header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 10px 22px;
	background: linear-gradient(180deg, #2b2621 0%, #1c1813 100%);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	flex-shrink: 0;
}

.forum-brand img { display: block; height: 40px; width: auto; }

.forum-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.forum-nav a,
.forum-nav a:link,
.forum-nav a:visited {
	color: #e9dcb4;
	font-weight: bold;
}

.forum-nav a:hover { color: #fff; text-decoration: none; }

#main {
	flex: 1;
	width: 100%;
}

/* 12-column grid: 1 col padding each side = 10/12 content */
.forum-grid {
	max-width: var(--forum-max-width);
	margin: 0 auto;
	width: 100%;
	padding: 0 calc((100% - (100% / 12 * 10)) / 2);
}

.forum-wrapper {
	display: flex;
	background-color: var(--forum-parchment);
	min-height: calc(100vh - 60px - 60px);
}

.forum-decoration-left,
.forum-decoration-right,
#leftground {
	width: 29px;
	flex-shrink: 0;
	background-image: url(/assets/img/forum/leftground.jpg);
	background-repeat: repeat-y;
}

/* rightground.jpg is 24px wide, but the box was 29px with repeat-y anchored left -- so 5px of the
   wrapper's parchment leaked out past the torn edge as a bright vertical strip, detached from the
   page by the tear's own dark fade. Match the box to the texture; the tear meets the page directly. */
.forum-decoration-right {
	width: 24px;
	background-image: url(/assets/img/forum/rightground.jpg);
}

.forum-inner {
	flex: 1;
	display: flex;
	min-width: 0;
}

.forum-sidebar {
	width: 210px;
	flex-shrink: 0;
	padding: 15px 10px;
	text-align: center;
}

.forum-content {
	flex: 1;
	padding: 15px 20px;
	text-align: left;
	min-width: 0;
}

#windows {
	position: absolute;
	z-index: 1101;
}

/* ===== Footer ===== */
#footer {
	width: 100%;
	text-align: center;
	background-image: url(/assets/img/forum/footer_capitalcity.jpg);
	background-repeat: repeat-x;
	padding-top: 13px;
	background-color: #000;
	flex-shrink: 0;
}

.forum-footer-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

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

/* ===== Typography ===== */
.text { font-weight: normal; font-size: 10pt; color: var(--forum-text); }

h3 {
	font-weight: bold;
	font-size: 12pt;
	color: var(--forum-title);
	font-family: var(--font-ui);
	text-align: center;
	margin: 10px 0;
}

h4 {
	font-weight: bold;
	font-size: 11pt;
	margin-bottom: 5px;
	color: var(--forum-title);
	font-family: var(--font-ui);
}

.date {
	font-size: 8pt;
	color: var(--forum-date);
	font-family: var(--font-mono), var(--font-ui);
}

.text1 { color: var(--forum-title); font-size: 12px; }

/* ===== Sidebar widgets ===== */
.forum-userbox { text-align: center; margin-bottom: 10px; }
.forum-mod-links { text-align: center; }
.forum-menu { text-align: left; }

/* ===== Topic list items ===== */
.topic-item {
	margin-top: 10px;
}

.fixed_topik {
	background-color: var(--forum-parchment-hover);
	background-image: url(/assets/img/forum/ao.png);
	background-repeat: repeat-x;
	border-radius: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
	padding: 6px 8px;
}

.fixed_topik_in {
	background-color: var(--forum-parchment-hover);
	background-image: url(/assets/img/forum/ao.png);
	background-repeat: repeat-x;
	margin-right: 120px;
	border-radius: 8px;
	padding: 6px 8px;
}

.topic-icon { border: none; }
.topic-preview { margin-left: 21px; }
.topic-preview-text { color: #606060; }
.topic-replies { margin-left: 21px; }

/* ===== Divider lines ===== */
.line1 { border-top: 1px solid var(--forum-border); width: 100%; margin: 7px 0; }
.line2 { border-top: 1px solid var(--forum-border-light); width: 100%; margin: 9px 0; }

/* ===== Forms ===== */
.inup,
input[type="text"],
input[type="submit"],
textarea,
select {
	border: 1px solid var(--forum-input-border);
	font-size: 8pt;
	color: var(--forum-text);
	font-family: var(--font-ui);
	background-color: var(--forum-input-bg);
	padding: 2px 4px;
}

input[type="radio"] { border: none; background: none; }
.btn { cursor: pointer; }
.clickable { cursor: pointer; }
textarea { resize: vertical; min-height: 120px; }

.mod-select { margin-bottom: 8px; max-width: 250px; }

/* ===== Pagination ===== */
pages a { color: #5b3e33; padding: 1px 3px; }
pages u { padding: 1px 3px; color: #6f0000; font-weight: bold; }
pages a:hover { background-color: #fff; }

/* ===== Poll rows ===== */
.answ1 { cursor: default; }
.answ1:hover {
	background-color: var(--forum-parchment-hover);
	background-image: url(/assets/img/forum/ao.png);
	cursor: pointer;
}
.answ1h {
	background-color: var(--forum-parchment-hover);
	background-image: url(/assets/img/forum/ao.png);
	cursor: pointer;
}

/* ===== Admin buttons ===== */
.btnAdm {
	display: inline-block;
	background-color: #ebdda4;
	border: 1px solid #cabb80;
	margin: 1px 1px -5px 1px;
	padding: 2px;
}
.btnAdm img { padding: 3px; display: block; float: left; }
.btnAdm img:hover { background-color: #c1b278; }

/* ===== Forum sections ===== */
.forum-error {
	color: var(--forum-title);
	font-weight: bold;
	padding: 10px 0;
}

.forum-error-page {
	text-align: center;
	padding: 80px 20px;
	font-size: 14pt;
}

.forum-notice {
	text-align: center;
	padding: 15px;
	color: var(--forum-title);
}

.forum-closed { font-weight: bold; }
.forum-empty { text-align: center; padding: 30px; color: #666; font-style: italic; }

/* ===== Message rendering ===== */
.msg-indent { margin-left: 31px; }
.msg-deleted-admin {
	margin-left: 31px;
	color: #9d9472;
	padding: 10px;
	border: 1px solid #ebdca0;
}
.msg-mod-note { margin-left: 31px; }
.vote-yours { color: red; }
.msg-highlight { color: green; }

.forum-section-desc {
	font-size: 9pt;
	color: #5a5040;
	margin-bottom: 10px;
	line-height: 1.5;
}

.forum-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0;
	padding: 8px 0;
	border-top: 1px solid var(--forum-border-light);
	border-bottom: 1px solid var(--forum-border-light);
}

.forum-search {
	display: inline-flex;
	gap: 5px;
	align-items: center;
}

.forum-pages,
.forum-pages-top,
.forum-pages-bottom {
	margin: 8px 0;
}

.forum-topics { margin: 10px 0; }

/* ===== Topic view ===== */
.forum-nav-top {
	text-align: center;
	padding: 10px 0;
}

.forum-topic-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 15px;
	padding: 10px 0;
}

.forum-mod-panel {
	text-align: right;
	font-size: 9pt;
}

.forum-mod-panel select {
	margin-top: 4px;
	max-width: 250px;
}

.forum-topic-content { margin: 10px 0; }

/* ===== Editor forms ===== */
.forum-new-topic,
.forum-reply-form {
	border: 1px solid #d0c8a8;
	border-radius: 6px;
	margin: 20px 0;
	padding: 15px;
	background-color: rgba(235, 221, 164, 0.3);
}

.forum-editor { margin-top: 10px; }

.forum-editor input[name="title"] {
	width: 100%;
	margin-bottom: 8px;
}

/* Formatting controls belong above the field they format. They used to run down
   the right-hand side of the textarea in a single column, which reads as a list of
   unrelated buttons rather than a toolbar. */
.forum-editor-toolbar {
	display: flex;
	gap: 4px;
	margin-bottom: 6px;
}

.forum-editor-toolbar .btn {
	min-width: 34px;
}

.forum-editor textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
}

.forum-editor-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	justify-content: space-between;
}

/* Topic icons. Each was a bare radio sitting next to a loose 15px gif, so the pair
   read as two separate controls and the chosen one was invisible. Make the icon
   itself the control, and let the selection show. */
.forum-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.forum-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border: 1px solid transparent;
	border-radius: var(--ui-radius-sm, 3px);
	cursor: pointer;
}

.forum-icon input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

.forum-icon:hover { border-color: var(--ui-border, #b0b0b0); background: rgba(0, 0, 0, .06); }
.forum-icon:has(input:checked) { border-color: #8a7f5c; background: rgba(138, 127, 92, .2); }
/* Fallback for engines without :has() — the outline still marks the choice. */
.forum-icon input:checked + img { outline: 2px solid #8a7f5c; outline-offset: 1px; }

.forum-editor-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.forum-editor-asadmin {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
	.forum-grid { padding: 0 10px; }
	.forum-wrapper { flex-direction: column; }
	.forum-decoration-left,
	.forum-decoration-right { display: none; }
	.forum-inner { flex-direction: column; }
	.forum-sidebar { width: 100%; }
	.forum-toolbar { flex-direction: column; }
	.forum-topic-header { flex-direction: column; }
	.forum-mod-panel { text-align: left; }
	.forum-editor-options { flex-direction: column; align-items: stretch; }
	.forum-footer-inner { flex-direction: column; }
}