/*
Theme Name: LDL Bygg AB
Theme URI: https://ldlbygg.se
Author: Daniel Löfstedt
Author URI: https://ldlbygg.se
Description: Misty Forest-tema för LDL Bygg AB – Bygger på dina villkor
Version: 1.1 (städad)
License: GPLv2 or later
Text Domain: ldlbygg
*/

/* ===========================
   0) Design tokens
=========================== */
:root{
  /* Primära färger */
  --color-primary:#122F0B;     /* mörkgrön (text/huvud) */
  --color-secondary:#275F3E;   /* skogsgrön (accent hover) */
  --color-accent:#44785B;      /* dämpad grön (sekundärt) */
  --color-bg:#B5CABA;          /* ljus bakgrund */
  --color-text:#2B2B2B;        /* brödtext */
  --color-ldl-blue:#3A6FB0;    /* CTA/underline, tidigare #0057B7 ibland */

  /* Layout */
  --container:1100px;
  --radius:14px;
  --shadow:0 10px 25px rgba(0,0,0,.12);

  /* Legacy alias (för bakåtkompatibilitet i markup) */
  --ldl-green-deep: var(--color-primary);
  --ldl-green: var(--color-secondary);
  --ldl-mist:#6F9D87;
  --ldl-moss: var(--color-bg);
  --ldl-blue:#203959;
}

/* ===========================
   1) Bas
=========================== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}
.lead{ font-size:18px; color:#2b2b2b; max-width:820px; }

/* Hjälpklasser */
.section{ max-width:var(--container); margin:40px auto; padding:0 16px; }
.center{text-align:center}
.mt-16{margin-top:16px}
.card{
  background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding: clamp(16px, 3.2vw, 24px);
}

/* ===========================
   2) Header / Navigering
=========================== */
.site-header{
  position: sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid rgba(0,0,0,.08);
  transition: background .25s ease, border-color .25s ease;
}
.site-header .container{
  max-width:var(--container); margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:14px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ height:32px; width:auto; display:block; }
.brand span{ font-weight:800; letter-spacing:.5px; color:var(--color-primary); }

