html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
  overflow-x: clip; /* prevent horizontal scrollbar from full-bleed calc(-50vw+50%) sections; 'clip' (unlike 'hidden') does not create a scroll container, so position:sticky works correctly */
  scrollbar-gutter: stable; /* always reserve vertical scrollbar space so content width — and therefore the navbar — never shifts between scrollable and non-scrollable pages */
}

body {
    background: ghostwhite;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-logo {
  height: 40px;
  width: auto;
}

.header-avatar {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f97316;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  margin-left: .25rem;
  transition: background .15s;
}

.header-avatar:hover {
  background: #ea580c;
  color: #fff;
}

.header-avatar:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* ── Public header — mobile menu ────────────────────────────────────── */

@media (max-width: 575.98px) {
  .navbar-collapse .navbar-nav {
    align-items: stretch !important;
  }

  .navbar-collapse .navbar-nav + .navbar-nav {
    border-top: 1px solid #dee2e6;
    padding-top: .375rem;
    margin-top: .375rem;
  }

  .navbar-collapse .nav-link {
    padding-top: .625rem;
    padding-bottom: .625rem;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ── Skip-to-content link ────────────────────────────────────────────── */

.skip-to-main:focus {
  position: fixed !important;
  top: 0;
  left: 0;
  width: auto !important;
  height: auto !important;
  padding: .5rem 1.125rem !important;
  background: #fff;
  color: #212529;
  font-weight: 600;
  font-size: .9375rem;
  z-index: 9999;
  margin: 0 !important;
  border: 2px solid #0d6efd !important;
  border-radius: 0 0 .375rem 0;
  clip: auto !important;
  white-space: normal !important;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ── Public Organizer Page (.op-*) ──────────────────────────────────────── */

.op-page {
  padding-bottom: 2.5rem;
}

/* Full-width banner (fills Bootstrap container, outside .op-page 760px constraint) */

.op-banner-full {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #e9ecef;
  display: block;
}

@media (min-width: 576px) {
  .op-banner-full {
    height: 320px;
  }
}

.op-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* op-page stacks after the banner; identity-group card handles the logo overlap */

.op-page.op-has-banner {
  position: relative;
  z-index: 1;
}

/* Centered inner content wrapper — used inside full-width section bands */

.op-inner {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* Identity group: centered card with max-width; white panel when banner present */

.op-identity-group {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.75rem;
}

.op-has-banner .op-identity-group {
  background: #fff;
  border-radius: .5rem;
  padding: 0 1.25rem 1.25rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .09);
  margin-bottom: 1.5rem;
}

/* No-banner fallback: full-width soft hero band */

.op-page:not(.op-has-banner) .op-identity-group {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: #f8f9fa;
  padding: 3rem 0 2rem;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 2rem;
}

.op-page:not(.op-has-banner) .op-identity {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0;
}

.op-page:not(.op-has-banner) .op-actions {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

/* Identity: logo + heading + tagline */

.op-identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.op-has-banner .op-identity {
  flex-direction: column;
  gap: .75rem;
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 576px) {
  .op-has-banner .op-identity {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    padding-top: 0;
  }
}

.op-logo-wrap {
  flex-shrink: 0;
}

.op-has-banner .op-logo-wrap {
  margin-top: -36px;
  margin-bottom: .5rem;
}

@media (min-width: 576px) {
  .op-has-banner .op-logo-wrap {
    margin-top: -48px;
    margin-bottom: 0;
  }
}

.op-logo {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #f8f9fa;
  display: block;
}

.op-has-banner .op-logo {
  width: 80px;
  height: 80px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

@media (min-width: 576px) {
  .op-has-banner .op-logo {
    width: 96px;
    height: 96px;
  }
}

.op-identity-text {
  flex: 1;
  min-width: 0;
  padding-top: .25rem;
}

.op-has-banner .op-identity-text {
  padding-top: 0;
}

@media (min-width: 576px) {
  .op-has-banner .op-identity-text {
    padding-top: .5rem;
  }
}

.op-heading {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25rem;
  word-break: break-word;
}

@media (min-width: 576px) {
  .op-heading {
    font-size: 2.25rem;
  }
}

.op-tagline {
  font-size: 1rem;
  color: #6c757d;
  margin-bottom: 0;
  line-height: 1.5;
}

/* Link / CTA buttons */

.op-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 2rem;
}

.op-has-banner .op-actions {
  margin-bottom: 0;
  margin-top: .25rem;
}

@media (min-width: 576px) {
  .op-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.op-link-btn {
  display: block;
  padding: .5rem 1.375rem;
  border: 1.5px solid #343a40;
  border-radius: 2rem;
  color: #212529;
  background-color: transparent;
  font-size: .9375rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
  transition: background-color .15s, color .15s;
}

.op-link-btn:hover {
  background-color: #212529;
  color: #fff;
  text-decoration: none;
}

.op-link-btn:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* Content sections */

.op-sections {
  margin-bottom: 1.5rem;
}

.op-section {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.op-section .op-inner {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.op-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .625rem;
}

.op-section-body {
  line-height: 1.75;
  margin-bottom: 0;
}

/* Section variant bands — horizontal page blocks */

.op-section--light {
  background: #ffffff;
}

.op-section--accent {
  background: #dbeafe;
}

.op-section--dark {
  background: #212529;
  color: #fff;
}

.op-section--dark .op-section-title {
  color: #fff;
}

.op-section--dark .op-section-body {
  color: #dee2e6;
}

.op-section--soft-blue {
  background: #eff6ff;
}

.op-section--soft-warm {
  background: #fffbeb;
}

.op-section--soft-green {
  background: #f0fdf4;
}

/* Upcoming events */

.op-events {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #dee2e6;
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.op-events-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .875rem;
}

.op-event-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 0;
}

.op-event-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.op-event-date-badge {
  flex: 0 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  background: #f1f3f5;
  border-radius: .375rem;
  text-align: center;
  padding: .375rem .25rem;
  line-height: 1;
}

.op-event-date-month {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6c757d;
  margin-bottom: .1875rem;
}

.op-event-date-day {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  color: #212529;
  line-height: 1;
}

.op-event-content {
  flex: 1;
  min-width: 0;
  padding-top: .375rem;
}

.op-event-title {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: #212529;
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: .375rem;
}

.op-event-title:hover {
  color: #212529;
  text-decoration: underline;
}

.op-event-title:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

.op-event-meta {
  font-size: .8125rem;
  color: #6c757d;
  margin-bottom: 0;
  line-height: 1.4;
}

/* Contact */

.op-contact {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #dee2e6;
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.op-contact-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .875rem;
}

.op-contact address {
  font-style: normal;
}

.op-contact-line {
  margin-bottom: .375rem;
  line-height: 1.5;
}

.op-contact-line:last-child {
  margin-bottom: 0;
}

.op-contact-link {
  color: #212529;
  text-decoration: none;
}

.op-contact-link:hover {
  text-decoration: underline;
}

.op-contact-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Footer note */

.op-footer {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  border-top: 1px solid #dee2e6;
  padding-top: 1.5rem;
}

.op-footer-note {
  font-size: .8125rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0;
}
/* ── Admin image preview ─────────────────────────────────────── */
.admin-preview-logo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  display: block;
}

.admin-preview-banner {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: .375rem;
  border: 1px solid #dee2e6;
  display: block;
  margin-top: .25rem;
}
/* ── Focal point preview frame ───────────────────────────────────── */
.media-focal-frame {
  position: relative;
  overflow: hidden;
  border-radius: .375rem;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  cursor: crosshair;
  display: block;
  margin-bottom: .5rem;
}

.media-focal-frame--banner {
  aspect-ratio: 16 / 5;
  width: 100%;
}

.media-focal-frame--logo {
  aspect-ratio: 1 / 1;
  width: 120px;
  border-radius: 50%;
}

.media-focal-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

.media-focal-marker {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55), 0 1px 6px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.07s ease, top 0.07s ease;
}

.media-focal-marker::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)) 50% 50% / 60% 1.5px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)) 50% 50% / 1.5px 60% no-repeat;
}

