/* ==========================================================================
   BOPLATSENS SAMFÄLLIGHETSFÖRENING – STYLE.CSS
   Renodlad version
   ========================================================================== */

/* ==========================================================================
   1. DESIGNVARIABLER
   ========================================================================== */

:root {
	--color-primary: #356347;
	--color-primary-dark: #285b3a;
	--color-primary-hover: #274c35;
	--color-primary-soft: #eef4ef;
	--color-primary-soft-2: #e8f0ea;
	--color-accent: #a5442d;
	--color-button-hover: #a64b45;

	--color-text: #26332b;
	--color-text-muted: #68746b;
	--color-text-soft: #66806e;

	--color-background: #f5f7f5;
	--color-surface: #ffffff;
	--color-footer: #1f3326;
	--color-footer-text: #dbe5dd;
	--color-border: #d9e1dc;

	--button-bg: var(--color-primary);
	--button-text: #ffffff;
	--button-hover-bg: var(--color-primary-hover);
	--button-light-bg: #ffffff;
	--button-light-text: var(--color-primary-dark);

	--link-color: var(--color-primary);
	--link-hover-color: var(--color-primary-hover);

	--radius-small: 7px;
	--radius-medium: 10px;
	--radius-large: 14px;
	--radius-dialog: 16px;

	--shadow-small: 0 5px 20px rgba(0, 0, 0, .06);
	--shadow-medium: 0 8px 30px rgba(0, 0, 0, .10);
	--shadow-large: 0 15px 60px rgba(0, 0, 0, .30);

	--transition-fast: .2s ease;
	--transition-normal: .3s ease;

	--page-width: 1200px;
	--content-width: 1100px;
	--page-gutter: 20px;

	--header-bg: rgba(255, 255, 255, .96);
	--header-border: #e2e5e2;
	--header-shadow: 0 4px 20px rgba(0, 0, 0, .12);

	--footer-bg: var(--color-footer);
	--footer-text: var(--color-footer-text);
	--footer-heading: #ffffff;
	--footer-link: #ffffff;

	--card-bg: var(--color-surface);
	--card-text: var(--color-text);
	--card-radius: var(--radius-large);
	--card-shadow: var(--shadow-small);
	--card-border: #e0e6e1;
	--card-soft-bg: #fbfcfb;

	--dialog-bg: var(--color-surface);
	--dialog-text: var(--color-text);
	--dialog-border: var(--color-border);
	--dialog-radius: var(--radius-large);
	--dialog-shadow: var(--shadow-large);
	--dialog-backdrop: rgba(20, 35, 27, .12);

	--form-bg: var(--color-surface);
	--form-text: var(--color-text);
	--form-border: #bdc8c0;
	--form-border-focus: var(--color-primary);
	--form-radius: var(--radius-small);
	--form-focus-ring: 0 0 0 3px rgba(53, 99, 71, .18);

	/* Läsinställningar */
	--reader-font: 1;
	--reader-line: 1.6;
	--reader-word: normal;
	--reader-letter: normal;
	--reader-width: 65ch;
}


/* ==========================================================================
   2. GRUNDLAYOUT OCH TYPOGRAFI
   ========================================================================== */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: Nunito, Arial, sans-serif;
	background: var(--color-background);
	color: var(--color-text);
	line-height: 1.7;
}

[hidden] {
	display: none !important;
}

.container {
	width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
	margin: auto;
}

.page-home .container,
.page-inner .container {
	width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2)));
}

a {
	color: var(--link-color);
}

a:hover {
	color: var(--link-hover-color);
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 20px;
	padding: 10px 20px;
	background: #fff;
	z-index: 5000;
}

.skip-link:focus {
	top: 20px;
}

.print-heading {
	display: none;
}

.linktext {
	visibility: hidden;
}

.b {
	font-weight: 800;
}


/* ==========================================================================
   3. HEADER OCH NAVIGATION
   ========================================================================== */

header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--header-bg);
	border-bottom: 1px solid var(--header-border);
	transition: box-shadow .25s;
}

header.scrolled {
	box-shadow: var(--header-shadow);
}

.header-inner {
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
}

.page-home .header-inner,
.page-inner .header-inner {
	width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2)));
	max-width: var(--page-width);
}

.brand {
	flex: 0 0 auto;
	color: var(--color-text);
	text-decoration: none;
}

.brand-name {
	display: block;
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.1;
	white-space: nowrap;
}

.brand-subtitle {
	display: block;
	margin-top: 6px;
	color: var(--color-text-soft);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

#mainNav {
	margin-left: auto;
	min-width: 0;
}

nav ul {
	display: flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#mainNav>ul {
	gap: 2px;
}

nav a,
#mainNav .find {
	display: block;
	padding: 12px 9px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--color-text);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

nav a:hover,
nav a.active,
#mainNav .find:hover,
#mainNav .find[aria-expanded="true"] {
	background: var(--color-primary-soft-2);
	color: var(--color-primary-dark);
}

.menu-button {
	display: none;
	border: 0;
	background: transparent;
	color: var(--color-text);
	font-size: 32px;
	cursor: pointer;
}

#mainNav .angleDown {
	display: inline-block;
	margin-left: 5px;
	font-size: 12px;
	transition: transform .2s ease;
}

#mainNav .find[aria-expanded="true"] .angleDown {
	transform: rotate(90deg);
}


/* ==========================================================================
   4. HEADERVERKTYG OCH HITTA SNABBT
   ========================================================================== */

.header-tools {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.quicklinks,
.header-tools .quicklinks {
	position: relative;
}

.dropdown-content,
#mainNav .dropdown-content,
.header-tools .quicklinks .dropdown-content {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: auto;
	z-index: 3000;
	width: 260px;
	min-width: 260px;
	max-width: min(260px, calc(100vw - 30px));
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	padding: 8px;
	border: 1px solid #e2e5e2;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 35px rgba(0, 0, 0, .15);
}

.dropdown-content[hidden] {
	display: none !important;
}

.dropdown-content a,
#mainNav .dropdown-content a,
.header-tools .quicklinks .dropdown-content a {
	display: block;
	padding: 10px 12px;
	border-radius: 6px;
	color: var(--link-color);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: normal;
}

.dropdown-content a:hover,
.dropdown-content a:focus-visible {
	background: var(--color-primary-soft);
	color: var(--color-primary-dark);
}

.quick-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0 !important;
	border: 1px solid #dce4de !important;
	border-radius: 50% !important;
	background: transparent;
	color: var(--link-color);
	font-size: 21px !important;
	line-height: 1;
}

