/* css/stil-kirke-mobil.css — Church-lab på telefon (app-kirke-mobil.js)
   ============================================================
   Org-skallet ER appen på telefon: menighetens egne flater i full bredde,
   en rolig topp og en bunnmeny. Alt er skopet under body.kirke-mobil, som
   app-kirke-mobil.js setter når erMobil() er sann og kirkelaget er på
   (ikke ?eventlab=1). Desktop, iPad og Eventlabs mobilflater er urørt.

   Bare tokens (docs/DESIGN.md §2). Fargene følger derfor kirkedrakten og
   mørk modus uten egne verdier her.

   !important står bare der stil-mobil.css allerede bruker det på samme
   egenskap (org-sidens 44 px-meny og innholdspaddingen) — ellers taper
   regelen uansett spesifisitet.
   ============================================================ */

/* ── 1. Skallet ──────────────────────────────────────────────────────────
   Ikonkolonnen tok 44 av 375 px, og gjentok bunnmenyen. Innholdet får hele
   bredden; bunnmenyen er et flex-barn av #org-page, så .orgp-body krymper
   over den og ingenting havner bak den. */
body.kirke-mobil #org-page .orgp-nav { display: none !important; }
body.kirke-mobil #org-page .orgp-content { padding: 16px 16px 28px !important; overscroll-behavior: contain; }

/* ── 2. Toppen ───────────────────────────────────────────────────────────
   Menighetens navn, varsler og konto. «Tilbake», søket, Historikk, Mitt
   ansvar og Innspill står i Mer-arket (samme knapper, samme gating), og
   fanetittelen står i flatens egen overskrift og i bunnmenyen. */
body.kirke-mobil #org-page > .orgp-header {
  height: auto; min-height: 56px; gap: 4px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px 16px;
  background: var(--bg); color: var(--text);
  border-bottom: 1px solid var(--border);
}
body.kirke-mobil #org-page > .orgp-header > :not(.orgp-org-pille):not(#orgp-varsel-btn):not(#orgp-bruker-avatar) { display: none !important; }
body.kirke-mobil #org-page .orgp-org-pille {
  flex: 1; min-width: 0; gap: 10px; padding: 0; background: none;
}
body.kirke-mobil #org-page .orgp-org-pille-navn {
  color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.kirke-mobil #org-page .orgp-org-pille-avatar { width: 30px; height: 30px; flex-shrink: 0; }
body.kirke-mobil #org-page #orgp-varsel-btn {
  display: inline-grid !important; place-items: center;
  width: 44px; height: 44px; padding: 0; border-radius: 12px;
  background: none; color: var(--text);
}
/* stil-base.css farger ikonet selv (hvitt, for den mørke topbaren). */
body.kirke-mobil #org-page #orgp-varsel-btn svg,
body.kirke-mobil #org-page #orgp-varsel-btn:hover svg { width: 20px; height: 20px; color: currentColor; }
body.kirke-mobil #org-page #orgp-varsel-btn:hover,
body.kirke-mobil #org-page #orgp-varsel-btn:active { background: var(--primary-pill); color: var(--text); }
body.kirke-mobil #org-page #orgp-varsel-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
body.kirke-mobil #org-page #orgp-varsel-btn > span:not(.orgp-badge) { display: none; }
body.kirke-mobil #org-page #orgp-varsel-btn .orgp-badge { position: absolute; top: 6px; right: 6px; }
body.kirke-mobil #org-page #orgp-bruker-avatar { width: 34px; height: 34px; margin: 5px 4px 5px 2px; flex-shrink: 0; }

/* ── 3. Bunnmenyen ───────────────────────────────────────────────────────
   Fire faste plasser + Mer, speilet fra sidemenyen. Aktiv plass har pille
   bak ikonet og mørk merkefarge som tekst — --primary-dark-adaptiv er
   merkefargen som TEKST og holder kontrasten i begge temaer. */
.kmb-nav { display: none; }
body.kirke-mobil #org-page > .kmb-nav {
  display: flex; flex-shrink: 0; align-items: stretch;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--border);
}
/* Plassene får bredde etter navnet (flex-basis auto) og deler resten likt:
   «Gudstjenester» trenger ~80 px, «Mer» ~25. Like brede plasser ga 75 px
   hver på 375 px, og «Gudstjen…». */
.kmb-knapp {
  flex: 1 1 auto; min-width: 0; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 2px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  color: var(--text-muted); font: 600 11px/1.2 var(--kirke-skrift, inherit);
  -webkit-tap-highlight-color: transparent;
}
.kmb-ikon { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; }
.kmb-ikon svg { width: 22px; height: 22px; }
.kmb-navn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmb-knapp[aria-current="page"] { color: var(--primary-dark-adaptiv); }
.kmb-knapp[aria-current="page"] .kmb-ikon { background: var(--primary-pill); }
.kmb-knapp:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Desktop-settet lastes fortsatt: fanebyttet venter, og menyen sier fra. */
.kmb-nav[aria-busy="true"] .kmb-knapp { cursor: progress; }

/* ── 4. Mer-arket ────────────────────────────────────────────────────────
   Resten av sidemenyen, gruppert som i skinna, og topbarens personlige valg.
   Ligger inni #org-page og dekker dermed toppen og bunnmenyen. */
