/* MondoKids styles on top of Bootstrap. */
body {
  min-height: 100vh;
}

/* Parent pages: the MondoKids brand (docs/brand/style-tile.html), scoped to
   body.mk-public so the admin keeps plain Bootstrap. Accent colours (sky,
   marigold, coral) are never used for text: they fail AA contrast. */
.mk-public {
  --mk-ink: #2b1d24;
  --mk-plum: #5b2a4a;
  --mk-plum-700: #4a2140;
  --mk-muted: #6b5560;
  --mk-moss: #4d6b3c;
  --mk-linen: #fffaf0;
  --mk-butter: #fbefc9;
  --mk-plum-50: #f6eef3;
  --mk-line: #e9dfcf;
  --mk-line-strong: #8f7a84;
  --mk-sky: #5fa8d3;
  --mk-marigold: #e8a33d;
  --mk-coral: #e0674b;
  --mk-focus: 0 0 0 3px var(--mk-linen), 0 0 0 6px var(--mk-plum);

  --bs-body-font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--mk-ink);
  --bs-body-color-rgb: 43, 29, 36;
  --bs-body-bg: var(--mk-linen);
  --bs-body-bg-rgb: 255, 250, 240;
  --bs-emphasis-color: var(--mk-ink);
  --bs-secondary-color: var(--mk-muted);
  --bs-secondary-color-rgb: 107, 85, 96;
  --bs-primary: var(--mk-plum);
  --bs-primary-rgb: 91, 42, 74;
  --bs-link-color: var(--mk-plum);
  --bs-link-color-rgb: 91, 42, 74;
  --bs-link-hover-color: var(--mk-plum-700);
  --bs-link-hover-color-rgb: 74, 33, 64;
  --bs-border-color: var(--mk-line);
  --bs-border-color-translucent: var(--mk-line);
  --bs-border-radius: 14px;
  --bs-border-radius-lg: 20px;
  --bs-focus-ring-color: rgba(91, 42, 74, .9);
  background: var(--mk-linen);
  color: var(--mk-ink);
  font-feature-settings: "kern";
}
.mk-public h1, .mk-public h2, .mk-public h3, .mk-public .display-6 {
  font-weight: 750;
  letter-spacing: -.01em;
  color: var(--mk-ink);
}
.mk-public a { text-underline-offset: .18em; }

/* Focus: one visible ring on every control. */
.mk-public a:focus-visible,
.mk-public button:focus-visible,
.mk-public .btn:focus-visible,
.mk-public input:focus-visible,
.mk-public select:focus-visible,
.mk-public textarea:focus-visible {
  outline: none;
  box-shadow: var(--mk-focus);
}

/* Header and footer. */
.mk-public .mk-logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.mk-public .mk-logo img { display: block; height: 36px; width: auto; }
.mk-public .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.mk-public footer { border-top-color: var(--mk-line) !important; color: var(--mk-muted); }
.mk-public footer a { display: inline-block; padding: 13px 0; }

/* Buttons: Bootstrap writes its blue into each button's own variables. */
.mk-public .btn {
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 14px;
  --bs-btn-focus-box-shadow: var(--mk-focus);
}
.mk-public .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mk-plum);
  --bs-btn-border-color: var(--mk-plum);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mk-plum-700);
  --bs-btn-hover-border-color: var(--mk-plum-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--mk-plum-700);
  --bs-btn-active-border-color: var(--mk-plum-700);
  --bs-btn-disabled-bg: var(--mk-plum);
  --bs-btn-disabled-border-color: var(--mk-plum);
}
.mk-public .btn-outline-primary,
.mk-public .btn-outline-secondary {
  --bs-btn-color: var(--mk-plum);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--mk-line-strong);
  --bs-btn-hover-color: var(--mk-plum-700);
  --bs-btn-hover-bg: var(--mk-plum-50);
  --bs-btn-hover-border-color: var(--mk-line-strong);
  --bs-btn-active-color: var(--mk-plum-700);
  --bs-btn-active-bg: var(--mk-plum-50);
  --bs-btn-active-border-color: var(--mk-plum);
}
.mk-public .btn-link {
  --bs-btn-color: var(--mk-plum);
  --bs-btn-hover-color: var(--mk-plum-700);
  --bs-btn-active-color: var(--mk-plum-700);
  font-weight: 600;
}

/* Chips: time windows and categories, at least 44 px tall. */
.mk-public .mk-chip {
  --bs-btn-padding-x: 16px;
  --bs-btn-font-size: .9375rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 999px;
  --bs-btn-color: var(--mk-ink);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--mk-line);
  --bs-btn-hover-color: var(--mk-ink);
  --bs-btn-hover-bg: var(--mk-plum-50);
  --bs-btn-hover-border-color: var(--mk-line-strong);
  --bs-btn-active-color: var(--mk-ink);
  --bs-btn-active-bg: var(--mk-butter);
  --bs-btn-active-border-color: #d9b75a;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-width: 1.5px;
}
.mk-public .mk-chip[aria-current="page"] {
  --bs-btn-color: var(--mk-ink);
  --bs-btn-bg: var(--mk-butter);
  --bs-btn-border-color: #d9b75a;
  --bs-btn-hover-color: var(--mk-ink);
  --bs-btn-hover-bg: var(--mk-butter);
  --bs-btn-hover-border-color: #d9b75a;
}