.quick-icon[aria-expanded="true"] {
	background: var(--color-primary-soft) !important;
	border-color: #b9c9bd !important;
}


/* ==========================================================================
   5. HERO
   ========================================================================== */

.hero {
	min-height: 520px;
	display: flex;
	align-items: center;
	color: #fff;
	background:
		linear-gradient(90deg, rgba(19, 42, 28, .90), rgba(19, 42, 28, .55)),
		url("/img/boplatsen.jpg") center/cover;
}

.hero-content {
	max-width: 700px;
	padding: 70px 0;
}

.hero-label,
.news-label {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.2px;
}

.hero h1 {
	margin: 8px 0 15px;
	font-size: clamp(42px, 6vw, 70px);
	line-height: 1.05;
}

.hero p {
	font-size: 20px;
}

.page-hero {
	padding: 70px 0 60px;
	background: linear-gradient(90deg, rgba(19, 42, 28, .94), rgba(19, 42, 28, .72));
	color: #fff;
}

.page-hero h1 {
	margin: 8px 0 12px;
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1.05;
	letter-spacing: -1.5px;
}

.page-hero p {
	max-width: 700px;
	margin: 0;
	font-size: 19px;
}

/* Kompakt hero för historiksidor */
.sheet-page .page-hero,
.changes-page .page-hero {
	padding-top: 38px;
	padding-bottom: 38px;
}

.sheet-page .page-hero h1,
.changes-page .page-hero h1 {
	margin: 4px 0 5px;
	font-size: clamp(1.9rem, 4vw, 2.7rem);
	line-height: 1.1;
}

.sheet-page .page-hero p,
.changes-page .page-hero p {
	margin: 0;
	font-size: 1rem;
}


/* ==========================================================================
   6. KNAPPAR
   ========================================================================== */

.button,
.tool-button,
.close-button,
.cancel-button,
.storage-ok,
#showMoreHistory,
#showMoreChanges {
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.button {
	display: inline-block;
	padding: 11px 20px;
	border: 0;
	border-radius: var(--radius-small);
	background: var(--button-bg);
	color: var(--button-text);
	text-decoration: none;
}

.button-light {
	background: var(--button-light-bg);
	color: var(--button-light-text);
}

.tool-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border: 0;
	border-radius: 7px;
	background: var(--button-bg);
	color: #fff;
	text-decoration: none;
}

.close-button,
.cancel-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 110px;
	min-height: 48px;
	padding: 11px 20px;
	border-radius: var(--radius-medium);
}

.close-button {
	border: 2px solid var(--button-bg);
	background: var(--button-bg);
	color: var(--button-text);
}

.cancel-button {
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-primary);
}

.news-box .button {
	padding: 9px 16px;
	font-size: .9rem;
}

#showMoreHistory,
.changes-page #showMoreChanges {
	min-width: 150px;
}

#showMoreHistory[hidden],
.changes-page #showMoreChanges[hidden] {
	display: none !important;
}

/* Gemensam knapprespons */
.button,
.tool-button,
.menu-button,
.quick-icon,
#mainNav .find,
.reader-button,
.close-button,
.cancel-button,
.storage-ok,
.storage-more,
#toTop,
#showMoreHistory,
#showMoreChanges,
.reader-dialog fieldset button,
#readerReset {
	transition:
		background-color .18s ease,
		color .18s ease,
		border-color .18s ease,
		opacity .18s ease,
		box-shadow .18s ease !important;
}

.button:hover,
.button-light:hover,
.tool-button:hover,
.close-button:hover,
.cancel-button:hover,
.storage-ok:hover,
#toTop:hover,
#showMoreHistory:hover,
#showMoreChanges:hover,
.menu-button:hover,
.quick-icon:hover,
#mainNav .find:hover,
.reader-button:hover,
.reader-dialog fieldset button:hover,
#readerReset:hover {
	background-color: var(--color-button-hover) !important;
	border-color: var(--color-button-hover) !important;
	color: #fff !important;
	transform: none !important;
	box-shadow: 0 5px 14px rgba(31, 51, 38, .18);
}

.storage-more:hover {
	color: var(--color-button-hover) !important;
	text-decoration-thickness: 2px !important;
	transform: none !important;
	box-shadow: none !important;
}

.button:active,
.tool-button:active,
.menu-button:active,
.quick-icon:active,
#mainNav .find:active,
.reader-button:active,
.close-button:active,
.cancel-button:active,
.storage-ok:active,
.storage-more:active,
#toTop:active,
#showMoreHistory:active,
#showMoreChanges:active,
.reader-dialog fieldset button:active,
#readerReset:active {
	transform: none !important;
	box-shadow: none;
}

.button:focus-visible,
.tool-button:focus-visible,
.menu-button:focus-visible,
.quick-icon:focus-visible,
#mainNav .find:focus-visible,
.reader-button:focus-visible,
.close-button:focus-visible,
.cancel-button:focus-visible,
.storage-ok:focus-visible,
.storage-more:focus-visible,
#toTop:focus-visible,
#showMoreHistory:focus-visible,
#showMoreChanges:focus-visible,
.reader-dialog fieldset button:focus-visible,
#readerReset:focus-visible {
	outline: 3px solid var(--color-primary) !important;
	outline-offset: 3px !important;
}


/* ==========================================================================
   7. STARTSIDA, KORT OCH SENASTE MEDDELANDET
   ========================================================================== */

.news-area {
	position: relative;
	margin-top: -22px;
}

.news-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
	padding: 20px 28px;
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--shadow-medium);
}

.news-box .news-label {
	font-size: 12px;
	letter-spacing: 1px;
}

.news-box h2 {
	margin: 2px 0 0;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
}

.intro {
	padding: 70px 0 25px;
	text-align: center;
	font-size: 18px;
}

