/* ====== Base reset & tokens ====== */
*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden} /* förhindra sidledspanorering */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background:#ffffff;
  color:#1f2937;
  line-height:1.5;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:visited{color:inherit}
button{font:inherit}
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#0ea5e9;
  --ring:rgba(14,165,233,.25);
  --radius:14px;
  --shadow:0 8px 22px rgba(0,0,0,.08);
  --header-h:64px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14;
    --surface:#0f1720;
    --text:#e5e7eb;
    --muted:#93a3b8;
    --brand:#22c55e;
    --ring:rgba(34,197,94,.25);
    --shadow:0 12px 26px rgba(0,0,0,.35);
  }
}
@media (max-width:1099px){
  :root{ --bg:#ffffff; --surface:#ffffff; --text:#1f2937; --muted:#6b7280; --brand:#0ea5e9; --ring:rgba(14,165,233,.25) }
}

body{background:var(--bg);color:var(--text)}
.container{max-width:1024px;margin:0 auto;padding:0 1rem}
.screen-padding{padding:1rem}
a,button{min-height:44px;min-width:44px}

.header{
  position:sticky; top:0; z-index:1003; background:var(--surface);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem}
.logo{display:flex;align-items:center;gap:.6rem}
.logo img{height:52px;width:auto}
@media (max-width:1099px){ .logo img{ height:44px } }

.desktop-nav{display:none;margin:0;padding:0}
.desktop-nav>li{list-style:none;position:relative}
.desktop-nav>li>a{display:flex;align-items:center;justify-content:center;padding:.65rem .9rem;border-radius:10px;font-weight:700}
.desktop-nav>li>a:hover{background:rgba(0,0,0,.04)}

.nav-toggle{border:none;background:transparent;padding:.4rem;border-radius:10px}
.nav-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* === Mobilnavigering (off-canvas utan att läcka in i viewport) === */
.nav{
  position:fixed;
  top:var(--header-h);
  right:0;                 /* fäst i högerkant (standard off-canvas) */
  left:auto;
  bottom:0;
  width:84%; max-width:320px;
  background:#ffffff;
  transform:translateX(100%);        /* stängd: helt utanför åt höger */
  transition:transform .28s ease;
  box-shadow:none;                   /* slöja syns inte när stängd */
  padding:1rem;
  overflow-y:auto;
  z-index:1002;
  -webkit-tap-highlight-color: transparent;
}
.nav.open{
  transform:translateX(0);
  box-shadow:-8px 0 28px rgba(0,0,0,.1); /* skugga endast när öppen */
}
.nav a{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;border-bottom:1px solid rgba(0,0,0,.06);font-weight:600}
.nav a:hover{color:var(--brand)}
.submenu{display:none;padding-left:.25rem;margin-left:.25rem;border-left:3px solid rgba(0,0,0,.06)}
.submenu.open{display:block}
.submenu a{ font-weight:600;border-bottom:none;padding:.6rem 0; justify-content:flex-start; gap:.55rem }
.submenu a::before{content:"✔"; color:#22c55e; font-weight:800; display:inline-block}

.nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.32);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1001 }
.nav-overlay.show{opacity:1; pointer-events:auto}

