/* Keep navigation and its guide action together at every screen size. */
.masthead { gap: 20px; }
.brand { min-width: 0; margin-right: auto; }
.brand-copy { color: var(--ink); }
.brand-copy:hover { text-decoration: none; }
.brand-flag {
  --flag-blue: #005293;
  --flag-yellow: #fecb00;
  display: flex;
  align-items: center;
  flex: none;
  padding: 2px;
  border-radius: 3px;
  background: #fff;
  isolation: isolate;
}
.brand-flag .sweden-flag {
  display: block;
  width: 42px;
  height: 30px;
  background: var(--flag-blue);
  stroke: none;
  box-shadow: none;
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
  color-scheme: only light;
}
.brand-flag .flag-field { fill: var(--flag-blue); }
.brand-flag .flag-cross { fill: var(--flag-yellow); }
.brand-flag .sweden-flag::before,
.brand-flag .sweden-flag::after { content: none; }
.navigation-group { display: flex; align-items: center; gap: 12px; height: 100%; flex: none; }
.navigation-group .primary-nav { height: 100%; }
.header-actions { gap: 6px; flex: none; }
.theme-toggle svg { width: 19px; height: 19px; }

.guide-beta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  margin-left:6px;
  padding:0 6px;
  border:1px solid currentColor;
  border-radius:5px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  text-box:trim-both cap alphabetic;
  vertical-align:middle;
  position:relative;
  top:-1px;
}
h1 .guide-beta { height:22px; font-size:13px; padding:0 7px; top:-3px; }