.intro h2 {
	margin: 0 0 8px;
	font-size: 34px;
}

.cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 28px;
	padding: 30px 0 90px;
}

.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--card-radius);
	background: var(--card-bg);
	color: var(--card-text);
	box-shadow: var(--card-shadow);
}

.card-wide {
	grid-column: 1 / -1;
}


.card-image img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.card-wide .card-image img {
	height: 330px;
}

#fadingImage {
	opacity: 1;
	transition: opacity 0.7s ease-in-out;
}

#fadingImage.fade {
	opacity: 0.5;
}

.card-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: 28px;
}

.card-content h2 {
	margin-top: 0;
}

.cards .card-content .button {
	margin-top: auto;
	align-self: flex-start;
}

#map {
	height: 240px;
}

a.map-link {
	text-decoration: none;
	cursor: pointer;
}


/* ==========================================================================
   8. UNDERSIDOR OCH INNEHÅLL
   ========================================================================== */

.page-label {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.2px;
}

.content-layout {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 45px;
	padding: 55px 0 90px;
}

.local-nav {
	position: sticky;
	top: 120px;
	align-self: start;
	padding: 20px;
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--shadow-small);
}

.local-nav strong {
	display: block;
	margin-bottom: 10px;
}

.local-nav a {
	display: block;
	padding: 8px 4px;
	color: #526158;
	font-size: 14px;
	text-decoration: none;
}

.local-nav a:hover {
	color: var(--color-primary-dark);
}

.content-card {
	margin-bottom: 30px;
	padding: 34px;
	border-radius: var(--card-radius);
	background: var(--card-bg);
	color: var(--card-text);
	box-shadow: var(--card-shadow);
}

.content-card h2 {
	margin: 0 0 20px;
	font-size: 32px;
	line-height: 1.2;
}

.content-card h3,
.content-card h4 {
	color: #315a40;
}

.content-card h3 {
	margin: 30px 0 10px;
	padding-top: 5px;
	font-size: 22px;
}

.content-card h4 {
	margin: 28px 0 6px;
	font-size: 19px;
}

.content-card p {
	margin: 0 0 18px;
}

.content-card>p {
	margin-top: 0;
}

.content-card>div>img {
	display: block;
	width: 100%;
	max-height: 420px;
	margin: 0 0 22px;
	border-radius: 10px;
	object-fit: cover;
}

.content-card img.size-50 {
	width: min(50%, 420px);
	height: auto;
	margin-left: auto;
	margin-right: auto;
	object-fit: contain;
}

.page-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 25px;
}

.fact-box {
	margin: 28px 0;
	padding: 22px 25px;
	border-left: 5px solid var(--color-primary);
	border-radius: 8px;
	background: var(--color-primary-soft);
}

.fact-box p {
	margin: 5px 0;
}

.welcome {
	margin-top: 35px;
	padding: 25px;
	border-radius: 10px;
	background: var(--color-primary-soft);
	text-align: center;
}

.welcome h3 {
	margin: 0;
	font-size: 27px;
}

.note {
	margin-top: 22px;
	padding: 17px 20px;
	border-left: 4px solid #66806e;
	border-radius: 0 8px 8px 0;
	background: #f1f5f2;
}


/* ==========================================================================
   9. DETAILS / SUMMARY
   ========================================================================== */

details {
	margin: 14px 0;
	overflow: hidden;
	border: 1px solid #dce4de;
	border-radius: 9px;
	background: var(--card-soft-bg);
}

summary {
	padding: 16px 18px;
	background: #f8faf8;
	color: #315a40;
	font-weight: 800;
	cursor: pointer;
}

details[open] summary {
	border-bottom: 1px solid #e3e8e4;
}

details>p,
details>ul,
details>div,
details>form {
	margin-left: 18px;
	margin-right: 18px;
}

details>p:first-of-type,
details>div:first-of-type {
	margin-top: 18px;
}

details>p:last-child,
details>div:last-child {
	margin-bottom: 18px;
}

details p {
	margin: 0;
	padding: 0 18px 18px;
}

details img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}


/* ==========================================================================
   10. NEWS.HTML – ÅRSINDELNING
   ========================================================================== */

.news-wrapper {
	padding: 55px 0 90px;
}

#newsRead {
	width: min(850px, 100%);
	margin: auto;
}

#newsRead>article,
#newsRead .item {
	margin-bottom: 28px;
	padding: 32px 35px;
	border-radius: var(--card-radius);
	background: var(--card-bg);
	color: var(--card-text);
	box-shadow: var(--card-shadow);
}

#newsRead h1,
#newsRead h2 {
	margin-top: 0;
	color: var(--color-text);
	line-height: 1.25;
}

#newsRead h2 {
	font-size: 29px;
}

#newsRead h3 {
	color: #315a40;
}

#newsRead p {
	margin: 12px 0;
}

#newsRead img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

#newsRead a {
	font-weight: 700;
}

/* Senaste året */
#newsRead .item-header {
	margin: 0 0 20px;
	color: var(--color-text);
	font-size: 1.8rem;
	line-height: 1.25;
}

.item-header[id] {
	scroll-margin-top: 120px;
}

section[id^="year-"] {
	scroll-margin-top: 120px;
}

/* Äldre år */
#newsRead .older-year {
	margin: 0 0 12px;
}

#newsRead .older-year-header {
	position: relative;
	margin: 0;
	padding: 15px 48px 15px 18px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
	background: var(--color-surface);
	color: var(--color-primary-dark);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.3;
	cursor: pointer;
	user-select: none;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast);
}

#newsRead .older-year-header::after {
	content: "›";
	position: absolute;
	top: 50%;
	right: 20px;
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-50%);
	transition: transform var(--transition-fast);
}

#newsRead .older-year-header:hover,
#newsRead .older-year-header.all-open {
	background: var(--color-primary-soft);
	border-color: #b9c9bd;
}

#newsRead .older-year-header.all-open::after {
	transform: translateY(-50%) rotate(90deg);
}

#newsRead .older-year-header:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 3px;
}

#newsRead .older-year-content {
	padding: 8px 4px 2px;
}

#newsRead .newsItem {
	margin: 10px 0;
	overflow: hidden;
	border: 1px solid #dce4de;
	border-radius: var(--radius-medium);
	background: var(--card-soft-bg);
}