@media (min-width:1100px){
  .nav,.nav-overlay{display:none}
  .nav-toggle{display:none}
  .desktop-nav{display:flex;gap:.4rem}
  .dropdown-menu{
    position:absolute; top:calc(100% + 6px); left:0;
    background:var(--surface); border:1px solid rgba(0,0,0,.06);
    border-radius:14px; box-shadow:var(--shadow); min-width:240px; padding:.4rem; display:none;
  }
  .dropdown[data-open="true"] .dropdown-menu{display:block}
  .dropdown-menu a{ display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; border-radius:10px; border:0; font-weight:600 }
  .dropdown-menu a:hover{ background:rgba(0,0,0,.04) }
  .dropdown-menu a::before{ content:"✔"; color:#22c55e; font-weight:800 }
}

@media (max-width:1099px){
  .desktop-nav{ display:none !important }
  .nav-toggle{ display:inline-flex !important }
  .container{ max-width:100% }
}

.section{margin:1.25rem auto;background:var(--surface);border-radius:14px;box-shadow:var(--shadow)}
.section-inner{padding:1.25rem}
.section h1{margin:0 0 .4rem 0;font-size:clamp(1.5rem,4vw,2.2rem);text-align:center}
.section .intro{text-align:center;color:var(--muted);font-size:clamp(1rem,2.7vw,1.15rem);margin:.25rem auto 1rem;max-width:68ch}

.hero{position:relative;overflow:hidden;min-height:46vh;color:#fff;border-radius:14px}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.hero .content{position:relative;z-index:1;padding:2rem;text-align:center}
.hero h1{font-size:clamp(1.8rem,6vw,2.2rem);margin:0}
.hero p{font-size:clamp(1rem,3.3vw,1.1rem);margin:.6rem 0 0 0;font-weight:600}

@media (min-width:1100px){
  .hero.section{margin-top:0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0}
}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.card{position:relative;border-radius:16px;min-height:220px;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;padding:1rem;background:#0b0f14}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.78);transform:scale(1.03)}
.card .content{position:relative;z-index:1;color:#fff}
.card h3{margin:0 0 .15rem 0;font-size:1.3rem;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.card p{margin:0 0 .2rem 0;text-shadow:0 2px 8px rgba(0,0,0,.6)}

label{display:block;font-weight:700;margin:.6rem 0 .25rem}
input[type="text"],input[type="email"],textarea{width:100%;padding:.8rem 1rem;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:var(--surface);color:var(--text)}
input:focus,textarea:focus{outline:3px solid var(--ring);border-color:transparent}
.footer{text-align:center;color:var(--muted);padding:1.2rem 1rem;margin-top:1rem}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}


/* === Desktop header: edge-to-edge (logo hard left, menu hard right) === */
@media (min-width:1100px){
  .header-inner.container{max-width:none !important; width:100vw !important; margin:0 !important; padding-left:0 !important; padding-right:0 !important}
  .header-inner .logo{margin-left:0 !important; padding-left:0 !important}
  .header-inner .desktop-nav{margin-right:0 !important}
}

/* === Service grids: exactly two columns on ≥900px === */
@media (min-width:900px){
  .grid-two{grid-template-columns:repeat(2, minmax(0,1fr)) !important}
}


/* ===== Fix11: desktop header inset, hero text position, unified form font ===== */

/* Small inset on desktop header so logo/menu får lite luft */
@media (min-width:1100px){
  .header-inner.container{
    padding-left:16px !important;
    padding-right:16px !important;
    max-width:none !important;
    width:100vw !important;
  }
}

/* Hero: center vertically but nudge slightly above middle */
.hero{ display:flex; align-items:center }
.hero .content{ transform: translateY(-6%) }

/* Ensure form elements use same font as resten av sidan */
input, textarea, select, button{ font-family: inherit }


/* ===== Fix12: hero center on index, consistent form font-size ===== */
/* Center hero content vertically & horizontally */
.hero{ display:flex; align-items:center; justify-content:center }
.hero .content{ transform:none; margin-inline:auto; text-align:center }
/* Same font-size across form fields */
input[type="text"], input[type="email"], textarea, select, button{ font-size:16px }

/* Kontaktuppgifter över formuläret – enhetlig stil */
.contact-line {
  display: block;
  text-align: center;
  margin: 0.6rem 0;
}

.contact-line a {
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
  color: inherit;
}

.contact-line a::before { content: none !important; }

/* Kontaktuppgifter – lite mindre och normalvikt */
.contact-line { margin: 0.5rem 0; }
.contact-line a {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: inherit !important;
}
.contact-line a::before { content: none !important; }

/* Skicka-knappen ska alltid vara blå */
form#kontakt-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 1rem 0 0 0;
  padding: .7rem 1.4rem;
  border-radius: 12px;
  background: var(--brand, #0ea5e9) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

/* Flytta upp Skicka-knappen lite */
form#kontakt-form button[type="submit"] { margin: 0.5rem 0 0 0 !important; }
/* Lite till */
form#kontakt-form button[type="submit"] { margin: 0.2rem 0 0 0 !important; }


/* ==== Contact page overflow clamp (mobile) ==== */
@media (max-width: 1099px){
  main, .container, .section, .section-inner, .screen-padding { max-width: 100vw; overflow-x: hidden; }
  #kontakt-form, #kontakt-form * { max-width: 100%; }
}
@media (max-width: 480px){
  /* reCAPTCHA can overflow on some Android devices; scale it slightly */
  .g-recaptcha { transform: scale(0.94); transform-origin: 0 0; }
}


/* ===== Robust off-canvas & kontakt-klamp ===== */
@media (max-width:1099px){
  .nav{
    transform: translateX(calc(100% + 24px));
    contain: layout paint;
    will-change: transform;
  }
  .nav.open{
    transform: translateX(0);
    box-shadow: -8px 0 28px rgba(0,0,0,.1);
  }

  main, .container, .section, .section-inner, .screen-padding{
    max-width:100vw;
    overflow-x:hidden;
  }
  #kontakt-form, #kontakt-form *{
    max-width:100% !important;
  }

  @media (max-width:480px){
    .g-recaptcha{ transform:scale(0.94); transform-origin:0 0; }
  }
}