/* Historisk Samfund for Roskilde Amt
   Ét stilark til hele sitet. Ingen eksterne skrifter, ingen CDN. */

:root{
  --brand:#385261;
  --brand-mork:#2a3d49;
  --brand-lys:#eef2f4;
  --terracotta:#a35d47;
  --terracotta-lys:#f4ece9;
  --salvie:#6b7a5a;
  --salvie-lys:#eef1e9;
  --okker:#967d44;
  --okker-lys:#f5f0e4;
  --base:#fcfcfc;
  --flade:#ffffff;
  --blaek:#1c2a31;
  --dis:#5f7079;
  --linje:#dde3e6;
  --linje-lys:#eceff1;
  --skrift:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bred:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--base); color:var(--blaek);
  font-family:var(--skrift); font-size:1.0625rem; line-height:1.6;
}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-0.015em; line-height:1.2}
p{margin:0 0 1em}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand)}
a:hover{color:var(--brand-mork)}
:focus-visible{outline:3px solid var(--terracotta); outline-offset:3px; border-radius:2px}

.indre{max-width:var(--bred); margin:0 auto; padding:0 24px}

.spring-over{
  position:absolute; left:-9999px; top:0; background:var(--brand); color:#fff;
  padding:12px 18px; z-index:99;
}
.spring-over:focus{left:0}

