/*
Theme Name: Vigerslev Haveforstad 2026
Theme URI: https://vigerslevh.dk
Description: Refreshed standalone theme for Grundejerforeningen Vigerslev Haveforstad. Replaces the Twenty Fourteen child theme.
Author: Grundejerforeningen Vigerslev Haveforstad
Version: 2.0
Requires PHP: 8.0
Text Domain: vigerslevh
*/

@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;
	--measure: 68ch;
	--gutter: 1rem;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--font);
	font-size: 1.125rem; /* 18px */
	line-height: 1.6;
	color: var(--ink);
	background: var(--bg);
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.25;
	margin: 1.4em 0 .5em;
	font-weight: 700;
	color: var(--ink);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4, h5, h6 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: .15em;
	text-decoration-thickness: 1px;
}
a:hover { color: var(--blue-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
hr, hr.wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; opacity: 1; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: .3em; }
table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
td, th { text-align: left; vertical-align: top; padding: .4em .6em; border: 1px solid var(--line); }
input[type="text"], input[type="search"], input[type="email"], textarea {
	font: inherit;
	padding: .5em .7em;
	border: 1px solid #8b96a1;
	border-radius: 4px;
	background: #fff;
	color: var(--ink);
	max-width: 100%;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px);
}
.skip-link:focus {
	position: fixed; top: .5rem; left: .5rem;
	width: auto; height: auto; clip: auto;
	background: #fff; color: var(--ink);
	padding: .6em 1em; z-index: 100;
}

/* buttons: shared by real buttons, legacy widget forms and the mail-form submit */
button, input[type="submit"], .button, .wp-block-button__link, .entry-content button {
	display: inline-block;
	font: inherit;
	font-weight: 700;
	background: var(--green);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: .55em 1.2em;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.3;
}
button:hover, input[type="submit"]:hover, .button:hover, .wp-block-button__link:hover, .entry-content button:hover {
	background: var(--green-dark);
	color: #fff;
}

/* ---------- layout ---------- */
.wrap {
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* top bar */
.site-top {
	background: var(--blue);
	color: #fff;
}
.site-top .wrap {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.5rem;
}
.site-brand {
	display: flex;
	align-items: center;
	gap: .9rem;
	color: #fff;
	text-decoration: none;
	flex: 1;
}
.site-brand:hover { color: #fff; text-decoration: underline; }
.site-brand img { height: 3rem; width: auto; }
.site-brand .site-name {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
}
.site-brand .site-name small {
	display: block;
	font-weight: 400;
	font-size: .85rem;
	opacity: .9;
}
.menu-toggle {
	display: none;
	background: var(--blue-dark);
	padding: .5em 1em;
}
.menu-toggle[aria-expanded="true"] { background: #fff; color: var(--blue); }

/* main menu */
.site-nav {
	background: var(--card);
	border-bottom: 1px solid var(--line);
}
.site-nav .wrap {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.site-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	flex: 1;
}
.site-nav li { margin: 0; position: relative; }
.site-nav a {
	display: block;
	padding: .8rem .6rem;
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--blue); border-bottom-color: var(--line); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a {
	color: var(--blue);
	border-bottom-color: var(--blue);
}
.site-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .45em; height: .45em;
	margin-left: .45em;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: translateY(-.2em) rotate(45deg);
}
.site-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%; left: 0;
	min-width: 16rem;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 3px solid var(--blue);
	box-shadow: 0 6px 16px rgba(30,40,50,.12);
	z-index: 20;
}
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu { display: flex; }
.site-nav .sub-menu a { padding: .7rem 1rem; border-bottom: 0; font-weight: 500; white-space: nowrap; }
.site-nav .sub-menu a:hover { background: var(--blue-tint); }
.site-top .search-form { display: flex; gap: .4rem; }
.site-top .search-form input[type="search"] { width: 10rem; padding: .35em .6em; border-color: transparent; }
.site-top .search-form input[type="submit"] { padding: .35em .8em; }

/* page title band with the cadastral map */
.page-band {
	background: #fff url("images/matrikelkortbackground.jpg") center / cover no-repeat;
	border-bottom: 1px solid var(--line);
}
.page-band .wrap {
	background: linear-gradient(90deg, rgba(255,255,255,.92) 0 45%, rgba(255,255,255,.6));
	padding-top: 1.6rem;
	padding-bottom: 1.6rem;
}
.page-band h1 {
	margin: 0;
	color: var(--blue);
	font-size: clamp(1.5rem, 1rem + 1.8vw, 2.1rem);
}
.page-band .meta { margin: .3rem 0 0; color: var(--muted); font-size: 1rem; }

/* content grid */
.site-main .wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: 2rem;
	padding-top: 2rem;
	padding-bottom: 3rem;
}
.site-main.no-aside .wrap { grid-template-columns: minmax(0, 1fr); }
.content-area { min-width: 0; }

