/* ============================================================
   main.css – Valdagen 2026 · Pehr Bolin
   Fully responsive: mobile-first, 320px → ∞
   ============================================================ */

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --bg-dark:  #0f1f55;
  --accent:   #2563eb;
  --pale:     #dbeafe;
  --white:    #ffffff;
  --gold:     #f59e0b;

  /* Fluid spacing scale */
  --space-xs:  clamp(.3rem,  1vw,  .5rem);
  --space-sm:  clamp(.5rem,  1.5vw, .8rem);
  --space-md:  clamp(.75rem, 2vw,  1.2rem);
  --space-lg:  clamp(1rem,   3vw,  1.8rem);
  --space-xl:  clamp(1.2rem, 4vw,  2.4rem);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ───────────────────────────────────────────────────── */
html {
  /* Prevent iOS text size inflation */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg-dark);
  color: var(--white);
  overflow-x: hidden;
}

/* Bakgrundsgradienter */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(37,99,235,.30) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 80%, rgba(30,58,138,.45) 0%, transparent 60%),
    linear-gradient(160deg, #0f1f55 0%, #1a2f6b 50%, #0d1a45 100%);
}

/* ── Sidomskelett ────────────────────────────────────────────── */
.page {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: stretch;
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-bottom: 1px solid rgba(255,255,255,.1);
  animation: fadeDown .7s ease both;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: clamp(.75rem, 2.5vw, 1.1rem);
  font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin-bottom: .4rem;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: ''; display: block;
  width: clamp(20px, 4vw, 40px); height: 1.5px;
  background: rgba(255,255,255,.5);
}

.hero-slogan {
  font-size: clamp(1.35rem, 6vw, 3.4rem);
  font-weight: 700; line-height: 1.05;
  color: var(--white); letter-spacing: -.02em;
  /* Allow wrap on very small screens instead of overflow */
  white-space: normal;
  word-break: keep-all;
}
.hero-slogan em { font-style: normal; color: var(--pale); }

/* ── Innehållsyta ────────────────────────────────────────────── */
.content {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  width: 100%;
  padding: var(--space-sm) var(--space-md) var(--space-lg);
  gap: var(--space-sm);
}

/* ── Rubrik ──────────────────────────────────────────────────── */
.headline {
  text-align: center;
  animation: fadeDown .8s .15s ease both;
}
.headline h1 {
  font-size: clamp(.85rem, 3.5vw, 2rem);
  font-weight: 700; color: var(--white);
  /* Wrap gracefully instead of overflow */
  white-space: normal;
  line-height: 1.25;
}
.date-badge {
  display: inline-block; margin-top: .4rem;
  padding: .3rem 1rem;
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 999px;
  font-size: clamp(.65rem, 1.8vw, .78rem);
  font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.05);
}

/* ── Nedräkning ──────────────────────────────────────────────── */
.counter {
  display: flex; gap: clamp(.35rem, 1.5vw, .8rem);
  align-items: stretch;
  animation: fadeUp .9s .3s ease both;
  /* Full width, but cap to prevent ridiculous sizes */
  width: 100%; max-width: 520px;
}
.unit {
  display: flex; flex-direction: column;
  align-items: center; gap: .3rem;
  flex: 1; /* each unit takes equal space */
}

.box {
  position: relative;
  width: 100%; /* fill the flex unit */
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: clamp(8px, 2vw, 14px);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.box::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, transparent 50%);
  pointer-events: none;
}

.num {
  font-size: clamp(1.2rem, 5.5vw, 3.2rem);
  font-weight: 700; line-height: 1;
  color: var(--white); font-variant-numeric: tabular-nums;
  transition: transform .12s ease, opacity .12s ease;
}
.num.flip { transform: translateY(-6px) scale(.95); opacity: .5; }

.label {
  font-size: clamp(.5rem, 1.4vw, .72rem);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.sep {
  font-size: clamp(.9rem, 3vw, 2rem);
  font-weight: 700; color: rgba(255,255,255,.2);
  padding-bottom: clamp(1rem, 3vw, 1.6rem);
  user-select: none; flex-shrink: 0;
  align-self: flex-start;
  /* Hide on very small screens */
  display: flex; align-items: center;
}

/* ── Budskapspanel + nyheter ─────────────────────────────────── */
.panel-wrap {
  width: 100%; max-width: 680px;
  animation: fadeUp .9s .45s ease both;
}

.budskap-panel {
  position: relative;
  padding: var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-md) + 6px);
  background: rgba(37,99,235,.15); border: 1px solid rgba(37,99,235,.3);
  border-radius: 12px 12px 0 0; overflow: hidden;
  min-height: 2.8em; /* reserve space so panel doesn't jump */
  display: flex; align-items: center;
}
.budskap-panel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--gold);
}
.budskap-text {
  font-size: clamp(.82rem, 2.4vw, 1.05rem);
  font-weight: 700; color: var(--white); line-height: 1.4;
  transition: opacity .4s, transform .4s;
}
.budskap-text.out { opacity: 0; transform: translateY(-6px); }

