/*
Theme Name: Effectivo
Theme URI: https://effectivo.se
Author: Effectivo
Author URI: https://effectivo.se
Description: Helhetslösningar för bygg, el, VVS & golv – modernt, mobilanpassat WordPress-tema.
Version: 1.1.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: effectivo
*/

:root{
  --bg:#fafafa;
  --fg:#111;
  --muted:#666;
  --brand:#f59e0b;
  --brand-2:#f43f5e;
  --card:#fff;
  --line:#e7e7e7;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Skärmläsartext (används t.ex. bredvid logga) */
.screen-reader-text{
  border:0;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
  white-space:nowrap;
}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:80px 0}
.grid{display:grid;gap:24px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.small{font-size:.9rem;color:var(--muted)}
.lead{color:var(--muted)}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#0ea5a4;color:#fff;border-radius:999px;
  padding:.25rem .6rem;font-size:.8rem;
}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#111;color:#fff;
  padding:.8rem 1.1rem;border-radius:12px;
  font-weight:600;
}
.btn.alt{background:transparent;border:1px solid var(--line);color:#111}
.btn.brand{background:var(--brand)}
hr.line{border:0;border-top:1px solid var(--line);margin:40px 0}

/* Header / topbar */
.site-topbar{background:#111;color:#fff;font-size:.9rem}
.site-topbar .container{
  display:flex;justify-content:space-between;align-items:center;
  padding:.5rem 20px;
}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .nav{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.site-header .brand{
  display:flex;align-items:center;gap:12px;
  font-weight:800;
}
.logo{
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:14px;
  background:
    radial-gradient(80% 80% at 70% 0%, var(--brand) 0%, rgba(245,158,11,.2) 60%),
    radial-gradient(60% 60% at 0% 100%, var(--brand-2) 0%, rgba(244,63,94,.2) 70%),
    #111;
  color:#fff;
}

/* Desktop nav */
.navlinks{display:flex;gap:24px;font-weight:600}
.navlinks .menu{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.navlinks .menu li a{padding:4px 0}

/* Hero */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 60% at 70% 0%, rgba(245,158,11,.25) 0%, transparent 70%),
    radial-gradient(40% 40% at 10% 100%, rgba(244,63,94,.25) 0%, transparent 70%);
}
.hero h1{
  font-size:clamp(32px,4vw,46px);
  line-height:1.1;margin:0;
}
.hero .lead{font-size:1.1rem;max-width:48ch}

/* Sections */
.usp{display:grid;grid-template-columns:repeat(1,1fr);gap:16px}
@media(min-width:700px){.usp{grid-template-columns:repeat(3,1fr)}}
.services .card h3{margin:.2rem 0;font-size:1.2rem}
@media(min-width:960px){.services{grid-template-columns:repeat(4,1fr)}}

.testimonials{background:#111;color:#eee}
.testimonials .card{border-color:#222;background:#0f0f0f}
.process .step{position:relative;padding-top:24px}
.process .step .num{
  position:absolute;top:-12px;left:24px;
  width:40px;height:40px;border-radius:16px;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:800;
}

/* Footer */
.footer{background:#fff;border-top:1px solid var(--line)}
.footer .cols{display:grid;gap:24px}
@media(min-width:900px){.footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}}

/* Mobile nav & tweaks */
.menu-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.mobile-drawer{
  position:fixed;inset:0;
  display:none;
  background:rgba(0,0,0,.4);
  z-index:60;
}
.mobile-drawer .panel{
  position:absolute;right:0;top:0;
  height:100%;width:min(84%,320px);
  background:#fff;border-left:1px solid var(--line);
  padding:20px;
  display:flex;flex-direction:column;gap:16px;
}
.mobile-drawer .mobile-menu{
  list-style:none;margin:0;padding:0;
}
.mobile-drawer a{
  padding:10px 8px;border-radius:10px;
}
.mobile-drawer a:hover{background:#f7f7f7}
.close-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:12px;background:#fff;
}
body.nav-open{overflow:hidden}
.nav-open .mobile-drawer{display:block}

/* Utilities */
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.text-center{text-align:center}
.font-bold{font-weight:700}

/* Responsivitet */
@media(max-width:768px){
  .section{padding:48px 0}
  .site-topbar .container{
    flex-direction:column;gap:.25rem;
    text-align:center;
  }
  .site-header .nav{height:56px}
  .navlinks{display:none}
  .menu-toggle{display:inline-flex}
  .grid{gap:16px}
  .services{grid-template-columns:1fr !important}
  #case .grid,.testimonials .grid,#process .grid{grid-template-columns:1fr !important}
  .container{padding:0 16px}
  .footer .cols{grid-template-columns:1fr}
}

/* Extra små mobiler */
@media(max-width:480px){
  .hero h1{font-size:26px}
  .hero .lead{font-size:0.95rem}
  .site-topbar .container{padding:0.4rem 12px}
}