/* ============================================================================
   NMF DESIGN TOKENS
   Semantic color variables used across components and page themes.
   ========================================================================== */
:root {
	--nmf-primary: #b71c1c;
	--nmf-primary-strong: #8a0f12;
	--nmf-on-primary: #ffffff;
	--nmf-secondary: #ffffff;
	--nmf-on-secondary: #b71c1c;
	--nmf-secondary-border: #dddddd;
	--nmf-focus-ring: rgba(183,28,28,0.18);
	--nmf-primary-rgb: 183,28,28;
}

body.brand-theme {
	--nmf-primary: #025A8A;
	--nmf-primary-strong: #4686AE;
	--nmf-on-primary: #ffffff;
	--nmf-secondary: #9AB6D2;
	--nmf-on-secondary: #025A8A;
	--nmf-secondary-border: #4686AE;
	--nmf-focus-ring: rgba(2,90,138,0.25);
	--nmf-primary-rgb: 2,90,138;
}

/* Applies the NMF palette to W3.CSS utility classes. */
body.brand-theme .nmf-primary { background-color: var(--nmf-primary) !important; color: var(--nmf-on-primary) !important; }
body.brand-theme .text-nmf-primary { color: var(--nmf-primary) !important; }
body.brand-theme .text-nmf-secondary { color: var(--nmf-secondary) !important; }

/* ============================================================================
   GLOBAL BASE & TYPOGRAPHY
   ========================================================================== */
html, body { height: 100%; }
body {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	margin: 0;
	display: flex;
	flex-direction: column;
}

a { color: var(--nmf-primary); }
h1, h2, h3, h4, h5 { font-family: 'Poppins', sans-serif; margin-bottom: 0; }
.lede { font-size: 1.1rem; line-height: 1.6rem; }

/* ============================================================================
   PAGE LAYOUT SHELL
   ========================================================================== */