.media-focal-marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
}

@keyframes focalPulse {
  0%   { transform: translate(-50%, -50%) scale(1); }
  40%  { transform: translate(-50%, -50%) scale(1.3); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.media-focal-marker--pulse {
  animation: focalPulse 0.22s ease-out;
}

/* ── Public Event Page (.ep-*) ──────────────────────────────────────── */

.ep-page {
  padding-bottom: 2.5rem;
}

.ep-page.ep-has-banner {
  position: relative;
  z-index: 1;
}

/* Full-width banner */

.ep-banner-full {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #e9ecef;
  display: block;
}

@media (min-width: 576px) {
  .ep-banner-full {
    height: 320px;
  }
}

.ep-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Header group: white card when banner present; full-width hero when no banner */

.ep-header-group {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1.75rem;
}

.ep-has-banner .ep-header-group {
  background: #fff;
  border-radius: .5rem;
  padding: 0 1.25rem 1.25rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .09);
  margin-bottom: 1.5rem;
}

/* No-banner: contained gradient hero card */

.ep-page:not(.ep-has-banner) .ep-header-group {
  background: linear-gradient(135deg, #f3f6fa 0%, #eef3f8 100%);
  border: 1px solid #d9e2ec;
  border-radius: .75rem;
  margin-top: 1rem;
  padding: 2rem 1.5rem 1.75rem;
  margin-bottom: 2rem;
}

.ep-page:not(.ep-has-banner) .ep-identity {
  padding-top: 0;
}

.ep-page:not(.ep-has-banner) .ep-actions {
  margin-top: 1.25rem;
}

/* No-banner hero: the soft gradient background (#f3f6fa→#eef3f8) drops the countdown green and
   muted #6c757d text below WCAG AA (4.5:1) — measured 4.06:1 and 4.20:1 worst case. Darken these
   text colors in the no-banner scope only; banner events keep their colors on the white card,
   where they already pass. WCAG 2.1 SC 1.4.3 (PublicEventNoBannerContrastFix-1). */
.ep-page:not(.ep-has-banner) .ep-meta-countdown {
  color: #157347;
}

.ep-page:not(.ep-has-banner) .ep-organizer,
.ep-page:not(.ep-has-banner) .ep-meta-secondary,
.ep-page:not(.ep-has-banner) .ep-status-msg,
.ep-page:not(.ep-has-banner) .ep-action-note {
  color: #5c636a;
}

/* Identity: logo + title + organizer byline */

.ep-identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.ep-has-banner .ep-identity {
  flex-direction: column;
  gap: .75rem;
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 576px) {
  .ep-has-banner .ep-identity {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    padding-top: 0;
  }
}

/* Organizer logo */

.ep-logo-wrap {
  flex-shrink: 0;
}

.ep-has-banner .ep-logo-wrap {
  margin-top: -36px;
  margin-bottom: .5rem;
}

@media (min-width: 576px) {
  .ep-has-banner .ep-logo-wrap {
    margin-top: -48px;
    margin-bottom: 0;
  }
}

.ep-logo {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #f8f9fa;
  display: block;
}

.ep-has-banner .ep-logo {
  width: 80px;
  height: 80px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

@media (min-width: 576px) {
  .ep-has-banner .ep-logo {
    width: 96px;
    height: 96px;
  }
}

/* Header text: title + byline */

.ep-header-text {
  flex: 1;
  min-width: 0;
  padding-top: .25rem;
}

.ep-has-banner .ep-header-text {
  padding-top: 0;
}

@media (min-width: 576px) {
  .ep-has-banner .ep-header-text {
    padding-top: .5rem;
  }
}

.ep-status-badge {
  display: inline-block;
  margin-bottom: .375rem;
}

.ep-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25rem;
  word-break: break-word;
}

@media (min-width: 576px) {
  .ep-title {
    font-size: 2.25rem;
  }
}

.ep-organizer {
  font-size: .9375rem;
  color: #6c757d;
  margin-bottom: 0;
  line-height: 1.5;
}

.ep-organizer-link {
  color: #212529;
  font-weight: 500;
  text-decoration: none;
}

.ep-organizer-link:hover {
  text-decoration: underline;
}

.ep-organizer-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Meta rows: date/time prominent; timezone, location, type muted below */

.ep-meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-top: .875rem;
  margin-bottom: .875rem;
}

.ep-meta-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .4rem;
  font-size: .9375rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.5;
}