#newsRead .newsHeader {
	position: relative;
	padding: 15px 44px 15px 18px;
	list-style: none;
	background: var(--card-soft-bg);
	color: #315a40;
	font-weight: 700;
	cursor: pointer;
}

#newsRead .newsHeader::-webkit-details-marker {
	display: none;
}

#newsRead .newsHeader::after {
	content: "›";
	position: absolute;
	top: 50%;
	right: 18px;
	font-size: 1.4rem;
	line-height: 1;
	transform: translateY(-50%);
	transition: transform var(--transition-fast);
}

#newsRead details[open]>.newsHeader {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-primary-soft);
}

#newsRead details[open]>.newsHeader::after {
	transform: translateY(-50%) rotate(90deg);
}

#newsRead .newsItem>div,
#newsRead .newsItem>p {
	padding: 0 18px 18px;
}


/* ==========================================================================
   11. HISTORIK, GOOGLE SHEET OCH ÄNDRINGAR
   ========================================================================== */

.history-wrapper {
	padding: 55px 0 90px;
}

.history-card {
	width: min(850px, 100%);
	margin: auto;
	padding: 35px 40px;
	border-radius: var(--card-radius);
	background: var(--card-bg);
	color: var(--card-text);
	box-shadow: var(--card-shadow);
}

.history-card h2 {
	margin: 0 0 8px;
	font-size: 30px;
}

.history-intro {
	margin: 0 0 30px;
	color: #617067;
}

.history-more,
.sheet-page .history-more,
.changes-page .changes-more {
	display: flex;
	justify-content: center;
	margin-top: 22px;
	margin-bottom: 45px;
}

.sheet-wrapper,
.sheet-page .sheet-wrapper,
.changes-page .changes-wrapper {
	padding-top: 32px;
	padding-bottom: 0;
}

.sheet-header,
.sheet-page .sheet-header,
.changes-page .changes-header {
	margin-bottom: 18px;
}

.sheet-header h2,
.sheet-page .sheet-header h2,
.changes-page .changes-header h2 {
	margin: 0 0 4px;
	font-size: 1.25rem;
	line-height: 1.25;
}

.sheet-header p,
.sheet-page .sheet-header p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: .92rem;
}

.sheet-list,
.sheet-page .sheet-list {
	overflow: hidden;
	border: 1px solid #e1e7e2;
	border-radius: 9px;
	background: #fff;
}

.sheet-row,
.sheet-page .sheet-row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) 130px;
	gap: 20px;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid #e7ebe8;
	font-size: .92rem;
	line-height: 1.4;
}

#sheetContent .sheet-row:last-child {
	border-bottom: 0;
}

.sheet-row-head {
	background: var(--color-primary-soft);
	color: #2f5d46;
	font-size: .82rem;
	font-weight: 700;
}

#sheetContent .sheet-row:hover {
	background: #f7faf8;
}

.sheet-row span:last-child {
	color: var(--color-text-muted);
	white-space: nowrap;
}

.sheet-status,
.changes-page .changes-status {
	margin: 12px 0;
	color: var(--color-text-muted);
}

.sheet-error,
.changes-page .changes-error {
	color: var(--color-accent);
}

.changes-page .changes-list {
	display: grid;
	gap: 9px;
}

.changes-page .change-item {
	margin: 0;
	padding: 13px 17px;
	border: 1px solid #e1e7e2;
	border-radius: 8px;
	background: #fff;
}

.changes-page .change-item time {
	display: block;
	margin: 0 0 2px;
	color: var(--color-text-muted);
	font-size: .78rem;
	font-weight: 600;
}

.changes-page .change-item h2 {
	margin: 0 0 3px;
	color: #2f5d46;
	font-size: 1.03rem;
	line-height: 1.25;
}

.changes-page .change-item p {
	margin: 0;
	font-size: .92rem;
	line-height: 1.4;
}

.changes-page .change-item .change-page {
	margin-top: 3px;
	color: var(--color-text-muted);
	font-size: .82rem;
}

/* Äldre historikformat */
.change {
	display: grid;
	grid-template-columns: 125px minmax(0, 1fr);
	gap: 25px;
	padding: 22px 0;
	border-bottom: 1px solid #e1e5e2;
}

.change:first-child {
	padding-top: 5px;
}

.change:last-child {
	border-bottom: 0;
}

.change-date,
.change-page {
	color: #6b756e;
	font-size: 14px;
}

.change-date {
	font-weight: 700;
}

.change-content strong {
	display: block;
	margin-bottom: 4px;
	font-size: 18px;
}


/* ==========================================================================
   12. PERSONER OCH KONTAKTER
   ========================================================================== */

.people-grid,
.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.contact-grid {
	margin-top: 28px;
}

.person {
	padding: 19px;
	border: 1px solid var(--card-border);
	border-radius: 10px;
	background: var(--card-soft-bg);
}

.role {
	margin: 0 0 5px;
	color: var(--color-text-soft);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.name {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
}

.address {
	margin: 4px 0 0;
	color: #68756d;
	font-size: 14px;
}

.phone {
	display: inline-block;
	margin-left: 6px;
	color: var(--link-color);
	font-size: 15px;
	cursor: pointer;
}

.phone:hover {
	text-decoration: underline;
}

.contact-item {
	padding: 18px;
	border-radius: 9px;
	background: #eef3ef;
}

.contact-item strong {
	display: block;
	margin-bottom: 3px;
	color: #315a40;
}

.contact-item p {
	margin: 0;
}

.wide {
	grid-column: 1 / -1;
}

.swish-link {
	display: inline-block;
	margin-left: 8px;
}


/* ==========================================================================
   13. FORMULÄR
   ========================================================================== */

form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 18px;
}

select {
	min-width: 220px;
	max-width: 100%;
	padding: 11px 38px 11px 12px;
	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);
	background: var(--form-bg);
	color: var(--form-text);
	font: inherit;
}

input,
textarea {
	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);
	background: var(--form-bg);
	color: var(--form-text);
	font: inherit;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--form-border-focus);
	outline: none;
	box-shadow: var(--form-focus-ring);
}