.w3-main {
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 24px;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

#main { flex: 1; }
[id] { scroll-margin-top: 24px; }

/* Cards and post articles clip their own corners over a white page. */
.w3-card-4, .post-article { overflow: hidden; background-color: #fff; }

.portrait-img { width: 100%; max-width: 220px; height: 220px; object-fit: cover; border-radius: 4px; }

/* Post meta: date left, author right. */
.post-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; font-size: 1.2rem; }
.post-meta .date, .post-meta .author { color: inherit; font-size: 1.2rem; font-weight: 700; }
.post-meta .author { text-align: right; }

.back-button { display: inline-flex; align-items: center; gap: 8px; }
.back-button .fa-reply, .back-button .label { line-height: 1; }
.back-button .fa-reply { font-size: 1rem; }

/* Section headings, via _includes/section_heading.html. */
.section-top-25 { margin-top: 25px; }
.section-rule {
	width: 100px;
	border-style: solid;
	border-color: var(--nmf-primary);
	margin: 0;
}
.section-rule-h1 { border-width: 10px 0 0 0; }
.section-rule-h2 { border-width: 8px 0 0 0; }
.section-rule-h3 { border-width: 6px 0 0 0; }
.section-rule-h4 { border-width: 4px 0 0 0; }
.section-rule-h5 { border-width: 2px 0 0 0; }
.section-heading-h1 { font-size: clamp(2.25rem, 5vw, 3rem); }
.section-heading-h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.section-heading-h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.section-heading-h4 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
.section-heading-h5 { font-size: clamp(1rem, 2.2vw, 1.2rem); }

.w3-button:focus { outline: none; box-shadow: 0 0 0 6px var(--nmf-focus-ring); }

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	margin-top: 60px;
	background-color: #1a1a1a;
	color: #e0e0e0;
	font-size: 0.9rem;
}
.site-footer a { color: #e0e0e0; text-decoration: none; }
.site-footer a:hover { color: #ffffff; text-decoration: underline; }
.site-footer-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 48px 40px 32px;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 40px;
}
.site-footer-logo { height: 48px; width: auto; filter: brightness(0) invert(1); margin-bottom: 12px; }
.site-footer-name { font-weight: 700; font-size: 1rem; color: #fff; margin: 0 0 4px; }
.site-footer-sub { color: #aaa; margin: 0 0 6px; font-size: 0.85rem; line-height: 1.4; }
.site-footer-heading {
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
}
.site-footer-links { list-style: none; margin: 0; padding: 0; }
.site-footer-links li { margin-bottom: 8px; }
.site-footer-bottom {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 40px;
	border-top: 1px solid #333;
	color: #777;
	font-size: 0.8rem;
}

/* ============================================================================
   HEADER & NAVIGATION
   Top branding bar, desktop navbar and mobile nav.
   ========================================================================== */
.site-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 88px;
	padding: 14px 24px !important;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--nmf-on-primary);
}

.site-logo { height: 50px; vertical-align: middle; margin-right: 12px; }
.site-brand { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.site-brand span { margin-left: 6px; font-weight: 700; font-size: 2rem; line-height: 1.05; }

.header-meta { font-size: 1rem; text-align: right; line-height: 1.15; }

.site-mobile-toggle {
	color: var(--nmf-on-primary) !important;
	font-size: 1.8rem;
	line-height: 1;
	padding: 8px 12px !important;
	border-radius: 6px;
	background: rgba(255,255,255,0.12);
}
.site-mobile-toggle:hover,
.site-mobile-toggle:focus { background: rgba(255,255,255,0.22) !important; }

.site-navbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 6px 16px;
	min-height: 52px;
	overflow: visible;
	white-space: nowrap;
	position: relative;
	z-index: 1000;
	background: var(--nmf-primary-strong);
	border-bottom: 2px solid rgba(0,0,0,0.08);
}

.site-navbar-link {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 12px;
	text-decoration: none;
	color: var(--nmf-on-primary);
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
}

/* Same highlight for a hovered link, a hovered dropdown title and an open one. */
.site-navbar-link:hover,
.site-navbar-link:focus,
.site-navbar .nav-dropdown > summary:hover,
.site-navbar .nav-dropdown > summary:focus-visible,
.site-navbar .nav-dropdown[open] > summary { background: rgba(255,255,255,0.2); }

.site-navbar .nav-dropdown { position: relative; display: inline-block; }
.site-navbar .nav-dropdown > summary { cursor: pointer; list-style: none; gap: 8px; }
.site-navbar .nav-dropdown > summary::-webkit-details-marker { display: none; }
.site-navbar .nav-dropdown > summary::after {
	content: "▾";
	font-size: 0.9em;
	line-height: 1;
	transform-origin: center;
	transition: transform 0.15s ease;
}
.site-navbar .nav-dropdown[open] > summary::after { transform: rotate(180deg); }

.site-navbar .nav-dropdown-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 260px;
	background: var(--nmf-secondary);
	border: 1px solid var(--nmf-secondary-border);
	border-radius: 6px;
	padding: 6px;
	z-index: 20;
	box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.site-navbar .nav-dropdown-menu a {
	display: block;
	min-height: auto;
	padding: 10px;
	border-radius: 4px;
	text-decoration: none;
	color: var(--nmf-on-secondary);
}
.site-navbar .nav-dropdown-menu a:hover,
.site-navbar .nav-dropdown-menu a:focus { background: rgba(var(--nmf-primary-rgb), 0.1); }

.site-navbar .external-indicator {
	font-size: 0.72em;
	margin-left: 4px;
	opacity: 0.95;
	vertical-align: text-top;
}

.site-mobile-nav {
	background: var(--nmf-primary-strong);
	color: var(--nmf-on-primary);
	border-bottom: 2px solid rgba(0,0,0,0.08);
	box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.site-mobile-nav .w3-bar-item,
.site-mobile-nav .w3-button,
.site-mobile-nav details.mobile-nav-dropdown > summary {
	color: var(--nmf-on-primary) !important;
	font-weight: 600;
	text-align: left;
	white-space: normal;
}
.site-mobile-nav .w3-button:hover,
.site-mobile-nav .w3-button:focus { background: rgba(255,255,255,0.14) !important; }

.site-mobile-nav details.mobile-nav-dropdown > summary { list-style: none; cursor: pointer; }
.site-mobile-nav details.mobile-nav-dropdown > summary::-webkit-details-marker { display: none; }
.site-mobile-nav details.mobile-nav-dropdown > summary::after { content: " ▾"; font-size: 0.85em; opacity: 0.7; }
.site-mobile-nav details.mobile-nav-dropdown[open] > summary::after { content: " ▴"; }
.site-mobile-nav .mobile-nav-dropdown-menu {
	border-top: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.08);
}
.site-mobile-nav .mobile-nav-dropdown-menu .w3-button { font-weight: 400; }

@media (max-width: 700px) {
	.site-topbar { min-height: 72px; padding: 10px 16px !important; }
	.site-logo { height: 40px; }
	.site-brand span { font-size: 1.45rem; }
	.header-meta { display: none; }
}

/* ============================================================================
   TABLES
   One look for hand-written .site-table tables and for Markdown tables inside
   .post-content: brand header row, hairline rows, brand-tinted stripes.
   ========================================================================== */
.site-table,
.post-content table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	overflow: hidden;
	max-width: 100%;
	margin: 16px auto;
	box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.site-table th, .site-table td,
.post-content th, .post-content td { padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.06); }
.site-table thead th,
.post-content thead th { background: var(--nmf-primary); color: var(--nmf-on-primary); font-weight: 700; }
.site-table tbody tr:nth-child(odd) td,
.post-content tbody tr:nth-child(odd) td  { background: rgba(var(--nmf-primary-rgb),0.03); }
.site-table tbody tr:nth-child(even) td,
.post-content tbody tr:nth-child(even) td { background: rgba(var(--nmf-primary-rgb),0.01); }
.site-table tbody tr:hover td,
.post-content tbody tr:hover td { background: rgba(var(--nmf-primary-rgb),0.06); }
.site-table tbody tr:last-child td,
.post-content tbody tr:last-child td { border-bottom: none; }

