/* ---------- Grundinställningar ---------- */
body { font-family: Arial, sans-serif; margin:0; background:#f9f9f9; color:#333; line-height:1.5; }
header, .card, footer { width: 90%; max-width:900px; margin:0 auto; }

/* ---------- Header ---------- */
header { display:flex; justify-content:space-between; align-items:center; padding:20px; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,0.1);}
.brand { display:flex; align-items:center; }
.logo { width:50px; height:50px; background:#007bff; color:#fff; display:flex; justify-content:center; align-items:center; border-radius:50%; font-weight:bold; font-size:1.2rem; margin-right:12px;}
.brand-text h1 { margin:0; font-size:1.8rem; }
.brand-text .lead { margin:2px 0 0 0; font-size:1rem; color:#666; }

nav ul { list-style:none; display:flex; gap:15px; margin:0; padding:0; }
nav ul li a { text-decoration:none; color:#007bff; font-weight:bold; }
nav ul li a:hover { text-decoration:underline; }

/* ---------- Sektioner ---------- */
.card { background:#fff; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.1); padding:20px; margin:20px 0; }
.section-title h2 { margin-bottom:5px; }
.section-title .muted { color:#666; font-size:1rem; }

/* ---------- Listor ---------- */
.links { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:20px; }
.links li { background:#fff; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.1); padding:16px; width:100%; max-width:300px; text-align:center; }
.links li h3 { margin:0 0 10px 0; }
.links li p { margin-bottom:10px; }
.links li a { display:inline-block; padding:8px 16px; background:#007acc; color:#fff; text-decoration:none; border-radius:8px; font-weight:bold;}
.links li a:hover { background:#005fa3; }

/* Färgade ramar för olika typer */
.mansjour-goteborg, .mansjour-stockholm, .mansjour-uppsala, .mansjour-malmo { border-top:5px solid #007bff; }
.psykaut-ostra-goteborg, .psykaut-varberg { border-top:5px solid #ff5722; }
.kvinnojour-stockholm, .kvinnojour-goteborg, .kvinnojour-malmo { border-top:5px solid #e91e63; }

/* ---------- Akuta kontaktvägar ---------- */
#akuta ul { list-style:none; padding:0; }
#akuta ul li { margin-bottom:10px; }

/* ---------- Snabblänkar ---------- */
#quicklinks ul { list-style:none; padding:0; }
#quicklinks ul li { margin-bottom:8px; }

/* ---------- Karta ---------- */
#map { width:100%; height:400px; border-radius:12px; margin-top:20px; border:1px solid #ccc; }

/* ---------- Kontakt ---------- */
#contact a { color:#007bff; text-decoration:none; }
#contact a:hover { text-decoration:underline; }

/* ---------- Footer ---------- */
footer { text-align:center; padding:20px 0; color:#666; font-size:0.9rem; background:#f1f1f1; }

/* ---------- Responsivitet ---------- */
@media (max-width:768px){
  header { flex-direction:column; align-items:flex-start;}
  nav ul { flex-direction:column; gap:10px; margin-top:10px;}
  .links { flex-direction:column; align-items:center;}
  .links li { max-width:100%; }
}