/*
 * Django-only chrome for the public website: the signed-in user chip,
 * flash messages and server-rendered form states. ctf7.css stays the
 * design file; everything here is built from its custom properties so
 * the default dark theme and [data-theme="light"] both follow.
 */

/* ---------- Signed-in user chip ---------- */
.user-nav { position: relative; display: inline-flex; align-items: center; }
.user-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem .6rem .25rem .25rem;
  background: rgba(var(--ink-rgb), .04);
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--text-2); font-weight: 500; font-size: .93rem; line-height: 1;
  transition: border-color .2s, color .2s, background .2s;
}
.user-chip:hover, .user-chip:focus-visible, .user-chip[aria-expanded="true"] {
  border-color: var(--line-orange); color: var(--heading);
  background: rgba(var(--ink-rgb), .07);
}
.user-chip .bi-chevron-down { font-size: .75rem; color: var(--muted); }
.user-chip-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  overflow: hidden; background: var(--surface-3); color: var(--orange);
  font-family: var(--font-mono); font-weight: 700; font-size: .85rem;
  line-height: 1; text-align: center;
}
.user-chip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-chip-greeting { white-space: nowrap; }
@media (max-width: 1199.98px) { .user-chip-greeting { display: none; } }

.user-nav .dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--line-2);
  --bs-dropdown-link-color: var(--text-2);
  --bs-dropdown-link-hover-color: var(--heading);
  --bs-dropdown-link-hover-bg: rgba(var(--ink-rgb), .05);
  --bs-dropdown-link-active-color: var(--heading);
  --bs-dropdown-link-active-bg: rgba(var(--ink-rgb), .08);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .4rem;
  min-width: 12rem;
}
.user-nav .dropdown-item { border-radius: 8px; display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; }
.user-nav .dropdown-menu form { margin: 0; }
.user-nav .dropdown-menu button.dropdown-item { width: 100%; text-align: left; background: none; border: 0; }

/* ---------- Flash messages ---------- */
/* The design header is sticky (in flow), so the bar sits directly under it. */
.site-messages { margin-top: 1rem; position: relative; z-index: 2; }
.site-messages .container { display: grid; gap: .6rem; }
.site-message {
  border: 1px solid var(--line-green); background: rgba(52, 245, 91, .05);
  border-left-width: 4px; border-radius: 14px;
  padding: .9rem 1.2rem; color: var(--text);
}
.site-message-success { border-color: var(--line-green); background: rgba(52, 245, 91, .06); border-left-color: var(--green); }
.site-message-info { border-color: var(--line-2); background: rgba(var(--ink-rgb), .03); border-left-color: var(--cyan); }
.site-message-warning { border-color: var(--line-orange); background: rgba(253, 154, 51, .06); border-left-color: var(--orange); }
.site-message-error { border-color: rgba(255, 93, 108, .35); background: rgba(255, 93, 108, .06); border-left-color: var(--red); }

/* ---------- Server-rendered form states ---------- */
.form-ctf .is-invalid,
.form-ctf .form-control.is-invalid,
.form-ctf .form-select.is-invalid { border-color: var(--red); }
.form-ctf .is-invalid:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(255, 93, 108, .16); }
.form-ctf .form-check-input.is-invalid { border-color: var(--red); }
.form-ctf .req { color: var(--orange); }
.form-ctf .form-text { color: var(--muted); font-size: .85rem; }
.invalid-feedback { color: var(--red); font-size: .85rem; margin-top: .35rem; }
.form-errors {
  border: 1px solid rgba(255, 93, 108, .35); border-left: 4px solid var(--red);
  background: rgba(255, 93, 108, .06); border-radius: var(--radius-sm);
  padding: .8rem 1rem; margin-bottom: 1.2rem; color: var(--text);
}
.form-errors ul { margin: 0; padding-left: 1.1rem; }
.form-errors p { margin: 0; }
.form-errors ul { margin-top: .35rem; }
.form-errors a { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.form-errors:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Multi-choice groups (CheckboxSelectMultiple / RadioSelect). Django puts
   the widget's class on the wrapper div as well as on every input, so the
   wrapper is reset from a 1em checkbox back into a grid of option rows. */
.form-ctf .choice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-ctf .choice-group > div.form-check-input {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: .55rem; width: auto; height: auto; margin: 0; padding: 0;
  float: none; vertical-align: baseline; border: 0; border-radius: 0;
  background: none; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.form-ctf .choice-group > div > div { min-width: 0; }
.form-ctf .choice-group label {
  display: flex; align-items: center; gap: .6rem; height: 100%; margin: 0;
  padding: .6rem .85rem; border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(var(--ink-rgb), .03); color: var(--text-2);
  font-size: .93rem; line-height: 1.3; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.form-ctf .choice-group label:hover { border-color: var(--line-orange); color: var(--heading); }
.form-ctf .choice-group label:has(input:checked) {
  border-color: var(--orange); background: rgba(253, 154, 51, .07); color: var(--heading);
}
.form-ctf .choice-group label:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(253, 154, 51, .14); }
.form-ctf .choice-group label .form-check-input { float: none; flex-shrink: 0; margin: 0; }
.form-ctf .choice-group label .form-check-input:focus { box-shadow: none; }
.form-ctf .choice-group > div.form-check-input.is-invalid label { border-color: rgba(255, 93, 108, .45); }
@media (max-width: 575.98px) {
  .form-ctf .choice-group > div.form-check-input { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
}

/* Event detail: the sidebar grid's gutter must not exceed the container's
   16px phone padding, and organizer-authored descriptions (long URLs,
   fixed-width images, embeds) must not widen the column. */
.event-body > [class*="col-"] { min-width: 0; }
.event-body .prose { overflow-wrap: anywhere; }
.event-body .prose img { max-width: 100%; height: auto; }
.event-body .prose iframe, .event-body .prose video { max-width: 100%; }

.newsletter-status { color: var(--text-2); }

.form-panel.form-sent .form-ctf { display: none; }
.form-panel.form-sent .form-success { display: block; }

.honeypot {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---------- Light theme adjustments ---------- */
[data-theme="light"] .user-chip { background: var(--surface); }
[data-theme="light"] .user-chip-avatar { background: var(--surface-3); }
[data-theme="light"] .site-message-success { background: rgba(22, 163, 74, .06); }
[data-theme="light"] .site-message-warning { background: rgba(232, 115, 12, .06); }
[data-theme="light"] .site-message-error,
[data-theme="light"] .form-errors { background: rgba(220, 38, 38, .05); border-color: rgba(220, 38, 38, .3); border-left-color: var(--red); }
[data-theme="light"] .form-ctf .choice-group label:has(input:checked) { background: rgba(232, 115, 12, .07); }
[data-theme="light"] .form-ctf .is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .14); }