/* ==========================================================================
   14. FILER OCH DOKUMENT
   ========================================================================== */

.file-list {
	display: grid;
	gap: 8px;
	margin-top: 20px;
}

.file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 18px;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition:
		background-color .2s,
		border-color .2s;
}

.file-item:hover {
	border-color: #bbb;
	background: #f7f7f7;
}

.file-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.file-title {
	font-weight: 700;
}

.file-type {
	padding: 2px 6px;
	border-radius: 4px;
	background: #eee;
	font-size: .7rem;
	font-weight: 700;
}

.file-date {
	flex-shrink: 0;
	color: #666;
	font-size: .85rem;
}

.pdf::after {
	content: " (PDF)";
	margin-left: 3px;
	font-size: .72em;
	font-weight: 800;
}

.external-link::after {
	content: " ↗";
	font-size: .8em;
	text-decoration: none;
}

.show-more {
	display: block;
	width: fit-content;
	margin: 1.5rem auto 0;
}

/* ==========================================================================
   15. DIALOGER OCH MEDDELANDEN
   ========================================================================== */

.overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 800;
	background: var(--dialog-backdrop);
}

.overlay.show {
	display: block;
}

dialog.modal {
	width: min(520px, calc(100% - 30px));
	max-width: 520px;
	padding: 30px;
	border: 0;
	border-radius: var(--dialog-radius);
	background: var(--dialog-bg);
	color: var(--dialog-text);
	box-shadow: var(--dialog-shadow);
}

dialog.modal::backdrop,
dialog::backdrop {
	background: var(--dialog-backdrop);
}

dialog.modal h2 {
	margin: 0 0 12px;
	color: var(--color-text);
	font-size: 28px;
	line-height: 1.25;
}

dialog.modal .message-body {
	margin: 0 0 20px;
}

.message-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

.footnote {
	margin: 18px 0 0;
	color: var(--color-text-soft);
	font-size: 13px;
	line-height: 1.5;
}


/* ==========================================================================
   16. INFORMATION OM LAGRING
   ========================================================================== */

.storage-backdrop {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: var(--dialog-backdrop);
}

.storage-backdrop[hidden],
.storage-notice[hidden],
#storageDetails[hidden] {
	display: none !important;
}

.storage-notice {
	position: fixed !important;
	top: 42% !important;
	left: 50% !important;
	z-index: 3001 !important;
	width: 620px !important;
	max-width: calc(100vw - 32px) !important;
	max-height: calc(100vh - 32px) !important;
	margin: 0 !important;
	padding: 22px 28px !important;
	overflow-y: auto !important;
	border: 1px solid #d9e1dc !important;
	border-radius: 16px !important;
	background: #fff !important;
	color: var(--color-text) !important;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .16) !important;
	transform: translate(-50%, -50%) !important;
}

.storage-notice::before {
	content: none !important;
	display: none !important;
}

.storage-notice-content,
.storage-notice-text {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.storage-notice-text>strong {
	display: block !important;
	margin: 0 0 9px !important;
	color: #2f5d46 !important;
	font-size: 1.08rem !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
}

.storage-notice p {
	max-width: none !important;
	margin: 0 0 13px !important;
	font-size: .93rem !important;
	line-height: 1.48 !important;
}

.storage-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	gap: 18px !important;
	margin: 12px 0 0 !important;
	padding: 0 !important;
}

.storage-more {
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 7px 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--color-primary) !important;
	font: inherit !important;
	font-size: .9rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	cursor: pointer !important;
}

.storage-ok {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 0 0 auto !important;
	padding: 9px 16px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--color-primary) !important;
	color: #fff !important;
	font-size: .9rem !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
}

#storageDetails {
	margin: 14px 0 0 !important;
	padding: 12px 0 0 !important;
	border-top: 1px solid #d8ddd9 !important;
}

.storage-table-wrapper {
	width: 100%;
	margin: .75rem 0 1rem;
	overflow-x: auto;
}

.storage-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
	line-height: 1.4;
}

.storage-table th,
.storage-table td {
	padding: .65rem .7rem;
	border-bottom: 1px solid #d8ddd9;
	text-align: left;
	vertical-align: top;
}

.storage-table thead th {
	background: #f3f6f4;
	color: #2f5d46;
	font-weight: 800;
}

.storage-table tbody th {
	color: #2f5d46;
	font-weight: 700;
}

.storage-table code,
.storage-note code {
	padding: .1rem .3rem;
	border-radius: 4px;
	background: #f1f3f1;
	color: #333;
	font-size: .88em;
}

.storage-notice .storage-note {
	margin: .75rem 0 0 !important;
	color: #555;
	font-size: .84rem !important;
}


/* ==========================================================================
   17. LADDNINGSINDIKATORER
   ========================================================================== */

.data-loading,
.sheet-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 32px 20px;
	color: var(--color-text-muted);
	font-size: .95rem;
}

.data-loading[hidden],
.sheet-loading[hidden] {
	display: none !important;
}

.spinner {
	width: 24px;
	height: 24px;
	border: 3px solid #d9e1dc;
	border-top-color: #2f5d46;
	border-radius: 50%;
	animation: spinner-rotate .8s linear infinite;
}

#spin.loader {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid #d7dfd9;
	border-top-color: var(--link-color);
	border-radius: 50%;
	vertical-align: middle;
	animation: spinner-rotate .8s linear infinite;
}

@keyframes spinner-rotate {
	to {
		transform: rotate(360deg);
	}
}

#loading,
#error,
#empty {
	padding: 25px 0;
	color: #617067;
}

#error {
	color: #8b3232;
}


/* ==========================================================================
   18. ÖVRIGA KOMPONENTER
   ========================================================================== */

.page-meta {
	margin-top: 24px;
	margin-bottom: 12px;
	color: var(--color-text-muted);
	font-size: .85rem;
	text-align: center;
}

.page-meta a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.page-meta a:hover,
.page-meta a:focus-visible {
	color: #2f5d46;
}

.back-link {
	width: min(850px, 100%);
	margin: 25px auto 0;
}

.back-link a {
	font-weight: 700;
	text-decoration: none;
}