/* ---------- Tilgængelighedsbjælke ---------- */
.tilgang{background:var(--brand-lys); border-bottom:1px solid var(--linje); font-size:.9rem}
.tilgang .indre{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:7px}
.tilgang .gruppe{display:flex; align-items:center; gap:8px}
.tilgang .etiket{color:var(--dis)}
.tilgang button{
  font:inherit; background:var(--flade); border:1px solid #c3cfd5; color:var(--brand);
  border-radius:4px; padding:4px 12px; cursor:pointer; min-width:44px;
}
.tilgang button:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.tilgang button[aria-pressed="true"]{background:var(--brand); color:#fff}

/* ---------- Topbjælke ---------- */
.top{background:var(--flade); border-bottom:1px solid var(--linje)}
.top .indre{display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-block:16px}
.logo{display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit; margin-right:auto}
.logo .maerke{
  width:44px; height:44px; flex:0 0 44px; border-radius:50%;
  background:var(--brand); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:1.25rem;
}
.logo .navn{font-weight:650; line-height:1.25}
.logo .navn small{display:block; font-weight:400; font-size:.8rem; color:var(--dis)}
.top nav{display:flex; gap:4px; flex-wrap:wrap}
.top nav a{
  text-decoration:none; color:var(--blaek); padding:9px 13px; border-radius:4px;
  border-bottom:3px solid transparent;
}
.top nav a:hover{background:var(--brand-lys)}
.top nav a[aria-current="page"]{border-bottom-color:var(--terracotta); font-weight:650}
.menu-knap{display:none}

/* ---------- Forside: velkomst ---------- */
.hero{padding:64px 0 56px; border-bottom:1px solid var(--linje-lys)}
.hero .over{color:var(--terracotta); font-weight:650; margin:0 0 10px}
.hero h1{font-size:clamp(2.1rem, 5.2vw, 3.4rem); max-width:16ch}
.hero .manchet{font-size:1.2rem; color:var(--dis); max-width:56ch; margin:18px 0 30px}
.knapper{display:flex; gap:14px; flex-wrap:wrap}
.knap{
  display:inline-block; text-decoration:none; font-weight:650;
  padding:13px 26px; border-radius:5px; background:var(--brand); color:#fff;
  border:1px solid var(--brand);
}
.knap:hover{background:var(--brand-mork); border-color:var(--brand-mork); color:#fff}
.knap.stille{background:transparent; color:var(--brand); border-color:#c3cfd5}
.knap.stille:hover{background:var(--brand-lys); color:var(--brand)}

/* ---------- Sektioner ---------- */
.sektion{padding:52px 0; border-bottom:1px solid var(--linje-lys)}
.sektion-hoved{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:26px;
}
.sektion-hoved h2{font-size:1.6rem}
.sektion-hoved a{font-weight:650; text-decoration:none}
.sektion-hoved a:hover{text-decoration:underline}

/* ---------- Arrangementer ---------- */
.arr-raekke{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.arr-kort{
  background:var(--flade); border:1px solid var(--linje); border-top:4px solid var(--terracotta);
  border-radius:6px; padding:20px 22px 22px; display:flex; flex-direction:column;
}
.arr-kort .dato{color:var(--terracotta); font-weight:700; font-size:.85rem; letter-spacing:.04em}
.arr-kort h3{font-size:1.2rem; margin:8px 0 8px}
.arr-kort p{color:var(--dis); margin-bottom:14px}
.arr-kort .praktisk{font-size:.9rem; color:var(--dis); margin-top:auto; padding-top:12px; border-top:1px solid var(--linje-lys)}

.arr-post{display:flex; gap:22px; padding:22px 0; border-bottom:1px solid var(--linje-lys); align-items:flex-start}
.dato-flise{
  flex:0 0 74px; text-align:center; border-radius:5px; padding:11px 0;
  background:var(--terracotta-lys); color:var(--terracotta); line-height:1.15;
}
.dato-flise .dag{display:block; font-size:1.7rem; font-weight:700}
.dato-flise .maaned{display:block; font-size:.72rem; letter-spacing:.08em}
.arr-post .krop{flex:1; min-width:0}
.arr-post h3{font-size:1.2rem; margin-bottom:6px}
.arr-post .praktisk{color:var(--dis); font-size:.93rem; margin:8px 0 0}
.arr-post .tilmeld{flex:0 0 auto; padding-top:4px}
.maerke-aflyst{
  display:inline-block; background:#f7e9e6; color:#8c3a2e; font-size:.78rem;
  font-weight:700; padding:2px 9px; border-radius:3px; margin-left:9px; vertical-align:3px;
}

/* ---------- Fremhævet side ---------- */
.fremhaevet{
  display:grid; grid-template-columns:1.1fr .9fr; gap:0;
  background:var(--brand); color:#fff; border-radius:8px; overflow:hidden;
}
.fremhaevet .tekst{padding:40px}
.fremhaevet .over{color:#d3b98d; font-weight:650; margin-bottom:10px}
.fremhaevet h2{font-size:1.9rem; margin-bottom:14px}
.fremhaevet p{color:#cfdde3; max-width:46ch}
.fremhaevet .knap{background:#fff; color:var(--brand); border-color:#fff}
.fremhaevet .knap:hover{background:var(--brand-lys); color:var(--brand-mork)}
.fremhaevet.uden-billede{grid-template-columns:1fr}
.fremhaevet figure{margin:0; height:100%; min-height:260px; background:var(--brand-mork)}
.fremhaevet figure img{width:100%; height:100%; object-fit:cover}

/* ---------- Nyheder ---------- */
.nyheds-raekke{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.nyhed-kort{
  background:var(--flade); border:1px solid var(--linje); border-left:4px solid var(--salvie);
  border-radius:6px; padding:20px 22px;
}
.nyhed-kort .dato{color:var(--salvie); font-weight:650; font-size:.85rem}
.nyhed-kort h3{font-size:1.15rem; margin:7px 0 8px}
.nyhed-kort h3 a{text-decoration:none; color:inherit}
.nyhed-kort h3 a:hover{color:var(--brand)}
.nyhed-kort p{color:var(--dis); margin:0}

/* ---------- Arkivtal ---------- */
.arkivtal{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr))}
.arkivtal a{
  display:block; text-decoration:none; color:inherit; background:var(--okker-lys);
  border:1px solid #e6dcc6; border-radius:6px; padding:22px;
}
.arkivtal a:hover{border-color:var(--okker)}
.arkivtal .tal{display:block; font-size:1.5rem; font-weight:700; color:var(--okker)}
.arkivtal .titel{display:block; margin-top:4px; font-weight:600}

/* ---------- Sider under et menupunkt ---------- */
.side-liste{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
.side-kort{
  background:var(--flade); border:1px solid var(--linje); border-radius:6px;
  overflow:hidden; display:flex; flex-direction:column;
}
.side-kort img{width:100%; aspect-ratio:16/9; object-fit:cover}
.side-kort .krop{padding:20px 22px}
.side-kort h3{font-size:1.15rem; margin-bottom:8px}
.side-kort h3 a{text-decoration:none; color:inherit}
.side-kort h3 a:hover{color:var(--brand)}
.side-kort p{color:var(--dis); margin:0}

/* ---------- Artikelvisning (enkelt nyhed) ---------- */
.artikel{max-width:68ch; padding:52px 0}
.artikel .dato{color:var(--salvie); font-weight:650}
.artikel h1{font-size:clamp(1.9rem, 4.4vw, 2.6rem); margin:10px 0 16px}
.artikel .manchet{font-size:1.15rem; color:var(--dis); margin-bottom:26px}
.artikel figure{margin:0 0 26px}
.artikel figure figcaption{font-size:.88rem; color:var(--dis); margin-top:8px}
.artikel blockquote{
  margin:0 0 1em; padding:4px 0 4px 20px; border-left:3px solid var(--salvie); color:var(--dis);
}
.artikel h2{font-size:1.35rem; margin:1.6em 0 .5em}
.tilbage-link{display:inline-block; margin-top:26px; font-weight:650}

.tom{
  border:2px dashed var(--linje); border-radius:8px; padding:40px;
  text-align:center; color:var(--dis);
}

/* ---------- Sidefod ---------- */
.fod{background:var(--brand); color:#cfdde3; margin-top:0; padding:48px 0 22px}
.fod .indre{display:grid; gap:32px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.fod h2{color:#fff; font-size:1.05rem; margin-bottom:12px}
.fod a{color:#fff; overflow-wrap:anywhere}  /* lange e-mailadresser må brydes på telefonen */
.fod ul{list-style:none; margin:0; padding:0}
.fod li{margin-bottom:8px}
.fod .bund{
  max-width:var(--bred); margin:36px auto 0; padding:18px 24px 0;
  border-top:1px solid #4a6674; font-size:.85rem; color:#a9c0ca;
}

/* ---------- Mørk visning ----------
   Samme farveverden som resten af sitet, bare vendt om. Farverne sættes
   som variabler, så alt der bruger dem følger med af sig selv. */
html.moerk{
  --brand:#8bb2c6;
  --brand-mork:#a6c6d6;
  --brand-lys:#22303a;
  --terracotta:#dc9f85;
  --terracotta-lys:#3a2a25;
  --salvie:#a8b992;
  --salvie-lys:#2a3325;
  --okker:#d9bb7c;
  --okker-lys:#2f2a1c;
  --base:#151d22;
  --flade:#1d272d;
  --blaek:#e9eef1;
  --dis:#a5b5be;
  --linje:#32414b;
  --linje-lys:#26323a;
}
/* Steder hvor en farve ikke kan vendes om automatisk. */
html.moerk .knap{background:var(--brand); color:#121a1f; border-color:var(--brand)}
html.moerk .knap:hover{background:var(--brand-mork); border-color:var(--brand-mork); color:#121a1f}
html.moerk .knap.stille{background:transparent; color:var(--brand); border-color:var(--linje)}
html.moerk .knap.stille:hover{background:var(--brand-lys); color:var(--brand)}
html.moerk .tilgang button{background:var(--flade); color:var(--brand); border-color:var(--linje)}
html.moerk .tilgang button:hover,
html.moerk .tilgang button[aria-pressed="true"]{background:var(--brand); color:#121a1f}
html.moerk .logo .maerke{background:var(--brand); color:#121a1f}
html.moerk .fremhaevet{background:#22313b; border:1px solid var(--linje)}
html.moerk .fremhaevet p{color:var(--dis)}
html.moerk .fremhaevet figure{background:#1a242b}
html.moerk .fremhaevet .over{color:var(--okker)}
html.moerk .arkivtal a{background:var(--okker-lys); border-color:#4a4330}
html.moerk .arkivtal a:hover{border-color:var(--okker)}
html.moerk .fod{background:#111a1f; color:var(--dis); border-top:1px solid var(--linje)}
html.moerk .fod .bund{border-top-color:var(--linje); color:var(--dis)}
html.moerk .maerke-aflyst{background:#3a221d; color:#e9a291}
html.moerk .forhaandsvisning{background:var(--okker-lys); color:var(--okker); border-left-color:var(--okker)}
html.moerk .post:hover{background:#202b32}
/* Fotos virker ofte for skarpe på mørk bund. */
html.moerk .hero-foto, html.moerk .side-kort img, html.moerk .artikel figure img{filter:brightness(.92)}

/* ---------- Mindre skærme ---------- */
@media (max-width:820px){
  .fremhaevet{grid-template-columns:1fr}
  .fremhaevet .tekst{padding:30px}
  .fremhaevet figure{min-height:200px; order:-1}
}
@media (max-width:680px){
  .menu-knap{
    display:block; font:inherit; font-weight:650; background:var(--brand-lys);
    color:var(--brand); border:1px solid #c3cfd5; border-radius:4px; padding:9px 16px; cursor:pointer;
  }
  .top nav{display:none; width:100%; flex-direction:column; gap:0; padding-top:8px}
  .top nav.aaben{display:flex}
  .top nav a{padding:13px 8px; border-bottom:1px solid var(--linje-lys); border-radius:0}
  .top nav a[aria-current="page"]{border-bottom-color:var(--terracotta)}
  .hero{padding:44px 0 38px}
  .sektion{padding:38px 0}
  .arr-post{flex-wrap:wrap; gap:16px}
  .tilgang .etiket{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* Vises kun når en redaktør ser en skjult nyhed igennem. */
.forhaandsvisning{
  background:#f5f0e4; border-left:4px solid var(--okker); color:#6b5a2f;
  padding:13px 18px; border-radius:4px; margin:26px 0 0; font-weight:600;
}

/* Kort og lister: titlen fører ind til den enkelte side. */
.arr-kort h3 a, .arr-post h3 a{text-decoration:none; color:inherit}
.arr-kort h3 a:hover, .arr-post h3 a:hover{color:var(--terracotta); text-decoration:underline}

/* Praktiske oplysninger på et arrangements egen side. */
.artikel .dato-arr{color:var(--terracotta)}
.praktisk-liste{
  display:grid; grid-template-columns:auto 1fr; gap:8px 22px;
  margin:30px 0; padding:22px 24px; background:var(--flade);
  border:1px solid var(--linje); border-radius:8px;
}
.praktisk-liste dt{font-weight:650; color:var(--dis)}
.praktisk-liste dd{margin:0}
@media (max-width:520px){
  .praktisk-liste{grid-template-columns:1fr; gap:2px 0; padding:18px}
  .praktisk-liste dd{margin-bottom:12px}
}

/* ---------- Forsidebillede ---------- */
.hero.med-billede .indre{
  display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
}
.hero-figur{margin:0}
.hero-figur .hero-foto{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:10px; border:1px solid var(--linje);
}
.hero-figur figcaption{font-size:.85rem; color:var(--dis); margin-top:10px}
@media (max-width:820px){
  .hero.med-billede .indre{grid-template-columns:1fr; gap:28px}
  .hero-figur{order:-1}
  .hero-figur .hero-foto{aspect-ratio:16/9}
}

/* ---------- Hele flisen er klikbar ----------
   Titlens link strækkes ud over hele kortet med et usynligt lag,
   så man kan ramme det overalt på en telefon. Der er stadig kun
   ét link pr. kort, så skærmlæsere og tastatur får det samme som før. */
.arr-kort, .nyhed-kort, .side-kort, .arr-post{position:relative}
.arr-kort h3 a::after,
.nyhed-kort h3 a::after,
.side-kort h3 a::after,
.arr-post h3 a::after{content:""; position:absolute; inset:0; z-index:1}
.arr-kort, .nyhed-kort, .side-kort{transition:border-color .15s, box-shadow .15s}
.arr-kort:hover, .nyhed-kort:hover, .side-kort:hover{box-shadow:0 3px 12px rgba(0,0,0,.08); cursor:pointer}
.arr-post:hover{cursor:pointer}
/* Tastaturfokus vises om hele kortet i stedet for kun om titlen */
.arr-kort:has(h3 a:focus-visible),
.nyhed-kort:has(h3 a:focus-visible),
.side-kort:has(h3 a:focus-visible),
.arr-post:has(h3 a:focus-visible){outline:3px solid var(--terracotta); outline-offset:3px}
/* Tilmeld-knappen på programsiden skal stadig kunne trykkes for sig selv */
.arr-post .tilmeld{position:relative; z-index:2}

/* ---------- Tilmeldingsformular (tilmeld.php) ----------
   Store felter og trykflader, så formularen er let at udfylde på en telefon.
   Farverne kommer fra variablerne, så mørk visning følger med af sig selv. */
.tilmeld-formular{margin-top:8px}
.tilmeld-formular label,
.tilmeld-formular legend{display:block; font-weight:650; margin:22px 0 6px}
.tilmeld-formular .hjaelp{display:block; font-weight:400; color:var(--dis); font-size:.92rem}
.tilmeld-formular input[type=text],
.tilmeld-formular input[type=email],
.tilmeld-formular input[type=tel],
.tilmeld-formular select,
.tilmeld-formular textarea{
  display:block; width:100%; font:inherit; color:var(--blaek); background:var(--flade);
  border:2px solid var(--dis); border-radius:5px; padding:11px 13px; min-height:50px;
}
.tilmeld-formular textarea{min-height:120px; resize:vertical}
.tilmeld-formular [aria-invalid="true"]{border-color:var(--terracotta)}
.tilmeld-formular .antal-felt{border:0; margin:22px 0 0; padding:0; min-width:0}
.tilmeld-formular .antal-felt legend{margin-top:0; padding:0}
.tilmeld-formular .antal-par{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px}
.tilmeld-formular .antal-par label{font-weight:400; margin-top:0}
.tilmeld-formular .afkryds{display:flex; gap:12px; align-items:flex-start; margin-top:26px}
.tilmeld-formular .afkryds input{width:1.5em; height:1.5em; flex:0 0 1.5em; margin:2px 0 0; accent-color:var(--brand)}
.tilmeld-formular .afkryds label{font-weight:400; margin:0}
.tilmeld-formular button.knap{font:inherit; font-weight:650; cursor:pointer; margin-top:26px; min-height:50px}
.felt-fejl{color:var(--terracotta); font-weight:650; margin:6px 0 0}
.robotfaelde{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.tilmeld-fejl, .tilmeld-ok, .tilmeld-lukket{
  background:var(--flade); border:1px solid var(--linje); border-left:5px solid var(--terracotta);
  border-radius:6px; padding:16px 20px; margin:0 0 22px;
}
.tilmeld-fejl ul{margin:0; padding-left:20px}
.tilmeld-fejl a{color:var(--blaek)}
.tilmeld-ok{border-left-color:var(--salvie); margin-top:26px}
.tilmeld-ok h1{margin-top:0}
.tilmeld-ok a{overflow-wrap:anywhere}  /* lange e-mailadresser må brydes på telefonen */
.tilmeld-lukket{font-weight:650}