.panel {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 1.5rem 1.75rem;
}
.panel + .panel { margin-top: 1.5rem; }
.entry-content > :first-child, .entry-content h6:first-child { margin-top: 0; }
.entry-content { max-width: var(--measure); }
.entry-content .grid-links,
.entry-content .wp-block-group { max-width: none; }
.entry-content p + h2, .entry-content p + h3 { margin-top: 1.5em; }
.entry-title a { text-decoration: none; }
.entry-title a:hover { text-decoration: underline; }
.entry-meta { color: var(--muted); font-size: 1rem; margin: 0 0 1rem; }
.readmore { font-weight: 600; white-space: nowrap; }
.pagination { display: flex; gap: 1rem; margin-top: 1.5rem; }

/* right column boxes (and any widget) */
.widget-area { display: grid; gap: 1.5rem; align-content: start; }
.widget {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	font-size: 1rem;
}
.widget-title {
	margin: 0;
	background: var(--blue);
	color: #fff;
	font-size: 1.05rem;
	padding: .65rem 1.1rem;
}
.widget-body { padding: 1rem 1.1rem; }
.widget-body > :last-child { margin-bottom: 0; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: .25rem 0; }

/* legacy "portlet" markup still used inside the custom HTML widgets */
.widget table { margin: 0; }
.widget td { border: 0; padding: .4rem 1.1rem; }
.widget tr:last-child td { padding-bottom: 1rem; }
.widget tr.PortletHeaderColor td {
	background: var(--blue);
	padding: .65rem 1.1rem;
}
.widget .PortletHeaderText { color: #fff; font-weight: 700; font-size: 1.05rem; }
.widget .PortletText2, .PortletText2 { font: inherit; color: var(--ink); }
.widget form { margin: .5rem 0; }
.widget td br:first-child { display: none; }
.widget .popUpFormLink { display: inline-block; padding: .3rem 0; }

/* the mail-form links produced by the forum-mail plugin */
.popUpFormLink {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: .15em;
	cursor: pointer;
}
.widget .popUpFormLink { font-weight: 600; }
.popUpFormLink:hover { color: var(--blue-dark); }
.popUpFormLink img { height: 1.1em; width: auto; vertical-align: -.15em; margin-right: .3em; }
/* page content has inline padding:0 1em on this button; !important beats it */
.entry-content button { font-size: 1rem; padding: .55em 1.2em !important; }
.entry-content button .popUpFormLink { color: #fff; text-decoration: none; font-weight: 700; }
.entry-content button .popUpFormLink img { display: none; }
/* the pop-up itself (markup comes from the plugin template: label text, <br>, input) */
.mailPopUpForm { background-color: rgba(30, 40, 50, .45); }
.mailPopUpForm form {
	background: #fff;
	border: 1px solid var(--line);
	border-top: 6px solid var(--blue);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(30,40,50,.25);
	padding: 1.25rem 1.5rem 1.5rem;
	font-size: 1rem;
	line-height: 1.5;
	overflow: auto;
}
.mailPopUpForm .formTitle { font-size: 1.3rem; text-align: left; margin: 0 2.5rem .75rem 0; color: var(--blue); }
.mailPopUpForm .close-button {
	top: .6rem; right: .75rem;
	width: 2.25rem; height: 2.25rem;
	line-height: 2.25rem; text-align: center;
	font-size: 1.75rem; border-radius: 50%;
	color: var(--muted);
}
.mailPopUpForm .close-button:hover { background: var(--blue-tint); color: var(--ink); }
.mailPopUpForm .formText { display: block; font-weight: 600; }
.mailPopUpForm form .formText input[type="text"],
.mailPopUpForm form .formText textarea {
	display: block;
	height: auto;
	padding: .5em .7em;
	margin: .25rem 0 1rem;
	font-weight: 400;
	max-width: 100%;
}
.mailPopUpForm form .formText input[name="Emne"],
.mailPopUpForm form .formText input[name="Navn"],
.mailPopUpForm form .formText input[name="E-mail"],
.mailPopUpForm form .formText textarea { width: 100%; }
.mailPopUpForm form .formText input[name="Matrikelnummer"] { width: 7rem; }
.mailPopUpForm form .formText input[name="Vej"] { width: 100%; }
.mailPopUpForm form .formText input[name="Husnummer"] { width: 5rem; }
.mailPopUpForm .formText br { display: none; } /* template uses <br> for layout; inputs are blocks now */
.mailPopUpForm .recaptcha_form { margin: .25rem 0 1rem; }
.mailPopUpForm .sendMailSubmit input[type="submit"] { padding: .7em 1.6em; font-size: 1.05rem; }

/* front page partner logos and link row */
.grid-links { align-items: center; gap: 1rem 1.5rem; }
.grid-links figure { margin: 0; }
.grid-links img { height: 42px; width: auto; }

/* bestyrelsen page */
.bestyrelsen table.vh_none td { border: 0; padding: 0; }
table.vh_none, table.vh_none td { border: 0; }
table.vh_none td.vh_right { text-align: right; padding-right: 1em; }
table.vh_none td.vh_center { text-align: center; }
.textwidget table td { border: 1px solid var(--line); padding: .4em .8em; }

/* posts listed by the add_posts shortcode */
.add_posts_content.readmore { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.add_posts .vh_title { margin-top: 0; font-size: 1.25rem; }
.post-title-underline { display: none; }

/* footer */
.site-footer {
	background: var(--blue-dark);
	color: #fff;
	font-size: 1rem;
	margin-top: auto;
}
.site-footer .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
.site-footer a, .site-footer a:hover { color: #fff; }
.site-footer .footer-right { margin-left: auto; opacity: .85; }

/* reduced motion & print */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .site-nav, .site-footer, .widget-area { display: none; } }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
	.site-main .wrap { grid-template-columns: minmax(0, 1fr); }
	.site-top .search-form { display: none; }
}
@media (max-width: 760px) {
	body { font-size: 1.0625rem; }
	.menu-toggle { display: inline-block; }
	.site-nav .wrap { display: block; padding: 0; }
	.site-nav ul { display: none; flex-direction: column; }
	.site-nav.is-open ul { display: flex; }
	.site-nav a { padding: .9rem var(--gutter); border-bottom: 1px solid var(--line); }
	.site-nav .current-menu-item > a { border-left: 4px solid var(--blue); }
	.site-nav .sub-menu {
		display: flex; position: static;
		border: 0; box-shadow: none;
		background: var(--blue-tint);
	}
	.site-nav .sub-menu a { padding-left: 2rem; }
	.site-nav .menu-item-has-children > a::after { display: none; }
	.site-brand .site-name { display: none; }
	.site-brand img { height: 2.6rem; }
	.panel { padding: 1.1rem 1rem; }
	.page-band .wrap { background: rgba(255,255,255,.9); }
	.grid-links img { height: 34px; }
	.entry-content .is-layout-grid:not(.grid-links) { grid-template-columns: 1fr !important; gap: .5rem; }
	.mailPopUpForm form .formText textarea { height: 6rem; }
	.mailPopUpForm form { padding: 1rem; }
}