:root {
  color-scheme: light;
}

html:not([data-portok]) body > * {
  visibility: hidden !important;
}

/* Windows/Edge/Opera lack flag glyphs in Segoe UI Emoji. */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF;
  src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}

/* Shared load/error states */
.load-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0.5rem 0;
}

.load-wrap p { display: none; }

.load-spin {
  width: 28px;
  height: 28px;
  margin: 0.35rem 0;
  border-radius: 50%;
  border: 3px solid rgba(28, 43, 58, 0.12);
  border-top-color: #1C2B3A;
  animation: load-spin-rot 0.7s linear infinite;
}

@keyframes load-spin-rot {
  to { transform: rotate(360deg); }
}

.load-wrap.is-fel p {
  display: block;
  margin: 0;
  color: #1C2B3A;
  font-size: 0.95rem;
  line-height: 1.45;
}

.api-retry {
  align-self: flex-start;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #1C2B3A;
  border-radius: 999px;
  background: #fff;
  color: #1C2B3A;
  font: 600 0.9rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.api-inaktuell {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(28, 43, 58, 0.55);
}

.skel {
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(28, 43, 58, 0.06) 25%,
    rgba(28, 43, 58, 0.11) 50%,
    rgba(28, 43, 58, 0.06) 75%
  );
  background-size: 200% 100%;
  animation: skel-sweep 1.4s ease-in-out infinite;
}

@keyframes skel-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Global header — all pages */
.site {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 8px 12px 14px;
  background: rgba(245, 240, 232, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(217, 208, 195, 0.6);
  flex-shrink: 0;
  min-width: 0;
}

.site-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  flex: 1;
  text-decoration: none;
}

.site-brand img {
  display: block;
  height: 26px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.site-brand .site-namn {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-brand.is-namn .site-namn {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  clip: auto;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--navy, #1C2B3A);
  text-overflow: ellipsis;
}

.site-brand.is-namn img {
  display: none;
}

.site-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.site .lang {
  position: relative;
  display: block;
}

.site .lang[hidden] {
  display: none !important;
}

.site .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #E0D9CF;
  border-radius: 999px;
  background: #FFFCF7;
  color: #1C2B3A;
  font-family: "Twemoji Country Flags", Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.lang-flag {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.lang-chev {
  font-size: 10px;
  opacity: 0.7;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  min-width: 168px;
  background: #FFFCF7;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(28, 43, 58, 0.16);
}

.site .lang-menu button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: #1C2B3A;
  font-family: "Twemoji Country Flags", Inter, system-ui, sans-serif;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.site .lang-menu .lang-flag {
  width: 22px;
  height: 22px;
}

.site .lang-menu button.is-on {
  color: #0A7A8C;
  font-weight: 600;
}

.menu-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: #1C2B3A;
  cursor: pointer;
  padding: 0;
}

.menu-btn svg { display: block; }

.meny-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #1C2B3A;
  cursor: pointer;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  font-family: Inter, system-ui, sans-serif;
}

.meny-btn[aria-expanded="true"] {
  background: #1C2B3A;
  color: #fff;
  border-radius: 10px;
}

.sido-meny {
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(0px, calc((100% - 430px) / 2));
  z-index: 70;
  width: min(300px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: #FFFCF7;
  transform: translateX(-105%);
  transition: transform 0.22s ease;
  overflow: auto;
  border: 0;
  box-shadow: none;
}

.sido-meny.open {
  transform: translateX(0);
  box-shadow: 8px 0 24px rgba(28, 43, 58, 0.16);
}

@media (min-width: 768px) {
  .sido-meny { left: max(0px, calc((100% - 780px) / 2)); }
}

@media (min-width: 1024px) {
  .sido-meny { left: max(0px, calc((100% - 960px) / 2)); }
}

.sido-meny a {
  display: block;
  padding: 14px 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1C2B3A;
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 43, 58, 0.1);
}

.sido-meny-rubrik {
  margin: 6px 0 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(28, 43, 58, 0.55);
}

.sido-meny-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sido-meny-pills button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(28, 43, 58, 0.18);
  background: #fff;
  color: #1C2B3A;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.sido-meny-pills button.is-on {
  background: var(--kat-farg, #1C2B3A);
  border-color: var(--kat-farg, #1C2B3A);
  color: #fff;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 250ms ease-out, visibility 250ms ease-out;
}

.nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: 80%;
  max-width: 320px;
  background: #1C2B3A;
  color: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 250ms ease-out;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 0 20px;
}

body.nav-open { overflow: hidden; }
body.nav-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.nav-open .nav-panel {
  transform: translateX(0);
}

.nav-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  margin: 4px 8px 8px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.nav-panel nav {
  display: flex;
  flex-direction: column;
}

.nav-panel nav a {
  display: block;
  padding: 20px 24px;
  color: #fff;
  font-family: "Playfair Display", Palatino, Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-panel nav a.is-active {
  border-left: 3px solid #0A7A8C;
  padding-left: 21px;
  color: rgba(255, 255, 255, 0.9);
}

.nav-panel .ext {
  margin-top: auto;
  padding: 20px 24px 8px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

/* Guest bottom tabs — one menu, hamburger hidden.
   Body itself does not scroll. The page scrolls inside .app, so the
   tab bar stays at the bottom in Safari and in the installed iOS app.
   position:fixed plus 100vh lets the bar ride up with the document. */
body.guest-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.guest-nav .menu-btn {
  display: none;
}

body.guest-nav .app {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
}

body.guest-nav .guest-tabs {
  position: relative;
  flex: 0 0 auto;
  left: auto;
  right: auto;
  bottom: auto;
}

.guest-tabs a[hidden],
.guest-tabs button[hidden],
.sido-meny a[hidden],
.nav-panel nav a[hidden],
.val-card[hidden],
.week[hidden],
.mer-card[hidden],
.mer-card-img[hidden],
.week-more[hidden] {
  display: none !important;
}

.guest-tabs {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 4px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: #F5F0E8;
  border-top: 1px solid rgba(28, 43, 58, 0.08);
  box-shadow:
    0 -1px 0 rgba(28, 43, 58, 0.06),
    0 -4px 16px rgba(28, 43, 58, 0.07),
    0 -12px 32px rgba(28, 43, 58, 0.04);
}

.guest-tabs a,
.guest-tabs button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px 2px 4px;
  border: 0;
  background: none;
  color: rgba(28, 43, 58, 0.52);
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}

.guest-tabs a::before,
.guest-tabs button::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: transparent;
  transition: background 0.15s ease;
}

.guest-tabs a.is-on,
.guest-tabs button.is-on,
.guest-tabs a[aria-current="page"],
.guest-tabs button[aria-current="page"] {
  color: #0A7A8C;
}

.guest-tabs a.is-on::before,
.guest-tabs button.is-on::before,
.guest-tabs a[aria-current="page"]::before,
.guest-tabs button[aria-current="page"]::before {
  background: #0A7A8C;
}

.guest-tabs svg {
  display: block;
}

/* View Transitions — slide-in från höger. Header står still, menyn fade:ar. */
@view-transition { navigation: auto; }

@keyframes vt-slide-in {
  from { transform: translateX(6%); opacity: 0; }
  to   { transform: translateX(0);  opacity: 1; }
}
@keyframes vt-slide-out {
  from { transform: translateX(0);   opacity: 1; }
  to   { transform: translateX(-4%); opacity: 0; }
}
@keyframes vt-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } }

::view-transition-old(root) {
  animation: 220ms ease both vt-slide-out;
}
::view-transition-new(root) {
  animation: 260ms ease both vt-slide-in;
}

.site { view-transition-name: site-header; }
.guest-tabs,
.tab-bar { view-transition-name: tab-bar; }

::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
}

::view-transition-old(tab-bar),
::view-transition-new(tab-bar) {
  animation: 180ms ease both vt-fade-in;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) {
    animation: 150ms ease both vt-fade-out;
  }
  ::view-transition-new(root) {
    animation: 150ms ease both vt-fade-in;
  }
}

@media (min-width: 768px) {
  .site {
    padding: 0.9rem 1.5rem;
  }

  .site-brand img {
    height: 30px;
  }

  .guest-tabs {
    max-width: 780px;
  }
}

@media (min-width: 1024px) {
  .guest-tabs {
    max-width: 960px;
  }
}

.app-footer {
  text-align: center;
  padding: 12px 16px 20px;
  background: var(--porcelain, #F5F0E8);
}
.app-footer-branding {
  font-size: 0.7rem;
  color: #94a3b8;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.app-footer-branding strong {
  color: #64748b;
  font-weight: 600;
}
.app-footer-branding:hover strong { color: var(--navy, #1C2B3A); }

/* Bilder tonar in när de laddats. Kartans tiles undantas — Leaflet skapar dem löpande. */
img:not(.leaflet-tile):not(.leaflet-marker-icon):not(.leaflet-marker-shadow):not(.leaflet-image-layer) {
  opacity: 0;
  transition: opacity 0.3s ease;
}
img:not(.leaflet-tile):not(.leaflet-marker-icon):not(.leaflet-marker-shadow):not(.leaflet-image-layer).loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  img:not(.leaflet-tile):not(.leaflet-marker-icon):not(.leaflet-marker-shadow):not(.leaflet-image-layer) {
    transition: none;
  }
}