[data-tool-tip] {
	position: relative;
	border-bottom: 1px dotted #66806e;
	cursor: help;
}

[data-tool-tip]:hover::after {
	content: attr(data-tool-tip);
	position: absolute;
	bottom: 125%;
	left: 0;
	z-index: 20;
	width: max-content;
	max-width: 260px;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--color-text);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
}

.house-color {
	display: inline-block;
	width: 25px;
	height: 18px;
	border: 1px solid #999;
	background: #8d4437;
	vertical-align: middle;
}

.calendar {
	margin: 18px !important;
}

.calendar object {
	display: block;
	width: 100%;
	height: 500px;
	border: 0;
}

#budgetbar,
#budgetpie,
#budgetcompare {
	max-width: 100%;
	margin: 15px 0;
	overflow: hidden;
}

/* Artobservationer */
#header_feedback,
#oldObservationsHeader {
	display: block;
	max-width: 100%;
}

#oldObservationsHeader {
	margin-bottom: 8px;
}

#header_feedback p {
	margin: 0 0 8px;
	font-weight: 600;
}

#oldObservations,
#yesterday {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}

.old-observations {
	margin-bottom: 28px;
}

#oldObservations {
	margin-bottom: 0;
}

.observations-current {
	margin-top: 0;
}

#yesterday {
	margin: 0;
}

#feedback {
	margin-top: 12px;
}


/* ==========================================================================
   19. LÄSLÄGE OCH TILLGÄNGLIGHET
   ========================================================================== */

main {
	font-size: calc(1rem * var(--reader-font));
}

main p,
main li,
main dd,
main dt {
	line-height: var(--reader-line);
	word-spacing: var(--reader-word);
	letter-spacing: var(--reader-letter);
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
	word-spacing: var(--reader-word);
	letter-spacing: var(--reader-letter);
}

main .content {
	max-width: var(--reader-width);
}

.reader-button {
	flex: 0 0 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
	opacity: .7;
	cursor: pointer;
}

.reader-dialog {
	width: min(94vw, 650px);
	max-height: 94vh;
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 14px;
	background: var(--dialog-bg);
	color: var(--dialog-text);
	box-shadow: 0 20px 50px rgb(0 0 0 / 25%);
}

.reader-dialog::backdrop {
	background: rgb(0 0 0 / 50%);
}

.reader-dialog form {
	display: block;
	max-height: 94vh;
	margin: 0;
	padding: 1.25rem 1.5rem;
	overflow-y: auto;
}

.reader-dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.1rem;
	padding: 0 0 .9rem;
	border-bottom: 1px solid #ddd;
}

.reader-dialog-head h2 {
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
}

.reader-close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #222;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}

.reader-close:hover {
	background: #eee;
}

.reader-close:focus-visible {
	outline: 3px solid #333;
	outline-offset: 2px;
}

.reader-dialog fieldset {
	margin: 0 0 .9rem;
	padding: 0;
	border: 0;
}

.reader-dialog legend {
	display: block;
	width: 100%;
	margin: 0 0 .45rem;
	padding: 0;
	color: #222;
	font-size: 1rem;
	font-weight: 600;
}

.reader-dialog fieldset button {
	min-height: 2.55rem;
	margin: 0 .35rem .3rem 0;
	padding: .5rem .85rem;
	border: 1px solid #aaa;
	border-radius: 7px;
	background: var(--dialog-bg);
	color: var(--dialog-text);
	font-family: inherit;
	font-size: .95rem;
	cursor: pointer;
}

.reader-dialog fieldset button.selected,
.reader-dialog fieldset button[aria-pressed="true"] {
	padding: calc(.5rem - 1px) calc(.85rem - 1px);
	border: 2px solid #222;
	background: #e8e8e8;
	color: #111;
	font-weight: 600;
}

.reader-options {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: .25rem;
	padding-top: 1rem;
	border-top: 1px solid #ddd;
}

.reader-check {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: auto;
	margin: 0;
	color: #222;
	font-size: .95rem;
	white-space: nowrap;
	cursor: pointer;
}

.reader-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: #222;
	cursor: pointer;
}

#readerReset {
	flex: 0 0 auto;
	min-height: 2.3rem;
	margin: 0 0 0 auto;
	padding: .45rem .7rem;
	border: 1px solid #aaa;
	border-radius: 6px;
	background: #fff;
	color: #555;
	font: inherit;
	font-size: .9rem;
	white-space: nowrap;
	cursor: pointer;
}

.reader-simple .hero {
	background-image: none !important;
}

.reader-simple .card,
.reader-simple .news-box {
	box-shadow: none !important;
}

.reader-simple .cards {
	display: block;
}

.reader-simple .card {
	margin-bottom: 2rem;
}

.reader-simple main {
	max-width: 70rem;
	margin-inline: auto;
}

.reader-simple main .content {
	width: 100%;
	max-width: var(--reader-width);
	margin-inline: auto;
}

.reader-simple main p {
	margin-bottom: 1.4em;
}

.reader-simple main section {
	margin-bottom: 2rem;
}

.reader-simple *,
.reader-simple *::before,
.reader-simple *::after {
	animation-duration: 0s !important;
	animation-delay: 0s !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

.reader-simple img.decorative {
	display: none;
}

.reader-contrast {
	background: #fff !important;
	color: #000 !important;
}

.reader-contrast header,
.reader-contrast main,
.reader-contrast footer,
.reader-contrast section,
.reader-contrast article,
.reader-contrast .card,
.reader-contrast .content,
.reader-contrast .news-area,
.reader-contrast .news-box {
	background: #fff !important;
	color: #000 !important;
}

.reader-contrast a {
	color: #000 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: .15em;
}

.reader-contrast button:not(.reader-close) {
	border-color: #000 !important;
	background: #fff !important;
	color: #000 !important;
}

.reader-contrast .reader-dialog button[aria-pressed="true"] {
	background: #000 !important;
	color: #fff !important;
}


/* ==========================================================================
   20. FOOTER OCH TILL TOPPEN
   ========================================================================== */

footer {
	padding: 45px 0;
	background: var(--footer-bg);
	color: var(--footer-text);
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

footer strong {
	color: var(--footer-heading);
}

footer p {
	margin: 3px 0;
}

footer a {
	color: var(--footer-link);
}

#toTop {
	position: fixed;
	right: 25px;
	bottom: 25px;
	z-index: 700;
	display: block;
	width: 50px;
	height: 50px;
	border: 0;
	border-radius: 50%;
	background: var(--button-bg);
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
	transition: opacity .2s ease, visibility .2s ease;
}

#toTop.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* ==========================================================================
   21. RESPONSIV DESIGN
   ========================================================================== */

@media (max-width: 1450px) {

	.page-home .header-inner,
	.page-inner .header-inner {
		width: min(100% - 36px, 1400px);
		gap: 12px;
	}

	.brand-name {
		font-size: 1.35rem;
	}

	#mainNav>ul>li>a,
	#mainNav .find {
		padding-left: 6px;
		padding-right: 6px;
		font-size: 13px;
	}

	.reader-button {
		font-size: .8rem;
	}
}

