@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   Design tokens — Topicus: yellow + black
   ============================================================ */

:root {
  --yellow:        #f8e800;
  --yellow-dark:   #e0d000;
  --black:         #0a0a0a;
  --black-soft:    #1a1a1a;
  --gray:          #3d3d3d;
  --gray-2:        #6b6b6b;
  --gray-3:        #aaaaaa;
  --white:         #ffffff;
  --border:        rgba(0,0,0,.13);
  --veg:           #1a7a30;
  --radius:        0.375rem;
  --shadow-card:   4px 4px 0 rgba(0,0,0,.85);
  --shadow-hover:  6px 6px 0 rgba(0,0,0,.85);
  --font-display:  'Syne', system-ui, sans-serif;
  --font-body:     'Barlow', system-ui, sans-serif;
  --font-mono:     'DM Mono', monospace;
}

/* ============================================================
   Base & Reset
   ============================================================ */

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

[hidden] { display: none !important; }

/* ============================================================
   Viewport fill — no scrollbar
   ============================================================ */

html, body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--yellow);
  color: var(--black);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* main fills all remaining height after the header */
main#app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Header
   ============================================================ */

header[role="banner"] {
  flex-shrink: 0;
  padding: 1.75rem 2rem 1.5rem;
  text-align: center;
  border-bottom: 3px solid var(--black);
}

header h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
}

header h1 span.dot {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  background: var(--black);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 0.05em 0.12em;
}

/* ============================================================
   Status states
   ============================================================ */

#loading-state,
#error-state,
#empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--black-soft);
  font-size: 1.0625rem;
  font-weight: 400;
}

#error-state {
  background: var(--black);
  color: var(--yellow);
  border: 3px solid var(--black);
  border-radius: var(--radius);
  max-width: 36rem;
  margin: auto;
  padding: 2rem 2.5rem;
  font-weight: 500;
  box-shadow: var(--shadow-card);
  flex: none;
}

#empty-state p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black-soft);
  opacity: 0.35;
}

/* ============================================================
   Spinner
   ============================================================ */

.spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid rgba(0,0,0,.15);
  border-top-color: var(--black);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Menu content — fills remaining height, centred
   ============================================================ */

#menu-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 2.5rem 2rem;
  gap: 1.5rem;
}

/* Side-by-side weeks on wide screens */
@media (min-width: 1100px) {
  #menu-content {
    flex-direction: row;
    align-items: stretch;
    gap: 2rem;
  }

  /* Current week gets more room */
  #current-week  { flex: 3; }
  #upcoming-week { flex: 2; }
}

/* ============================================================
   Week sections — grow to fill their column
   ============================================================ */

section[aria-labelledby] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Eyebrow label */
section h2 {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 0.25rem;
  opacity: 0.45;
}

/* Week date range (h3 used in upcoming-week) */
section h3:not(.day-menu h3) {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--black);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 1.05;
}

/* Current week: h2 doubles as the date-range heading */
#current-week h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  opacity: 1;
  margin-bottom: 1rem;
}

/* "Volgende week" label above the date */
#upcoming-week > h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  opacity: 0.45;
  margin-bottom: 0.25rem;
}

/* ============================================================
   Day columns — stretch to fill section height
   ============================================================ */

.week-columns {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

.week-col {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-height: 0;
}

/* ============================================================
   Day articles — stretch within their column
   ============================================================ */

.day-menu {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  border: 2px solid var(--black);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  animation: fadeUp 0.4s cubic-bezier(.22,.68,0,1.15) both;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.day-menu:hover {
  box-shadow: var(--shadow-hover);
  transform: translate(-1px, -1px);
}

/* Day name header — black band */
.day-menu h3 {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  background: var(--black);
  padding: 0.75rem 1.5rem 0.65rem;
  margin: 0;
  border-bottom: 2px solid var(--black);
}

/* Ghost placeholder — invisible filler to equalise column heights */
.day-menu--ghost {
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
}

.day-menu--ghost:hover {
  box-shadow: none;
  transform: none;
}

/* ============================================================
   Today highlight — yellow header, stronger border
   ============================================================ */

.day-menu.is-today {
  border-width: 3px;
  box-shadow: 5px 5px 0 var(--black);
}

.day-menu.is-today h3 {
  background: var(--yellow);
  color: var(--black);
  border-bottom-color: var(--black);
}

.day-menu.is-today:hover {
  box-shadow: 7px 7px 0 var(--black);
}

/* ============================================================
   Upcoming week — inverted: black cards
   ============================================================ */

#upcoming-week .day-menu {
  background: var(--black);
  border-color: var(--black);
}

#upcoming-week .day-menu h3 {
  background: var(--yellow-dark);
  color: var(--black);
  border-bottom-color: var(--black);
}

#upcoming-week .item-name {
  background: var(--black);
  color: var(--gray-3);
}

#upcoming-week .item-price {
  background: var(--black);
  color: var(--gray-2);
}

#upcoming-week .day-notes {
  border-top-color: rgba(255,255,255,.1);
}

#upcoming-week .day-notes li {
  color: var(--gray-2);
}

#upcoming-week .menu-item {
  background-image: radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);
}

/* ============================================================
   Menu items — fill card height, dotted leader
   ============================================================ */

.menu-items {
  flex: 1;
  list-style: none;
  padding: 1.125rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.menu-item {
  display: flex;
  align-items: baseline;
  padding: 0.3rem 0;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 5px 1px;
  background-position: center 65%;
  background-repeat: repeat-x;
}

.item-name {
  flex: 1;
  font-size: 1rem;
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  padding-right: 0.625rem;
  line-height: 1.4;
  min-width: 0;
}

.item-price {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--gray);
  background: var(--white);
  padding-left: 0.625rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   Day notes
   ============================================================ */

.day-notes {
  flex-shrink: 0;
  list-style: none;
  padding: 0.625rem 1.5rem 1rem;
  border-top: 1px dashed var(--border);
}

.day-notes li {
  font-size: 0.9rem;
  color: var(--gray-2);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  padding: 0.1rem 0;
}

/* ============================================================
   Staggered card reveal
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.week-col:nth-child(1) .day-menu:nth-child(1) { animation-delay: 0.04s; }
.week-col:nth-child(1) .day-menu:nth-child(2) { animation-delay: 0.10s; }
.week-col:nth-child(1) .day-menu:nth-child(3) { animation-delay: 0.17s; }
.week-col:nth-child(2) .day-menu:nth-child(1) { animation-delay: 0.24s; }
.week-col:nth-child(2) .day-menu:nth-child(2) { animation-delay: 0.31s; }

/* ============================================================
   Focus visibility
   ============================================================ */

:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Mobile (< 700px) — allow scroll, single column
   ============================================================ */

@media (max-width: 699px) {
  html, body { height: auto; overflow: auto; }

  body { overflow: visible; }

  header[role="banner"] { padding: 1.5rem 1.25rem 1.25rem; }
  header h1 { font-size: 2.25rem; }

  #menu-content {
    padding: 1.25rem 1rem 3rem;
    flex: none;
  }

  .week-columns { grid-template-columns: 1fr; }

  .day-menu { flex: none; }

  .menu-items { flex: none; }
}