/* Möt Hemsögrisarna — varm, lantlig, mobilförst */
:root {
  --gron: #5a9e46;     /* gräsgrön */
  --morkgron: #356b2c;
  --ljus: #fffdf5;     /* solbelyst vit */
  --sol: #ffc83d;      /* sommarsol */
  --rost: #ef6f4c;     /* varm korall */
  --himmel: #6cc6e8;   /* himmelsblå */
  --text: #34352e;
  --mjuk: #ffffff;
  --skugga: 0 8px 24px rgba(53,107,44,.12);
  --rund: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--ljus);
  line-height: 1.65;
}
h1, h2, h3 { line-height: 1.2; }
a { color: var(--gron); }
img { max-width: 100%; }

/* Toppmeny */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 1rem;
  background: rgba(247,244,236,.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e6e0d2;
}
.topbar .logo { font-weight: 800; text-decoration: none; color: var(--morkgron); }
.topbar nav a { margin-left: 1rem; text-decoration: none; color: var(--text); font-weight: 600; }

/* Knappar */
.btn {
  display: inline-block;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  text-align: center;
}
.btn-primar { background: var(--gron); color: #fff; }
.btn-primar:hover { background: var(--morkgron); }
.btn-sekundar { background: var(--rost); color: #fff; }
.btn-sekundar:hover { filter: brightness(.92); }
.btn-ljus { background: #fff; color: var(--morkgron); border-color: var(--morkgron); }
.btn-mini { background: var(--gron); color: #fff; padding: .4rem 1rem; }
.btn.stor { font-size: 1.1rem; padding: 1rem 1.8rem; }
.btn.inaktiv { opacity: .6; }

/* Hero */
.hero {
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: #fff;
  padding: 3rem 1.2rem;
  /* Lägg static/hero.jpg så syns ditt foto bakom; annars varm gradient */
  background:
    linear-gradient(rgba(53,107,44,.45), rgba(239,111,76,.35)),
    url("/static/hero.jpg"),
    linear-gradient(135deg, var(--himmel) 0%, var(--gron) 55%, var(--sol) 100%);
  background-size: cover;
  background-position: center;
}
.hero-inner { max-width: 720px; }
.hero h1 { font-size: clamp(2.4rem, 8vw, 4rem); margin: 0 0 1rem; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.hero .lead { font-size: 1.2rem; }
.hero .slogan { font-style: italic; font-size: 1.3rem; margin: 1.2rem 0 1.8rem; }
.cta-rad { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.cta-rad.mitten { margin-top: 1.5rem; }

/* Innehåll */
main { max-width: 980px; margin: 0 auto; padding: 0 1.2rem; }
.block { padding: 3rem 0; border-bottom: 1px solid #eae4d6; }
.block h2 { font-size: 1.8rem; color: var(--morkgron); margin-top: 0; }
.intro { font-size: 1.2rem; }
.notis { background: #fff7e2; border-left: 4px solid var(--sol); padding: .8rem 1rem; border-radius: 8px; }
.tom { color: #777; }

/* Listor med bock */
.check { list-style: none; padding: 0; }
.check li { padding: .4rem 0 .4rem 2rem; position: relative; }
.check li::before { content: "🐾"; position: absolute; left: 0; }
.check.regler li::before { content: "✓"; color: var(--gron); font-weight: 800; }

/* Kort (tider & priser) */
.kort-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.kort { background: var(--mjuk); border-radius: var(--rund); padding: 1.2rem; box-shadow: var(--skugga); }
.kort h3 { margin: 0 0 .4rem; color: var(--gron); }
.kort.pris { text-align: center; }
.kort .belopp { font-size: 1.5rem; font-weight: 800; color: var(--morkgron); margin: .3rem 0; }
.kort small { color: #777; }

/* Bokning */
.boka-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.boka-kol { background: var(--mjuk); border-radius: var(--rund); padding: 1.5rem; box-shadow: var(--skugga); }
.boka-kol h3 { margin-top: 0; color: var(--morkgron); }
.boka-form { display: flex; flex-direction: column; gap: .7rem; margin: 1rem 0; }
.boka-form input, .boka-form select, .boka-form textarea {
  padding: .7rem; border: 1px solid #ccc; border-radius: 10px; font: inherit;
}
.boka-form .tva { display: flex; gap: .7rem; }
.boka-form .tva > * { flex: 1; }
.rad-val { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 600; }
.swish-box { background: #eef3e8; border-radius: 12px; padding: 1rem; margin-top: 1rem; }
.swish-box p { margin: .3rem 0; }
.qr-platshallare {
  margin-top: .8rem; border: 2px dashed #9bb98e; border-radius: 12px;
  padding: 2rem 1rem; text-align: center; color: #6a8060; background: #fff;
}

/* Karta */
.karta iframe { width: 100%; height: 320px; border: 0; border-radius: var(--rund); }
.karta-platshallare { height: 260px; display: flex; flex-direction: column; justify-content: center; }

/* Höst */
.block.host { background: #eef3e8; border-radius: var(--rund); padding: 2rem 1.5rem; margin: 2rem 0; border-bottom: 0; }

/* FAQ */
details { background: var(--mjuk); border-radius: 12px; margin: .6rem 0; padding: .9rem 1.1rem; box-shadow: var(--skugga); }
summary { font-weight: 700; cursor: pointer; color: var(--morkgron); }
details p { margin: .6rem 0 0; }

/* Instagram */
.insta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.insta-grid.auto { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.insta-card { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; background: #fff; text-decoration: none; }
.insta-card img { width: 100%; height: 100%; object-fit: cover; }
.insta-card .bildtext { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem; font-size: .8rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); opacity: 0; transition: .2s; }
.insta-card:hover .bildtext { opacity: 1; }

/* Footer */
footer { background: var(--morkgron); color: #fff; text-align: center; padding: 2.5rem 1rem; }
footer .logo { font-size: 1.3rem; font-weight: 800; margin: 0 0 .5rem; }
footer p { margin: .25rem; }
footer a { color: var(--sol); }

/* Flash */
.flash { max-width: 980px; margin: 1rem auto; padding: .8rem 1rem; background: #fff7d6; border: 1px solid #e0c75a; border-radius: 8px; }

/* Sticky mobil-CTA */
.sticky-cta {
  display: none;
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60;
  background: var(--rost); color: #fff; text-align: center;
  padding: 1rem; border-radius: 999px; font-weight: 800; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Tacksida */
.tack { display: flex; min-height: 90vh; align-items: center; justify-content: center; padding: 2rem 1rem; }
.tack-box { background: #fff; border-radius: var(--rund); padding: 2.5rem; max-width: 520px; text-align: center; box-shadow: var(--skugga); }

/* ---- Admin & login (enkel stil) ---- */
.admin { max-width: 760px; margin: 0 auto; padding: 2rem 1.2rem; }
.admin form { display: flex; flex-direction: column; gap: .8rem; }
.admin h3 { margin: 1rem 0 0; color: var(--rost); }
.admin label { display: flex; flex-direction: column; font-weight: 600; gap: .3rem; }
.admin input, .admin textarea { padding: .6rem; border: 1px solid #bbb; border-radius: 8px; font: inherit; font-weight: 400; }
.admin button { background: var(--gron); color: #fff; border: 0; padding: .8rem 1.5rem; border-radius: 10px; font-size: 1rem; cursor: pointer; align-self: start; }
table.bokningar { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.bokningar th, table.bokningar td { border: 1px solid #ddd; padding: .4rem .5rem; text-align: left; }
table.bokningar th { background: #eef3e8; }
.login-box { max-width: 360px; margin: 4rem auto; background: #fff; padding: 2rem; border-radius: var(--rund); text-align: center; box-shadow: var(--skugga); }
.login-box form { display: flex; flex-direction: column; gap: 1rem; }
.login-box input { padding: .6rem; border: 1px solid #bbb; border-radius: 8px; font: inherit; }
.login-box button { background: var(--gron); color: #fff; border: 0; padding: .7rem; border-radius: 8px; font-size: 1rem; cursor: pointer; }

/* Bokningskalender */
.kalender { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin: .5rem 0 1rem; }
.dag-kort { background: #f3f8ee; border-radius: 14px; padding: .6rem; }
.dag-topp { font-weight: 800; color: var(--morkgron); text-transform: capitalize; margin-bottom: .4rem; text-align: center; }
.chips { display: flex; flex-direction: column; gap: .4rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: flex; flex-direction: column; align-items: center;
  border: 2px solid var(--gron); border-radius: 10px; padding: .35rem;
  font-weight: 700; color: var(--morkgron); cursor: pointer; line-height: 1.1;
}
.chip span small { font-weight: 400; font-size: .7rem; color: #6a8060; }
.chip input:checked + span { background: var(--gron); color: #fff; }
.chip input:checked + span small { color: #eaf5e2; }
.chip input:focus-visible + span { outline: 2px solid var(--rost); }
.total-rad { font-size: 1.15rem; }
.total-rad strong { color: var(--rost); }
.stor-pris .belopp { font-size: 2rem; }

/* QR på tacksidan */
.qr-bild { width: 220px; height: 220px; image-rendering: pixelated; border-radius: 12px; margin: .5rem auto; display: block; background: #fff; }

/* Språkväljare */
.sprak { margin-left: .6rem; white-space: nowrap; }
.flagga { text-decoration: none; font-size: 1.2rem; margin-left: .15rem; opacity: .55; filter: grayscale(.4); }
.flagga.aktiv, .flagga:hover { opacity: 1; filter: none; }

/* Köp gris-sektion */
.block.gris { background: linear-gradient(135deg, #fff7e6, #ffe9df); border-radius: var(--rund); padding: 2rem 1.5rem; border-bottom: 0; }
.block.gris .boka-kol { max-width: 560px; margin: 1.2rem auto 0; }

/* Upptäck: länkkort */
.kat { color: var(--rost); margin: 1.4rem 0 .5rem; }
.lank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.lank-kort {
  display: block; background: var(--mjuk); border-radius: 14px; padding: 1rem 1.2rem;
  text-decoration: none; color: var(--morkgron); font-weight: 700;
  box-shadow: var(--skugga); border-left: 5px solid var(--himmel);
  transition: transform .12s;
}
.lank-kort:hover { transform: translateY(-3px); color: var(--rost); }

/* Lite sommarglädje: solgul accent på rubriker */
.block h2 { position: relative; }
.block h2::after { content: ""; display: block; width: 54px; height: 4px; margin-top: .35rem; background: var(--sol); border-radius: 4px; }

/* Mobil */
@media (max-width: 700px) {
  .boka-grid { grid-template-columns: 1fr; }
  .topbar nav a:not(.btn-mini):not(.flagga) { display: none; }
  .sprak { margin-left: .3rem; }
  .sticky-cta { display: block; }
  .block { padding: 2.2rem 0; }
}