@media (max-width: 1000px) {
	nav a {
		padding-left: 7px;
		padding-right: 7px;
		font-size: 13px;
	}
}

@media (max-width: 900px) {
	.content-layout {
		grid-template-columns: 1fr;
	}

	.local-nav {
		position: static;
		display: flex;
		flex-wrap: wrap;
		gap: 4px 12px;
	}

	.local-nav strong {
		width: 100%;
	}
}

@media (max-width: 850px) {
	.header-inner {
		min-height: 75px;
	}

	.page-home .header-inner,
	.page-inner .header-inner {
		width: min(100% - 30px, 1200px);
		gap: 10px;
	}

	.brand-name {
		font-size: 20px;
	}

	.brand-subtitle {
		display: none;
	}

	.menu-button {
		display: block;
		margin-left: auto;
		z-index: 1100;
	}

	#mainNav {
		position: fixed;
		top: 0;
		right: -320px;
		width: 300px;
		height: 100vh;
		margin-left: 0;
		padding: 100px 25px 30px;
		background: #fff;
		box-shadow: -5px 0 25px rgba(0, 0, 0, .2);
		transition: right .3s;
		z-index: 900;
	}

	#mainNav.open {
		right: 0;
	}

	#mainNav ul {
		display: block;
	}

	#mainNav li {
		border-bottom: 1px solid #e3e6e3;
	}

	#mainNav a,
	#mainNav .find {
		width: 100%;
		padding: 17px 10px;
		border-radius: 0;
		font-size: 16px;
		text-align: left;
	}

	#mainNav .quicklinks {
		position: static;
	}

	#mainNav .dropdown-content {
		position: static;
		width: 100%;
		min-width: 0;
		max-width: none;
		max-height: none;
		padding: 0 0 8px 12px;
		border: 0;
		border-radius: 0;
		background: var(--color-background);
		box-shadow: none;
	}

	#mainNav .dropdown-content a {
		padding: 11px 12px;
		font-size: 14px;
	}

	.header-tools .quicklinks .dropdown-content {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		left: auto;
		width: 260px;
		min-width: 260px;
		max-width: calc(100vw - 30px);
	}

	.cards {
		grid-template-columns: 1fr;
	}

	.card-wide {
		grid-column: auto;
	}

	.footer-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 700px) {
	.storage-notice {
		top: 50% !important;
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		max-width: none !important;
		max-height: calc(100vh - 24px) !important;
		padding: 18px 20px !important;
		transform: translateY(-50%) !important;
	}

	.storage-actions {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 14px !important;
	}

	.storage-table,
	.storage-table tbody,
	.storage-table tr,
	.storage-table th,
	.storage-table td {
		display: block;
		width: 100%;
	}

	.storage-table thead {
		display: none;
	}

	.storage-table tbody tr {
		padding: .65rem 0;
		border-bottom: 1px solid #d8ddd9;
	}

	.storage-table th,
	.storage-table td {
		padding: .15rem 0;
		border: 0;
	}
}

@media (max-width: 650px) {

	.sheet-page .page-hero,
	.changes-page .page-hero {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.sheet-wrapper,
	.sheet-page .sheet-wrapper,
	.changes-page .changes-wrapper {
		padding-top: 24px;
	}

	.sheet-row-head {
		display: none;
	}

	.sheet-list {
		overflow: visible;
		border: 0;
		background: transparent;
	}

	.sheet-row {
		grid-template-columns: 1fr;
		gap: 3px;
		margin-bottom: 8px;
		padding: 12px 14px;
		border: 1px solid #e1e7e2;
		border-radius: 8px;
		background: #fff;
	}

	.sheet-row span:first-child {
		color: #2f5d46;
		font-weight: 700;
	}

	.sheet-row span:nth-child(2) {
		font-size: .88rem;
	}

	.sheet-row span:last-child {
		margin-top: 2px;
		font-size: .78rem;
	}

	.changes-page .changes-list {
		gap: 7px;
	}

	.changes-page .change-item {
		padding: 11px 13px;
	}
}

@media (max-width: 600px) {
	.history-card {
		padding: 25px;
	}

	.change {
		grid-template-columns: 1fr;
		gap: 3px;
	}

	.change-date {
		order: 2;
	}

	.change-content {
		order: 1;
	}

	.people-grid,
	.contact-grid {
		grid-template-columns: 1fr;
	}

	.wide {
		grid-column: auto;
	}

	.reader-dialog {
		width: calc(100vw - 1rem);
		max-height: 96vh;
	}

	.reader-dialog form {
		max-height: 96vh;
		padding: 1rem;
	}

	.reader-options {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: .8rem 1rem;
	}

	#readerReset {
		grid-column: 1 / -1;
		width: 100%;
		margin: .15rem 0 0;
	}

	.footer-inner {
		align-items: stretch;
		gap: 20px;
	}

	#google_translate_element,
	#google_translate_element .goog-te-gadget {
		width: 100%;
		max-width: 100%;
	}

	#google_translate_element .goog-te-combo {
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0 0 8px;
	}
}