.kmb-ark { position: fixed; inset: 0; z-index: 4800; pointer-events: none; }
.kmb-ark.aktiv { pointer-events: auto; }
.kmb-ark-bakgrunn { position: absolute; inset: 0; background: var(--overlay-bg); opacity: 0; }
.kmb-ark.aktiv .kmb-ark-bakgrunn { opacity: 1; }
.kmb-ark-flate {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86dvh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  border-radius: 20px 20px 0 0; box-shadow: var(--modal-shadow);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
}
.kmb-ark.aktiv .kmb-ark-flate { transform: none; }
.kmb-ark-hode { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 6px 20px; }
.kmb-ark-hode h2 { margin: 0; font: 400 26px/1.1 var(--kirke-tittelskrift, 'Bebas Neue', sans-serif); letter-spacing: .03em; }
.kmb-lukk {
  width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  color: var(--text-muted); font: 400 28px/1 inherit;
}
.kmb-lukk:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.kmb-ark-innhold { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 20px; display: flex; flex-direction: column; gap: 18px; }
.kmb-seksjon h3 {
  margin: 0 4px 8px; color: var(--text-muted);
  font: 700 11px/1.3 var(--kirke-skrift, inherit); letter-spacing: .08em; text-transform: uppercase;
}
.kmb-liste { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.kmb-rad {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px;
  padding: 10px 14px; border: 0; border-radius: 0; background: none; cursor: pointer; text-align: left;
  color: var(--text); font: 500 15px/1.3 var(--kirke-skrift, inherit);
}
.kmb-rad + .kmb-rad { border-top: 1px solid var(--border); }
.kmb-rad:active { background: var(--primary-pill); }
.kmb-rad:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.kmb-rad[aria-current="page"] { color: var(--primary-dark-adaptiv); font-weight: 700; }
.kmb-rad-ikon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-pill); color: var(--primary-dark-adaptiv); }
.kmb-rad-ikon svg { width: 18px; height: 18px; }
.kmb-rad-navn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Ny-gruppa («Ny gudstjeneste») er handlinger, ikke steder: primærknapp
   øverst i arket, samme form som «+ Ny gudstjeneste» i Gudstjenester. */
.kmb-handlinger { display: flex; flex-direction: column; gap: 8px; }
.kmb-handling {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px;
  padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--primary-dark); color: var(--kirke-paa-primar); font: 700 15px/1.2 var(--kirke-skrift, inherit);
}
.kmb-handling svg { width: 18px; height: 18px; }
.kmb-handling:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── 5. Eventlabs mobilark over org-skallet ───────────────────────────────
   Utseende-valget (mbTema) og installasjonsstripa monteres på <body> med
   z-index under #org-page (4500), fordi de ble laget for mobil-landingen.
   I org-skallet ville de åpnet seg usynlig bak det. */
body.kirke-mobil .mb-sheet-overlay { z-index: 4900; }
body.kirke-mobil .mb-sheet { z-index: 4910; }
body.kirke-mobil .mb-pwa-stripe { z-index: 4700; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* ── 6. Hjem på telefon ──────────────────────────────────────────────────
   Desktop har to kolonner: velkomst og søk til venstre, snarveier og «Vi
   samles» til høyre, «Min tjeneste» under søket. Stablet på 375 px havnet
   vaktene — det en frivillig åpner appen for — under en halv skjerm med
   velkomst, forslagspiller og søkefelt. Rekkefølgen her er leserekkefølgen
   på telefon: min tjeneste, søndagen, så søket. Snarveiene er bunnmenyen og
   Mer-arket på telefon, og står ikke to ganger. Kun rekkefølge og avstand;
   innholdet er Hjems eget (app-kirke-org-hjem.js). */
body.kirke-mobil .khj-flate { padding: 4px 0 8px; }
body.kirke-mobil .khj-layout { display: flex; flex-direction: column; gap: 28px; }
body.kirke-mobil .khj-hoved,
body.kirke-mobil .khj-arbeidsflate { display: contents; }
body.kirke-mobil .khj-velkomst { order: 0; margin: 0; text-align: left; }
body.kirke-mobil .khj-velkomst h2 { font-size: 34px; margin: 4px 0 0; }
body.kirke-mobil .khj-velkomst > p:last-child { display: none; }
body.kirke-mobil .khj-tjeneste { order: 1; margin: 0; padding: 0; border: 0; }
body.kirke-mobil .khj-tjeneste > h2 { text-align: left; font-size: 26px; margin: 0 0 14px; }
body.kirke-mobil .khj-neste { order: 2; margin: 0; padding-top: 22px; }
body.kirke-mobil .khj-neste .khj-samling { padding: 16px 4px; gap: 14px; }
body.kirke-mobil .khj-sokesone { order: 3; padding-top: 22px; border-top: 1px solid var(--border); }
body.kirke-mobil .khj-forslag { justify-content: flex-start; }
body.kirke-mobil .khj-sokesone > p:not(.sr-only) { text-align: left; margin-inline: 4px; }
body.kirke-mobil .khj-snarveier { display: none; }

/* ── 7. Bevegelse (docs/DESIGN.md §5b) ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .kmb-ark-bakgrunn { transition: opacity var(--anim-tid-hurtig, .2s) ease; }
  .kmb-ark-flate { transition: transform var(--anim-tid-panel, .28s) cubic-bezier(.32, .72, .22, 1); }
  .kmb-ikon { transition: background-color var(--anim-tid-hurtig, .2s) ease; }
  .kmb-nav[aria-busy="true"] .kmb-knapp:not([aria-current]) .kmb-ikon { animation: kmbVenter 1s ease-in-out infinite alternate; }
}
@keyframes kmbVenter { from { opacity: 1; } to { opacity: .45; } }