/* ── Nyhetsrader ─────────────────────────────────────────────── */
.news-panel {
  position: relative;
  padding: .3rem var(--space-md) .3rem calc(var(--space-md) + 6px);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-top: none; border-radius: 0 0 12px 12px; overflow: hidden;
}
.news-panel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}

.news-row {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.news-row:last-child { border-bottom: none; }

.news-badge {
  flex-shrink: 0; background: var(--accent); color: var(--white);
  font-size: clamp(.48rem, 1.2vw, .55rem);
  font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .15rem .4rem; border-radius: 4px;
  margin-top: .15rem; white-space: nowrap;
}
.news-badge.new { background: #16a34a; }

.news-title {
  font-size: clamp(.7rem, 1.9vw, .85rem);
  font-weight: 500; color: rgba(255,255,255,.85); line-height: 1.35;
}
.news-title a { color: inherit; text-decoration: none; }
.news-title a:hover { text-decoration: underline; color: var(--pale); }

.news-date {
  font-size: clamp(.55rem, 1.2vw, .6rem);
  color: rgba(255,255,255,.35); margin-top: .1rem;
}

/* ── Förtidsröstning ─────────────────────────────────────────── */
.early-vote {
  width: 100%; max-width: 680px;
  background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.3);
  border-radius: 12px;
  padding: var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-md) + 6px);
  position: relative; overflow: hidden;
  animation: fadeUp .9s .5s ease both;
  display: flex; align-items: flex-start; gap: var(--space-sm);
}
.early-vote::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--pale);
}
.early-vote-icon {
  font-size: clamp(1rem, 3vw, 1.4rem);
  flex-shrink: 0; line-height: 1; margin-top: .1rem;
}
.early-vote-body { flex: 1; min-width: 0; }
.early-vote-title {
  font-size: clamp(.78rem, 2.2vw, .95rem);
  font-weight: 700; color: var(--white); margin-bottom: .2rem;
}
.early-vote-dates {
  font-size: clamp(.68rem, 1.8vw, .82rem);
  font-weight: 500; color: rgba(255,255,255,.7);
  margin-bottom: .4rem; line-height: 1.4;
}
.early-vote-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: clamp(.65rem, 1.7vw, .78rem); font-weight: 700;
  color: var(--pale); text-decoration: none;
  border: 1px solid rgba(219,234,254,.3); border-radius: 6px;
  padding: .25rem .6rem; transition: background .2s, border-color .2s;
  /* Ensure tap target is large enough on mobile */
  min-height: 2rem;
}
.early-vote-link:hover,
.early-vote-link:focus-visible {
  background: rgba(219,234,254,.1); border-color: rgba(219,234,254,.6);
}

/* ── Avslutningsmeddelande ───────────────────────────────────── */
.message {
  text-align: center; max-width: 600px; width: 100%;
  animation: fadeUp .9s .55s ease both;
}
.message p {
  font-size: clamp(1.1rem, 4vw, 2.2rem);
  font-weight: 700; color: var(--white); line-height: 1.25;
}
.message .signoff {
  margin-top: .6rem;
  font-size: clamp(.9rem, 2.8vw, 1.5rem);
  font-weight: 700; color: rgba(255,255,255,.9);
}
.message .signoff .name { color: var(--white); }
.message .signoff .party {
  display: block; margin-top: .2rem;
  font-size: clamp(.72rem, 1.8vw, 1rem);
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* ── Valdagsmeddelande ───────────────────────────────────────── */
.done-msg {
  display: none; text-align: center; width: 100%;
  font-size: clamp(1.3rem, 5vw, 2.5rem);
  font-weight: 700; color: var(--gold);
  animation: pulse 1.5s ease infinite;
  padding: 0 var(--space-md);
}

/* ── Animationer ─────────────────────────────────────────────── */
@keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(20px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse    { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }

/* ── Responsiva breakpoints ──────────────────────────────────── */

/* Tiny phones (< 360px) – hide colons to gain space */
@media (max-width: 359px) {
  .sep { display: none; }
  .hero-eyebrow::before,
  .hero-eyebrow::after { display: none; }
}

/* Small phones (360–479px) */
@media (max-width: 479px) {
  .sep { display: none; }
  .counter { max-width: 100%; }
}

/* Medium phones (480–639px) – colons back */
@media (min-width: 480px) and (max-width: 639px) {
  .counter { max-width: 420px; }
}

/* Tablets and up (640px+) – increase inner padding slightly */
@media (min-width: 640px) {
  .content { padding-top: 1rem; gap: .9rem; }
}

/* Large screens (1024px+) – cap page width and center */
@media (min-width: 1024px) {
  .page { max-width: 900px; margin: 0 auto; }
  .content { padding-left: 2rem; padding-right: 2rem; }
}

/* Very large / 4K screens */
@media (min-width: 1600px) {
  :root { font-size: 18px; }
  .page { max-width: 1100px; }
}

/* ── Touch / pointer improvements ───────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets on touch devices */
  .news-title a  { padding: .2rem 0; display: inline-block; }
  .early-vote-link { padding: .4rem .9rem; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Laddningsstate för nyheter ─────────────────────────────── */
.news-title--loading { font-style: italic; opacity: .5; }