/* Fasadputsning Malmö - Stilmall */
/* Dockgatan Design System */

:root{--malmo-vit:#FEFEFE;--malmo-gul:#F4D03F;--malmo-orange:#D35400;--malmo-beige:#F5E6D3;--malmo-mork:#2C3E50;--malmo-bla:#2E86DE}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,sans-serif;line-height:1.6;color:var(--malmo-mork);background:var(--malmo-vit)}

/* Typografi Dockgatan */
h1{font-size:2.2rem;font-weight:700;margin:1rem 0;font-family:Georgia,serif}
h2{font-size:1.8rem;font-weight:600;margin:1.2rem 0;color:var(--malmo-orange)}
h3{font-size:1.4rem;font-weight:600;margin:1rem 0}
p{margin:1rem 0;font-size:1rem}
.ingress{font-size:1.15rem;font-weight:500;color:#555;line-height:1.7}

/* Layout Malmö */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin:2rem 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:2rem 0}

/* Header Fasad */
header{background:linear-gradient(135deg,var(--malmo-vit) 0%,var(--malmo-beige) 100%);border-bottom:3px solid var(--malmo-gul);position:sticky;top:0;z-index:1000}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.logo-fasad{display:flex;align-items:center;text-decoration:none;color:var(--malmo-mork)}
.logo-icon{width:50px;height:50px;background:var(--malmo-orange);border-radius:5px;display:flex;align-items:center;justify-content:center;margin-right:15px;position:relative;overflow:hidden}
.logo-icon:before{content:'';position:absolute;width:30px;height:30px;background:var(--malmo-gul);border-radius:50%;top:10px;left:10px}
.logo-text{font-size:1.3rem;font-weight:700}

/* Navigation Puts */
nav ul{list-style:none;display:flex;gap:2rem}
nav a{color:var(--malmo-mork);text-decoration:none;font-weight:500;transition:color 0.3s}
nav a:hover{color:var(--malmo-orange)}
.mobile-menu{display:none}

/* CTA Knappar Offert */
.cta-btn{background:var(--malmo-bla);color:white;padding:12px 24px;border:none;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;transition:all 0.3s;box-shadow:0 2px 5px rgba(0,0,0,0.1)}
.cta-btn:hover{background:#2472C8;transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,0.2)}
.cta-header{position:absolute;right:20px;top:50%;transform:translateY(-50%)}

/* Informationsrutor Stenfasad */
.info-box{background:var(--malmo-beige);border-left:4px solid var(--malmo-orange);padding:1.5rem;margin:1.5rem 0;border-radius:0 8px 8px 0}
.quote-box{background:#FFF;border:2px solid var(--malmo-gul);padding:1.5rem;margin:2rem 0;position:relative;font-style:italic}
.quote-box:before{content:'"';font-size:3rem;color:var(--malmo-gul);position:absolute;top:-10px;left:10px}

/* Tabeller Tegelfasad */
.table-responsive{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin:1.5rem 0;background:white}
th{background:var(--malmo-orange);color:white;padding:12px;text-align:left}
td{padding:12px;border-bottom:1px solid #ddd}
tr:nth-child(even){background:var(--malmo-beige)}

/* Säsongsruta Vinter */
.season-box{background:linear-gradient(135deg,#E8F4FD 0%,#D6EAF8 100%);border:2px solid #5DADE2;padding:2rem;margin:2rem 0;border-radius:10px;position:relative}
.season-box h3{color:#2874A6}
.season-january{display:block}
.season-february,.season-march,.season-april,.season-may,.season-june,.season-july,.season-august,.season-september,.season-october,.season-november,.season-december{display:none}

/* Formulär Offertförfrågan */
.form-container{background:white;border:2px solid var(--malmo-gul);padding:2rem;border-radius:8px;margin:2rem 0}
.form-group{margin-bottom:1.5rem}
label{display:block;margin-bottom:0.5rem;font-weight:600;color:var(--malmo-mork)}
input,textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:1rem}
input:focus,textarea:focus{outline:none;border-color:var(--malmo-bla)}
textarea{min-height:120px;resize:vertical}
.spam-check{background:#F0F0F0;padding:1rem;margin:1rem 0;border-radius:4px}

/* Accordions Spritputs */
details{margin:1rem 0;border:1px solid #ddd;border-radius:8px;overflow:hidden}
summary{background:var(--malmo-beige);padding:1rem;cursor:pointer;font-weight:600}
summary:hover{background:#E8D5B7}
details[open] summary{background:var(--malmo-gul);color:var(--malmo-mork)}
.details-content{padding:1rem;background:white}

/* Footer Tunnputs */
footer{background:var(--malmo-mork);color:white;padding:3rem 0;margin-top:4rem}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:2rem}
.footer-section h4{color:var(--malmo-gul);margin-bottom:1rem}
.footer-links{list-style:none}
.footer-links a{color:#B8BFC7;text-decoration:none;line-height:1.8}
.footer-links a:hover{color:white}
.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid #455A64}

/* Bilder CSS Slätputs */
.img-putsfasad{width:100%;height:200px;background:linear-gradient(45deg,var(--malmo-beige) 25%,transparent 25%),linear-gradient(-45deg,var(--malmo-beige) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--malmo-beige) 75%),linear-gradient(-45deg,transparent 75%,var(--malmo-beige) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;border:2px solid var(--malmo-orange);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--malmo-mork);font-weight:700;margin:1rem 0}
.img-stenfasad{background:repeating-linear-gradient(0deg,#D7DBDD,#D7DBDD 10px,#BDC3C7 10px,#BDC3C7 20px)}
.img-tegelfasad{background:repeating-linear-gradient(90deg,#BA4A00,#BA4A00 30px,#6E2C00 30px,#6E2C00 35px)}
.img-spritputs{background:radial-gradient(circle at 20% 50%,var(--malmo-beige) 2px,transparent 2px),radial-gradient(circle at 80% 80%,var(--malmo-beige) 1px,transparent 1px);background-size:15px 15px}
.img-tunnputs{background:linear-gradient(180deg,#ECF0F1 0%,#D5DBDD 100%)}

/* Mobil Malmö */
@media(max-width:768px){
h1{font-size:1.8rem}
h2{font-size:1.5rem}
.grid-2,.grid-3{grid-template-columns:1fr}
nav ul{display:none}
.mobile-menu{display:block;background:none;border:none;cursor:pointer}
.mobile-menu span{display:block;width:25px;height:3px;background:var(--malmo-mork);margin:5px 0;transition:0.3s}
.mobile-menu.active span:nth-child(1){transform:rotate(45deg)translate(5px,5px)}
.mobile-menu.active span:nth-child(2){opacity:0}
.mobile-menu.active span:nth-child(3){transform:rotate(-45deg)translate(7px,-6px)}
nav.active ul{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:white;box-shadow:0 5px 20px rgba(0,0,0,0.1);padding:1rem}
.cta-header{position:static;transform:none;margin-top:1rem}
.footer-grid{grid-template-columns:1fr}
}