/*  gruf2026 – phpBB style for Grundejerforeningen Vigerslev Haveforstad
    --------------------------------------------------------------
    Child of "gruf" (which is a child of prosilver). The parent's
    overall_header.html links prosilver's stylesheet first, so this file
    only overrides. Colours, type and buttons match the WordPress theme
    "Vigerslev Haveforstad 2026".
    -------------------------------------------------------------- */

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("./fonts/AtkinsonHyperlegibleNext-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url("./fonts/AtkinsonHyperlegibleNext-latin-italic.woff2") format("woff2");
}

:root {
	--blue: #2e5e8f;
	--blue-dark: #244b73;
	--blue-tint: #e8eff6;
	--green: #2e7d32;
	--green-dark: #256628;
	--ink: #1e2832;
	--muted: #55606b;
	--bg: #f3f5f8;
	--card: #ffffff;
	--line: #d6dde4;
	--focus: #e39b00;
	--font: "Atkinson Hyperlegible Next", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- base: prosilver sizes everything in em from a 10px body ---------- */
html, body {
	color: var(--ink);
	background: var(--bg);
}
body {
	font-family: var(--font);
	font-size: 12.5px; /* scales prosilver's em-based type up ~25% */
	line-height: 1.5;
	padding: 0;
}
h1, h2, h3, h4 { font-family: var(--font); }
h2 { color: var(--ink); font-weight: 700; }
h3 { color: var(--blue); border-bottom-color: var(--line); font-family: var(--font); }
hr { border-color: var(--line); border-top-color: var(--line); }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.wrap {
	max-width: 1260px;
	min-width: 0;
	padding: 0 16px 24px;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* ---------- header: flat blue bar like the website ---------- */
.headerbar {
	background: var(--blue);
	border-radius: 0 0 8px 8px;
	padding: 10px 16px;
	margin-bottom: 12px;
	color: #fff;
}
/* flex header: logo, description and search box on one centred line */
.headerbar .inner { display: flex; align-items: center; gap: 1.5rem; min-height: 56px; }
.site-description { width: auto; flex: 1; float: none; display: flex; align-items: center; gap: 1.5rem; }
.site-description .logo { float: none; padding: 0; line-height: 0; }
.site-description p { margin: 0; padding: 0; }
.headerbar .search-header, .headerbar .search-box { float: none; margin: 0; }
.site_logo {
	background-image: url("./vh_logo3.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	width: 220px;
	height: 52px;
	margin-top: 4px;
}
.site-description p { color: #fff; font-size: 1.05em; }
/* search box in the header: one rounded white control, equal-height parts */
.search-header {
	display: flex;
	align-items: stretch;
	box-shadow: none;
	border-radius: 6px;
	overflow: hidden;
	background: var(--card);
	margin-left: 1rem;
}
.search-header form, .search-header fieldset { display: flex; align-items: stretch; height: 100%; }
.search-header { height: 36px; }
.search-header .inputbox { border: 0; height: 100%; width: 14rem; padding: 0 .9em; border-radius: 0; font-size: 1.1em; }
.site-description p { max-width: 62ch; }

/* ---------- nav bar: white, bordered ---------- */
.navbar {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 4px 14px;
	margin-bottom: 14px;
}
.navbar a, .nav-breadcrumbs a, .navbar .icon { color: var(--blue); }
.navbar li { font-size: 1.1em; }
.nav-breadcrumbs .crumb a { font-weight: 600; }
.nav-footer { font-size: 1.05em; }
.navbar .linklist > li + li::before, .navbar .linklist > li:not(.rightside) + li::before { content: none; }

/* ---------- forum and topic lists ---------- */
.forabg, .forumbg {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 0;
	margin-bottom: 16px;
	overflow: hidden;
}
.forabg .header, .forumbg .header {
	background: var(--blue);
	padding: 2px 6px;
}
ul.topiclist li.header dt .list-inner { padding-left: 14px; }
.forabg .header dt, .forumbg .header dt, .forabg .header dd, .forumbg .header dd {
	color: #fff;
	font-size: 1.05em;
	text-transform: none;
	letter-spacing: 0;
}
.forumbg .header a, .forabg .header a, th a { color: #fff; }
.forumbg .header a:hover, .forabg .header a:hover, th a:hover { color: #fff; text-decoration: underline; }
ul.topiclist li.row { border-top: 1px solid var(--line); border-bottom: 0; }
ul.topiclist li.row:first-child { border-top: 0; }
.bg1 { background: var(--card); }
.bg2 { background: #f8fafc; }
.bg3 { background: var(--blue-tint); }
table.zebra-list tr:nth-child(odd) td, ul.zebra-list li:nth-child(odd) { background: var(--card); }
table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) { background: #f8fafc; }
ul.topiclist dt, ul.topiclist dd { padding-top: 6px; padding-bottom: 6px; }
ul.topiclist dd { border-left-color: var(--line); }
a.forumtitle, a.topictitle { font-size: 1.3em; color: var(--blue); font-weight: 700; }
a.forumtitle:hover, a.topictitle:hover { color: var(--blue-dark); text-decoration: underline; }
.forum-description, .topiclist .lastpost, .topiclist .posts, .topiclist .topics, .topiclist .responsive-show { color: var(--muted); }
.row-item dt .list-inner { padding-top: 2px; }
.row .list-inner { font-size: 1.05em; }
.lastpost a { color: var(--blue); }
.username-coloured { font-weight: 700; }

/* ---------- panels, posts ---------- */
.panel {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--ink);
	padding: 12px 16px;
}
.post {
	border: 1px solid var(--line);
	border-radius: 8px;
	margin-bottom: 12px;
	padding: 12px 16px;
}
.post.bg1, .post.bg2 { background: var(--card); }
.postbody { color: var(--ink); }
.postbody h3 { font-size: 1.6em; font-family: var(--font); }
.postbody h3 a { color: var(--ink); }
.postbody .content, .content, .postbody .signature, .message-box textarea, .inputbox, select { font-family: var(--font); }
.postbody .content { font-size: 1.35em; line-height: 1.55; min-height: 2em; }
.postbody .content a, .postlink, .postlink:visited { color: var(--blue); text-decoration: underline; border-bottom: 0; }
.postbody .content a:hover, .postlink:hover { color: var(--blue-dark); background: transparent; }
.postprofile { color: var(--muted); border-left-color: var(--line); font-size: 1.05em; }
.postprofile strong, .postprofile a { color: var(--blue); }
.post:target .content, .post h3 a.first-unread, .post:target h3 a { color: var(--ink); }
.author { color: var(--muted); font-size: 1.05em; }
.author a { color: var(--blue); font-weight: 600; }
.action-bar { font-size: 1.05em; }
.gruf-mail-button a.button, .postbody .gruf-mail-button .button { margin-top: 0; }
blockquote { background: var(--blue-tint); border-color: var(--line); }
.codebox { border-color: var(--line); }

/* ---------- buttons: green primary, white secondary, no gradients ---------- */
.button, .button2, .button1, input.button1, input.button2, .button-search, .button-search-end {
	font-family: var(--font);
	font-weight: 700;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
	box-shadow: none;
	text-shadow: none;
	color: var(--blue);
	filter: none;
	cursor: pointer;
}
.button { padding: 5px 12px; font-size: 1.1em; height: auto; line-height: 1.4; }
.button:hover, .button:focus, .button2:hover, .button2:focus {
	background: var(--blue-tint);
	border-color: var(--blue);
	color: var(--blue-dark);
	box-shadow: none;
	text-shadow: none;
}
.button .icon, .button-secondary { color: var(--blue); }
.button:hover .icon, .button:focus .icon, .button-secondary:hover, .button-secondary:focus { color: var(--blue-dark); }
.button-icon-only { padding: 5px 8px; }
.caret { border-color: var(--line); }
/* primary actions (New Topic, Reply, Submit, Login) in the site's green */
.action-bar > a.button,
input.button1, .button1, .submit-buttons .button1, .postbody .gruf-mail-button .button {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
}
.action-bar > a.button .icon { color: #fff; }
.action-bar > a.button:hover,
input.button1:hover, .button1:hover, .postbody .gruf-mail-button .button:hover {
	background: var(--green-dark);
	border-color: var(--green-dark);
	color: #fff;
}
.button-search, .button-search-end { background: var(--card); }
.search-box .inputbox { border-color: var(--line); }

/* action bar above/below topic and post lists: equal-height controls, joined search box */
.action-bar { font-size: 1em; margin: 10px 0; display: flow-root; }
.action-bar .button, .action-bar .search-box .inputbox, .pagination .button, .pagination li a, .pagination li span {
	height: 36px;
	box-sizing: border-box;
}
.action-bar .button, .pagination .button { display: inline-flex; align-items: center; line-height: 1; margin-right: 8px; }
.action-bar .search-box {
	float: left;
	display: flex;
	margin: 0 8px 0 0;
	height: 36px;
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
	background: var(--card);
}
.action-bar .search-box form, .action-bar .search-box fieldset { display: flex; align-items: stretch; height: 100%; }
.action-bar .search-box .inputbox {
	float: none;
	height: 100%;
	width: 14rem;
	padding: 0 .9em;
	border: 0;
	border-radius: 0;
	font-size: 1.1em;
}
/* the two buttons glued to either search field (header and action bar) */
.search-header .button-search, .search-header .button-search-end,
.action-bar .search-box .button-search, .action-bar .search-box .button-search-end {
	display: flex;
	align-items: center;
	float: none;
	line-height: 1;
	margin: 0;
	height: auto;
	padding: 0 .8em;
	border: 0;
	border-left: 1px solid var(--line);
	border-radius: 0;
	background: var(--card);
	color: var(--blue);
	box-shadow: none;
}
.search-header .button-search:hover, .search-header .button-search-end:hover,
.action-bar .search-box .button-search:hover, .action-bar .search-box .button-search-end:hover,
.search-header .button-search:focus, .search-header .button-search-end:focus,
.action-bar .search-box .button-search:focus, .action-bar .search-box .button-search-end:focus {
	background: var(--blue-tint);
	border-color: var(--line);
	color: var(--blue-dark);
}
.action-bar .dropdown-container.topic-tools { margin-right: 8px; }
.action-bar .pagination { line-height: 36px; }
.action-bar .pagination .button { margin: 0; }
.pagination li a, .pagination li span { display: inline-flex; align-items: center; }

/* ---------- forms ---------- */
.inputbox { border-color: #8b96a1; color: var(--ink); border-radius: 4px; font-family: var(--font); padding: 4px 6px; }
.inputbox:hover { border-color: var(--blue); }
.inputbox:focus { border-color: var(--blue); box-shadow: none; }
fieldset dl dt, label { color: var(--ink); font-size: 1.1em; }
.login-title { color: var(--blue); }
.login-title span { color: var(--muted); }
fieldset.fields1 dd { font-size: 1.1em; }
.error { color: #b3261e; }
.logon_hint { color: var(--blue); }

/* pagination, jumpbox, dropdowns */
.pagination li a, .pagination li span { border-color: var(--line); border-radius: 4px; background: var(--card); color: var(--blue); box-shadow: none; }
.pagination li.active span { background: var(--blue); border-color: var(--blue); color: #fff; }
.pagination .button, .action-bar .pagination .button { background: var(--card); border-color: var(--line); color: var(--blue); }
.pagination .button .icon { color: var(--blue); }
.pagination li a:hover, .pagination li a:hover .icon { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-dark); }
.dropdown .pointer, .dropdown .pointer-inner { border-color: var(--line) transparent; }
.dropdown .dropdown-contents { border-color: var(--line); box-shadow: 0 6px 16px rgba(30,40,50,.12); border-radius: 6px; }
.dropdown li, .dropdown-extended .header { color: var(--ink); }
.jumpbox-cat-link, .jumpbox-forum-link { background: var(--blue-tint); color: var(--blue); }

/* stats and footer */
.stat-block h3 { color: var(--blue); text-transform: none; font-size: 1.2em; }
.stat-block p { color: var(--muted); font-size: 1.05em; }
.copyright { color: var(--muted); padding: 10px 2px; }
.copyright a { color: var(--blue); }

/* control panel (UCP/MCP) */
.panel-container h3, .panel-container hr, .cp-menu hr { border-color: var(--line); }
.panel-container .panel li.row { border-color: var(--line); }
.panel-container .panel li.header dd, .panel-container .panel li.header dt { color: var(--ink); }
.tabs .tab > a { background: var(--blue-tint); border-color: var(--line); color: var(--blue); }
.tabs .activetab > a, .tabs .activetab > a:hover { background: var(--card); border-color: var(--line); color: var(--ink); }
.navigation li a, .navigation li a:hover { color: var(--blue); }
.navigation .active-subsection a { background: var(--blue); color: #fff; }
.cp-main .panel { border: 0; }

/* ---------- carried over from the gruf style (functional rules) ---------- */
.gruf-hide { display: none !important; }
body.section-app\/user\/forgot_password .navbar .inner { display: none; }
.postbody .gruf-mail-button { float: right; margin-top: 5px; }
.postprofile.responsive dt.gruf-mail-button { float: right; display: none; }
.headerspace { margin-top: 0; margin-bottom: 5px; }
.page-body h1 { color: var(--blue); margin-top: 1em; }
.page-body ul { list-style-position: inside; }
.page-body .button-container { margin: 2em; }
.page-body .button-container a { color: var(--blue); }

/* ---------- small screens ---------- */
@media (max-width: 700px) {
	.wrap { padding: 0 8px 16px; }
	.headerbar { border-radius: 0; margin: 0 -8px 10px; padding: 8px 12px; }
	.headerbar .inner { min-height: 0; }
	.site-description { width: 100%; display: flex; text-align: left; }
	.site-description p { display: none; }
	.logo { display: inline-block; float: none; padding: 4px 0 0; }
	.postprofile.responsive dt.gruf-mail-button .button { background: var(--green); border-color: var(--green); color: #fff; }
	.site_logo { width: 180px; height: 44px; }
	.postprofile.responsive dt.gruf-mail-button { display: block; }
	.postprofile.responsive dt:first-child { float: left; margin-top: 5px; margin-bottom: 0; }
	.postbody .gruf-mail-button { display: none; }
	.post .postprofile { min-height: 0; }
	.post.has-profile.online { background-image: none; }
}