/* Dive Night page: on top of the csmuenchen.de theme snapshot (csm/style.css) */

.site-header .brand img { width: 150px; }

.night-hero { padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.6rem, 4vw, 2.6rem); }
.night-hero .page-title { margin-bottom: .5rem; }
.dive-subtitle { margin: .35rem 0 0; font-size: clamp(1.7rem, 4.5vw, 2.4rem); transform: rotate(-2deg); transform-origin: left; }

.nights { padding-top: clamp(2rem, 5vw, 3rem); }

/* one tab per night; plain links, the selected one is aria-current */
.night-tabs { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.8rem; }
.night-tabs a {
  display: grid; gap: .2rem; text-decoration: none; line-height: 1.15;
  padding: .7rem 1.1rem; background: var(--paper);
  border: 2px solid var(--navy); border-radius: 18px;
  transition: background .15s, transform .15s;
}
.night-tabs a:hover { background: var(--yellow-soft); transform: rotate(-2deg); }
.night-tabs a[aria-current="page"] { background: var(--yellow); box-shadow: var(--shadow-sm); }
.tab-date { font: 800 1.1rem/1.1 var(--display); }
.tab-count { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.night-tabs a[aria-current="page"] .tab-count { color: var(--navy); }

/* the selected night */
.night-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  background: var(--paper); border: 2.5px solid var(--navy); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: clamp(1.4rem, 4vw, 2.4rem);
}
.night-card h2 { font-size: clamp(2.1rem, 7vw, 3.2rem); font-weight: 800; margin-bottom: .6rem; }
.night-time { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 600; }
.night-time strong { font: 800 1.35rem/1 var(--display); }

/* the spot counter, a sticker like the main site's */
.spots {
  flex: none; display: grid; place-items: center; align-content: center; gap: .3rem;
  width: 132px; aspect-ratio: 1; margin: 0; padding: .6rem; text-align: center;
  background: var(--coral); border: 3px solid var(--navy); border-radius: 50%;
  box-shadow: var(--shadow-sm); transform: rotate(-8deg);
}
.spots strong { font: 800 1.9rem/1 var(--display); white-space: nowrap; }
.spots small { font: 700 .82rem/1.1 var(--body); }

.no-nights {
  margin: 0; padding: clamp(1.4rem, 4vw, 2.2rem);
  background: var(--mint-soft); border: 2.5px solid var(--navy); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  font: 700 clamp(1.2rem, 3vw, 1.45rem)/1.4 var(--display);
}

/* under the night card: the sign-up form, "You're in", full or closed */
.signup {
  margin-top: 1.6rem; padding: clamp(1.4rem, 4vw, 2.4rem);
  background: var(--paper); border: 2.5px solid var(--navy); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.signup h3 { font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 800; }
.signup > :last-child { margin-bottom: 0; }
.signup.signed-up { background: var(--mint-soft); }
.signup.full { background: var(--coral-soft); }
.signup.closed { background: var(--sky-soft); }
.signup .night-time { margin-bottom: 1em; }
.venue { white-space: pre-line; font-weight: 600; }

/* in "You're signed up": the personal link and Cancel */
.personal { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 2px dashed var(--navy); }
.personal-link { overflow-wrap: anywhere; font-weight: 600; }
.cancel-closed { font-weight: 600; }

/* above the panel: a released spot, or a cancellation */
.notice {
  margin: 1.6rem 0 0; padding: 1rem clamp(1.4rem, 4vw, 2.4rem);
  background: var(--yellow-soft); border: 2.5px solid var(--navy); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}

.signup-form { display: grid; gap: 1.2rem; margin-bottom: 1.2rem; }
.signup-form .btn { justify-self: start; font-size: 1.05rem; }
.field-error { margin: 0; font-size: .95rem; line-height: 1.4; font-weight: 700; color: #B42318; }
input[aria-invalid="true"] { border-color: #B42318; }
.choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-block; min-width: 4.5rem; padding: .6rem 1.1rem; text-align: center;
  background: #fff; border: 2px solid var(--navy); border-radius: 999px; font-weight: 700;
  transition: background .15s, transform .15s;
}
.choice:hover span { transform: rotate(-2deg); }
.choice input:checked + span { background: var(--yellow); box-shadow: var(--shadow-sm); }
.choice input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }
/* the honeypot: out of sight for people, still in the form for bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.privacy-note { font-size: .9rem; color: var(--ink-soft); }

@media (max-width: 480px) {
  .night-card { padding-right: 1rem; }
  .spots { width: 108px; }
  .spots strong { font-size: 1.55rem; }
  .spots small { font-size: .74rem; }
}

/* where Dive Night is: shown to everyone, apartment number only after signing up */
.venue-card {
  margin-top: 1.6rem; padding: clamp(1.4rem, 4vw, 2.4rem);
  background: var(--paper); border: 2.5px solid var(--navy); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.venue-card h3 { font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 800; }
.venue-card > :last-child { margin-bottom: 0; }
.venue-map img {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover;
  border: 2.5px solid var(--navy); border-radius: var(--radius);
}
.map-credit { margin: .3rem 0 .8rem; font-size: .72rem; text-align: right; }
.map-credit a { color: var(--ink-soft); }
.apartment-hint { font-size: .92rem; color: var(--ink-soft); }
.apartment { font: 800 1.25rem/1.2 var(--display); }