.ep-meta-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .4rem;
  font-size: .875rem;
  color: #6c757d;
  line-height: 1.5;
}

.ep-meta-sep {
  color: #adb5bd;
  user-select: none;
}

.ep-meta-type {
  font-style: italic;
}

/* Upcoming-event countdown line: between the date row and the location/category row.
   Bootstrap success green (#198754) — more visible than the muted secondary row, a
   positive upcoming-event signal. Semibold (600) to match the date row's emphasis.
   Informational only — not a status/badge. */
.ep-meta-countdown {
  font-size: .9375rem;
  font-weight: 600;
  color: #198754;
  line-height: 1.5;
}

/* Action buttons */

.ep-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}

.ep-status-msg {
  width: 100%;
  font-size: .9375rem;
  color: #6c757d;
  margin-bottom: .25rem;
}

/* Explanatory note shown in the action area when a Register/Donate button is hidden because its
   time window is not open. Small muted line — neutral, not an alert; secondary to lifecycle notices. */
.ep-action-note {
  width: 100%;
  font-size: .875rem;
  color: #6c757d;
  margin-top: .25rem;
  margin-bottom: 0;
}

/* Completed-event informational notice — replaces the muted .ep-status-msg for Status=Completed.
   Soft-yellow band draws attention more than the prior soft-blue; blue text and icon keep the
   notice reading as informational, not as an error or validation warning. */
.ep-completed-notice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  margin-bottom: .75rem;
  background-color: #fff8db;
  border: 1px solid #f3d36b;
  border-radius: .5rem;
  color: #0d3b8f;
}

.ep-completed-notice-icon {
  font-size: 1.25rem;
  color: #2563eb;
  flex-shrink: 0;
  line-height: 1;
}

