:root{
  --bg:#faf7f2;
  --text:#1f2328;
  --muted:#5b6470;
  --card:#ffffff;
  --border:#e7e0d6;
  --link:#1b6fbf;
  --max: 820px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background-color:var(--bg);
  background-image:url('../img/bg.jpg');
  background-size:cover;
  background-attachment:fixed;
  background-position:center;
  background-repeat:no-repeat;

  color:var(--text);
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height:1.65;
}

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

/* ===== Header / nav (YKSINEN totuus) ===== */
header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.70);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: saturate(120%) blur(6px);
}

header .wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 12px;
  overflow-x: hidden;

  display: flex;
  flex-direction: column;   /* otsikko ylös, nav alle */
  align-items: flex-start;
}

header .brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

header h1{
  margin:0;
  font-size:18px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.2px;
}

header h1 a{
  color:#fff;
  text-decoration:none;
}

header nav{
  margin-top:6px;
  width:100%;

  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;

  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

header nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  padding:6px 10px;
  border-radius:10px;
  opacity:.92;
}

header nav a:hover{ color:#f0c040; }

header nav a.active{
  background: rgba(255,255,255,0.18);
  opacity: 1;
}

.wrap{max-width:var(--max); margin:0 auto; padding:14px 16px;}

main{padding:18px 0 34px}

.card{
  background: rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.04);
  margin:30px 0; /* tausta näkyy väleistä */
}

.meta{color:var(--muted); font-size:14px}
.title{margin:6px 0 10px; font-size:22px; line-height:1.25}
.excerpt{color:#2a2f36}

.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.btn{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color:#111;
  font-size:14px;
}
.btn.primary{background:#1b6fbf; color:#fff; border-color:#1b6fbf}
.btn.danger{background:#b42318; color:#fff; border-color:#b42318}
.btn.ghost{background:transparent}

img.post-image{
  width:100%;
  height:auto;
  border-radius:16px;
  border:1px solid var(--border);
  margin:12px 0;
  display:block;
}

footer{
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  padding:18px 0 3px;
}

/* === Footer matalammaksi (vain tämä sivu) === */
footer{
  padding: 6px 0;        /* tämä ratkaisee korkeuden */
  font-size: 13px;       /* hieman pienempi teksti */
}

footer .wrap{
  padding: 0 12px;       /* poistaa ylimääräisen sisätilan */
}

footer div{
  line-height: 1.2;      /* tiivistää riviväliä */
}

/* Admin */
.admin-grid{display:grid; gap:10px}
.field{display:grid; gap:6px; margin:10px 0}
label{font-size:14px; color:var(--muted)}

input[type="text"], input[type="password"], input[type="date"], textarea, select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  font-family:inherit;
  font-size:15px;
}

textarea{min-height:140px; resize:vertical}
.hint{
  font-size:13px;
  color:var(--muted);
  text-align: center;
}

.notice{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff8e6;
  margin:0 0 12px;
}

.error{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #f1b4ae;
  background:#fff1f0;
  margin:0 0 12px;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
}

th, td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; font-size:14px}
th{background:#f3ede4; font-weight:600}
tr:last-child td{border-bottom:none}

.tag{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  color:var(--muted);
}

.right{ text-align:right }

.admin-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
}
.admin-card .row{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;}
.admin-card .actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}

details.collapse{
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  padding:10px 12px;
}
details.collapse > summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
}
details.collapse > summary::-webkit-details-marker{display:none;}

.markerbar{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.markerbar .btn.small{padding:8px 10px; font-size:13px; border-radius:12px}
textarea.big{min-height:260px}

.img-slot.is-hidden{display:none;}

.post-actions{margin-top:10px;font-size:14px;opacity:.85;}
.post-actions .sep{margin:0 6px;}
.post-title{margin:0 0 6px;}
.post-title a{text-decoration:none;}
.post-title a:hover{text-decoration:underline;}
.post-body{margin-top:10px;}

/* Image grid thumbs */
.image-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 160px));
  justify-content:start;
  gap:10px;
  margin-top:12px;
}

.image-grid a{
  display:block;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--border);
  background:#eee;
}

.image-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Mobile admin improvements */
@media (max-width: 720px){
  table.admin-table{display:none;}
  .admin-cards{display:grid; gap:12px;}
}
@media (min-width: 721px){
  .admin-cards{display:none;}
}

/* Mobile header height tuning */
@media (max-width: 600px){
  header .wrap{ padding: 8px 10px; }
  header h1{ font-size: 16px; }
  header nav a{ font-size: 14px; padding: 6px 8px; }
}

@media (max-width: 600px){

  .subnav-inner{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .subnav-inner > .subnav-link{
    align-self: flex-start;
  }

  .subnav-links{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 auto;
  }
}

html, body{
  overflow-x: hidden;
}

/* nav saa liukua sisällään puhelimessa, mutta ei saa levittää sivua */
header nav{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Emo-sivun nav on jo tumma. Tämä tekee blogille pienen "alipalkin". */
.subnav{
  background: rgba(255,255,255,0.75);
  border-bottom: 1px solid var(--border);
}
.subnav-inner{
  display:flex;
  align-items:center;
  justify-content:center;   /* <-- keskelle */
  gap:12px;
  padding: 10px 12px;
}
}
.subnav-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.subnav-link{
  display:inline-block;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.7);
  color: var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}
.subnav-link.active{
  background: rgba(255,255,255,0.95);
}

/* Runko pitää footerin alhaalla */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Sisältö venyy */
main{ flex:1; }

/* Contact-sivu: keskitys */
.contact-card{
  text-align:center;
}
.contact-card p{
  text-align:center;
}

.post-image{
  width: 100%;
  max-width: 320px;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin: 10px 0;
}