/* ========== SITK – Dark theme styles ========== */
:root {
  --bg: #0b0b0c;
  --fg: #f7f7f8;
  --muted: #b6b6bf;
  --brand: #4aa3ff;
  --accent: #3bd16f;
  --danger: #e25555;
  --focus: #ffd60a;
  --card: #141419;

  /* High-contrast link palette (on dark bg) */
  --link: #9ad0ff;        /* readable light blue */
  --link-hover: #ffffff;  /* pure white on hover/focus */
  --link-visited: #cbb8ff;/* readable light violet */
  --link-underline: 2px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', 'Noto Sans', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  color-scheme: dark; /* better native widgets in dark UI */
}
.btn-danger {
  background: #7a1f1f;
  border: 1px solid #a53232;
  color: #fff;
  padding: .35rem .6rem;
  border-radius: .35rem;
}
.btn-danger:hover,
.btn-danger:focus { background: #9c2a2a; outline: none; }

.landing {
  min-height: 100vh;
  background-image: url('/images/nihilism.png');
  background-size: cover;
  background-position: center;
}

.container { width: min(1100px, 92vw); margin: 0 auto; }
.flow > * + * { margin-top: 1rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(10,10,14,0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #22232b;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }
.brand { font-weight: 800; color: var(--fg); text-decoration: none; font-size: 1.25rem; }

.nav-toggle { display: none; background: transparent; border: 1px solid #2a2a32; color: var(--fg); padding: .4rem .6rem; border-radius: .4rem; }
.site-nav ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
.site-nav a { color: var(--fg); text-decoration: none; padding: .4rem .5rem; border-radius: .35rem; }
.site-nav a:focus, .site-nav a:hover { background: #1c1c24; outline: none; }

@media (max-width: 800px) {
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; padding: .5rem 0; }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 1rem; top: 1rem; width: auto; height: auto;
  background: var(--focus); color: #111;
  padding: .25rem .5rem; border-radius: .25rem;
}

/* ---------- Hero / Buttons ---------- */
.hero { padding: 15vh 0; text-align: center; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.5rem); }

.btn {
  display: inline-block; background: var(--brand); color: #111;
  padding: .6rem 1rem; border-radius: .5rem; text-decoration: none; font-weight: 700;
}
.btn:hover, .btn:focus { background: #79bbff; }
/* Semitransparent panel för heron på landningssidan */
:root{
  --hero-panel-bg: rgba(20, 20, 26, 0.45);   /* svagt grå, hög transparens */
  --hero-panel-border: rgba(255, 255, 255, 0.08);
}

.hero { padding: 15vh 0; text-align: center; } /* du har denna redan – OK */

.hero-panel{
  margin: 0 auto;
  width: min(900px, 92vw);
  padding: 1.25rem 1.5rem;
  background: var(--hero-panel-bg);
  border: 1px solid var(--hero-panel-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px); /* Safari */
}

.hero-panel h1{ margin: 0 0 .5rem; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.hero-panel p{ margin: .5rem 0; text-shadow: 0 1px 1px rgba(0,0,0,.35); }

/* Gör knappen lite mer framträdande mot panelen */
.hero .btn{
  display: inline-block;
  margin-top: .5rem;
  font-weight: 700;
}

/* ---------- Cards / Tables ---------- */
.image-card { background: var(--card); border: 1px solid #22232b; padding: .75rem; border-radius: .5rem; }
.image-card img { max-width: 100%; height: auto; display: block; border-radius: .25rem; }

.table-wrap { overflow-x: auto; }
table {
  border-collapse: collapse; width: 100%;
  background: var(--card);
  border: 1px solid #22232b;
}
th, td { padding: .6rem .75rem; border-bottom: 1px solid #22232b; text-align: left; }
thead th { position: sticky; top: 0; background: #17171d; }
tbody tr:nth-child(even) { background: #121218; }
tbody tr:hover { background: #1b1b24; }

/* Make links in data dense areas stand out */
table a { font-weight: 600; }

/* ---------- Forms ---------- */
form label { display: block; margin-top: .75rem; }
input, textarea, button {
  font: inherit; color: var(--fg);
  background: #121218; border: 1px solid #2b2b34; border-radius: .4rem; padding: .5rem .6rem;
}
input:focus, textarea:focus, button:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
button { cursor: pointer; }

/* ---------- Notices ---------- */
.notice { padding: .6rem .8rem; border-radius: .4rem; }
.notice.success { background: #133a22; border: 1px solid #1f7a45; }
.notice.error { background: #3a1313; border: 1px solid #7a1f1f; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid #22232b; margin-top: 3rem; padding: 1rem 0; color: var(--muted); }

/* ---------- Embeds ---------- */
.video-wrap {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border-radius: .5rem; border: 1px solid #22232b;
}
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.map-embed iframe { width: 100%; height: 50vh; }

/* ---------- Accessibility helpers ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- High-contrast, readable links in content ---------- */
/* Only affect content area; header nav keeps its own styling */
.container a {
  color: var(--link) !important;
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: 2px;
}
.container a:visited { color: var(--link-visited) !important; }
.container a:hover,
.container a:focus,
.container a:focus-visible {
  color: var(--link-hover) !important;
  text-decoration-thickness: calc(var(--link-underline) + 1px);
  outline: none;
}