:root{
  --bg:#f8f6f1;
  --paper:#fffdf8;
  --ink:#1e293b;
  --muted:#667085;
  --accent:#b28b67;
  --accent-2:#7a8e72;
  --ring:rgba(0,0,0,.06);
  --shadow:0 6px 24px rgba(16,24,40,.08), 0 2px 8px rgba(16,24,40,.06);
  --radius:20px;
  --radius-sm:14px;
  --max:1100px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:linear-gradient(180deg,var(--bg),#fbfaf7);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
section{scroll-margin-top:80px}

/* Layout helpers */
.wrap{max-width:var(--max); margin:0 auto; padding:58px 20px}
main{padding-bottom:80px} /* enhetlig luft före footern */
.info-box{margin-top:50px}
.card{background:var(--paper); border:1px solid #eee; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #e7e7e7; background:#fff; border-radius:999px; font-size:.9rem}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #e7e7e7; background:#fff; border-radius:999px}
.cta{display:inline-block; background:var(--accent); color:#fff; font-weight:600; padding:10px 18px; border-radius:var(--radius-sm); box-shadow:var(--shadow)}

/* Header/nav (gemensamt) */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.6); border-bottom:1px solid #eee}
.nav{max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 20px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.5px}
.brand-mark{width:38px; height:38px; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, var(--accent) 0%, #e7c8a9 35%, #fff1e4 65%, #ffffff 100%); box-shadow:var(--shadow)}
.brand span{font-family:"Playfair Display", serif; font-size:1.2rem}

.navlinks{display:flex; gap:20px; align-items:center}
.navlinks a{padding:8px 10px; border-radius:12px; transition:.2s ease background-color}
.navlinks a:hover{background:rgba(0,0,0,.04)}
.navlinks a.active,
.navlinks a[aria-current="page"]{
  background: rgba(0,0,0,.08);
  font-weight: 700;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #ddd;
}
.hamb{display:none; background:none; border:0; padding:8px; border-radius:12px}

/* Footer */
footer{border-top:1px solid #eee; background:#fffdf8}
.foot{max-width:var(--max); margin:0 auto; padding:22px 20px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.social{display:flex; gap:14px}

/* Responsive nav */
@media (max-width: 900px){
  .navlinks{position:fixed; inset:56px 14px auto; top:72px; background:rgba(255,255,255,.95); border:1px solid #eee; border-radius:16px; box-shadow:var(--shadow); padding:12px; display:none; flex-direction:column}
  .navlinks.show{display:flex}
  .hamb{display:block}
}
.info-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (min-width: 901px) {
  .info-image { grid-column: 1; }
  .info-box   { grid-column: 2; align-self: start; }
}

@media (max-width: 900px) {
  .info-image, .info-box { grid-column: auto; }
}
/* === Dropdown-meny === */
.dropdown {
  position: relative;
}

.dropbtn {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 12px;
  transition: .2s ease background-color;
  color: inherit;
}

.dropbtn:hover {
  background: rgba(0,0,0,.04);
}

/* Undermeny */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  border-radius: 8px;
  z-index: 999;
}

.dropdown-content a {
  display: block;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
  border-radius: 0;
}

.dropdown-content a:hover {
  background: #f3f3f3;
}

/* Hover på desktop */
@media (hover:hover) and (pointer:fine) {
  .dropdown:hover .dropdown-content {
    display: block;
  }
}

/* Mobil: undermenyer staplade */
@media (max-width: 900px) {
  .dropdown-content {
    position: static;
    box-shadow: none;
    background: none;
    min-width: auto;
    border-radius: 0;
    display: block;
    padding-left: 0;
  }
  .dropdown-content a {
    padding-left: 1rem;
  }
}
/* "Till toppen"-knapp */
.to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e7e7e7;
  box-shadow: var(--shadow);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
  z-index: 1200; /* över samuel-link och annat */
}
.to-top:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.12) }
.to-top.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@media (max-width: 900px){
  .navlinks{
    position: fixed;
    inset: 56px 14px auto;
    top: 72px;
    background: rgba(255,255,255,.95);
    border: 1px solid #eee;
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 12px;
    display: none;
    flex-direction: column;
    z-index: 1100; /* lägg till denna rad */
  }
  .navlinks.show{ display: flex; }
  .hamb{ display: block; }
}
/* Aktiv sida (gäller både aria-current och .active från scriptet) */
.navlinks a[aria-current="page"],
.navlinks a.active {
  font-weight: 700;
  color: var(--accent);
  background: rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 4px 8px;
}

/* Hover-effekt */
.navlinks a:hover {
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  padding: 4px 8px;
}


/* home panel rules removed */
/* ===  Startsidans vit-rektangel-fix (adjacent sibling) === */
main.hero + section.wrap{
  position: relative;
  background: transparent !important;
  box-shadow: none !important;
}
main.hero + section.wrap::before,
main.hero + section.wrap::after,
main.hero + section.wrap > .grid::before,
main.hero + section.wrap > .grid::after{
  content: none !important;
  display: none !important;
}


/* === Mini-fallback för startsidan === */
body[data-home] section.wrap[data-lock]{
  position: relative;
  background: inherit !important;
  box-shadow: none !important;
  z-index: 0;
}
body[data-home] section.wrap[data-lock]::before,
body[data-home] section.wrap[data-lock]::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
}
/* Sista ordet: inga panel-pseudos på hem-sidan alls */
body[data-home] section.wrap::before,
body[data-home] section.wrap::after,
body[data-home] section.wrap > .grid::before,
body[data-home] section.wrap > .grid::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
}


/* === Cover-underlay för första sektionen efter hero (eliminerar vitt fält) === */
.section-covered{ position: relative; background: transparent !important; }
.section-covered .section-cover{
  position: absolute;
  inset: 0;
  /* Sömlös vertikal övergång från hero-slut (#fbfaf7) till helt transparent längre ned */
  background: linear-gradient(180deg, #fbfaf7 0%, rgba(251,250,247,0.98) 35%, rgba(251,250,247,0.85) 60%, rgba(251,250,247,0.00) 100%);
  z-index: 0;
  pointer-events: none;
}
.section-covered > *{ position: relative; z-index: 1; }
/* För säkerhets skull: stäng av alla pseudo-paneler just i denna sektion */
.section-covered::before, .section-covered::after,
.section-covered > .grid::before, .section-covered > .grid::after{
  content: none !important; display: none !important; background: transparent !important; border: 0 !important;
}


/* === Cover-underlay: sömlös övergång efter hero === */
.section-covered{ position: relative; background: transparent !important; }
.section-covered .section-cover{
  position: absolute;
  inset: 0;
  /* Mjuk övertoning från sidans toppfärg till transparent längre ned */
  background: linear-gradient(180deg, var(--bg) 0%, rgba(248,246,241,0.96) 30%, rgba(248,246,241,0.80) 55%, rgba(248,246,241,0) 100%);
  z-index: 0;
  pointer-events: none;
}
.section-covered > *{ position: relative; z-index: 1; }
/* Döda ev. pseudo-paneler just i denna sektion */
.section-covered::before,
.section-covered::after,
.section-covered > .grid::before,
.section-covered > .grid::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
}


/* === Full-bleed cover: tar bort kvarvarande ljusa fält längs kanter === */
.section-covered{ position:relative; background:transparent!important; overflow:visible; }
.section-covered .section-cover{
  position:absolute;
  top:0; height:100%;
  left:50%; transform:translateX(-50%);
  width:100vw; /* täcker hela viewportens bredd */
  background:linear-gradient(180deg, var(--bg) 0%, rgba(248,246,241,.96) 28%, rgba(248,246,241,.85) 52%, rgba(248,246,241,0) 100%);
  z-index:0; pointer-events:none;
}
.section-covered > *{ position:relative; z-index:1; }
.section-covered::before, .section-covered::after,
.section-covered > .grid::before, .section-covered > .grid::after{ content:none!important; display:none!important; }