.ep-completed-notice-text {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: #0d3b8f;
}

.ep-actions .btn {
  padding: .625rem 1.25rem;
  font-size: 1rem;
}

/* Content body */

.ep-body {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Public note — organizer-controlled short visitor message rendered near the top of the body.
   Calm neutral informational container: soft light-blue tint + border, no status colors, no icon,
   no title. Visible but intentionally secondary to the hero's Completed/Cancelled lifecycle notices.
   Negative side margins cancel .ep-body's 1rem inset so the card background aligns with the hero
   card edge; the 1.25rem horizontal padding matches the hero header-group's left padding so the
   text starts on the same column as the hero title/meta. */
.ep-public-note {
  margin-top: 1.25rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 1rem 1.25rem;
  background-color: #f4f8fc;
  border: 1px solid #d6e3f0;
  border-radius: .5rem;
}

.ep-public-note-text {
  margin-bottom: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: #344054;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Facts section — groups the core event facts (short description, About, and the schedule/location/
   capacity details). Rendered as a full-width band using the same full-bleed technique and Soft Blue
   background (#eff6ff) as the page-builder ".ep-section--soft-blue" option, rather than another white
   card — this reduces card repetition (hero/notice/organizer) and gives the schedule/where-when more
   presence as a section of the page. Class name retained from FactsCardImplementation-1. */
.ep-facts-card {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: #eff6ff;
}

/* Card owns the outer top/bottom padding — drop the leading/trailing subsection padding so it does
   not double against the card edge. First child may be short description, About, or the details
   section (all conditional except details, which is always last). Inter-subsection rhythm and the
   .ep-short-desc/.ep-about dividers are unchanged. */
.ep-facts-card > :first-child {
  padding-top: 0;
}

.ep-facts-card > :last-child {
  padding-bottom: 0;
}

/* About / description */

.ep-about {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #dee2e6;
}

.ep-section-heading {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .625rem;
}

.ep-section-body {
  line-height: 1.75;
  margin-bottom: 0;
}

/* Details grid: schedule, location, capacity */

.ep-details-section {
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}

.ep-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
}

@media (min-width: 576px) {
  .ep-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.ep-details-label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: #212529;
  margin-bottom: .625rem;
}

.ep-address {
  font-style: normal;
  line-height: 1.65;
  color: #495057;
}

/* Schedule block — improved hierarchy and scannability */

.ep-schedule-heading {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: #212529;
  margin-bottom: .625rem;
}

.ep-details-icon {
  font-size: .875rem;
  flex-shrink: 0;
  opacity: .7;
}

.ep-schedule-day-group + .ep-schedule-day-group {
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px solid #e9ecef;
}

.ep-schedule-date {
  font-size: 1rem;
  font-weight: 700;
  color: #343a40;
  margin-bottom: .375rem;
  line-height: 1.4;
}

.ep-schedule-sessions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ep-schedule-session {
  display: flex;
  flex-direction: column;
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.ep-schedule-session + .ep-schedule-session {
  border-top: 1px solid #f1f3f5;
}

.ep-session-title {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.4;
}

.ep-session-time {
  font-size: .9375rem;
  color: #5c6672;
  line-height: 1.4;
  margin-bottom: 0;
}

.ep-schedule-tz {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: #6c757d;
  margin-top: .75rem;
  padding-top: .625rem;
  border-top: 1px solid #e9ecef;
  margin-bottom: 0;
}

.ep-schedule-tz .fa-clock {
  color: #adb5bd;
  font-size: .75rem;
  flex-shrink: 0;
}

/* Short description: intro copy above About */

.ep-short-desc {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #dee2e6;
}

/* Event page content sections */

.ep-sections {
  margin-bottom: 1.5rem;
}

.ep-section {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.ep-section .ep-inner {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.ep-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .625rem;
}

.ep-section--default {
  /* white background; border from .ep-section */
}

.ep-section--light {
  background: #f8f9fa;
  border-bottom-color: #e3e6ea;
}

.ep-section--accent {
  background: #eef4fb;
  border-bottom: none;
}


.ep-section--dark {
  background: #212529;
  color: #fff;
  border-bottom: none;
}

.ep-section--dark .ep-inner {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.ep-section--dark .ep-section-title {
  color: #fff;
}

.ep-section--dark .ep-section-body {
  color: #dee2e6;
}

.ep-section--soft-blue {
  background: #eff6ff;
}

.ep-section--soft-warm {
  background: #fffbeb;
}

.ep-section--soft-green {
  background: #f0fdf4;
}

/* Footer note */

.ep-footer {
  margin-top: 2rem;
  border-top: 1px solid #dee2e6;
  padding-top: 1.5rem;
  margin-bottom: 1rem;
}

.ep-footer-note {
  font-size: .8125rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── Event detail share buttons ─────────────────────────────────────── */

.ep-share-actions {
  display: flex;
  justify-content: flex-end;
  gap: .375rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.ep-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #adb5bd;
  color: #6c757d;
  background: transparent;
  text-decoration: none;
  font-size: .875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, color .15s, background-color .15s;
}

.ep-share-button:hover {
  border-color: #343a40;
  color: #212529;
  background: #f8f9fa;
  text-decoration: none;
}

.ep-share-button:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* ── Event detail organizer card ─────────────────────────────────────── */

/* Negative side margins cancel .ep-body's 1rem inset so the card background aligns with the hero
   card edge; the 1.25rem horizontal padding matches the hero header-group's left padding so the
   organizer label/content starts on the same column as the hero title/meta. */
.ep-organizer-section {
  margin-top: 2.5rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: .75rem;
}

.ep-organizer-section-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .625rem;
}

.ep-organizer-section-link {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: .9375rem;
  font-weight: 600;
  color: #212529;
  text-decoration: none;
}

.ep-organizer-section-link:hover {
  color: #0d6efd;
}

.ep-organizer-section-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

.ep-organizer-section-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #dee2e6;
  flex-shrink: 0;
}

.ep-organizer-section-arrow {
  flex-shrink: 0;
  font-size: .75rem;
  color: #adb5bd;
}

/* Action page (register / donate) event/organizer context line */

.action-page-context {
  font-size: 1.0625rem;
  color: #495057;
  margin-bottom: 1.5rem;
}

/* ── Public banner family ─────────────────────────────────────────── */

.public-banner {
  width: 100%;
  overflow: hidden;
  background-color: #e9ecef;
  display: block;
}

.public-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.public-banner--hero {
  height: 220px;
}

@media (min-width: 576px) {
  .public-banner--hero {
    height: 320px;
  }
}

.public-banner--action {
  height: 140px;
  margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
  .public-banner--action {
    height: 200px;
  }
}

/* Action page (register / donate) compact organizer banner */

.action-page-banner {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: .375rem;
  margin-bottom: 1.25rem;
}

/* ── Homepage (.hp-*) ─────────────────────────────────────────────── */

.hp-hero {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 3rem;
  padding-bottom: 2.5rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%);
  border-bottom: 1px solid #dbe5f1;
  margin-bottom: 2.5rem;
}

.hp-hero-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .5rem;
}

@media (min-width: 576px) {
  .hp-hero-title {
    font-size: 2.75rem;
  }
}

.hp-hero-lead {
  font-size: 1.0625rem;
  color: #6c757d;
  margin-bottom: 0;
  max-width: 52ch;
}

.hp-section-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: 0;
}

