@font-face {
	font-family: 'Futhark runes';
	src: url('https://runkartan.se/futhark-runes-font/futhark-runes-font.woff2') format('woff2');
	font-display: swap;
}

.fut {
	font-family: 'Futhark runes';
	color: #cc0000;
	font-style: normal;
}

summary {
	color: #cc0000;
	cursor: pointer;
}

.k-brand-logo {
	background-image: url('/assets/runkartan-logga.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

main > .k-container {
	max-width: 980px;
}

#photoWrap {
	margin: 1rem 0;
}

#mobilePhotoWrap figure,
#desktopPhotoWrap figure {
	margin: 0;
}

#photoWrap img {
	display: block;
	width: 100%;
	height: auto;
}

#desktopPhotoWrap {
	display: none;
}

@media (min-width: 769px) {
	main > .k-container {
		max-width: 1200px;
	}

	#mobilePhotoWrap {
		display: none;
	}

	#desktopPhotoWrap {
		display: block;
	}
}

.k-panel.pad + .k-panel.pad,
.k-panel.pad + #site-search,
#site-search + #bottom-more-links,
#bottom-more-links + #credits {
	margin-top: 1rem;
}

.k-panel.pad p {
	line-height: 1.5em;
}

.k-panel.pad .k-title {
	margin-bottom: 0.6rem;
}

.k-panel.pad .k-title + p {
	margin-top: 0.3rem;
}

.k-panel.pad a:link,
.k-panel.pad a:visited,
#site-search a:link,
#site-search a:visited,
#credits a:link,
#credits a:visited,
.k-footer a:link,
.k-footer a:visited {
	text-decoration: none;
}

/* Vanliga textlänkar i innehåll får dämpad visited-färg */
.k-panel.pad a:visited,
#site-search a:visited,
#credits a:visited,
.k-footer a:visited {
	color: #777777;
}


.k-panel.pad .k-acc-btn,
.k-panel.pad .rk-tool-link{
	/*min-height: 60px;*/
	border-radius: 24px;
}


/* Kortlänkar ska alltid följa kortens normala färg */
a.k-card-link,
a.k-card-link:link,
a.k-card-link:visited,
a.k-card-link:hover,
a.k-card-link:active {
	color: var(--link);
	text-decoration: none;
}

a.k-card-link .k-title,
a.k-card-link .k-subtitle,
a.k-card-link p,
a.k-card-link span,
a.k-card-link strong {
	color: inherit;
}


.leaflet-control {
	border: none !important;
}

runkartan-position-inline input[type="checkbox"],
runkartan-position-inline::part(checkbox),
#savePositionCheckbox,
#typeFilter {
	accent-color: #b60000;
	font-family: 'Ubuntu Condensed', sans-serif;
}

#savePositionCheckbox:checked,
#typeFilter:checked {
	background-color: #b60000;
	border-color: #b60000;
}

@supports (right: max(0px)) {
	.leaflet-right .leaflet-control.locate,
	#toggleLayer {
		right: calc(20px + env(safe-area-inset-right, 0px));
	}
}

#navbar-links-fab {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 220px;
}

#navbar-links-fab a {
	border-bottom: 0;
	text-decoration: none;
}

#navbar-links-fab a:hover {
	text-decoration: underline;
}

#site-search details,
#credits,
#bottom-more-links {
	margin-top: 1rem;
}


.run-bottom-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .run-bottom-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .run-bottom-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.run-bottom-grid .k-panel {
  margin: 0;
}

.run-bottom-grid .k-split {
  align-items: center;
}

.k-media > picture {
  display: block;
}

.k-media > picture > img {
  display: block;
  width: 100%;
  height: auto;
}


.k-header {
  margin-bottom: 0;
}

.k-header .k-container {
  padding-top: 0;
  padding-bottom: 0;
}

.k-header-main {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  min-height: 0;
}

.k-brand {
  align-items: center;
}

.k-brand-title {
  line-height: 1.1;
}

.k-brand-title .name {
  margin-bottom: 0.1rem;
}

.k-brand-title .tagline {
  margin-top: 0;
}

.k-main {
  padding-top: 0.5rem;
}

/* Minska avståndet mellan header och första innehållsblocket */
.k-main {
  padding-top: 0.25rem;
}

/* Ta bort extra toppmarginal på första panelen */
.k-main .k-container > .k-panel:first-child {
  margin-top: 0;
}


/* ===== FAB: position ===== */
#rkFab{
  position: fixed;
  top: auto !important;
  right: 20px;
  left: auto !important;
  bottom: 150px !important;
  transform: none !important;
  z-index: 5000;
  overflow: visible;
}

#rkFab {
  bottom: var(--rk-fab-bottom, 150px);
}

#rkMenuFab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  background: rgba(255,255,255,0.85);   /* mer transparens */
}

#rkMenuFab .rk-fab-dots{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  line-height: 1;
  transform: translateY(-0.1em);
}

#rkFabMenu{
  position: absolute;
  top: auto;
  bottom: 0;
  right: calc(100% + 0.75rem);
  left: auto !important;
  transform: none;
  z-index: 5001;

  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#rkFab.open #rkFabMenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#rkFabMenu .rk-fab-menu-panel{
  margin: 0;
  min-width: 220px;
  background: rgba(255,255,255,0.85);   /* mer transparens */
  backdrop-filter: blur(8px);           /* lite mer blur */
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

#rkFabMenu .k-panel-body{
  padding: 0.4rem;
}

#rkFabMenu .rk-fab-menu-links{
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

