/* ============================================================
   loppisfunn.no — ACCENT layer (themes/loppis)
   Site chrome: topbar, nav, article prose, footer.
   App components (cards/map/sheet) live in the Loppis plugin.
   ============================================================ */

:root {
  --bg:      #f6f4ee;
  --surface: #ffffff;
  --ink:     #1c2b2a;
  --muted:   #5b6b68;
  --line:    #e3ded2;

  --teal:    #0f766e;
  --teal-ink:#0b5751;
  --blue:    #2563eb;
  --green:   #16a34a;
  --fuchsia: #a21caf;
  --slate:   #64748b;

  --t-school:  var(--teal);
  --t-church:  var(--blue);
  --t-hall:    var(--green);
  --t-club:    var(--fuchsia);
  --t-market:  var(--teal);
  --t-other:   var(--slate);
}

body {
  background: var(--bg);
  color: var(--ink);
}

/* ----- Top bar ----- */
.lf-topbar {
  position: sticky; top: 0; z-index: 1200;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem max(1rem, env(safe-area-inset-left)) .55rem max(1rem, env(safe-area-inset-left));
  padding-top: calc(.55rem + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.lf-brand {
  display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none; font-weight: 800; font-size: 1.18rem;
  letter-spacing: -.02em; color: var(--ink);
}
.lf-brand-mark { width: 26px; height: 26px; }
.lf-brand-word b { color: var(--teal); font-weight: 800; }
.lf-topbar-tag {
  margin-left: auto; font-size: .74rem; color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 460px) { .lf-topbar-tag { display: none; } }

/* ----- Nav (few links, inline, thumb-sized) ----- */
.lf-nav {
  display: flex; gap: .25rem;
  padding: .4rem max(1rem, env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.lf-nav ul {
  display: flex; gap: .25rem; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.lf-nav a {
  text-decoration: none; color: var(--muted);
  font-weight: 600; font-size: .92rem;
  padding: .45rem .8rem; border-radius: 999px;
  white-space: nowrap;
}
.lf-nav a:hover { color: var(--ink); background: var(--surface); }
.lf-nav .active, .lf-nav .current {
  color: var(--teal-ink); background: color-mix(in srgb, var(--teal) 12%, var(--bg));
}

/* ----- Article / prose ----- */
.lf-article { flex: 1; }
.lf-page-title {
  font-size: 1.7rem; letter-spacing: -.02em;
  margin: .9rem 1rem .1rem;
}
.lf-sub { margin: 0 1rem .5rem; color: var(--muted); }
.lf-article .lf-prose {
  max-width: 46rem; margin: 0 auto;
  padding: 1.4rem 1.1rem 3rem;
  font-size: 1.02rem;
}
.lf-article .lf-prose h1 { font-size: 1.65rem; letter-spacing: -.02em; margin: .4rem 0 .3rem; }
.lf-article .lf-prose h2 { font-size: 1.22rem; margin: 1.6rem 0 .4rem; letter-spacing: -.01em; }
.lf-article .lf-prose p, .lf-article .lf-prose ul, .lf-article .lf-prose ol { color: var(--ink); }
.lf-article .lf-prose a { color: var(--teal-ink); text-underline-offset: 2px; }
.lf-article .lf-prose blockquote {
  margin: 1rem 0; padding: .5rem 1rem;
  border-left: 3px solid var(--teal); color: var(--muted);
}

/* ----- Footer ----- */
.lf-footer {
  border-top: 1px solid var(--line);
  padding: 1.3rem max(1rem, env(safe-area-inset-left)) calc(1.3rem + env(safe-area-inset-bottom));
  font-size: .84rem; color: var(--muted);
}
.lf-footer a { color: var(--teal-ink); }
.lf-footer p { margin: .25rem 0; }
.lf-footer-links a { text-decoration: none; font-weight: 600; margin: 0 .15rem; }
.lf-footer-links span { margin: 0 .3rem; color: var(--line); }

/* ----- Tip form (meld-inn) ----- */
.lf-tipskjema label {
  display: block; font-size: .84rem; font-weight: 700; color: var(--muted);
  margin: 0 0 .8rem;
}
.lf-tipskjema input, .lf-tipskjema textarea {
  display: block; width: 100%; font: inherit; font-size: 1rem;
  padding: .6rem .7rem; margin-top: .22rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
}
.lf-tipskjema input:focus, .lf-tipskjema textarea:focus { outline: 2px solid var(--teal); }
.lf-tipskjema input[name="hp"] {
  position: absolute; left: -9999px; width: 1px; height: 1px;
}
.lf-tipskjema .lf-btn { margin-top: .2rem; }
#lf-takk {
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line));
  border-radius: 12px; padding: .8rem 1rem; margin: .6rem 0 1rem;
}

/* ----- Map page: let the app take the viewport ----- */
body.kart .lf-footer { display: none; }
body.kart .lf-article { display: flex; flex-direction: column; }

/* ----- Nav: hamburger in the topbar (mobile), inline links (desktop) ----- */
.lf-shell { position: relative; }
.lf-nav { display: flex; align-items: center; min-height: 0; }
.lf-nav-burger {
  display: none; /* shown on mobile, absolutely placed in the topbar */
  align-items: center; justify-content: center;
  width: 36px; height: 34px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); cursor: pointer;
}
.lf-nav-burger:hover { background: var(--surface); }
@media (max-width: 719px) {
  .lf-nav { display: contents; }
  .lf-topbar-tag { display: none; }
  .lf-nav-burger { display: inline-flex; margin-left: auto; }
  .lf-nav ul {
    display: none; position: absolute; top: 46px; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: .35rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--lf-shadow-lift); z-index: 1300;
  }
  .lf-nav.open ul { display: flex; }
  .lf-nav ul a { display: block; border-radius: 8px; }
}
@media (min-width: 720px) {
  .lf-nav ul { gap: .25rem; }
}

/* ----- App pages (home/kart): full-viewport single-page app ----- */
body.home .lf-footer, body.kart .lf-footer { display: none; }
body.home .lf-article, body.kart .lf-article {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}