/* =====================================================================
   HvaSkjer – «Kveldslys» (v1)
   Et visuelt lag oppå style.css / web.css / activities.css.
   Ingen funksjoner er endret: denne fila bytter bare fonter, farger,
   form og plassering. Fjern <link> til revamp.css for å gå tilbake.

   Idé: byen i skumringen – når ting skjer. Dyp indigo natt,
   gatelykt-gult som eneste aksentfarge, plakat-typografi.
   ===================================================================== */

/* ---------- Fonter (OFL, lagt i vendor/) ---------- */
@font-face{font-family:"Instrument Sans";src:url(vendor/instrumentsans-regular.woff) format("woff");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(vendor/instrumentsans-bold.woff) format("woff");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(vendor/instrumentsans-italic.woff) format("woff");font-weight:400 900;font-style:italic;font-display:swap}


/* De gamle familienavnene pekes til de nye filene, så ALT som fortsatt ber om
   Fredoka / Outfit / Inter (kartetiketter, knapper, gamle regler) får ny typografi. */
@font-face{font-family:"Fredoka";src:url(vendor/outfit.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Outfit";src:url(vendor/instrumentsans-regular.woff) format("woff");font-weight:100 500;font-display:swap}
@font-face{font-family:"Outfit";src:url(vendor/instrumentsans-bold.woff) format("woff");font-weight:600 900;font-display:swap}
@font-face{font-family:"Inter";src:url(vendor/instrumentsans-regular.woff) format("woff");font-weight:100 500;font-display:swap}
@font-face{font-family:"Inter";src:url(vendor/instrumentsans-bold.woff) format("woff");font-weight:600 900;font-display:swap}

@font-face{font-family:"HS Display";src:url(vendor/outfit.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
html:root{
  --ks-natt:#15143a;      /* bakgrunn */
  --ks-skumring:#1d1c4a;  /* flater */
  --ks-dyp:#27265e;       /* hevede flater */
  --ks-kant:#34336f;      /* linjer */
  --ks-lykt:#7a4dff;      /* aksent: logo-lilla (fyll) */
  --ks-lykt-ink:#ffffff;  /* tekst på lilla */
  --ks-rosa:#ff5c8a;      /* merkevare-rosa, bare små ting */

  --display:"HS Display","Instrument Sans",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ks-radius-l:26px; --ks-radius-m:18px; --ks-radius-s:12px;
  --ks-ease:cubic-bezier(.2,.8,.2,1);

  /* lys modus (dagslys) */
  --ink:#151a3a; --muted:#5b6188; --bg:#eff0f8; --surface:#ffffff; --soft:#e5e9f4;
  --line:#dde2f0; --border:#cdd3e6; --header-bg:rgba(238,241,248,.86);
  --on-ink:#ffffff; --shadow:0 18px 40px -22px rgba(21,26,58,.35);
  --pink:#5a1ee6; --pink-2:#5a1ee6; --dream-lilac:#5a1ee6;
  --accent-soft:#ece5ff; --accent-ink:#4a16c4;
  --ks-accent-fill:var(--ks-lykt); --ks-accent-text:#5a1ee6;
  font-family:var(--body);
}
html:root[data-theme=dark]{ --accent:var(--ks-lykt);
  --ink:#eef0ff; --muted:#a3a8d0; --bg:var(--ks-natt); --surface:var(--ks-skumring); --soft:var(--ks-dyp);
  --line:#2a2960; --border:var(--ks-kant); --header-bg:rgba(21,20,58,.78);
  --on-ink:#121633; --map-bg:#141938; --shadow:0 22px 50px -24px rgba(0,0,0,.7);
  --pink:#b9a3ff; --pink-2:#b9a3ff; --dream-lilac:#b9a3ff;
  --accent-soft:rgba(122,77,255,.2); --accent-ink:#b9a3ff;
  --ks-accent-text:#b9a3ff;
}
@media (prefers-color-scheme: dark){ html:root:not([data-theme=light]){ --muted:#a3a8d0 } }
html[data-theme=dark] body{ --muted:#a3a8d0 }

/* ---------- Grunnlag ---------- */
html body, html:root body button, html:root body input, html:root body select, html:root body textarea{
  font-family:var(--body) !important;
}
html body{ font-feature-settings:"ss01","cv11"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html:root body h1, html:root body h2, html:root body h3, html:root body .display,
html:root body .dialog-heading h2, html:root body .act-hero h2, html:root body .event-feed-head h2,
html:root body .home-search-head h2, html:root body .search-engine-head h2, html:root body .cal-head h1,
html:root body .cal-nav h2, html:root body .sheet-title h2{
  font-family:var(--display) !important; letter-spacing:-.02em !important;
}
html[data-theme=dark]{ background-color:var(--ks-natt) !important }
html.web-build:root body{ background:transparent !important }
html[data-theme=dark] body::after{ opacity:.08 !important }
html:root body ::selection{ background:var(--ks-lykt); color:var(--ks-lykt-ink) }
html:root body :focus-visible{ outline:2.5px solid var(--ks-lykt) !important; outline-offset:3px !important; }

/* Boot-dekke i samme natt-blå (ingen blink av gammel farge) */
html.intro-pending, html.intro-pending body, #hsaBootVeil{ background:var(--ks-natt) !important }
html.web-build.intro-pending:root body{ background:var(--ks-natt) !important }
html:root body #brandIntro.bi-css{ background:var(--ks-natt) !important }
html[data-theme=light] body #brandIntro.bi-css{ background:#eff0f8 !important }

/* ---------- Ordmerket ---------- */
html:root body .brand-text, html:root body .bi-hva, html:root body .first-place-brand > span{
  font-family:var(--display) !important; font-weight:700 !important; letter-spacing:-.045em !important;
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
  color:var(--ink) !important;
}
html:root body .brand-text{ font-size:25px !important }
html:root body .brand-icon img{ border-radius:10px }
html:root body .beta-badge{ -webkit-text-fill-color:currentColor !important;
  background:transparent !important; color:var(--ks-accent-text) !important;
  border:1.5px solid currentColor !important; box-shadow:none !important;
  font:700 10.5px/1 var(--body) !important; letter-spacing:.02em !important; text-transform:none !important;
  padding:4px 7px !important; border-radius:999px !important;
}

/* ---------- Topplinje ---------- */
html:root body .app-header{
  background:var(--header-bg) !important;
  backdrop-filter:blur(18px) saturate(1.3) !important; -webkit-backdrop-filter:blur(18px) saturate(1.3) !important;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent) !important;
  box-shadow:none !important;
}
html:root body .icon-button{ border-radius:14px !important; color:var(--ink) !important }
html:root body .icon-button:hover{ background:var(--soft) !important }

/* Stedvelger i toppen: tilbake på alle sider unntatt forsiden (der står «Bytt sted» i overskriften).
   Da er det alltid ett trykk for å bytte sted – også på kart, aktiviteter og plan. */
html.web-build:root body:not([data-view=home]) .app-header #locationBtn{ display:inline-flex !important }
html:root body .location-pill{
  height:38px !important; padding:0 14px 0 12px !important; gap:7px !important;
  border-radius:999px !important; border:1px solid var(--border) !important;
  background:var(--surface) !important; box-shadow:none !important;
  font:600 13.5px/1 var(--body) !important; color:var(--ink) !important;
}
html:root body .location-pill .dot{ color:var(--ks-accent-text) !important; font-size:8px !important }
html:root body .account-btn{
  height:38px !important; border-radius:999px !important; border:1px solid var(--border) !important;
  background:transparent !important; color:var(--ink) !important; font-weight:600 !important; box-shadow:none !important;
}
html:root body .account-btn:hover{ background:var(--soft) !important }

/* ---------- Hovedmeny (desktop: segmentert, mobil: dokk) ---------- */
html:root body .tabbar{
  background:color-mix(in srgb,var(--surface) 88%,transparent) !important;
  border:1px solid var(--border) !important;
  box-shadow:0 20px 50px -28px rgba(0,0,0,.65) !important;
  backdrop-filter:blur(20px) saturate(1.3) !important; -webkit-backdrop-filter:blur(20px) saturate(1.3) !important;
  padding:5px !important; gap:4px !important;
}
html:root body .tabbar button{
  color:var(--muted) !important; background:transparent !important;
  font-weight:600 !important; letter-spacing:0 !important; border-radius:16px !important;
  transform:none !important; transition:background .25s var(--ks-ease),color .25s var(--ks-ease) !important;
}
html:root body .tabbar button::before{ display:none !important }
html:root body .tabbar button .ico{ filter:none !important; animation:none !important }
html:root body .tabbar button:hover{ color:var(--ink) !important; background:var(--soft) !important }
html:root body .tabbar button[aria-current=page]{
  background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important;
}
html:root body .tabbar button[aria-current=page] .ico{ filter:none !important; transform:none !important }
html:root body .tabbar button[aria-current=page] .ico .duo{ fill-opacity:.28 !important }
html:root body .tabbar .badge{ background:var(--ks-rosa) !important; color:#fff !important }

@media (max-width:767px){
  html:root body .tabbar{
    left:10px !important; right:10px !important; bottom:calc(10px + var(--safe-bottom)) !important;
    height:64px !important; border-radius:24px !important;
  }
  html:root body .tabbar button{ font-size:11px !important; gap:3px !important; border-radius:19px !important }
  html:root body .tabbar button .ico{ width:22px !important; height:22px !important }
}
@media (min-width:768px){
  html:root body .tabbar{ border-radius:20px !important }
}

/* ---------- Forsiden: plakat-overskriften ---------- */
html:root body .home-hello{ padding-top:clamp(18px,4vh,44px) !important }
html:root body .home-hello .headline-row{ align-items:flex-end !important; gap:14px !important }
html:root body #helloTitle{
  font-family:var(--display) !important; font-weight:700 !important;
  font-size:16px !important; line-height:1 !important; letter-spacing:-.055em !important;
  display:block !important; text-align:center !important; color:var(--ink) !important; overflow:visible !important;
}
/* «Hva skjer» står allerede i logoen oppe til venstre – her bare for skjermlesere */
html:root body #helloTitle .sr-only{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important }
html:root body #helloTitle .where, html:root body #helloTitle .where em, html:root body #helloTitle .where .i{
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
  color:var(--ink) !important; font-style:normal !important; filter:none !important; text-shadow:none !important;
}
html:root body #helloTitle .where{ font-size:clamp(54px,7.4vw,108px) !important; line-height:.92 !important; letter-spacing:-.045em !important; font-weight:600 !important; padding-bottom:.06em }
html:root body #helloTitle .where .q{
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
  color:var(--ks-accent-text) !important; margin-left:.02em;
}
html:root body .headline-location{
  height:42px !important; padding:0 16px 0 13px !important; border-radius:999px !important;
  background:transparent !important; border:1.5px solid var(--border) !important; box-shadow:none !important;
  color:var(--ink) !important; font:600 14px/1 var(--body) !important; margin-bottom:.55em !important;
  transition:border-color .2s, background .2s !important;
}
html:root body .headline-location:hover{ border-color:var(--ks-accent-text) !important; background:var(--accent-soft) !important }
html:root body .headline-location [data-icon], html:root body .headline-location .ico{ color:var(--ks-accent-text) !important }
@media (max-width:650px){
  html:root body .home-hello .headline-row{ flex-direction:column !important; align-items:center !important; gap:12px !important }
  html:root body .home-hello .headline-row #helloTitle{ max-width:100% !important }
  html:root body .headline-location{ margin-bottom:0 !important; height:38px !important }
}

/* ---------- Søk + «Overrask meg» ---------- */
html:root body .home-discovery{ gap:10px !important; margin-top:clamp(14px,2.4vh,26px) !important }
html:root body .home-ask{
  background:var(--surface) !important; border:1.5px solid var(--border) !important;
  border-radius:20px !important; box-shadow:none !important; min-height:60px !important;
  transition:border-color .2s, box-shadow .2s !important;
}
html:root body .home-ask:focus-within{ border-color:var(--ks-accent-text) !important; box-shadow:0 0 0 4px var(--accent-soft) !important }
html:root body .home-ask .guide-mark{ background:transparent !important; border:0 !important; color:var(--muted) !important; box-shadow:none !important }
html:root body .home-ask-field{
  font-family:var(--body) !important; font-weight:500 !important; font-size:16.5px !important; letter-spacing:0 !important;
  color:var(--ink) !important;
}
html:root body .home-ask-field::placeholder{ color:var(--muted) !important; opacity:1 }
html:root body .home-ask button[type=submit]{
  background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important;
  border-radius:14px !important; width:44px !important; height:44px !important;
  font-weight:700 !important; box-shadow:none !important; border:0 !important;
}
html:root body .home-surprise{
  background:transparent !important; color:var(--ink) !important;
  border:1.5px solid var(--border) !important; box-shadow:none !important; filter:none !important;
  border-radius:20px !important; font-weight:600 !important; min-height:60px !important;
}
html:root body .home-surprise b{ font-weight:600 !important }
html:root body .home-surprise > span{ color:var(--ks-accent-text) !important }
html:root body .home-surprise:hover{ border-color:var(--ks-accent-text) !important; background:var(--accent-soft) !important; transform:none !important }

/* ---------- Karusellen ---------- */
html:root body .g-slide, html:root body .glide-track > *{ border-radius:var(--ks-radius-l) !important }
html:root body .g-slide .slide-title, html:root body .glide-track h3, html:root body .glide-track strong{
  font-family:var(--display) !important; letter-spacing:-.02em !important;
}
html:root body .slide-when, html:root body .g-slide .slide-when{
  background:#fff !important; color:#151a3a !important; font:700 12px/1 var(--body) !important;
  border-radius:999px !important; letter-spacing:0 !important;
}
html:root body .glide-arrow{
  background:var(--surface) !important; border:1px solid var(--border) !important; color:var(--ink) !important;
  box-shadow:var(--shadow) !important; border-radius:999px !important;
}
html:root body .glide-arrow:hover{ border-color:var(--ks-accent-text) !important }

/* ---------- Arrangementslisten ---------- */
html:root body .event-feed-head h2{ font-size:clamp(22px,2.4vw,30px) !important; font-weight:700 !important }
html:root body .event-feed-head small{ color:var(--muted) !important; font-weight:500 !important }
html:root body .event-grid > *{
  border-radius:var(--ks-radius-m) !important; border:1px solid var(--line) !important;
  background:var(--surface) !important; box-shadow:none !important; overflow:hidden;
  transition:border-color .2s var(--ks-ease), transform .3s var(--ks-ease) !important;
}
html:root body .event-grid > *:hover{ border-color:color-mix(in srgb,var(--ks-lykt) 60%,var(--border)) !important; transform:translateY(-2px) }
html:root body .event-grid strong, html:root body .event-grid h3{
  font-family:var(--display) !important; font-weight:700 !important; letter-spacing:-.015em !important;
}

/* ---------- Brikker, faner, segmenter ---------- */
html:root body .chip, html:root body .chips button, html:root body .segments button, html:root body .map-regions button,
html:root body .partner-kinds button, html:root body .quick-pills-row .pill, html:root body .account-tabs button{
  border-radius:999px !important; font-weight:600 !important; letter-spacing:0 !important;
}
html:root body .segments button[aria-selected=true], html:root body .segments button.on,
html:root body .map-regions button[aria-pressed=true], html:root body .map-regions button.on, html:root body .map-regions button.active,
html:root body .partner-kinds button[aria-pressed=true], html:root body .account-tabs button[aria-selected=true]{
  background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important; border-color:transparent !important;
  box-shadow:none !important;
}
html:root body .map-regions{ border-radius:999px !important }

/* ---------- Knapper ---------- */
html:root body button.primary, html:root body a.primary, html:root body .search-main-cta{
  background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important;
  border-radius:14px !important; font-weight:700 !important; box-shadow:none !important; border:0 !important;
  background-image:none !important;
}
html:root body button.primary:hover, html:root body a.primary:hover{ filter:brightness(1.06) }
html:root body button.ghost{ border-radius:14px !important }
html:root body .surprise-btn{
  background:transparent !important; border:1.5px solid var(--border) !important; color:var(--ink) !important;
  border-radius:999px !important; box-shadow:none !important; font-weight:600 !important;
}

/* ---------- Dialoger og ark ---------- */
html:root body dialog, html:root body .chat-panel, html:root body .bottom-sheet{
  background:var(--surface) !important; color:var(--ink) !important;
  border:1px solid var(--border) !important;
}
html:root body dialog{ border-radius:var(--ks-radius-l) !important; box-shadow:0 40px 90px -30px rgba(0,0,0,.6) !important }
html:root body dialog::backdrop{ background:rgba(10,12,32,.55) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
html:root body .dialog-heading h2{ font-size:24px !important; font-weight:700 !important }
html:root body .close{
  border-radius:999px !important; background:var(--soft) !important; color:var(--ink) !important; border:0 !important;
}
html:root body .field input, html:root body .field textarea, html:root body .field select,
html:root body .account-form input, html:root body .account-form textarea, html:root body .place-search{
  border-radius:var(--ks-radius-s) !important; border:1.5px solid var(--border) !important; background:var(--bg) !important;
}
html:root body .field input:focus, html:root body .field textarea:focus, html:root body .account-form input:focus,
html:root body .account-form textarea:focus{ border-color:var(--ks-accent-text) !important; outline:none !important; box-shadow:0 0 0 4px var(--accent-soft) !important }

/* Aktiviteter-panelet */
html:root body .act-hero h2 em{ font-style:normal !important; color:var(--ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important }
html:root body .act-kicker{ text-transform:none !important; letter-spacing:0 !important; font:600 13px/1 var(--body) !important; color:var(--muted) !important }
html:root body .act-kicker i{ background:var(--ks-lykt) !important; box-shadow:none !important }

/* Kalender */
html:root body .cal-panel, html:root body .cal-day-panel, html:root body .cal-favs > *{ border-radius:var(--ks-radius-l) !important }
html:root body .cal-grid [aria-current=date], html:root body .cal-grid .today, html:root body .cal-grid button.is-today{
  background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important;
}
html:root body .cal-today{ border-radius:999px !important; font-weight:600 !important }

/* Overskrifter med versaler-etikett → rolig setningsform */
html:root body .search-section h3, html:root body .set-group h3, html:root body .home-search-head small,
html:root body .nearby-partners-head small, html:root body .first-place-kicker, html:root body #locationDialog .place-recent small{
  text-transform:none !important; letter-spacing:0 !important; font-weight:600 !important; font-size:13px !important; color:var(--muted) !important;
  font-family:var(--body) !important;
}

/* Kart-kontroller */
html:root body .leaflet-bar a{ background:var(--surface) !important; color:var(--ink) !important; border-color:var(--border) !important }
html:root body .map-fab{ background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important; box-shadow:var(--shadow) !important }
html[data-theme=dark] body .leaflet-tile{ filter:invert(1) hue-rotate(195deg) brightness(.86) contrast(.9) saturate(.7) !important }

/* Bunntekst */
html:root body .home-about{ color:var(--muted) !important; font-size:13px !important }
html:root body .home-about b{ color:var(--ink) !important; font-weight:600 !important }
html:root body .home-about a{ color:var(--ks-accent-text) !important }

/* Respekter «redusert bevegelse» */
@media (prefers-reduced-motion:reduce){
  html:root body .event-grid > *, html:root body .tabbar button{ transition:none !important }
  html:root body .event-grid > *:hover{ transform:none !important }
}

/* ---------- Justeringer etter første gjennomgang ---------- */
/* Karusell: større, tydeligere titler */
html:root body .g-slide .slide-body h3{
  font-family:var(--display) !important; font-weight:700 !important; letter-spacing:-.03em !important;
  font-size:clamp(19px,1.7vw,24px) !important; line-height:1.05 !important; text-wrap:balance;
}
html:root body .g-slide .slide.title-long .slide-body h3{ font-size:clamp(17px,1.45vw,21px) !important }
html:root body .g-slide .slide.title-very-long .slide-body h3{ font-size:clamp(15px,1.25vw,18px) !important }
html:root body .g-slide .slide-place b{ font-weight:600 !important }
html:root body .card-body h3, html:root body .card-body strong{ text-wrap:balance }

/* «Bytt sted» beholder teksten også på smal skjerm */
html.web-build:root body .headline-location>span:last-child{ display:inline !important }
html:root body .headline-location{ width:auto !important; min-width:0 !important }

/* Små etiketter i kalender/favoritter: setningsform i stedet for versaler */
html:root body .cal-head small, html:root body .fav-head small{
  text-transform:none !important; letter-spacing:0 !important; font-weight:600 !important;
}

/* Mobil: gi stedvelgeren plass i toppen */
@media (max-width:520px){
  html:root body .app-header .beta-badge{ display:none !important }
  html:root body .location-pill{ max-width:44vw !important }
}
/* Min side (account.html) */
html:root body > header, html:root body header.top{ background:var(--header-bg) !important; border-bottom-color:var(--line) !important }
/* Lys modus: mykere glød bak karusellen, renere flate */
html[data-theme=light]:root body .hero-glow{ opacity:.35 !important }
html[data-theme=light]:root body{ --ks-lykt:#601ffb }

/* ---------- Utforsk-kartet svakt i bakgrunnen ---------- */
html.web-build:root body #bgMap{ display:block !important; z-index:-1 !important }
html.web-build:root body #bgMap.ready{ opacity:.22 !important; filter:saturate(.6) !important }
html.web-build[data-theme=light]:root body #bgMap.ready{ opacity:.18 !important }
html.web-build:root body #bgMap .leaflet-control-attribution{ display:none !important }