/* Map, Guide, Jobs and About share the same geometry before the map initializes. */
.site-header-page { --header-height: 88px; --masthead-gutter: 32px; }
.masthead.site-masthead {
  height: var(--header-height);
  padding: 0 var(--masthead-gutter);
  gap: 20px;
  border: 0;
  box-shadow: inset 0 -1px var(--line);
  font-size: 15px;
  line-height: 1.2;
  flex-shrink: 0;
}
.site-masthead .brand { gap: 11px; }
.site-masthead .brand-copy strong { font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.35px; white-space: nowrap; }
.site-masthead .navigation-group .primary-nav { gap: 8px; }
.site-masthead .nav-button {
  flex: none;
  width: auto;
  justify-content: center;
  gap: 0;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.site-masthead .nav-button svg { display: block; width: 15px; height: 15px; }
.site-masthead .nav-button.active::after { bottom: 21px; left: 14px; right: 14px; height: 2px; }
.site-masthead .header-actions { gap: 4px; }
.site-masthead .header-suggest-place { width: 112px; font-size: 13.5px; }
.site-masthead :is(.header-suggest-place, .theme-toggle) { height: 44px; }
.site-masthead .theme-toggle { width: 44px; }
.site-masthead #theme-icon { width: 19px; height: 19px; }
/* The late owner alert must not displace public navigation. */
.site-masthead .owner-review-link { position: absolute; top: calc(100% + 8px); right: var(--masthead-gutter); }

@media (max-width: 1100px) {
  .site-header-page { --masthead-gutter: 22px; }
  .masthead.site-masthead { gap: 10px; }
  .site-masthead .brand-copy strong { font-size: 17px; }
  .site-masthead .header-suggest-place { width: 44px; }
  .site-masthead .navigation-group .primary-nav { gap: 2px; }
  .site-masthead .nav-button { padding: 0 12px; }
  .site-masthead .nav-button.active::after { left: 12px; right: 12px; }
}
@media (max-width: 850px) {
  .site-header-page { --masthead-gutter: 18px; }
  .site-masthead .brand-copy strong { font-size: 16px; }
  .site-masthead .nav-button { font-size: 13.5px; }
  .site-masthead .nav-button svg { width: 13px; height: 13px; }
  .site-masthead .header-actions { gap: 0; }
}
@media (max-width: 650px) {
  .site-header-page { --header-height: calc(102px + env(safe-area-inset-top)); --masthead-gutter: max(12px, env(safe-area-inset-right)); }
  .masthead.site-masthead {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 56px 46px;
    padding: env(safe-area-inset-top) var(--masthead-gutter) 0 max(12px, env(safe-area-inset-left));
    gap: 0;
  }
  .site-masthead .brand { gap: 7px; margin-right: 0; }
  .site-masthead .brand-copy strong { font-size: 16px; }
  .site-masthead .sweden-flag { width: 30px; height: 19px; }
  .site-masthead .navigation-group {
    width: 100%; height: 46px; margin: 0; padding: 0;
    border-top: 0; box-shadow: inset 0 1px var(--line);
  }
  .site-masthead .navigation-group .primary-nav { flex: 1; justify-content: center; gap: 0; }
  .site-masthead .navigation-group .nav-button { flex: 1 1 0; width: auto; padding: 0 8px; gap: 0; }
  .site-masthead .nav-button svg { display: none; }
  .site-masthead .nav-button.active::after { bottom: 3px; left: 10px; right: 10px; }
  .site-masthead .theme-toggle svg, .site-masthead #theme-icon { width: 16px; height: 16px; }
}
@media (max-width: 360px) {
  .site-masthead .brand { gap: 2px; }
  .site-masthead .brand-copy strong { font-size: 14px; letter-spacing: -.2px; }
}
@media (min-width: 651px) and (max-width: 950px) and (max-height: 500px) {
  .site-header-page { --header-height: calc(60px + env(safe-area-inset-top)); --masthead-gutter: max(16px, env(safe-area-inset-right)); }
  .masthead.site-masthead { padding: env(safe-area-inset-top) var(--masthead-gutter) 0 max(16px, env(safe-area-inset-left)); }
  .site-masthead .nav-button.active::after { bottom: 8px; }
}

.organisation-avatar img { object-fit:contain; }
.organisation-avatar.logo-dark,
.organisation-avatar.logo-dark img,
html[data-theme="dark"] .organisation-avatar.logo-dark,
html[data-theme="dark"] .organisation-avatar.logo-dark img { background:#153752; }
.profile-address-link { display: inline-flex; align-items: baseline; gap: 7px; }
.profile-address-link svg { align-self: center; width: 13px; height: 13px; }
.map-style-control { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 3px 10px #162b3908; pointer-events: auto; }
.map-style-control svg { width: 16px; height: 16px; color: var(--muted); }
.map-style-control select { border: 0; background: transparent; color: inherit; font-size: 13.5px; font-weight: 700; padding: 2px 3px; max-width: 140px; cursor: pointer; }
#map-panel[data-map-style] .leaflet-tile-pane { filter: none; }
#map-panel[data-map-style="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.45) brightness(.72) contrast(.95); }
.organisation-avatar img[src$="/logos/cmnty.png"], .organisation-avatar img[src$="/logos/changers-hub.svg"] { background: #182520!important; }

@media (max-width: 1100px) {
  .masthead { gap: 14px; }
  .brand { min-width: 0; }
  .navigation-group { gap: 8px; }
}
@media (max-width: 850px) {
  .masthead { gap: 10px; }
  .brand { min-width: 0; }
  .navigation-group { gap: 7px; }
  .header-actions { gap: 2px; }
}
@media (max-width: 650px) {
  .masthead { gap: 0; }
  .brand { grid-column: 1; grid-row: 1; gap: 10px; margin-right: 8px; }
  .brand-copy strong { font-size: 16px; }
  .navigation-group { grid-column: 1 / -1; grid-row: 2; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px; gap: 9px; border-top: 1px solid var(--line); }
  .navigation-group .primary-nav { flex: 1; min-width: 0; width: auto; margin: 0; padding: 0; border: 0; height: 100%; }
  .navigation-group .nav-button { padding: 0 7px; gap: 5px; }
  .navigation-group .ask-button { flex: none; margin-left: 0; padding: 7px 9px; }
  .header-actions { gap: 2px; }
  .theme-toggle { height: 29px; width: 29px; }
  .theme-toggle svg { height: 16px; width: 16px; }
}
.brand{align-items:center}
/* Wordmark: cap-top of "Stockholm" meets the flag's top edge and the
   baseline of "Ecosystem" meets its bottom edge (text-box trims the
   font's internal leading so the stack is exactly the flag's height). */
.brand-copy>.brand-stack{display:block;font-size:var(--wordmark-size,18px);line-height:var(--wordmark-leading,21px);letter-spacing:-.01em;color:var(--ink);font-weight:400;text-box:trim-both cap alphabetic;font-synthesis:none}
.brand-copy>.brand-stack strong{display:inline;font:inherit;font-weight:700;letter-spacing:-.01em}
@media (min-width:761px){.brand-flag .sweden-flag{width:48px;height:34px}.brand{gap:12px}}