/* artikler2001.css
   Add-on til historie2001.css – sticky header + artikel-layout i Flash-2001 vibe
*/
.articleHeader{
  position:relative;
  max-height:200px;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(120,200,255,.25);
}


.articleHeader__overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px 12px;
  background:linear-gradient(rgba(12,10,10,0.58));
}
.articleHeader__overlay h1{ margin:0 0 6px 0; }
.articleHeader__overlay p{ margin:0; opacity:.95; }

.ext-header-wrap{
  max-height:200px;
  overflow:hidden;
  position:relative;
}
.ext-header-wrap:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:44px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35));
  pointer-events:none;
}
body.theme-day .ext-header-wrap:after{
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(10,30,60,.10));
}

.sticky-shell{
  position: sticky;
  top: 0;
  z-index: 9999;
}

.site-menu{
  margin: 10px 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(0,180,255,.26), rgba(0,0,0,.28));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 42px rgba(0,0,0,.42);
}

body.theme-day .site-menu{
  background: linear-gradient(180deg, rgba(110,220,255,.20), rgba(255,255,255,.60));
  border-color: rgba(10,20,40,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 18px 42px rgba(0,0,0,.18);
}

.site-menu .logo-mini{
  width:22px; height:22px;
  border-radius:6px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(0,170,255,.10) 45%, rgba(0,0,0,.25));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 16px rgba(60,210,255,.35);
}

.site-menu a{
  color: var(--text);
  text-decoration:none;
  font-size:13px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.16));
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.site-menu a:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(80,215,255,.25);
  background: linear-gradient(180deg, rgba(120,230,255,.18), rgba(0,0,0,.18));
}
body.theme-day .site-menu a{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55));
  border-color: rgba(10,20,40,.14);
}
body.theme-day .site-menu a:hover{
  box-shadow: 0 0 0 2px rgba(30,120,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
}

.site-menu .spacer{flex:1}

.site-menu a.active{
  box-shadow: 0 0 0 2px rgba(255,160,0,.22);
  border-color: rgba(255,160,0,.25);
}

.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  opacity:.92;
}

.article-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}

.a-card{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px rgba(0,0,0,.42);
}
body.theme-day .a-card{
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  border-color: rgba(10,20,40,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 40px rgba(0,0,0,.18);
}


.a-card .badge{
  position:absolute;
  left:10px;
  bottom:10px;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
body.theme-day .a-card .badge{
  background: rgba(255,255,255,.72);
  border-color: rgba(10,20,40,.12);
}
.day{
	color: red;
	 background: rgba(255,255,255,.72);
}
.a-card .body{
  padding:12px 12px 10px;
}
.a-card h3{
  margin:0 0 6px;
  font-size:15px;
  letter-spacing:.15px;
}
.a-card p{
  margin:0 0 10px;
  color: var(--muted);
  font-size:13px;
  line-height:1.55;
}
.a-card .meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color: var(--muted);
  font-size:12px;
}
.pilltag{
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
}
body.theme-day .pilltag{
  background: rgba(255,255,255,.68);
  border-color: rgba(10,20,40,.12);
}

.toc{
  padding:12px;
}
.toc ol{
  margin:8px 0 0;
  padding-left:18px;
}
.toc a{color: var(--accent); text-decoration:none}
.toc a:hover{text-decoration:underline}

.aside{
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.22);
  padding:10px 12px;
  background: rgba(0,0,0,.16);
}
body.theme-day .aside{
  background: rgba(255,255,255,.62);
  border-color: rgba(10,20,40,.18);
}

.article-hero{
  padding:14px 14px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 20% 20%, rgba(80,215,255,.18), rgba(0,0,0,.28)), linear-gradient(135deg, rgba(0,180,255,.18), rgba(255,120,0,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 44px rgba(0,0,0,.42);
}
body.theme-day .article-hero{
  background: radial-gradient(circle at 20% 20%, rgba(30,120,255,.12), rgba(255,255,255,.80)), linear-gradient(135deg, rgba(0,180,255,.12), rgba(255,120,0,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 44px rgba(0,0,0,.18);
}
.article-hero h2{margin:0 0 8px; font-size:18px;}
.article-hero .lede{color:var(--muted); font-size:13px; line-height:1.55; margin:0}
.article-hero .meta{margin-top:10px; color:var(--muted); font-size:12px; display:flex; gap:10px; flex-wrap:wrap}

/* Search bar */
.searchbar{
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px rgba(0,0,0,.40);
}
body.theme-day .searchbar{
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  border-color: rgba(10,20,40,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 40px rgba(0,0,0,.18);
}
.searchbar input{
  flex:1;
  height:36px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline:none;
}
body.theme-day .searchbar input{
  background: rgba(255,255,255,.74);
  border-color: rgba(10,20,40,.14);
  color: #081018;
}
.searchbar button, .searchbar a.clear{
  height:36px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(120,230,255,.16), rgba(0,0,0,.18));
  color: var(--text);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
body.theme-day .searchbar button, body.theme-day .searchbar a.clear{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  border-color: rgba(10,20,40,.14);
  color: #081018;
}

/* Article cards without images */
.a-card .thumb.noimg{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:10px;
}

/* Vote widget */
.vote-shell{ margin: 0 0 14px; }
.vote-box{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px rgba(0,0,0,.40);
}
body.theme-day .vote-box{
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  border-color: rgba(10,20,40,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 40px rgba(0,0,0,.18);
}
.vbtn{
  width:144px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.16));
  color: var(--text);
  cursor:pointer;
  font-weight:700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.vbtn:hover{ box-shadow: 0 0 0 2px rgba(80,215,255,.22); }
.vbtn.on{
  box-shadow: 0 0 0 2px rgba(255,160,0,.24);
  border-color: rgba(255,160,0,.28);
}
.vmeta{ flex:1; }
.vscore{ font-size:13px; }
.vcounts{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; color: var(--muted); font-size:12px; margin-top:4px; }
.vote-hint{ margin-top:6px; color: var(--muted); font-size:12px; }


/* Inserted media meta */
.caption{margin:6px 0 4px;font-size:12px;opacity:.92}
.credit{margin:0 0 10px;font-size:11px;opacity:.78}
.credit a{color:inherit;text-decoration:underline}


/* --- Flash 2001 theme tweaks for article pages --- */
body.theme-flash .ext-header-wrap:after{
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(10,30,60,.10));
}
body.theme-flash .articleHeader{
  border-color: rgba(255,0,170,.22);
  box-shadow: 0 0 22px rgba(0,220,255,.10), 0 0 18px rgba(255,0,170,.08);
}
body.theme-flash .articleHeader__overlay{
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
}
body.theme-flash .btn, body.theme-flash .btns{
  border-color: rgba(0,220,255,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.22));
  box-shadow: 0 0 18px rgba(0,220,255,.10);
}
body.theme-flash .btn:hover, body.theme-flash .btns:hover{
  background: linear-gradient(180deg, rgba(255,0,170,.18), rgba(0,220,255,.08));
}