@import url("/assets/site.css?v=park-land1");

/* App website + landing wordmark in web colors. Header lines up with the page. */

:root {
  --draft: 0px;
  --head: 90px;
  --content-w: min(var(--wrap), calc(100% - 40px));
}

.draft-bar { display: none !important; }

.top {
  padding: 0;
  background: rgba(255, 255, 255, .96);
}
.top-inner {
  width: var(--content-w);
  margin: 0 auto;
  min-height: var(--head);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.brand { font-size: 0; justify-self: start; }
.brand img {
  height: 58px;
  width: auto !important;
  max-width: 280px;
  object-fit: contain;
}
.nav {
  justify-content: center;
  justify-self: center;
  flex: none;
}
.top-end {
  margin-left: 0;
  justify-self: end;
  flex-shrink: 0;
}
.page { width: var(--content-w); }
body.map-body {
  height: 100dvh;
  overflow: hidden;
}
body.map-body .site-foot { display: none !important; }
.map-frame {
  width: var(--content-w);
  height: calc(100dvh - var(--head) - 16px);
  margin: 8px auto 0;
}
.map-shell {
  height: 100%;
  max-height: none;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

@media (min-width: 760px) {
  .page { width: var(--content-w); }
  .map-frame { margin: 8px auto 0; height: calc(100dvh - var(--head) - 16px); }
  .map-shell { height: 100%; max-height: none; }
}
@media (max-width: 1100px) {
  .brand img { height: 50px; }
  .nav a { padding: 8px 8px; font-size: .82rem; }
}
.city-wrap { position: relative; }
button.city {
  display: flex;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.city-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 900;
}
.city-menu a,
.city-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}
.city-menu a:hover,
.city-menu a.active,
.city-menu button:hover,
.city-menu button.active { background: var(--blue-soft); color: var(--blue); }

.section-block { margin-bottom: 24px; }
.section-desc { margin-bottom: 20px; }
.park-grid { margin-top: 8px; }
.empty-place {
  margin: 8px 0 24px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.empty-place p { color: var(--ink-soft); font-size: .95rem; }
.empty-place .see-all { display: inline-block; margin-top: 10px; }

html[data-city="amsterdam"] [data-place="arnhem"],
html[data-city="arnhem"] [data-place="amsterdam"] { display: none !important; }

.sr-only { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.top-end .language-switcher { position: relative; flex-shrink: 0; }
.top-end .language-toggle,
.top-end a.account-chip {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
}
.top-end a.account-chip.in {
  width: 44px;
  min-width: 44px;
  padding: 0;
  background: #0f7f6c;
  border-color: #0f7f6c;
  color: #fff;
  box-shadow: none;
}
.top-end .account-chips {
  display: flex;
  align-items: center;
  gap: 8px;
}
.top-end a.account-chip-join {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: none;
}
.top-end a.account-chip-join:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}
.top-end .language-toggle .flag,
.top-end .language-option .flag {
  position: static;
  top: auto;
  right: auto;
  filter: none;
  font-size: 20px;
  line-height: 1;
}
.top-end .language-toggle .language-code { font-size: 14px; font-weight: 900; letter-spacing: .04em; color: var(--ink); }
.top-end .language-toggle .chevron { margin-left: 1px; color: #77817f; font-size: 11px; }
.top-end .language-toggle:focus-visible,
.top-end .language-option:focus-visible { outline: 3px solid rgba(29, 63, 191, .28); outline-offset: 2px; }
.top-end .language-menu {
  width: 260px;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 920;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(22, 24, 29, .16);
}
.top-end .language-option {
  width: 100%;
  min-height: 52px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 31px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.top-end .language-option:hover { background: #f3f4f8; }
.top-end .language-option.is-active { background: var(--blue-soft); color: var(--blue); }
.top-end .language-option .language-name { font-size: 16px; font-weight: 700; }
.top-end .language-option .language-code { color: var(--ink-soft); font-size: 13px; font-weight: 800; }
.top-end .language-option.is-active .language-code { color: var(--blue); }

@media (max-width: 759px) {
  :root { --head: 76px; }
  .top-inner {
    grid-template-columns: 1fr auto;
    min-height: var(--head);
  }
  .brand img { height: 46px; }
  .top-end .language-toggle .language-code { display: none; }
  .top-end .language-toggle,
  .top-end a.account-chip { padding-inline: 10px; min-height: 38px; }
  .top-end a.account-chip.in { width: 40px; min-width: 40px; padding: 0; }
  .map-frame {
    width: 100%;
    margin: 0;
    height: calc(100dvh - var(--head) - var(--tabs));
    border-radius: 0;
  }
  .map-shell { height: 100%; max-height: none; border-radius: 0; border-left: 0; border-right: 0; }
}