#rkFabMenu .rk-fab-menu-links a{
  display: block;
  padding: 0.65rem 0.85rem;
  color: var(--accent);
  text-decoration: none;
  border-radius: 0.65rem;
  text-align: right;
  font-weight: 500;
}

#rkFabMenu .rk-fab-menu-links a:hover,
#rkFabMenu .rk-fab-menu-links a:focus-visible{
  background: rgba(var(--accent-rgb), 0.08);
}

.rk-acc-label{
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
  text-align: left;
}

.rk-acc-label .k-icon{
  flex: 0 0 auto;
  margin-top: 0.08em;
}

.rk-acc-label-text{
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: break-word;
}

.k-acc-btn{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 0.9rem;
  width: 100%;
  text-align: left;
}

.k-acc-btn .rk-acc-icon{
  flex: none;
}

.k-acc-btn .rk-acc-label-text{
  min-width: 0;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.k-acc-btn .chev{
  flex: none;
  justify-self: end;
}

.rk-tool-link{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;              /* ändra från start → center */
  column-gap: 0.9rem;
  text-decoration: none;
}

.rk-tool-link .rk-tool-icon{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rk-tool-link .rk-tool-text{
  min-width: 0;
  line-height: 1.2;
  overflow-wrap: break-word;
}




/* =========================
   Karta
========================= */

.map-wrapper {
  position: relative;
}

#map {
  position: relative;
  width: 100%;
  height: 50vh;
}

#map a {
  border-width: 0;
}

#logo {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  height: 40px;
}

/* Gemensamt utseende för Leaflet-kontroller */
.leaflet-control {
  border: none !important;
  box-shadow: 0 0 5px rgba(0,0,0,0.35) !important;
}

/* Nolla Leaflets standardmarginaler */
.leaflet-top .leaflet-control,
.leaflet-bottom .leaflet-control {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.leaflet-left .leaflet-control,
.leaflet-right .leaflet-control {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Skalstock: exakt 20 px från vänster och botten */
.leaflet-bottom.leaflet-left .leaflet-control-scale {
  position: absolute;
  left: 20px;
  bottom: 20px;
  margin: 0 !important;
  opacity: 1;
  max-width: 200px;
}

/* Attribution: exakt 20 px från höger och botten */
.leaflet-control-attribution {
  position: absolute !important;
  right: 20px !important;
  bottom: 20px !important;
  margin: 0 !important;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.2;
  background: rgba(255,255,255,0.9);
  z-index: 800;
  white-space: nowrap;
  max-width: none;
  overflow: visible;
}

/* Lagerknapp: exakt 20 px från topp och höger */
#toggleLayer {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 999;
  background: none;
  border: none;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  cursor: pointer;
  line-height: 0;
  font-size: 0;
}

#toggleLayer img {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
}

.k-pagination + .k-card-grid{
  margin-top: 1rem;
}

.k-card-grid + .k-pagination{
  margin-top: 1rem;
}

@media (max-width: 700px) {
	#bottom-more-links .run-bottom-grid,
	#bottom-more-links .k-card-grid,
	#bottom-more-links .k-form.cols-2 {
		grid-template-columns: 1fr !important;
	}
}

.k-card-grid.cols-2,
.k-card-grid.cols-3 {
	gap: 1rem;
}

@media (max-width: 700px) {
  #bottom-more-links .k-card-grid {
    grid-template-columns: 1fr;
  }
}

#bottom-more-links .k-card-link-icon {
  width: 32px;
  height: 32px;
}


.rk-home-map-desktop,
.rk-home-map-mobile {
	display: none;
	width: 100%;
	border: 0;
}

.rk-home-map-desktop {
	display: block;
	height: 70vh;
	min-height: 500px;
}

.rk-home-map-mobile {
	height: calc(var(--rk-vh, 1vh) * 100);
	min-height: 420px;
}

@media (max-width: 768px) {
	.rk-home-map-desktop {
		display: none !important;
	}

	.rk-home-map-mobile {
		display: block !important;
	}
}

@media (min-width: 769px) {
	.rk-home-map-desktop {
		display: block !important;
	}

	.rk-home-map-mobile {
		display: none !important;
	}
}

/* ----------------
   Bloggsidan
   ---------------- */

#news-section,
#news-section * {
  box-sizing: border-box;
}

#news-section img,
#news-section video,
#news-section iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

#news-section p > img:only-child,
#news-section figure,
#news-section .k-media {
  margin: 0 0 1rem 0;
}

#news-section figure,
#news-section p > img:only-child {
  overflow: hidden;
  border-radius: var(--radius);
}

#news-section figure img,
#news-section p > img:only-child {
  width: 100%;
  height: auto;
  display: block;
}


#news-section {
  display: grid;
  gap: 1rem;
}

#news-section .k-panel {
  margin: 0;
}

#news-section .k-title {
  margin-bottom: 0.35rem;
}

#news-section .k-subtitle {
  margin-bottom: 1rem;
}

#news-section .rk-news-entry > * + * {
  margin-top: 0.9rem;
}

#news-section .k-media {
  margin-top: 1rem;
  margin-bottom: 1rem;
}


#news-section .k-panel-title {
  margin-bottom: 0.2rem;
}

#news-section h2.k-title {
  margin-bottom: 0;
}

#news-section .k-subtitle {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

#news-section .rk-news-entry > * + * {
  margin-top: 0.85rem;
}

#news-section hr {
  display: none;
}

.rk-news-entry h6 {
  margin: 0 0 1em 0 !important;
  font-weight: 400;
}

.k-panel-title h2 {
  font-size: 1.4em !important;
}