.hp-event-list {
  border-top: 1px solid #dee2e6;
}

.hp-org-cta {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: #f8fbff;
  border-top: 1px solid #dbe5f1;
  margin-top: 2.5rem;
}

/* ── Public page full-bleed section system ─────────────────────────────── */

/* Breaks out of the Bootstrap container so section backgrounds reach the
   viewport edges, while content re-aligns with the container via the
   inverse calc. 50% refers to the containing block (<main>) width, not
   the element's own width, so the math works at every breakpoint. */
.public-page-intro {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 2.5rem;
  padding-bottom: 2rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%);
  border-bottom: 1px solid #dbe5f1;
  margin-bottom: 0;
}

.public-page-intro h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: #212529;
}

@media (min-width: 576px) {
  .public-page-intro h1 {
    font-size: 2.25rem;
  }
}

.public-page-intro p {
  color: #6c757d;
  font-size: 1rem;
  margin-bottom: 0;
  max-width: 60ch;
}

.public-page-content {
  padding-top: 2rem;
}

/* Shared subtle surface for bordered form cards on public pages (matches the registration
   page's card treatment so public forms look consistent). Pair with Bootstrap `border rounded p-3`. */
.public-form-card {
  background-color: #fbfcfe;
}

/* ── Marketing homepage (MarketingHomeOrganizerPivot-1 / MarketingHomeVisualRefinement-1) ──
   Organizer-acquisition homepage. Reuses .hp-hero / .hp-org-cta full-width bands and
   .public-page-content; this block adds the section/card/tag/chip vocabulary plus a warm,
   scoped CTA accent (#b45309). The .btn-mk-* classes are scoped — they do NOT override
   Bootstrap's global .btn-primary, so other pages are unaffected. */

/* Scoped marketing CTA. Softer, welcoming primary: light-blue fill, navy border, near-black text
   (dark text on #cbe0fb ≈ 12:1, passes WCAG AA). Hover/focus fills navy with white text (~11:1).
   Scoped to .btn-mk-primary — does NOT touch Bootstrap's global .btn-primary. */
.btn-mk-primary {
  background-color: #cbe0fb;
  border-color: #1e3a5f;
  color: #111827;
}