@media (max-width: 520px) {
	.container {
		width: min(100% - 30px, 1100px);
	}

	.hero {
		min-height: 450px;
	}

	.news-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 18px 20px;
	}

	.news-box h2 {
		font-size: 1.15rem;
	}

	.news-box .button {
		padding: 8px 14px;
	}

	.card-image img,
	.card-wide .card-image img {
		height: 220px;
	}

	.page-hero {
		padding: 55px 0;
	}

	.page-hero h1 {
		font-size: 40px;
	}

	.content-layout {
		gap: 25px;
		padding-top: 30px;
	}

	.content-card {
		padding: 24px;
	}

	.content-card h2 {
		font-size: 28px;
	}

	.history-wrapper,
	.news-wrapper {
		padding: 30px 0 60px;
	}

	form {
		margin: 16px 0;
	}

	select {
		width: 100%;
	}

	.calendar {
		margin: 12px 0 !important;
	}

	.calendar object {
		height: 450px;
	}

	.content-card img.size-50 {
		width: 100%;
	}

	.page-tools,
	.message-buttons {
		flex-direction: column;
	}

	.tool-button {
		justify-content: center;
	}

	.message-buttons .button,
	.message-buttons .cancel-button {
		width: 100%;
		text-align: center;
	}

	#newsRead>article,
	#newsRead .item {
		padding: 24px;
	}

	#newsRead .item-header {
		font-size: 1.45rem;
	}

	#newsRead .older-year-header {
		padding: 13px 42px 13px 15px;
		font-size: 1.1rem;
	}

	#newsRead .newsHeader {
		padding: 13px 40px 13px 15px;
	}

	#yearNav {
		display: contents;
	}

	.file-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}

	.brand-name {
		font-size: 17px;
	}

	.header-tools {
		gap: 6px;
	}

	.header-tools .quick-icon,
	.header-tools .reader-button {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
	}

	.header-tools .quicklinks .dropdown-content {
		width: 250px;
		min-width: 0;
		max-width: calc(100vw - 30px);
	}
}

@media (max-width: 410px) {
	.brand-name {
		font-size: 15px;
	}
}

@media (max-width: 380px) {
	.storage-actions {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}

	.storage-ok {
		margin-left: 0 !important;
	}
}


/* ==========================================================================
   22. REDUCERAD RÖRELSE
   ========================================================================== */

@media (hover: none) {

	.button:hover,
	.tool-button:hover,
	.menu-button:hover,
	.quick-icon:hover,
	#mainNav .find:hover,
	.reader-button:hover,
	.close-button:hover,
	.cancel-button:hover,
	.storage-ok:hover,
	.storage-more:hover,
	#toTop:hover,
	#showMoreHistory:hover,
	#showMoreChanges:hover,
	.reader-dialog fieldset button:hover,
	#readerReset:hover {
		transform: none;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.spinner {
		animation: none;
	}
}


/* ==========================================================================
   23. UTSKRIFT – GENERELLT
   ========================================================================== */

@media print {
	@page {
		size: A4 portrait;
		margin: 9mm 11mm;
	}

	.linktext {
		visibility: visible;
	}

	header,
	.page-hero,
	.local-nav,
	.page-tools,
	footer,
	#toTop,
	.overlay,
	.storage-backdrop,
	.storage-notice {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.container {
		width: 100%;
	}

	.content-layout {
		display: block;
		padding: 0;
	}

	.content-card {
		padding: 0;
		box-shadow: none;
	}

	a {
		color: #000;
		text-decoration: none;
	}


	/* ------------------------------------------------------------------------
     NEWOWNER.HTML – KOMPAKT UTSKRIFT I TVÅ SPALTER
     ------------------------------------------------------------------------ */

	body.page-newowner>header,
	body.page-newowner>.overlay,
	body.page-newowner .page-hero,
	body.page-newowner .local-nav,
	body.page-newowner .page-tools,
	body.page-newowner>footer,
	body.page-newowner #toTop,
	body.page-newowner .skip-link,
	body.page-newowner .header-tools,
	body.page-newowner .menu-button,
	body.page-newowner #google_translate_element,
	body.page-newowner .storage-notice {
		display: none !important;
	}

	html,
	body.page-newowner {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		color: #000 !important;
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 8.7pt !important;
		line-height: 1.20 !important;
	}

	body.page-newowner main,
	body.page-newowner .container,
	body.page-newowner .content-layout,
	body.page-newowner .content-layout>div {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.page-newowner .content-card {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		column-count: 2 !important;
		column-gap: 8mm !important;
		column-rule: .3pt solid #d9d9d9 !important;
	}

	body.page-newowner .print-heading {
		display: block !important;
		margin: 0 0 2.5mm !important;
		column-span: all !important;
	}

	body.page-newowner .print-heading strong {
		display: block;
		font-size: 11pt !important;
		line-height: 1.15 !important;
	}

	body.page-newowner .print-heading span {
		display: block;
		margin-top: .5mm;
		font-size: 8.7pt !important;
		font-weight: 600;
	}

	body.page-newowner .content-card>h2 {
		margin: 0 0 1.5mm !important;
		padding: 0 !important;
		font-size: 13pt !important;
		line-height: 1.15 !important;
		column-span: all !important;
	}

	body.page-newowner .content-card>.intro {
		margin: 0 0 3mm !important;
		padding: 0 !important;
		font-size: 8.7pt !important;
		line-height: 1.20 !important;
		column-span: all !important;
	}

	body.page-newowner section {
		margin: 0 0 2mm !important;
		padding: 0 !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	body.page-newowner h3 {
		margin: 0 0 .7mm !important;
		padding: 0 !important;
		font-size: 8.8pt !important;
		font-weight: 700 !important;
		line-height: 1.15 !important;
		break-after: avoid;
		page-break-after: avoid;
	}

	body.page-newowner p {
		margin: 0 0 1mm !important;
		padding: 0 !important;
	}

	body.page-newowner .fact-box,
	body.page-newowner .welcome {
		margin: 1mm 0 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	body.page-newowner .fact-box p {
		margin: 0 0 .5mm !important;
	}

	body.page-newowner .welcome h3 {
		margin: 0 !important;
	}

	body.page-newowner a,
	body.page-newowner a:visited {
		color: #000 !important;
		text-decoration: none !important;
	}

	body.page-newowner a[href]::after {
		content: none !important;
	}

	body.page-newowner * {
		box-shadow: none !important;
	}
}