/* KEWAB Värmland – i samma stil som kewab.se:
   svart sidhuvud med röd list, foton med mörk toning, guld som accent, röda små rubriker. */

/* ---------- Sidhuvud: svart med röd list överst ---------- */

.topbar { background: #111; border-top: 4px solid #d13429; }
.masthead.with-photo {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, .40) 50%, rgba(0, 0, 0, .62) 100%),
    var(--photo) center 50% / cover no-repeat,
    #111;
}
.masthead.with-photo .topbar { background: transparent; }
.masthead.with-photo .hero { background: none; }
.hero.compact .hero-inner { padding: 36px 20px 84px; }
.hero h1 { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.eyebrow { color: #e0564c; font-weight: 600; }
.hero p.lead { color: #ececec; }

.crumbs { color: rgba(255, 255, 255, .7); }
.crumbs a { color: var(--sky); }
.crumbs [aria-current] { color: #fff; }

.topbar nav a:hover, .topbar nav a.active { border-bottom-color: var(--sky); }
.topbar button.link { color: var(--sky); }
.who { color: rgba(255, 255, 255, .7); }

/* ---------- Inloggning: helskärmsfoto ---------- */

body.auth {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, .70) 100%),
    var(--photo) center / cover no-repeat fixed,
    #111;
}
body.auth .masthead.with-photo { background: none; }
body.auth .topbar { border-top-color: #d13429; }
.auth-title { text-shadow: 0 1px 16px rgba(0, 0, 0, .4); }
.auth-wrap .card { box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }

/* ---------- Knappar: guld med mörk text (som "Kontakta oss" på webbplatsen) ---------- */

button, a.button, label.button, summary.button { color: #1d1d1d; }
button.link { color: var(--navy); }
button.link.danger { color: var(--danger); }
.topbar button.link { color: var(--sky); }
button.secondary, a.button.secondary, summary.button.secondary {
  background: #fff; color: #1d1d1d; box-shadow: inset 0 0 0 2px #1d1d1d;
}
button.secondary:hover, a.button.secondary:hover { background: #f4f4f4; }

.icon-folder { background: var(--tint); color: #8f7a4f; }
.item .name a:hover { color: #8f7a4f; }
.badge.public { color: #7a6641; }