/* Meny (desktop) */
.nav{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.menu{ list-style:none; margin:0; padding:0; display:flex; gap:18px; }
.menu li{ margin:0; }
.menu a{
  color:var(--color-primary); text-decoration:none; font-weight:600;
  padding:8px 10px; border-radius:10px; line-height:1; display:block;
  transition: color .2s ease, background .2s ease;
}
.menu a:hover{ background:rgba(18,47,11,.06); }

/* Burger-knapp (mobil) */
.nav-toggle{
  appearance:none; border:0; background:transparent;
  width:44px; height:44px; margin-left:auto; position:relative; cursor:pointer;
  display:none; /* visas i <900px */
}
.nav-toggle .bar{
  position:absolute; left:10px; right:10px; height:2px; background:#122F0B; border-radius:2px;
  transition: transform .2s, top .2s, opacity .2s;
}
.nav-toggle .bar:nth-child(1){ top:12px; }
.nav-toggle .bar:nth-child(2){ top:21px; }
.nav-toggle .bar:nth-child(3){ top:30px; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Transparent header över hero på startsidan (snygg effekt) */
.home .site-header:not(.scrolled){
  background: transparent;
  border-color: transparent;
}
.home .site-header:not(.scrolled) .menu a{ color:#fff; }
.home .site-header:not(.scrolled) .menu a:hover{ background: rgba(255,255,255,.12); }

/* Scrolled state (aktiveras via JS) */
.site-header.scrolled{
  background:#fff; border-bottom:1px solid rgba(0,0,0,.08);
}
.site-header.scrolled .menu a{ color:#122F0B; }
.site-header.scrolled .menu a:hover{ background: rgba(18,47,11,.06); }

/* ===========================
   3) Hero
=========================== */
.hero{
  position:relative; color:#fff; min-height:72vh; display:grid; place-items:center;
  padding: clamp(20px, 4vw, 48px);
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45)),
    var(--hero, url('/wp-content/uploads/hero.jpg')) center/cover no-repeat;
}
.hero-inner{
  max-width:900px; margin:0 auto; padding:92px 16px 110px;
  position:relative; z-index:1; text-align:center;
}
.hero-logo{ width:150px; height:auto; display:block; margin:0 auto 18px; filter:drop-shadow(0 0 8px rgba(0,0,0,.3)); }
@media (max-width:768px){ .hero-logo{ width:110px; } }
.hero h1{ font-size:clamp(36px,6vw,64px); margin:8px 0 6px; font-weight:900; line-height:1.1; }
.hero .lead{ font-size:clamp(16px,2.4vw,20px); opacity:.95; margin:0 0 18px; }
.hero .cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ===========================
   4) Knappar
=========================== */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  text-decoration:none; font-weight:700; letter-spacing:.2px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.15); }
.btn.small{ padding:9px 12px; font-size:14px; }
.btn-primary{ background: var(--color-ldl-blue); color:#fff; }
.btn-primary:hover{ background: var(--color-secondary); }
.btn-secondary{ background: transparent; color:#fff; border:2px solid rgba(255,255,255,.85); }
.btn-secondary:hover{ background: rgba(255,255,255,.12); }
.btn-ghost{ background:#00000018; color:#fff; border:1px solid #ffffff55; }
.btn-ghost:hover{ background:#00000028; }

/* ===========================
   5) Sektioner / Cards / Grids
=========================== */
.services, .projects{
  display:grid; gap:18px; grid-template-columns: repeat(3, minmax(0,1fr));
}
.service, .project{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.service{ padding:22px; }
.service h3{ margin:0 0 8px; color:var(--color-primary); }
.project img{ width:100%; height:210px; object-fit:cover; }
.project .px{ padding:14px; }
.project { transition: transform .15s ease, box-shadow .15s ease; }
.project:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.14); }
.project a{ display:block; }

/* CTA-band */
.band{
  text-align:center; padding: clamp(28px, 6vw, 72px) 18px; margin-top:40px;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.20)),
    radial-gradient(1200px 300px at 50% 0%, #6F9D87 0, #275F3E 70%);
}
.band .btn{ border:1px solid #ffffff55; }

/* ===========================
   6) Footer
=========================== */
.site-footer{
  background:#203128; color:#fff; border-top:2px solid var(--color-ldl-blue);
  margin-top:40px;
}
.site-footer .footer-inner{
  max-width:var(--container); margin:0 auto;
  padding:32px 16px 28px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.site-footer a{ color:#fff; text-decoration:none; opacity:.9; }
.site-footer a:hover{ opacity:1; }
.site-footer .copy{ margin:0; opacity:.9; text-align:center; }

/* Social-länkar */
.footer-social{
  display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:6px;
}
.footer-social .social{
  display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:600; letter-spacing:.3px;
  transition: color .25s ease, transform .2s ease;
}
.footer-social .social:hover{ transform: translateY(-2px); }
.footer-social .fb:hover{ color:#1877F2; }
.footer-social .ig:hover{
  background: linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* ===========================
   7) Kontaktformulär (LDLCF)
=========================== */
.ldlcf-alert{ padding:12px 14px; border-radius:8px; margin:0 0 14px; }
.ldlcf-alert.ok{ background:#e6f6ee; border:1px solid #7fbfa1; color:#0f3e29; }
.ldlcf-alert.error{ background:#fdecec; border:1px solid #e09a9a; color:#5a1111; }
.ldlcf-form .ldlcf-grid{ display:grid; gap:14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.ldlcf-form label{ display:flex; flex-direction:column; gap:6px; font-weight:600; color:var(--color-primary); }
.ldlcf-form input[type="text"],
.ldlcf-form input[type="email"],
.ldlcf-form textarea{
  padding:12px 12px; border-radius:10px; border:1px solid #c7d7ce; background:#fff; font:inherit;
}
.ldlcf-form textarea{ resize:vertical; }
.ldlcf-form .ldlcf-full{ grid-column:1 / -1; }
.ldlcf-form .ldlcf-gdpr{ font-weight:500; color:#2b2b2b; }
.ldlcf-form .ldlcf-hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* ===========================
   8) Responsivitet
=========================== */
@media (max-width:900px){
  .services,.projects{ grid-template-columns:1fr 1fr; }
  .project img{ height:180px; }

  /* Mobilnavigering */
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:56px 0 0 0; background:#fff;
    display:none; flex-direction:column; gap:8px; padding:16px 20px;
    box-shadow:0 20px 60px rgba(0,0,0,.15); z-index:9999;
  }
  .nav.open{ display:flex; }
  .menu{ flex-direction:column; gap:6px; }
  .menu a{
    font-size:20px; padding:14px; border-radius:12px; color:#122F0B;
  }
  .menu a:hover{ background:rgba(18,47,11,.06); }
}

@media (max-width:620px){
  .services,.projects{ grid-template-columns:1fr; }
  .project img{ height:200px; }
}

@media (max-width:600px){
  .footer-social{ gap:20px; }
}

.sub-hero{
  background: linear-gradient(180deg, rgba(18,47,11,.65), rgba(18,47,11,.65)),
              url('/wp-content/uploads/hero-tjanster.jpg') center/cover no-repeat;
  color:#fff; text-align:center; padding:80px 16px;
  margin-bottom:40px;
}
.sub-hero h1{ font-size:clamp(32px,6vw,60px); margin:0 0 10px; }
.sub-hero .lead{ font-size:clamp(16px,2.5vw,22px); opacity:.9; }