.btn-mk-primary:hover,
.btn-mk-primary:focus {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}

.btn-mk-outline {
  background-color: transparent;
  border-color: #1e3a5f;
  color: #1e3a5f;
}

.btn-mk-outline:hover,
.btn-mk-outline:focus {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}

.btn-mk-primary:focus-visible,
.btn-mk-outline:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* Full-width section bands — the background defines chapter separation. Each band breaks out to
   the full viewport using the same calc technique as .hp-hero / .ep-section, then re-pads so its
   content aligns to the same centered container content edge as the hero. Bands sit flush;
   alternating tint/white surfaces mark each chapter (no rounded section cards). */
.mk-fullband {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  background: #fff;
}

.mk-fullband--tint {
  background: #f5f8fc;
}

/* Section heading: near-black content anchor + a short warm accent rule (the one orange touch). */
.mk-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
  margin-bottom: .875rem;
}

.mk-section-title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: .5rem;
  background: #b45309;
  border-radius: 2px;
}

/* Hero heading + reserved (CSS-only) visual panel */
.mk-hero-title {
  color: #111827;
}

.mk-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
  padding: 2.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
  box-shadow: 0 1px 10px rgba(30, 58, 95, .15);
}

/* Compact 3-stage lifecycle teaser inside the hero panel — vertical, icon-led, short labels,
   no numbers/paragraphs. Differs from the horizontal numbered "How it works" cards below.
   The node is a wrapper <span> (not the Font Awesome <i>), so flex centering is not overridden
   by Font Awesome's `.fa-solid { display: inline-block }`. */
.mk-lifecycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mk-lifecycle-step {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.mk-lifecycle-node {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
}

.mk-lifecycle-node i {
  font-size: 1.1rem;
  line-height: 1;
}

/* Connector line linking each node to the next (fills the flex gap). */
.mk-lifecycle-step:not(:last-child) .mk-lifecycle-node::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 1.5rem;
  background: rgba(255, 255, 255, .25);
}

.mk-lifecycle-label {
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  font-size: 1rem;
}

.mk-section-intro {
  max-width: 60ch;
  margin-bottom: 1.5rem;
}

.mk-attendee-onramp {
  font-size: .9375rem;
}

/* Audience categories as compact organization-type tiles (not filter chips). */
.mk-audience-tile {
  display: flex;
  align-items: center;
  gap: .65rem;
  height: 100%;
  background: #fff;
  border: 1px solid #e6edf4;
  border-radius: .625rem;
  padding: .8rem .9rem;
  font-size: .9375rem;
  line-height: 1.3;
  color: #344054;
}

.mk-audience-tile i {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  color: #1e3a5f;
  font-size: 1rem;
}

.mk-step {
  height: 100%;
}

.mk-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #e9eff7;
  color: #1e3a5f;
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: .875rem;
}

.mk-step-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: .25rem;
}

.mk-step-text {
  font-size: .9375rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0;
}

.mk-card {
  height: 100%;
  background: #fff;
  border: 1px solid #e6edf4;
  border-radius: .75rem;
  padding: 1.5rem;
}

.mk-card--soon {
  background: #fbfcfe;
}

.mk-card-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .625rem 0 .375rem;
}

/* Element+class selector (i.mk-card-icon) raises specificity above Font Awesome's
   `.fa-solid { display: inline-block }`, which loads after site.css and would otherwise win at
   equal specificity and disable the flex centering. line-height:1 prevents vertical glyph drift. */
i.mk-card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #eef2f7;
  color: #1e3a5f;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

.mk-card--soon .mk-card-icon {
  background: #f1f3f5;
  color: #9aa4b2;
}

.mk-card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #212529;
  margin: 0;
}

.mk-card-text {
  font-size: .9375rem;
  color: #495057;
  line-height: 1.6;
  margin-bottom: 0;
}

.mk-final-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: .25rem;
}

/* Final CTA: a calm light band (inherits .hp-org-cta's light background + top border) with extra
   padding for separation. Navy primary + navy-outline secondary keep button styling consistent
   with nav and hero. */
.mk-final-cta {
  margin-top: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.mk-final-text {
  color: #6c757d;
  max-width: 60ch;
}

.mk-tag {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .5rem;
  border-radius: 999px;
}

.mk-tag--now {
  background: #e7f5ec;
  color: #157347;
}

.mk-tag--early {
  background: #fff4e0;
  color: #9a6700;
}

.mk-tag--soon {
  background: #eef1f5;
  color: #5c636a;
}

/* ── Org page share buttons ──────────────────────────────────────────── */

.op-share-actions {
  display: flex;
  justify-content: flex-end;
  gap: .375rem;
  flex-wrap: wrap;
  margin-top: .75rem;
  padding-bottom: .25rem;
}

.op-page:not(.op-has-banner) .op-share-actions {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.op-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #adb5bd;
  color: #6c757d;
  background: transparent;
  text-decoration: none;
  font-size: .875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, color .15s, background-color .15s;
}

.op-share-button:hover {
  border-color: #343a40;
  color: #212529;
  background: #f8f9fa;
  text-decoration: none;
}

.op-share-button:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* ── Org page profile links (Connect section) ────────────────────────── */

.op-profile-links {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: .75rem;
}

.op-profile-links-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .875rem;
}