/* .site-table is the narrow, centred variant with centred cells. */
.site-table { width: 100%; max-width: 480px; border: 1px solid rgba(0,0,0,0.12); }
.site-table th, .site-table td { text-align: center; }
.site-table caption {
	caption-side: top;
	text-align: left;
	font-weight: 700;
	color: var(--nmf-primary-strong);
	padding-bottom: 6px;
}

@media (max-width: 640px) {
	.site-table { max-width: 100%; }
	.site-table th, .site-table td,
	.post-content th, .post-content td { padding: 8px 10px; }
}

/* ============================================================================
   POST HERO
   Cover-image hero header for news and arrangementer post pages.
   ========================================================================== */
.post-hero {
	position: relative;
	min-height: 340px;
	background-color: var(--nmf-primary);
	background-size: cover;
	background-position: center;
}
.post-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.10) 100%);
	display: flex;
	align-items: flex-end;
	padding: 2rem 2.5rem;
}
.post-hero-text { max-width: 760px; color: #fff; }
.post-hero-eyebrow {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.85;
	margin: 0 0 0.4rem;
}
.post-hero-text h1 {
	color: #fff;
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.25;
	margin: 0 0 0.7rem;
}
.post-hero-text .post-meta { display: flex; gap: 1.5rem; font-size: 0.9rem; opacity: 0.88; }

/* ============================================================================
   POST CONTENT
   Typography for every post body: news, arrangementer, INFOMAT and the
   generic pages built from Markdown.
   ========================================================================== */
.post-content {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.75;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.post-content blockquote {
	border-left: 4px solid var(--nmf-primary);
	background: rgba(var(--nmf-primary-rgb), 0.05);
	margin: 1.75rem 0;
	padding: 1rem 1.25rem;
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: #444;
}
.post-content blockquote p { margin: 0 0 0.5rem; }
.post-content blockquote p:last-child { margin-bottom: 0; }

.post-content img {
	display: block;
	max-width: 100%;
	max-height: 480px;
	height: auto;
	margin: 1.75rem auto;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.post-content a {
	color: var(--nmf-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.post-content a:hover { opacity: 0.75; }

.post-content h2 {
	font-size: 1.3rem;
	color: var(--nmf-primary);
	margin-top: 2rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid rgba(var(--nmf-primary-rgb), 0.15);
}
.post-content h3 { font-size: 1.1rem; color: #333; margin-top: 1.5rem; }

.post-content ol,
.post-content ul { padding-left: 1.5rem; line-height: 1.85; }
.post-content li { margin-bottom: 0.35rem; }

/* ============================================================================
   CARD GRID
   Shared by news_card.html, event_card.html and infomat_card.html, and so by
   the homepage, Nyheter, Arrangementer and INFOMAT.
   ========================================================================== */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.5rem;
	padding: 1.5rem 0;
}

.card-grid-item {
	display: block;
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	height: 300px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	transition: box-shadow 0.2s ease;
	background-color: var(--nmf-primary);
}
.card-grid-item:hover { box-shadow: 0 14px 36px rgba(0,0,0,0.2); }
.card-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.card-grid-item:hover img { transform: scale(1.04); }

/* Bottom-anchored so the scrim grows with the text it holds: a title that wraps
   to three lines gets three lines' worth of dark background. The gradient stays
   flat at 0.85 across the text itself and only fades out in the top padding, so
   the text stays legible no matter how bright the image behind it is. */
.card-overlay {
	position: absolute;
	inset: auto 0 0 0;
	background: linear-gradient(to top,
		rgba(0,0,0,0.85) 0%,
		rgba(0,0,0,0.85) 60%,
		rgba(0,0,0,0) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 3rem 1.25rem 1.25rem;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.card-date { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.92); margin-bottom: 0.3rem; }
.card-grid-item h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; color: #fff; }

/* Slimmer cards, used on the homepage — size="short" on any card include. */
.card-grid-item--short { height: 210px; }

/* Hidden event cards (revealed by JS based on user datetime). */
.event-card--hidden { display: none !important; }

/* White pills over an event card image: the date top left (two boxes when the
   event spans a range) and the year top right. */
.card-badge,
.card-badge-box {
	background: #fff;
	border-radius: 6px;
	padding: 6px 10px;
	text-align: center;
	line-height: 1.1;
	min-width: 50px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.card-badge { position: absolute; top: 12px; z-index: 5; }
.card-badge--date { left: 12px; }
.card-badge--year {
	right: 12px;
	min-width: auto;
	color: #555;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
}
/* The range wrapper only positions its two boxes, so it carries no pill of its own. */
.card-badge--range {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	min-width: auto;
	background: transparent;
	box-shadow: none;
}
.card-badge-day { display: block; font-size: 1.35rem; font-weight: 800; color: var(--nmf-primary); }
.card-badge-month { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #555; }
.card-badge-arrow { font-size: 1rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.4); flex-shrink: 0; }