/* --- Google Font --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* --- Tailwind minimal utilities (kun det du bruger) --- */

/* Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-around { justify-content: space-around; }

/* Spacing */
.p-4 { padding: 1rem; }
.mb-8 { margin-bottom: 2rem; }

/* Sizing */
.w-full { width: 50%; }
.max-w-lg { max-width: 32rem; }
.min-h-screen { min-height: 100vh; }
.h-12 { height: 3rem; }

/* Position */
.absolute { position: absolute; }
.top-4 { top: 1rem; }
.right-4 { right: 1rem; }
.z-20 { z-index: 20; }

/* Background */
.bg-white { background-color: white; }
.bg-contain { background-size: contain; }
.bg-center { background-position: center; }
.bg-no-repeat { background-repeat: no-repeat; }
.bg-scroll { background-attachment: scroll; }

/* Borders & radius */
.rounded-xl { border-radius: 0.75rem; }

/* Shadows */
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),
              0 4px 6px -2px rgba(0,0,0,0.05);
}

/* Typography */
.text-gray-700 { color: #374151; }
.font-medium { font-weight: 500; }
.hover\:text-blue-600:hover { color: #2563eb; }
.transition-colors { transition: color 0.2s ease; }

/* --- Din oprindelige CSS --- */

body {
  font-family: 'Inter', sans-serif;
  transition: background-image 0.8s ease;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  touch-action: auto;
}

#update-scroll {
  position: fixed;
  left: 15px;
  width: 100px;
  max-height: 44px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  overflow: hidden;
  transition: all 0.5s ease;
  z-index: 10;
}

#update-scroll { top: 41px; }

/* iPad / mobil lodret – giv mere luft */
@media (max-width: 820px) {
  #update-scroll {
    top: 90px; /* eller 110px hvis du vil have ekstra luft */
  }
}

#cookie-scroll {
  position: fixed;
  bottom: 15px;
  left: 15px;
  width: 150px;
  max-height: 44px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
  overflow: hidden;
  transition: all 0.5s ease;
  z-index: 10;
}

#update-scroll.expanded {
  width: 320px;
  max-height: 300px;
  background-image: url('scroll-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#cookie-scroll.expanded {
  width: 320px;
  max-height: 300px;
  background-image: url('cookie-fight.png');
  background-size: 150px 100px;
  background-position: calc(100% - 24px) top;
  background-repeat: no-repeat;
}

.header {
  padding: 12px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

#scroll-body, #cookie-body {
  max-height: 240px;
  overflow-y: auto;
  padding: 0 12px 12px 12px;
  font-size: 0.9em;
  color: #444;
}

#scroll-body ul {
  margin: 0;
  padding: 0;
  list-style-type: disc;
  padding-left: 1em;
}

/* --- Historiewidget --- */
#history-widget {
  position: fixed;
  right: 15px;
  bottom: 15px;
  width: 160px;
  max-height: 44px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
  overflow: hidden;
  transition: all 0.5s ease;
  z-index: 10;
}

#history-widget.expanded {
  width: 300px;
  max-height: 360px;
  overflow: auto; /* Tillad scroll i expanded tilstand */
}

#history-body {
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Blød scroll på iPad */
  padding: 0 12px 12px 12px;
  font-size: 0.85em;
  color: #444;
}

#history-body .event-item {
  border-bottom: 1px solid #eee;
  padding: 8px 0;
}

#history-body .event-item:last-child {
  border-bottom: none;
}

#history-body .event-year {
  font-weight: 700;
  color: #7c5c3a;
  font-size: 0.8em;
  margin-bottom: 2px;
}
#history-body .event-text {
  line-height: 1.4;
}

#history-body .event-section-header {
  font-weight: 700;
  color: #555;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 0 4px 0;
  border-top: 1px solid #eee;
  margin-top: 4px;
}

#history-body .event-section-header:first-of-type {
  border-top: none;
  padding-top: 4px;
}

#history-body .loading,
#history-body .no-events {
  padding: 8px 0;
  color: #888;
  font-style: italic;
}