.op-profile-links-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

@media (min-width: 576px) {
  .op-profile-links-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.op-profile-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.375rem;
  border: 1.5px solid #343a40;
  border-radius: 2rem;
  color: #212529;
  background-color: transparent;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  transition: background-color .15s, color .15s;
}

.op-profile-link:hover {
  background-color: #212529;
  color: #fff;
  text-decoration: none;
}

.op-profile-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

.op-profile-link-icon {
  flex-shrink: 0;
  width: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Org page editor — sticky jump nav on desktop */

@media (min-width: 992px) {
  .org-page-editor-nav-sticky {
    position: sticky;
    top: 1rem;
  }
}

/* Org page editor — nav link default + active state */

.org-page-editor-nav a {
  color: #6c757d;
  transition: color 0.15s;
}

.org-page-editor-nav a.ope-nav-active {
  color: #212529;
  font-weight: 600;
}

@media (min-width: 992px) {
  .org-page-editor-nav a {
    padding-left: 0.5rem;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }
  .org-page-editor-nav a.ope-nav-active {
    border-left-color: #0d6efd;
  }
}

/* Org page editor — floating back to top button */

.org-page-editor-backtop {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6c757d;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  z-index: 1030;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  opacity: 0.75;
  transition: opacity 0.15s;
}

.org-page-editor-backtop:hover {
  opacity: 1;
  color: #fff;
}

/* ── OrgDesk Event Edit — horizontal section nav ────────────────────── */

.event-edit-section-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: .125rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: .375rem;
  margin-bottom: 1.25rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.event-edit-section-nav a {
  flex-shrink: 0;
  padding: .3125rem .75rem;
  font-size: .875rem;
  color: #6c757d;
  text-decoration: none;
  border-radius: .25rem;
  white-space: nowrap;
  transition: color .15s, background-color .15s;
}

.event-edit-section-nav a:hover {
  color: #212529;
  background-color: #f1f3f5;
}

.event-edit-section-nav a:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

.event-edit-section-nav a.event-edit-nav-active {
  color: #212529;
  font-weight: 600;
  background-color: #e8f0fe;
}

/* Push anchor targets below the sticky section nav */
#panel-publish,
#panel-event-details,
#panel-schedule,
#panel-location,
#panel-registration,
#panel-donations,
#panel-checkin,
#panel-internal {
  scroll-margin-top: 2.5rem;
}

/* OrgDesk Event Edit — floating back-to-top button */

.event-edit-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6c757d;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  z-index: 1030;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  opacity: 0.75;
  transition: opacity 0.15s;
}

.event-edit-back-to-top:hover {
  opacity: 1;
  color: #fff;
}

/* OrgDesk Event Edit — publish card subtle tint */

