@font-face { font-family: "Rubik"; font-weight: 400; font-display: swap; src: url("/fonts/rubik-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-weight: 500; font-display: swap; src: url("/fonts/rubik-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-weight: 600; font-display: swap; src: url("/fonts/rubik-latin-600-normal.woff2") format("woff2"); }

/* ADP-paletten fra adp-as.dk */
:root {
  --primary-50:  hsl(206.7 60% 97.1%);
  --primary-100: hsl(207 62.5% 93.7%);
  --primary-200: hsl(204 63.4% 86.1%);
  --primary-300: hsl(202.6 63.9% 73.9%);
  --primary-500: hsl(201.9 58.7% 48.4%);
  --primary-800: hsl(203.6 60% 27.5%);
  --primary-900: hsl(205.2 53.4% 22.7%);
  --primary-950: hsl(206.5 53.1% 15.9%);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: Rubik, system-ui, "Segoe UI", Roboto, Arial, sans-serif; color: var(--primary-950); background: #fff; line-height: 1.5; }
p { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; max-width: 1536px; margin: 0 auto; padding: 0 1rem 5rem; }
@media (min-width: 1024px) { .container { padding-inline: 2rem; } }

.hero { padding: 2.5rem 0 2rem; }
.hero__headline { margin: 0; display: inline-block; background: var(--primary-100); border-radius: 1.5rem; padding: .5rem 1.5rem; font-size: 1.5rem; font-weight: 600; text-transform: uppercase; line-height: 2.5rem; }
@media (min-width: 768px) { .hero__headline { padding: 1.25rem 2.5rem; font-size: 1.875rem; } }

.port-call-list { display: flex; flex-direction: column; gap: 2rem; }
.port-call-list__header { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; }
@media (min-width: 640px) { .port-call-list__header { flex-direction: row; } }

.port-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.port-buttons button {
  font: inherit; font-weight: 500; cursor: pointer;
  padding: .75rem 1.75rem; border-radius: 1.5rem;
  border: 1px solid var(--primary-200); background: #fff; color: var(--primary-200);
  transition: background-color .3s, color .3s, border-color .3s;
}
.port-buttons button:hover { background: var(--primary-900); border-color: var(--primary-900); color: #fff; }
.port-buttons button[aria-selected="true"] { background: var(--primary-900); border-color: var(--primary-900); color: #fff; }
.port-buttons button:focus-visible { outline: 3px solid var(--primary-500); outline-offset: 2px; }

.updated { display: flex; gap: 1rem; font-size: .75rem; font-variant-numeric: tabular-nums; }
.updated__label { font-weight: 600; }
.updated.is-stale { color: #b45309; }

.notice { padding: .75rem 1rem; border-radius: .75rem; background: #fdf3e7; color: #7a3d0a; }

.spinner-wrap { display: flex; justify-content: center; padding: 2rem 0; }
.spinner { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 3px solid var(--primary-100); border-top-color: var(--primary-500); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* Tabel som på originalen: zebra-rækker med runde hjørner og lyse kolonneskel */
.calls { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.calls th { text-align: left; font-weight: 600; padding: 1rem 2.5rem 1.25rem; white-space: nowrap; }
.calls td { padding: 1rem 2.5rem; }
.calls .c { text-align: center; }
.calls .r { text-align: right; }
.calls td + td { border-left: 1px solid var(--primary-200); }
.calls tbody tr:nth-child(odd) td { background: var(--primary-50); }
.calls tbody tr td:first-child { border-radius: .5rem 0 0 .5rem; }
.calls tbody tr td:last-child { border-radius: 0 .5rem .5rem 0; }

@media (max-width: 1279px) {
  .calls th, .calls td { padding-inline: 1rem; }
}

/* Mobil: hver række bliver et kort med labels */
@media (max-width: 767px) {
  .calls thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .calls, .calls tbody, .calls tr, .calls td { display: block; }
  .calls tbody tr { border-radius: .75rem; padding: .75rem 1rem; margin-bottom: .5rem; }
  .calls tbody tr:nth-child(odd) { background: var(--primary-50); }
  .calls td, .calls td + td { border: 0; padding: .15rem 0; text-align: left !important; background: none !important; display: flex; justify-content: space-between; gap: 1rem; }
  .calls td::before { content: attr(data-label); font-weight: 600; }
  .calls td:first-child { font-weight: 600; font-size: 1.05rem; padding-bottom: .4rem; }
  .calls td:first-child::before { content: none; }
}

@media (max-width: 480px) {
  .port-buttons { flex-wrap: nowrap; width: 100%; }
  .port-buttons button { flex: 1; padding-inline: .5rem; }
}