/* Import rounded, friendly fonts that support Swedish diacritics */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Fredoka:wght@400;500;600&display=swap');

:root{
  /* Palette derived from logo.jpg */
  --coral:#E25A54;           /* primary (logo red) */
  --coral-dark:#C84C47;      /* darker hover */
  --coral-light:#F3C3C0;     /* light tint for chips/borders */
  --ink:#2A2A2A;             /* primary text on light */
  --ink-muted:#5A5A5A;       /* secondary text */
  --bg:#FFFFFF;              /* page background */
  --card:#FFF7F7;            /* soft coral-tinted card */
  --border:#F0D8D6;          /* subtle border */
  --shadow:0 8px 30px rgba(226,90,84,0.12);

  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;

  --font-display: 'Lilita One', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-body: 'Fredoka', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:var(--coral); text-decoration:none}
a:hover{color:var(--coral-dark); text-decoration:underline}

.container{max-width:1000px; margin:0 auto; padding:24px}



/* Header */
.header{display:flex; align-items:center; gap:16px; padding:12px 0}
.header img {height: 100px; width: auto}
.header h1{
  font-family:var(--font-display);
  letter-spacing:0.3px;
  font-size:clamp(28px,4vw,36px);
  color:var(--coral);
  margin:0;
}
.nav{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
.nav a{
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  color:var(--ink);
}
.nav a:hover{border-color:var(--coral); color:var(--coral)}


/* Hero */
.hero{
  margin-top:8px;
  padding:28px;
  border-radius:var(--radius-xl);
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.hero h2{
  font-family:var(--font-display);
  font-size:clamp(30px,5vw,48px);
  margin:0 0 8px;
  color:var(--coral);
}
.hero p{margin:8px 0 0; color:var(--ink-muted); font-size:18px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.badge{
  background:#fff;
  border:1.5px solid var(--coral-light);
  color:var(--ink-muted);
  padding:8px 12px;
  border-radius:999px;
}

/* Buttons */
.cta{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}
.button{
  display:inline-block;
  padding:12px 16px;
  border-radius:var(--radius-md);
  background:var(--coral);
  color:#fff;
  font-weight:600;
  border:1px solid transparent;
  box-shadow:var(--shadow);
}
.button:hover{background:var(--coral-dark)}
.button.secondary{
  background:#fff;
  color:var(--coral);
  border:1.5px solid var(--coral);
  box-shadow:none;
}
.button.secondary:hover{background:var(--card)}

/* Sections & cards */
.section{
  margin-top:32px;
  padding:24px;
  border-radius:var(--radius-lg);
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.section h3{
  margin:0 0 12px;
  font-size:22px;
  color:var(--coral);
  font-family:var(--font-display);
}
.grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width: 800px){
  .grid{grid-template-columns:1fr 1fr}
}

.card{
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:#fff;
}
.card h4{margin:0 0 6px; font-weight:600}
.card p{margin:6px 0; color:var(--ink-muted)}

/* Sponsors */
.sponsors{display:flex; gap:12px; flex-wrap:wrap}
.sponsor{
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1.5px dashed var(--coral-light);
  color:var(--ink-muted);
}

/* Notices and misc */
.notice{
  border-left:4px solid var(--coral);
  padding:12px;
  border-radius:12px;
  background:#FFF1F0;
  color:var(--ink);
}
.wall{
  border:2px dashed var(--coral-light);
  border-radius:12px;
  padding:12px;
  color:var(--ink-muted);
  background:#FFFDFD;
}
fieldset{border:1.5px dashed var(--coral-light); border-radius:12px; padding:12px}
legend{padding:0 6px; color:var(--ink-muted)}

/* Footer */
.footer{margin:40px 0 24px; color:var(--ink-muted); text-align:center; font-size:14px}
.small{font-size:14px; color:var(--ink-muted)}

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { margin: 0 0 1rem 0; padding: 0.5rem 0.75rem; border-left: 3px solid #ddd; position: relative; }
.timeline > li time { font-weight: 700; margin-right: .5rem; display: inline-block; min-width: 3.5rem; }
.timeline > li::before { content: ""; position: absolute; left: -6px; top: 0.9rem; width: 10px; height: 10px; border-radius: 50%; background: #ddd; }
.card { padding: 1rem; border: 1px solid #eee; border-radius: 0.75rem; }
.small { font-size: .95rem; }