/*
Theme Name: Flyttevask Lite
Theme URI: https://example.com/flyttevask-lite
Author: ChatGPT for Thea
Description: Lettvekts WordPress-tema for flyttevask/renhold. Minimal, raskt og uten sidebyggere.
Version: 2.1.0
License: GPL-2.0+
Text Domain: flyttevask-lite
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

:root{
  --bg:#ffffff;
  --text:#121212;
  --muted:#6b7280;
  --primary:#e11d48;
  --primary-700:#be123c;
  --accent:#111827;
  --light:#f9fafb;
  --ring:#f3f4f6;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
a{color:var(--primary);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:14px 18px;border-radius:12px;font-weight:600;border:0;background:var(--primary);color:#fff}
.btn:hover{background:var(--primary-700)}
.btn-outline{background:#fff;color:var(--primary);border:2px solid var(--primary)}
.tag{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;background:var(--light);color:var(--muted);font-size:14px}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--ring);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--accent)}
.menu{display:flex;gap:20px;align-items:center}
.menu a{color:var(--accent);font-weight:600}
.mobile-toggle{display:none}

/* Hero */
.hero{padding:64px 0;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.hero h1{font-size:48px;line-height:1.1;margin:0 0 12px}
.hero p.lead{font-size:18px;color:var(--muted);margin:0 0 24px}
.hero .card{background:var(--light);padding:20px;border-radius:16px;border:1px solid var(--ring)}

/* Trust */
.trust{background:#0b1220;color:#fff}
.trust .items{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px 0}
.trust .item{display:flex;gap:10px;align-items:center;justify-content:center;font-weight:600}

/* Services */
.services{padding:48px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border:1px solid var(--ring);border-radius:16px;padding:20px;background:#fff}
.card h3{margin-top:0}

/* Steps */
.steps{background:var(--light);padding:48px 0}
.step{display:flex;gap:14px}
.step .num{min-width:36px;height:36px;border-radius:999px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}

/* Testimonials */
.testimonials{padding:48px 0}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:#fff;border:1px solid var(--ring);border-radius:16px;padding:20px}
.stars{color:#fbbf24}

/* FAQ */
.faq{background:var(--light);padding:48px 0}
.faq details{border:1px solid var(--ring);background:#fff;border-radius:12px;padding:14px 18px}
.faq details+details{margin-top:12px}

/* Contact form */
.contact{padding:48px 0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form textarea{grid-column:span 2;min-height:140px}
input,textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--ring);font:inherit}
label{font-weight:600;margin-bottom:6px;display:block}

/* Footer */
.site-footer{background:#0b1220;color:#cbd5e1;padding:24px 0;border-top:1px solid #111}
.site-footer a{color:#e5e7eb}

/* Om oss (Pro) */
.about-hero{background:linear-gradient(180deg,#fafafa,transparent);padding:48px 0}
.about-hero__inner{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.about-hero h1{font-size:44px;line-height:1.1;margin:8px 0 12px}
.about-hero .lead{color:var(--muted);font-size:18px}
.about-hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.about-hero__media{border:1px dashed var(--ring)}
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:32px auto}
.about-text p{margin:0 0 12px}
.values{background:var(--light);padding:48px 0}
.values__grid{margin-top:8px}
.values__item{text-align:left}
.values__icon{font-size:28px;line-height:1}
.trust--tight .items{grid-template-columns:repeat(3,1fr);padding:10px 0}
.about-cta{margin:24px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Offer page */
.offer-hero{padding:48px 0;background:linear-gradient(180deg,#fff, #fafafa)}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.offer-sidebar .mini{font-size:14px;color:var(--muted)}
.badge{display:inline-block;background:#ecfeff;border:1px solid #a5f3fc;color:#0369a1;padding:6px 10px;border-radius:999px;font-weight:600}

/* Responsive */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .mobile-toggle{display:block}
  .menu{display:none}
  .about-hero__inner{grid-template-columns:1fr}
  .about-split{grid-template-columns:1fr}
  .offer-grid{grid-template-columns:1fr}
}

/* === Full mobil midtstilling (oppdatert) === */
@media (max-width: 768px) {
  /* Hero */
  .hero.container {
    max-width: 100% !important;
    padding: 0 12px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  .hero.container > div {
    width: 100%;
    text-align: center !important;
  }
  .hero.container h1,
  .hero.container p,
  .hero.container .lead {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero.container .btn,
  .hero.container .btn-outline {
    display: inline-block;
    margin: 10px auto !important;
  }
  .hero.container .card {
    margin-top: 20px;
    max-width: 400px;
    width: 100%;
  }

  /* Trust */
  .trust .items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Services */
  .services .grid-3 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  /* Steps */
  .steps .card {
    text-align: center !important;
  }
  .steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .steps .num {
    margin-bottom: 6px;
  }

  /* Testimonials */
  .testimonials {
    text-align: center !important;
  }
  .testimonials .quotes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  .testimonials .quote {
    max-width: 500px;
  }

  /* CTA nederst */
  .container.card {
    text-align: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .container.card .btn,
  .container.card .btn-outline {
    margin: 8px auto !important;
  }
}

@media (max-width: 768px) {
  body h1,
  body h2,
  body h3,
  body h4,
  body h5,
  body h6,
  .about-hero h1,
  .about-hero h2,
  .services h2,
  .steps h2,
  .testimonials h2,
  .offer-hero h1,
  .offer-hero h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ===== NAV – base ===== */
.menu-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.menu-list > li > a { text-decoration: none; color: var(--accent); font-weight: 600; padding: 8px 0; display: inline-block; }

/* Desktop (≥901px): vis horisontal meny, skjul hamburger */
@media (min-width: 901px){
  .menu { display: flex; align-items: center; }
  .mobile-toggle { display: none; }
}

/* Mobil (≤900px) */
@media (max-width: 900px){
  .mobile-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    font-size: 22px; line-height: 1;
    border: 1px solid var(--ring);
    border-radius: 10px;
    background: #fff; color: var(--accent);
  }

  /* Skjul meny som standard på mobil */
  .menu{
    display: none;
    position: fixed;
    top: 64px; /* under headeren */
    left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--ring);
    box-shadow: 0 12px 20px rgba(0,0,0,.06);
    z-index: 9999;
  }
  .menu-list{
    flex-direction: column;
    gap: 0;
    padding: 10px 16px;
  }
  .menu-list > li > a{
    padding: 16px 6px;           /* stor trykkflate */
    font-size: 18px;
  }

  /* Når menyen er åpen */
  body.menu-open .menu{ display: block !important; }
  body.menu-open { overflow: hidden; } /* lås scroll bak menyen */
}
/* === RESET / TILBAKE TIL ENKEL MENY === */

/* Desktop (≥901px): horisontal meny, skjul hamburger */
@media (min-width: 901px){
  .menu{ display:flex !important; align-items:center; position:static !important; background:transparent !important; box-shadow:none !important; border:0 !important; }
  .menu a{ padding:8px 0; }
  .mobile-toggle{ display:none !important; }
}

/* Mobil (≤900px): skjul som standard, vis som panel når knappen toggler display:flex */
@media (max-width: 900px){
  .mobile-toggle{ display:block !important; }

  /* panelet som åpnes/lukkes av inline JS (display:flex) */
  .menu{
    display:none;                 /* blir 'flex' når knappen trykkes */
    flex-direction:column;
    position:absolute !important; /* ikke fixed – ser penere ut */
    top:64px; left:0; right:0;
    background:#fff !important;
    border-top:1px solid var(--ring) !important;
    box-shadow:0 12px 20px rgba(0,0,0,.06) !important;
    padding:10px 16px;
    z-index:9999;
  }
  .menu a{
    display:block;
    padding:14px 8px;            /* stor trykkflate */
    font-size:18px;
  }
}

/* Rydd opp eksperimentelle klasser (hvis de finnes) */
.menu-list{ display:contents; gap:0; padding:0; margin:0; } /* ufarliggjør .menu-list hvis den ligger igjen */
.btn {
  display: inline-block;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 600;
  border: 0;
  background: var(--primary); /* ← Dette gjør den rød */
  color: #fff;
}