:root{--green-700:#336633;--green-500:#669966;--fg:#111;--bg:#6a956a}

/* Bas */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",Arial}
a{color:inherit;text-decoration:none}
a:focus,button:focus{outline:2px solid #000;outline-offset:2px}
img{max-width:100%;height:auto;display:block}

/* Header */
header{position:sticky;top:0;z-index:50;background:#336633;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.bar{max-width:1100px;margin:auto;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:.6rem 1rem}
.logo{display:flex;align-items:center;gap:.75rem}
.logo img{height:40px;width:auto}
.logo strong{display:none}

/* Meny */
nav{width:100%;display:flex;flex-wrap:wrap;gap:.5rem}
nav a{padding:.45rem .8rem;border-radius:.6rem;background:rgba(0,0,0,.08);font-size:.95rem}
nav a:hover{background:rgba(0,0,0,.14)}

/* Layout */
main{max-width:1100px;margin:auto;padding:1rem;display:grid;grid-template-columns:1fr;gap:1rem}
/* Gör hero till ett "kort" */
.hero {
  background: var(--green-700);
  color: #fff;
  border-radius: .75rem;
  overflow: hidden;
}

.hero h1 {
  margin: 0;
  padding: .8rem 1rem;
  background: #00000020; /* samma toppfält som .card h2 */
}

.hero p {
  padding: 1rem;
  margin: 0;
}
.grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:900px){ .grid{grid-template-columns:2fr 1fr} }   /* standard 2/1-layout (t.ex. startsidan) */

/* 50/50-variant för valda gridar */
@media (min-width:900px){ .grid.equal{grid-template-columns:1fr 1fr} }

/* Alternativ klass om du vill använda .grid-2 direkt */
.grid-2{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:900px){ .grid-2{grid-template-columns:1fr 1fr} }

.card{background:var(--green-700);color:#fff;border-radius:.75rem;overflow:hidden}
.card h2{margin:0;padding:.8rem 1rem;background:#00000020}
.card .content{padding:1rem;background:transparent}
.card ul{margin:.3rem 0 0 1.1rem}

/* Media in kort */
.card figure{margin:0}
.card figure + p{margin-top:1rem}

/* Footer */
footer{max-width:1100px;margin:2rem auto 3rem;padding:0 1rem;color:#444;font-size:.9rem}

/* Resultattabell */
.table-results{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.table-results caption{
  caption-side:top;text-align:left;margin:0 0 .6rem;padding-left:.7rem;font-weight:600;opacity:.9;
}
.table-results th,.table-results td{
  padding:.55rem .7rem;border-bottom:1px solid rgba(255,255,255,.12);
}
.table-results thead th{ text-align:right;font-weight:600;opacity:.95 }
.table-results thead th:first-child{ text-align:left }
.table-results tbody td{ text-align:right;white-space:nowrap }
.table-results tbody td:first-child{ text-align:left;font-weight:600 }
.table-results tbody tr:hover{ background:rgba(0,0,0,.06) }

/* Notis under tabellen */
.muted{
  display:block;margin-top:.8rem;padding-left:.7rem;font-size:.9rem;opacity:.85;
}

/* Små “etiketter” för konfiguration */
.badge{
  display:inline-block;padding:.15rem .45rem;border-radius:.5rem;font-size:.82rem;background:rgba(0,0,0,.14);margin-left:.35rem
}
.badge.std{background:rgba(255,255,255,.18)}
.badge.mod{background:rgba(0,0,0,.22)}

/* Rullbar tabell på smala skärmar */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* kalkylator-layout */
.calcbox{background:#00000012;border-radius:.6rem;padding:1rem;margin:.5rem 0}
.calcbox h3{margin:.2rem 0 .6rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:680px){.row{grid-template-columns:1fr}}
.calcbox label{display:flex;flex-direction:column;gap:.25rem}
.calcbox input{padding:.5rem;border-radius:.5rem;border:1px solid rgba(0,0,0,.2)}
.out{margin-top:.6rem;background:#00000010;border-radius:.5rem;padding:.7rem}