/* BarnBagarna - Varm och mysig bakstil */
:root{
  --bg:#FFF5E6; --card:#FFFFFF; --text:#8B4513; --muted:#D2691E; --brand:#FF6B6B; --brand-2:#FFB347;
  --border:#DEB887; --speech-bg:#FFF5E6; --speech-border:#DEB887;
  --radius:15px; --shadow:0 2px 8px rgba(139,69,19,.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text)}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:24px}
.site-header{position:sticky; top:0; backdrop-filter:blur(8px); background:rgba(255,107,107,.9); border-bottom:2px solid var(--border); z-index:10}
.nav{display:flex; align-items:center; justify-content:space-between}
.logo{font-weight:800; font-size:1.5rem; letter-spacing:.3px; display:flex; align-items:center; color:white}
.logo-img{width:60px; height:60px; margin-right:10px; border-radius:50%}

.nav-toggle{display:none; flex-direction:column; background:none; border:none; cursor:pointer; padding:5px}
.nav-toggle span{width:25px; height:3px; background:white; margin:3px 0; transition:0.3s; border-radius:2px}
.nav-toggle.active span:nth-child(1){transform:rotate(-45deg) translate(-5px, 6px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(45deg) translate(-5px, -6px)}

.nav-menu{display:flex}
.nav-menu a{margin-left:18px; padding:10px 14px; border-radius:20px; color:white; font-weight:600; text-decoration:none}
.nav-menu a:hover{background:rgba(255,255,255,.2)}
.nav-menu a.cta{background:linear-gradient(90deg,var(--brand-2),#FFD700); color:var(--text); font-weight:700; box-shadow:var(--shadow)}

.hero{padding:40px 0}
.hero-content{max-width:600px; margin:0 auto; text-align:center}
.hero-content h1{font-size:clamp(2rem,3.6vw,3rem); margin:0 0 30px; color:var(--text)}
.hero-content p{color:var(--muted); margin:0 0 30px; line-height:1.6; font-size:18px}
.hero-subtitle{font-size:20px; font-weight:500}

.hero-card{background:var(--card); border:2px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); text-align:center; margin:40px 0 20px; display:inline-block}
.hero-card h3{margin:0 0 15px; color:var(--text)}
.app-buttons{display:flex; flex-direction:column; gap:15px; align-items:center}
.app-btn{display:block; transition:transform 0.2s; width:200px; height:60px; background:#000; border-radius:8px; overflow:hidden}
.app-btn:hover{transform:scale(1.05)}
.app-btn img{height:100%; width:100%; object-fit:cover}

.btn{display:inline-block; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:white; font-weight:700; padding:12px 18px; border-radius:var(--radius); box-shadow:var(--shadow); transition:transform 0.2s}
.btn:hover{transform:translateY(-2px)}

section{padding:40px 0}
.social h2,.about h2,.recipe-submit h2,.feedback h2{font-size:1.8rem; margin:0 0 30px; color:var(--text); text-align:center}
.social-buttons{display:flex; justify-content:center; gap:12px; flex-wrap:wrap}
.social-btn{display:flex; align-items:center; gap:8px; padding:12px 20px; border-radius:25px; font-weight:600; text-decoration:none; transition:transform 0.2s; color:white; border:2px solid transparent}
.social-btn:hover{transform:translateY(-2px)}
.social-btn svg{width:20px; height:20px; fill:currentColor}
.social-btn.linkedin{background:#0077B5}
.social-btn.twitter{background:#000000}
.social-btn.tiktok{background:#000000}
.social-btn.facebook{background:#1877F2}
.social-btn.instagram{background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}

.about{text-align:center; max-width:800px; margin:0 auto}
.about p{color:var(--muted); line-height:1.6}
.features-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin:40px 0}
.feature{background:var(--card); border:2px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); text-align:left}
.feature h3{color:var(--text); margin:0 0 10px; font-size:1.1rem}
.feature p{color:var(--muted); margin:0; font-size:14px; line-height:1.5}
.about-footer{color:var(--muted); font-style:italic; margin-top:30px}

.recipe-submit{text-align:center; max-width:600px; margin:0 auto}
.recipe-submit p{color:var(--muted); line-height:1.6; margin:0 0 30px}
.recipe-card{background:var(--card); border:2px solid var(--border); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); margin:0 auto}
.recipe-card h3{color:var(--text); margin:0 0 15px; font-size:1.3rem}
.email-link{color:var(--brand); font-weight:700; font-size:1.2rem; text-decoration:none; display:inline-block; margin:0 0 20px}
.email-link:hover{text-decoration:underline}
.recipe-tips{color:var(--muted); font-size:14px; line-height:1.5; margin:0}

.feedback{text-align:center; max-width:600px; margin:0 auto}
.feedback p{color:var(--muted); line-height:1.6; margin:0 0 30px}
.feedback-card{background:var(--card); border:2px solid var(--border); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); margin:0 auto}
.feedback-card h3{color:var(--text); margin:0 0 15px; font-size:1.3rem}
.feedback-note{color:var(--muted); font-size:14px; line-height:1.5; margin:0}

.site-footer{border-top:2px solid var(--border); background:rgba(255,107,107,.1); padding:25px 0}
.site-footer p{color:var(--muted); text-align:center; margin:0}

@media (max-width:860px){
  .nav-toggle{display:flex}
  .nav-menu{display:none; position:absolute; top:100%; left:0; right:0; background:rgba(255,107,107,.95); flex-direction:column; padding:20px; border-top:2px solid var(--border)}
  .nav-menu.active{display:flex}
  .nav-menu a{margin:8px 0; margin-left:0; text-align:center}
  
  .hero{padding:30px 0}
  .social-buttons{flex-direction:column; align-items:center; max-width:300px; margin:0 auto; gap:10px}
  .app-buttons{gap:12px}
  section{padding:30px 0}
  .hero-content h1{margin:0 0 25px}
  .hero-content p{margin:0 0 25px}
  .hero-card{margin:0 0 25px; padding:18px}
  .social h2,.about h2,.recipe-submit h2,.feedback h2{margin:0 0 25px}
}