/* Links in running text (a web address on its own line, an organizer's
   phone or email): a 44 px hit area, wrapping like text. */
.mk-public .mk-tap { display: inline-block; min-height: 44px; padding: 8px 0; }

/* "See all" links: a 44 px hit area, still links. */
.mk-public .mk-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Cards. */
.mk-public .card {
  --bs-card-bg: #fff;
  --bs-card-border-color: var(--mk-line);
  --bs-card-border-radius: 20px;
  --bs-card-inner-border-radius: 19px;
}
.mk-public .card:has(.stretched-link:hover) { border-color: #d9c9b2; }
.mk-public .card-title a { color: var(--mk-ink); font-weight: 750; }
.mk-public .card-title a:hover { color: var(--mk-plum); }
.mk-public .card .badge.text-bg-light {
  background: var(--mk-plum-50) !important;
  color: var(--mk-ink) !important;
  border-color: transparent !important;
  font-weight: 600;
  border-radius: 999px;
}

/* Category, keyed by its code: a pill tinted with the category's colour,
   holding its pictogram (static/img/categories.svg) in a circle of the full
   colour, then its name in ink. Pictograms are ink on sky, marigold and
   coral and white on moss and plum (at least 3:1). Decorative: the name is
   always there, so colour and shape never carry the meaning alone. */
.mk-public .mk-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 3px 14px 3px 3px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--mk-ink) !important;
}
.mk-public .card .mk-tag { margin-bottom: 10px !important; }
.mk-public a.mk-tag { min-height: 44px; text-decoration: none; } /* the detail page: the whole pill is the link */
.mk-public a.mk-tag:hover { text-decoration: underline; }

.mk-public .mk-tag[data-category="RECURRING_ACTIVITY"] { background: #e3f0f8; }
.mk-public .mk-tag[data-category="EVENT"] { background: #fcecd2; }
.mk-public .mk-tag[data-category="WORKSHOP"] { background: #e6ede0; }
.mk-public .mk-tag[data-category="CAMP"] { background: #fbe1da; }
.mk-public .mk-tag[data-category="PLACE"] { background: #f1e4ec; }
.mk-public .mk-icon { display: none; flex: none; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; }
.mk-public .mk-chip .mk-icon { width: 26px; height: 26px; margin-left: -8px; }
.mk-public .mk-chip .mk-icon svg { width: 16px; height: 16px; }
.mk-public .mk-icon[data-category="RECURRING_ACTIVITY"] { display: inline-flex; background: var(--mk-sky); color: var(--mk-ink); }
.mk-public .mk-icon[data-category="EVENT"] { display: inline-flex; background: var(--mk-marigold); color: var(--mk-ink); }
.mk-public .mk-icon[data-category="WORKSHOP"] { display: inline-flex; background: var(--mk-moss); color: #fff; }
.mk-public .mk-icon[data-category="CAMP"] { display: inline-flex; background: var(--mk-coral); color: var(--mk-ink); }
.mk-public .mk-icon[data-category="PLACE"] { display: inline-flex; background: var(--mk-plum); color: #fff; }

/* A bar in the category's colour on the left edge of each card. */
.mk-public .card[data-category] { border-left-width: 6px; }
.mk-public .card[data-category="RECURRING_ACTIVITY"] { border-left-color: var(--mk-sky); }
.mk-public .card[data-category="EVENT"] { border-left-color: var(--mk-marigold); }
.mk-public .card[data-category="WORKSHOP"] { border-left-color: var(--mk-moss); }
.mk-public .card[data-category="CAMP"] { border-left-color: var(--mk-coral); }
.mk-public .card[data-category="PLACE"] { border-left-color: var(--mk-plum); }

/* Search form: 48 px controls with the brand's borders. */
.mk-public .form-select,
.mk-public .form-control {
  min-height: 48px;
  border: 1.5px solid var(--mk-line-strong);
  border-radius: 14px;
  background-color: #fff;
}
.mk-public .form-select:focus,
.mk-public .form-control:focus {
  border-color: var(--mk-plum);
  box-shadow: var(--mk-focus);
}
.mk-public form .btn { min-height: 48px; }
.mk-public .form-check-input:checked { background-color: var(--mk-plum); border-color: var(--mk-plum); }
.mk-public .form-check-input:focus { border-color: var(--mk-plum); box-shadow: var(--mk-focus); }
.mk-public .alert-light { --bs-alert-bg: #fff; --bs-alert-border-color: var(--mk-line); --bs-alert-color: var(--mk-ink); }