.event-edit-publish-card {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* ── Operational search control ──────────────────────────────────────── */

.operational-search {
  max-width: 720px;
}

/* ── Front Desk mobile polish ────────────────────────────────────────── */

.fd-card-registered {
  background-color: #f3f7f4;
}

.fd-selected {
  background-color: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.fd-selected:hover {
  background-color: #bfdbfe;
  color: #1e3a8a;
  border-color: #60a5fa;
}

.fd-page-dot {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background-color: #198754;
  flex-shrink: 0;
}

.fd-page-dot-closed {
  background-color: #6c757d;
}

.fd-actor-line {
  font-size: 0.75rem;
}

.fd-visitor-badge {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

@media (max-width: 767.98px) {
  .fd-event-card-row {
    flex-direction: column;
  }
  .fd-event-controls {
    align-items: flex-start !important;
    width: 100%;
    border-top: 1px solid #dee2e6;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
  }
  .fd-primary-btn {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}

/* ── Admin layout footer ─────────────────────────────────────────────── */

.admin-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
  color: #6c757d;
  padding: 1.75rem 0;
  font-size: .875rem;
}

/* ── Admin layout — back to top button ───────────────────────────────── */

.admin-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e2d40;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.125rem;
  line-height: 1;
  z-index: 1035;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, background .15s;
}

.admin-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.admin-back-to-top:hover {
  background: #111e2b;
  color: #fff;
}

/* ── Public site footer ───────────────────────────────────────────────── */

.site-footer {
  background-color: #282A35;
  color: #f8f9fa;
}

.site-footer-muted {
  color: rgba(255, 255, 255, .75);
  font-size: .9rem;
}

.site-footer-link {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}

.site-footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ── Event context sidebar navigation ────────────────────────────────── */

.event-sidebar {
  padding: .75rem 0;
}

@media (min-width: 768px) {
  .event-sidebar {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }
}

.event-sidebar-group-label {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #495057;
  padding: 0 .75rem;
  margin-top: 0;
  margin-bottom: .25rem;
}

.event-sidebar-group + .event-sidebar-group {
  margin-top: 1rem;
  border-top: 1px solid #e9ecef;
  padding-top: .5rem;
}

.event-sidebar-nav li {
  list-style: none;
}

.event-sidebar-nav a,
.event-sidebar-nav .event-sidebar-item--disabled {
  display: block;
  padding: .3125rem .75rem;
  font-size: .875rem;
  color: #495057;
  text-decoration: none;
  border-radius: .25rem;
  border-left: 3px solid transparent;
  transition: color .15s, background-color .15s;
}

.event-sidebar-nav a:hover {
  color: #212529;
  background-color: #f1f3f5;
  text-decoration: none;
}

.event-sidebar-nav a:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
  border-radius: .25rem;
}

.event-sidebar-nav a[aria-current="page"] {
  color: #212529;
  font-weight: 600;
  background-color: #e8f0fe;
  border-left-color: #0d6efd;
}

.event-sidebar-item--disabled {
  color: #adb5bd;
  cursor: default;
}

.event-sidebar-item--disabled-reason {
  display: block;
  font-size: .7rem;
  color: #adb5bd;
  padding: 0 .75rem .3125rem 1rem;
  line-height: 1.3;
}

.event-sidebar-sub-item a,
.event-sidebar-sub-item .event-sidebar-item--disabled {
  padding-left: 1.75rem;
  font-size: .8125rem;
}

.event-sidebar-escape {
  padding: .5rem .75rem;
  border-top: 1px solid #e9ecef;
  margin-top: .75rem;
}

.event-sidebar-escape a {
  font-size: .8125rem;
  color: #6c757d;
  text-decoration: none;
}

.event-sidebar-escape a:hover {
  color: #212529;
  text-decoration: underline;
}

/* Mobile typography and tap density polish */
@media (max-width: 767.98px) {
  .event-sidebar-nav a,
  .event-sidebar-nav .event-sidebar-item--disabled {
    padding-top: .8125rem;
    padding-bottom: .8125rem;
    font-size: 1rem;
    font-weight: 500;
  }

  .event-sidebar-nav a {
    color: #2f343b;
  }

  .event-sidebar-sub-item a,
  .event-sidebar-sub-item .event-sidebar-item--disabled {
    font-size: .9rem;
  }

  .event-sidebar-group-label {
    font-size: .875rem;
  }
}

/* Event Menu trigger button — mobile only (d-md-none keeps it off desktop) */
.event-menu-trigger {
  --bs-btn-color: #343a40;
  --bs-btn-border-color: #6c757d;
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-weight: 500;
}

/* Responsive column separator — md+: right border */
.event-sidebar-col {
  padding-bottom: 0;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .event-sidebar-col {
    border-right: 1px solid #dee2e6;
  }
}

/* ── Mobile identity-card tightening — event detail + organizer ──────── */

@media (max-width: 575.98px) {
  .ep-has-banner .ep-header-group {
    padding: 0 1rem 1rem;
  }

  .ep-has-banner .ep-logo-wrap {
    margin-top: -28px;
    margin-bottom: .25rem;
  }

  .ep-has-banner .ep-logo {
    width: 64px;
    height: 64px;
  }

  .ep-has-banner .ep-identity {
    gap: .5rem;
  }

  .ep-title {
    font-size: 1.5rem;
  }

  .ep-meta {
    margin-top: .625rem;
    margin-bottom: .625rem;
  }

  .ep-share-actions {
    margin-top: 1rem;
    gap: .375rem;
    justify-content: flex-end;
  }

  .op-has-banner .op-identity-group {
    padding: 0 1rem 1rem;
  }

  .op-has-banner .op-logo-wrap {
    margin-top: -28px;
    margin-bottom: .25rem;
  }

  .op-has-banner .op-logo {
    width: 64px;
    height: 64px;
  }

  .op-has-banner .op-identity {
    gap: .5rem;
  }

  .op-heading {
    font-size: 1.5rem;
  }

  .op-share-actions {
    margin-top: .5rem;
    gap: .375rem;
    justify-content: flex-end;
  }
}

.event-operator-bottom-nav {
  margin-top: 4.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed #ccc;
}

.event-operator-bottom-nav .btn {
  min-width: 4.5rem;
}