:root{
  --color-bg:#fff;
  --color-text:#222;
  --color-muted:#666;
  --color-border:#e0e0e0;
  --color-link:#0057b7;
  --color-link-hover:#003d80;
  --max-width:960px;
  --spacing:1.5rem;
}

body{
  color:var(--blogi-text, var(--color-text));
  background:var(--blogi-bg, var(--color-bg)) no-repeat url("${PREFIX}/theme/public/background.webp");
  background-size:cover;
  font-size:1rem;
  margin:0;
  padding:0;
}

#header{
  border-bottom:1px solid var(--color-border);
  padding:var(--spacing);
  text-align:center;
}

#header img#banner{
  max-height:80px;
  margin:0 auto;
}

#headnav{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0.5rem var(--spacing);
}

#headnav ul{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

#headnav a{
  color:var(--color-link);
  padding:0.25rem 0;
}

#headnav a:hover{
  color:var(--color-link-hover);
  text-decoration:underline;
}

#main{
  max-width:var(--max-width);
  margin:0 auto;
  padding:var(--spacing);
}

/* Content index */
#contentidx .blog_entry{
  margin-bottom:2rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--color-border);
}

.blog_entry .title{
  display:block;
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:0.5rem;
}

.blog_entry .entry_text{
  margin-bottom:0.5rem;
}

.blog_entry .author{
  display:block;
  font-size:0.85rem;
  color:var(--color-muted);
}

.blog_entry .readmore a{
  color:var(--color-link);
}

.blog_entry .readmore a:hover{
  text-decoration:underline;
}

/* Single post */
#content .text{
  line-height:1.7;
  margin-bottom:1rem;
}

/* Tags */
#idxtags ul{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-top:1rem;
}

#idxtags a{
  color:var(--color-link);
  font-size:0.9rem;
}

/* Pager */
#pager{
  display:flex;
  gap:1rem;
  margin-top:1.5rem;
}

#pager a{
  color:var(--color-link);
}

/* Comments */
.blog_comments{
  margin-top:2rem;
  border-top:1px solid var(--color-border);
  padding-top:1rem;
}

.blog_comments h3{
  font-size:1.2rem;
  margin-bottom:1rem;
}

.blog_comment{
  margin-bottom:1rem;
  padding-bottom:0.75rem;
  border-bottom:1px solid var(--color-border);
}

.comment_author{
  font-weight:600;
}

.comment_date{
  font-size:0.8rem;
  color:var(--color-muted);
}

.comment_text{
  margin-top:0.25rem;
}

.comment_form_wrap{
  margin-top:1.5rem;
}

.comment_form_wrap h4{
  margin-bottom:0.5rem;
}

.comment_field{
  margin-bottom:0.75rem;
}

.comment_field label{
  display:block;
  margin-bottom:0.25rem;
  font-size:0.9rem;
}

.comment_field input,
.comment_field textarea{
  width:100%;
  padding:0.4rem;
  border:1px solid var(--color-border);
  border-radius:3px;
}

.comment_field textarea{
  min-height:100px;
  resize:vertical;
}

.comment_form_wrap button{
  padding:0.5rem 1.5rem;
  background:var(--color-link);
  color:#fff;
  border:none;
  border-radius:3px;
  cursor:pointer;
}

.comment_form_wrap button:hover{
  background:var(--color-link-hover);
}

/* Admin menu */
.blog_adminmenu ul{
  display:flex;
  gap:1rem;
  margin-bottom:1rem;
}

.blog_adminmenu a{
  color:var(--color-link);
}

/* Forms (addpost, editpost) */
#content form span{
  display:block;
  margin-top:0.75rem;
  font-size:0.9rem;
}

#content form input[type="text"],
#content form textarea{
  width:100%;
  padding:0.4rem;
  border:1px solid var(--color-border);
  border-radius:3px;
  margin-top:0.25rem;
}

#content form input[type="submit"]{
  margin-top:1rem;
  padding:0.5rem 1.5rem;
  background:var(--color-link);
  color:#fff;
  border:none;
  border-radius:3px;
  cursor:pointer;
}

/* Back link */
.back_content{
  display:inline-block;
  margin-top:1rem;
  color:var(--color-link);
}

/* Search */
#search form{
  display:flex;
  gap:0.5rem;
  max-width:400px;
  margin:0 auto 1rem;
}

#search input{
  flex:1;
  padding:0.4rem;
  border:1px solid var(--color-border);
  border-radius:3px;
}

/* Footer */
#footer{
  border-top:1px solid var(--color-border);
  padding:var(--spacing);
  text-align:center;
  font-size:0.85rem;
  color:var(--color-muted);
  margin-top:2rem;
}

#footernav ul{
  display:flex;
  gap:1rem;
  justify-content:center;
  margin-top:0.5rem;
}

#footernav a{
  color:var(--color-link);
}

/* Cookie banner */
#cookiebanner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.85);
  color:#fff;
  padding:1rem;
  text-align:center;
  z-index:1000;
}

/* Ghost (spacer) */
#ghost{
  flex:1;
}

/* Messages */
.comment_success,.comment_pending,.comment_error{
  padding:0.75rem;
  border-radius:3px;
  margin-bottom:1rem;
}
.comment_success{background:#d4edda;color:#155724}
.comment_pending{background:#fff3cd;color:#856404}
.comment_error{background:#f8d7da;color:#721c24}
