/* ---- Globalt ---- */
* { box-sizing: border-box; }
body { margin: 0; }

.head_image {
  width: 100%;
  height: 500px;
  background: url("images/wow.PNG") no-repeat center/cover; /* semikolon fix + centrering */
}

/* ---- NAV Desktop ---- */
.nav {
  position: relative;
  width: 100%;
  background: #000;
  border: 2px inset #87aa93;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  min-height: 50px;
}

.nav-header { display: flex; align-items: center; }
.nav-title {
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  color: antiquewhite;
  font-weight: 550;
  padding: 7px 10px;
}

/* checkbox + hamburgare döljs på desktop */
#nav-check { display: none; }
.nav-btn { display: none; margin-left: auto; }
.nav-btn label { display: inline-block; padding: 10px; cursor: pointer; }
.nav-btn label span {
  display: block; width: 25px; height: 0; border-top: 2px solid #eee; margin: 6px 0;
}

/* desktoplänkar */
/* ---- Länkstil i dropdown (både desktop och mobil) ---- */
.dropdown-content a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: .6rem 1rem;
  white-space: nowrap;
  font-family: "Courier New", Courier, monospace;
}

.dropdown-content a:hover {
  background: #46b599;
  text-decoration: none;
  color: #fff;
}

.nav-links { margin-left: auto; }
.nav-links > ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0.25rem;
  font-family: "Courier New", Courier, monospace;
}
.nav-links > ul > li { position: relative; background: #000; border-radius: 5px; }
.nav-links > ul > li > a {
  color: #fff; text-decoration: none; display: block;
  padding: 0 10px; line-height: 40px; font-size: 18px;
}
.nav-links > ul > li:hover { background: #46b599; }

/* Dropdown (desktop) */
.dropdown { position: relative; }
.dropdown .dropdown-content {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: #111; list-style: none; margin: 0; padding: .25rem 0;
  min-width: 180px; border-radius: 6px; z-index: 1000;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content { display: block; }

/* Toggler-knappen bredvid "Posts" – döljs på desktop */
.sub-toggle { display: none; background: none; border: none; padding: .4rem .6rem; font: inherit; color: #fff; cursor: pointer; }

/* === Desktop-reset (säkerställ att inget mobil-stycke spiller över) === */
@media (min-width: 751px) {
  .nav-links { position: static; max-height: none; height: auto; overflow: visible; z-index: auto; }
  .sub-toggle { display: none !important; }
}

/* ---- Mobil ---- */
@media (max-width: 750px) {
  .nav { position: relative; align-items: stretch; padding: 0 .5rem; }

  /* visa hamburgaren, flytta titeln vänster */
  .nav-btn { display: inline-block; order: 2; position: relative; z-index: 1200; }
  .nav-header { order: 1; }
  .nav-title { padding-left: 0; }

  /* rullgardinen under navbaren, med smidig höjd-animation */
  .nav-links {
    position: absolute; top: 50px; left: 0; right: 0;
    background: #333;
    max-height: 0; overflow: hidden;
    z-index: 1100;
    transition: max-height .25s ease;
  }
  /* öppna/stäng via checkbox – ENDAST på mobil */
  #nav-check:not(:checked) ~ .nav-links { max-height: 0; overflow: hidden; }
  #nav-check:checked       ~ .nav-links { max-height: 70vh; overflow-y: auto; }

  .nav-links > ul { display: block; padding: .5rem 0; }
  .nav-links > ul > li { display: block; margin: 0; background: #333; border-radius: 0; }
  .nav-links > ul > li > a { padding: .9rem 1rem; line-height: 1.2; font-size: 18px; }

  /* undermeny på mobil styrs via .open (JS) */
  .dropdown .dropdown-content { position: static; display: none; background: #222; border-radius: 0; }
  .dropdown.open > .dropdown-content { display: block; }

  /* visa lilla togglerknappen (▾) på mobil */
  .sub-toggle { display: inline-block; margin-left: .25rem; }
}




/* ---- Övrigt du hade ---- */
#head-titel { color: antiquewhite; font-family: "Courier New", Courier, monospace; text-align: center;width: 100%;  }

.posts {
  margin: 0 auto; max-width: 70ch; padding: 0 1rem;  /* mer responsivt än fasta 200px marginaler */
  font-family: Arial, Helvetica, sans-serif; color: floralwhite;
}

.date-text {
  font-size: 0.9em;    /* 90% av normal text */
  opacity: 0.75;       /* lite ljusare ton om du vill */
}

main {
  padding-bottom: 4rem;  /* extra luft nederst */
}

.posts {
  margin: 0 auto;
  max-width: 70ch;
  padding: 0 1rem 4rem;  /* <— luft i botten också */
  font-family: Arial, Helvetica, sans-serif;
  color: floralwhite;
}



.image_post { display: block; max-width: 100%; height: auto; margin-bottom: 50px; }

.post-list { display: flex; flex-direction: column; }

.post-item {
  padding: 1rem 0;
  border-top: 2px solid #355e52;
  border-bottom: 2px solid #355e52;
  /* tillfällig test: */
  /* border-color: red !important; */
}

.post-title { margin: 0 0 .25rem; }
.post-title a { color: #46b599; text-decoration: none; }
.post-title a:hover { text-decoration: underline; }
.post-meta { margin: .25rem 0 .5rem; opacity: .85; }
.post-excerpt { margin: 0 0 .5rem; }






/* ---- Länkstil i dropdown (både desktop och mobil) ---- */
.dropdown-content a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: .6rem 1rem;
  white-space: nowrap;
  font-family: "Courier New", Courier, monospace;
}

.dropdown-content a:hover {
  background: #46b599;
  text-decoration: none;
  color: #fff;
}

/* === Backdrop bakom mobilmenyn === */
.nav-backdrop { display: none; }

@media (max-width: 750px) {
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 1000; /* under .nav-links (1100) */
  }
  #nav-check:checked ~ .nav-backdrop {
    display: block;
  }
}