/* ==========================================================================
   Bluespace template
   Palette and type inspired by bluespacehighland.org
   ========================================================================== */

:root {
  --bsh-primary: #4054b2;     /* indigo - nav, headings accents, buttons */
  --bsh-primary-dark: #303f8c;
  --bsh-secondary: #eab84d;   /* warm gold - CTAs */
  --bsh-secondary-dark: #d6a23a;
  --bsh-accent: #3b94a5;      /* teal - secondary accent */
  --bsh-dark: #32373c;        /* footer background */
  --bsh-heading: #323648;
  --bsh-text: #5a5d6c;
  --bsh-bg: #ffffff;
  --bsh-bg-alt: #f4f6fb;
  --bsh-bg-blue: #e8f1fb;     /* pale blue - login/registration field card */
  --bsh-border: #e3e6ee;
  --bsh-radius: 10px;
  --bsh-font-heading: "Poppins", sans-serif;
  --bsh-font-body: "Quicksand", sans-serif;
  --bsh-max-width: 1180px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--bsh-font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--bsh-text);
  background: var(--bsh-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bsh-font-heading);
  color: var(--bsh-heading);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

a {
  color: var(--bsh-primary);
  text-decoration: none;
}

a:hover {
  color: var(--bsh-primary-dark);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

/*
 * Joomla's WebAuthn/Passkey login button injects a raw inline <svg> with no
 * width/height (only a viewBox), and the core plugin ships no CSS to size
 * it. Without this, it renders at the browser's default unsized-SVG box,
 * which looks oversized next to the rest of the login form.
 */
button[class*="plg_system_webauthn_login_button"] svg {
  width: 1.5rem;
  height: 1.5rem;
}

.bsh-container {
  max-width: var(--bsh-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Header / Nav ---------- */

.bsh-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bsh-bg);
  border-bottom: 1px solid var(--bsh-border);
}

.bsh-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.bsh-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1.1;
  margin-right: auto;
}

.bsh-brand:hover {
  text-decoration: none;
  color: var(--bsh-primary);
}

.bsh-logo {
  display: block;
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

.bsh-brand-text {
  font-family: var(--bsh-font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bsh-heading);
  display: flex;
  flex-direction: column;
}

.bsh-tagline {
  font-family: var(--bsh-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bsh-text);
}

.bsh-nav {
  display: flex;
}

.bsh-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}

.bsh-nav li {
  position: relative;
}

.bsh-nav a,
.bsh-nav .nav-header {
  display: block;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--bsh-heading);
  border-radius: 6px;
}

.bsh-nav a:hover,
.bsh-nav li.active > a,
.bsh-nav li.current > a,
.bsh-nav li.parent:hover > .nav-header {
  background: var(--bsh-bg-alt);
  color: var(--bsh-primary);
  text-decoration: none;
}

/* dropdown submenus, if used */
.bsh-nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  background: var(--bsh-bg);
  border: 1px solid var(--bsh-border);
  border-radius: 8px;
  padding: 0.4rem;
  min-width: 200px;
  box-shadow: 0 12px 24px rgba(50, 55, 72, 0.12);
}

.bsh-nav li:hover > ul {
  display: flex;
}

.bsh-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}

.bsh-nav-toggle span {
  display: block;
  height: 2px;
  background: var(--bsh-heading);
  border-radius: 2px;
}

.bsh-search input[type="text"],
.bsh-search input[type="search"] {
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--bsh-border);
  border-radius: 6px;
  font-family: var(--bsh-font-body);
}

/* ---------- Hero ---------- */

.bsh-hero {
  background: linear-gradient(135deg, var(--bsh-primary) 0%, var(--bsh-accent) 100%);
  color: #fff;
  padding: 3rem 1.5rem;
}

.bsh-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.bsh-hero-main {
  flex: 1 1 320px;
}

.bsh-hero-inner {
  max-width: 640px;
}

.bsh-hero h1 {
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  margin-bottom: 1rem;
}

.bsh-hero p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.75rem;
}

.bsh-hero-login {
  flex: 0 1 320px;
  max-width: 360px;
  width: 100%;
}

.bsh-hero-login .bsh-card {
  background: #fff;
  box-shadow: 0 16px 32px rgba(20, 30, 60, 0.18);
  margin: 0;
}

.bsh-hero-login .bsh-card-header {
  font-size: 1rem;
}

@media (max-width: 640px) {
  .bsh-hero-row {
    flex-direction: column;
    align-items: stretch;
  }

  .bsh-hero-login {
    max-width: none;
  }
}

.bsh-btn {
  display: inline-block;
  background: var(--bsh-secondary);
  color: var(--bsh-heading);
  font-family: var(--bsh-font-heading);
  font-weight: 600;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.bsh-btn:hover {
  background: var(--bsh-secondary-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

/* ---------- Feature cards ---------- */

.bsh-features {
  padding: 3.5rem 0;
  background: var(--bsh-bg-alt);
}

.bsh-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.bsh-feature-card {
  background: #fff;
  border: 1px solid var(--bsh-border);
  border-radius: var(--bsh-radius);
  padding: 1.75rem;
}

.bsh-feature-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
}

.bsh-feature-card .bsh-feature-icon {
  font-size: 1.5rem;
}

/* ---------- Headlines (full width) ---------- */

.bsh-headlines {
  width: 100%;
  padding: 3.5rem 0;
  background: var(--bsh-dark);
  color: rgba(255, 255, 255, 0.92);
}

.bsh-headlines h2,
.bsh-headlines h3 {
  color: #fff;
}

.bsh-headlines a {
  color: var(--bsh-secondary);
}

.bsh-headlines a:hover {
  color: var(--bsh-secondary-dark);
}

/* ---------- Main content / sidebar ---------- */

.bsh-main {
  padding: 3rem 1.5rem;
  display: block;
}

.bsh-has-sidebar {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.bsh-content h1,
.bsh-content h2 {
  color: var(--bsh-heading);
}

.bsh-sidebar > * + * {
  margin-top: 1.5rem;
}

.bsh-card {
  background: var(--bsh-bg-alt);
  border-radius: var(--bsh-radius);
  padding: 1.25rem;
}

.bsh-card-header {
  margin-top: 0;
  font-size: 1.05rem;
}

.bsh-card-body > *:last-child {
  margin-bottom: 0;
}

/* ---------- Baseline form styling ----------
   Core Joomla modules (login, search, etc.) ship Bootstrap-style classes,
   but this template doesn't load Bootstrap. These rules give them a
   sane, consistent look without pulling in the whole framework. */

.bsh-card-body .form-group {
  margin-bottom: 1rem;
}

.bsh-card-body label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* Standard accessibility utility (screen-reader only) - applies everywhere,
   not just inside cards, since core views/fields use it too. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.bsh-card-body .input-group {
  display: flex;
  align-items: stretch;
}

.bsh-card-body .form-control,
.bsh-card-body input[type="text"],
.bsh-card-body input[type="password"],
.bsh-card-body input[type="email"],
.bsh-card-body input[type="search"] {
  flex: 1;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--bsh-border);
  border-radius: 6px;
  font-family: var(--bsh-font-body);
  font-size: 0.95rem;
  background: #fff;
}

.bsh-card-body .input-group .form-control {
  border-radius: 6px 0 0 6px;
  border-right: none;
}

.bsh-card-body .input-group-text {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: 1px solid var(--bsh-border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  background: #fff;
  color: var(--bsh-text);
}

.bsh-card-body .input-password-toggle {
  background: none;
  border: 1px solid var(--bsh-border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 0 0.75rem;
  cursor: pointer;
}

.bsh-card-body .btn {
  display: inline-block;
  font-family: var(--bsh-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
}

.bsh-card-body .btn-primary {
  background: var(--bsh-primary);
  color: #fff;
}

.bsh-card-body .btn-primary:hover {
  background: var(--bsh-primary-dark);
}

.bsh-card-body .login-greeting {
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--bsh-heading);
}

.bsh-card-body .logout-button .btn {
  width: 100%;
}

.bsh-card-body .btn-secondary {
  background: transparent;
  border: 1px solid var(--bsh-border);
  color: var(--bsh-text);
}

.bsh-card-body .w-100 {
  width: 100%;
}

.bsh-card-body .list-unstyled {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.bsh-card-body .list-unstyled li {
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

/* ---------- Footer ---------- */

.bsh-footer {
  background: var(--bsh-dark);
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2rem;
}

.bsh-footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  padding: 3rem 1.5rem;
}

.bsh-footer h3 {
  color: #fff;
}

.bsh-footer a {
  color: rgba(255, 255, 255, 0.85);
}

.bsh-footer a:hover {
  color: #fff;
}

.bsh-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.bsh-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.bsh-social-link:hover {
  background: var(--bsh-primary);
}

.bsh-footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bsh-footer-links li {
  margin-bottom: 0.5rem;
}

.bsh-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.25rem 1.5rem;
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .bsh-has-sidebar {
    grid-template-columns: 1fr;
  }

  .bsh-footer-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .bsh-nav-toggle {
    display: flex;
  }

  .bsh-nav {
    display: none;
    width: 100%;
    order: 3;
  }

  .bsh-nav.is-open {
    display: block;
  }

  .bsh-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0 1rem;
  }

  .bsh-nav li ul {
    position: static;
    box-shadow: none;
    border: none;
    padding-left: 1rem;
  }

  .bsh-header-inner {
    flex-wrap: wrap;
  }
}

/* ---------- Login & registration pages ---------- */

.com-users-login,
.com-users-registration,
.com-users-profile__edit {
  max-width: 640px;
}

/* The home page's own "Home" page heading is redundant with the hero - never show it */
body.is-home .page-header {
  display: none;
}

.com-users-login .page-header,
.com-users-registration .page-header,
.com-users-profile__edit .page-header {
  display: none;
}

/* Only box the form's outer fieldset(s) - nested fieldsets (eg. custom-field
   checkbox groups) stay plain so we don't get a card nested inside a card. */
.com-users-login__form > fieldset,
.com-users-registration__form > fieldset,
.com-users-profile__edit-form > fieldset {
  background: var(--bsh-bg-blue);
  border: 1px solid var(--bsh-border);
  border-radius: var(--bsh-radius);
  padding: 2rem;
  margin: 0 0 1.5rem;
}

.com-users-login__form > fieldset > legend,
.com-users-registration__form > fieldset > legend,
.com-users-profile__edit-form > fieldset > legend {
  width: 100%;
  font-family: var(--bsh-font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bsh-heading);
  padding: 0 0 1rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--bsh-border);
}

.com-users-login .form-check-inline,
.com-users-registration .form-check-inline,
.com-users-profile__edit .form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 1.25rem 0.5rem 0;
}

.com-users-login fieldset.checkboxes,
.com-users-registration fieldset.checkboxes,
.com-users-profile__edit fieldset.checkboxes {
  display: flex;
  flex-wrap: wrap;
  border: none;
  padding: 0;
  margin: 0;
}

/* Calendar/date-picker trigger: icon only, not a full-size button */
.com-users-login .field-calendar .btn,
.com-users-registration .field-calendar .btn,
.com-users-profile__edit .field-calendar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 6px;
  font-size: 1rem;
  flex-shrink: 0;
}

.com-users-login .field-calendar,
.com-users-registration .field-calendar,
.com-users-profile__edit .field-calendar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.com-users-login .field-calendar .form-control,
.com-users-registration .field-calendar .form-control,
.com-users-profile__edit .field-calendar .form-control {
  max-width: 200px;
}

.com-users-login .control-group,
.com-users-registration .control-group,
.com-users-profile__edit .control-group {
  margin-bottom: 1.25rem;
}

.com-users-login .control-label label,
.com-users-registration .control-label label,
.com-users-profile__edit .control-label label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--bsh-heading);
}

.com-users-login .form-control,
.com-users-registration .form-control,
.com-users-profile__edit .form-control {
  display: block;
  width: 100%;
  max-width: 480px; /* roughly double the default unstyled input width */
  padding: 0.85rem 1rem; /* taller than the template's baseline field height */
  border: 1px solid var(--bsh-border);
  border-radius: 6px;
  font-family: var(--bsh-font-body);
  font-size: 1rem;
  background: #fff;
}

.com-users-login .input-group,
.com-users-registration .input-group,
.com-users-profile__edit .input-group {
  display: flex;
  max-width: 480px;
}

.com-users-login .input-group .form-control,
.com-users-registration .input-group .form-control,
.com-users-profile__edit .input-group .form-control {
  max-width: none;
  border-radius: 6px 0 0 6px;
  border-right: none;
}

.com-users-login .input-password-toggle,
.com-users-registration .input-password-toggle,
.com-users-profile__edit .input-password-toggle {
  background: #fff;
  border: 1px solid var(--bsh-border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 0 0.85rem;
  cursor: pointer;
}

.com-users-login .btn-primary,
.com-users-registration .btn-primary,
.com-users-profile__edit .btn-primary {
  background: var(--bsh-primary);
  color: #fff;
  border: none;
  font-family: var(--bsh-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  cursor: pointer;
}

.com-users-login .btn-primary:hover,
.com-users-registration .btn-primary:hover,
.com-users-profile__edit .btn-primary:hover {
  background: var(--bsh-primary-dark);
}

.com-users-profile__edit .btn-danger {
  background: transparent;
  border: 1px solid var(--bsh-border);
  color: var(--bsh-text);
  font-family: var(--bsh-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 0.5rem;
}

.com-users-profile__edit .btn-danger:hover {
  border-color: var(--bsh-primary);
  color: var(--bsh-primary);
}

.com-users-login__options.list-group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.com-users-login .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.com-users-login .form-check-label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
}

/* ---------- Bootstrap tooltips (JS-only in this template) ----------
   Joomla's "hasTooltip" behaviour loads Bootstrap's tooltip JS, but this
   template doesn't load Bootstrap's CSS (it would clash with our own
   button/form styling). Without it, .tooltip-inner has no background and
   renders transparent. This replicates just the visuals, not the framework. */
.tooltip {
  position: absolute;
  z-index: 1080;
  font-family: var(--bsh-font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  max-width: 260px;
  padding: 0.6rem 0.85rem;
  color: var(--bsh-text);
  background-color: #fff;
  border: 1px solid var(--bsh-border);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(50, 55, 72, 0.15);
  text-align: left;
}

.tooltip-inner strong {
  color: var(--bsh-heading);
}

.tooltip-arrow {
  position: absolute;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip-arrow::before {
  content: "";
  position: absolute;
  border-style: solid;
  border-color: transparent;
}

.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
  bottom: -0.4rem;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  top: -1px;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #fff;
  filter: drop-shadow(0 1px 0 var(--bsh-border));
}

.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
  top: -0.4rem;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #fff;
  filter: drop-shadow(0 -1px 0 var(--bsh-border));
}

.bs-tooltip-end .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
  left: -0.4rem;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  right: -1px;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #fff;
  filter: drop-shadow(-1px 0 0 var(--bsh-border));
}

.bs-tooltip-start .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
  right: -0.4rem;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  left: -1px;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #fff;
  filter: drop-shadow(1px 0 0 var(--bsh-border));
}

/* ---------- Bootstrap modal (JS-only in this template) ----------
   Same situation as the tooltips above: Joomla's "mailto" popup uses
   Bootstrap's modal JS, but without Bootstrap's CSS the dialog has no
   display:none default, so its title ("Select") and Close buttons render
   inline on the page instead of being hidden until opened. */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1090;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(50, 55, 72, 0.55);
}

.modal.show {
  display: block;
}

.modal-dialog {
  max-width: 500px;
  margin: 4rem auto;
}

.modal-content {
  background: var(--bsh-bg);
  border-radius: var(--bsh-radius);
  box-shadow: 0 12px 32px rgba(50, 55, 72, 0.25);
  overflow: hidden;
}

.modal-header,
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bsh-border);
}

.modal-footer {
  border-top: 1px solid var(--bsh-border);
  border-bottom: none;
  justify-content: flex-end;
}

.modal-title {
  margin: 0;
  font-size: 1.1rem;
}

.modal-body {
  padding: 1.25rem;
}

.modal .btn-close {
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--bsh-text);
  cursor: pointer;
}

.modal .btn-close:hover {
  color: var(--bsh-heading);
}

/* ---------- JEM event view ----------
   JEM ships Bootstrap-class markup (buttons, badges, definition lists)
   that renders unstyled without Bootstrap's CSS. This skins it to match
   the rest of the site instead of loading the whole framework. */

#jem.jem_event {
  max-width: 760px;
  margin: 0 auto;
}

#jem .buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

#jem .buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--bsh-bg-alt);
  color: var(--bsh-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

#jem .buttons a:hover {
  background: var(--bsh-primary);
  color: #fff;
}

#jem .buttons a i {
  font-size: 0.95rem;
}

#jem .componentheading {
  margin-top: 0;
  font-size: 1.9rem;
}

#jem h2.jem,
#jem h2.jem-description,
#jem h2.jem-location,
#jem h2.jem-provider,
#jem h2.register {
  font-size: 1.2rem;
  margin: 1.75rem 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bsh-border);
}

#jem .jem-hr {
  border: none;
  border-top: 1px solid var(--bsh-border);
  margin: 1.75rem 0;
}

#jem .jem-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

#jem .jem-row.jem-wrap-reverse {
  flex-wrap: wrap-reverse;
}

#jem .jem-info,
#jem .jem-grow-2 {
  flex: 1 1 320px;
}

#jem .jem-img img {
  max-width: 100%;
  border-radius: var(--bsh-radius);
}

#jem dl.jem-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

#jem dl.jem-dl dt {
  font-weight: 600;
  color: var(--bsh-heading);
  white-space: nowrap;
}

#jem dl.jem-dl dd {
  margin: 0;
  color: var(--bsh-text);
}

#jem .jem-description.event_desc {
  color: var(--bsh-text);
  line-height: 1.7;
}

#jem .jem-description.event_desc img {
  max-width: 100%;
  border-radius: var(--bsh-radius);
  margin: 0.5rem 0;
}

#jem .jem-map {
  margin-top: 1rem;
}

#jem .jem-map iframe {
  width: 100%;
  border: none;
  border-radius: var(--bsh-radius);
}

/* Registration card - wraps JEM's own free-registration form and our
   donation/payment override alike, so both look consistent. */
#jem .register dl.jem-dl.floattext {
  display: block;
  background: var(--bsh-bg-blue);
  border-radius: var(--bsh-radius);
  padding: 1.25rem;
}

#jem .register dl.jem-dl.floattext dt.registration {
  margin-bottom: 0.5rem;
}

#jem .register dl.jem-dl.floattext dd.registration {
  margin: 0;
}

#jem .register hr {
  border: none;
  border-top: 1px solid var(--bsh-border);
  margin: 1rem 0;
}

#jem .jem-registerbutton,
#jem .jem-unregisterbutton {
  color: var(--bsh-primary);
  margin-right: 0.35rem;
}

#jem .badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--bsh-secondary);
  color: var(--bsh-heading);
  margin-left: 0.5rem;
}

#jem input[type="number"] {
  width: 100%;
  max-width: 220px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--bsh-border);
  border-radius: 6px;
  font-family: var(--bsh-font-body);
  font-size: 1rem;
}

#jem .btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: none;
  border-radius: 999px;
  font-family: var(--bsh-font-heading);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

#jem .btn-primary {
  background: var(--bsh-secondary);
  color: var(--bsh-heading);
}

#jem .btn-primary:hover {
  background: var(--bsh-secondary-dark);
}

#jem .btn-warning {
  background: var(--bsh-accent);
  color: #fff !important;
}

#jem .btn-warning:hover {
  background: var(--bsh-primary);
}

#jem .copyright {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--bsh-text);
  opacity: 0.7;
  text-align: right;
}

/* Our Stripe donation/payment box, styled to match the login card. */
.jemstripe-checkout {
  background: var(--bsh-bg-blue);
  border-radius: var(--bsh-radius);
  padding: 1.25rem;
}

.jemstripe-checkout label {
  display: block;
  font-weight: 600;
  color: var(--bsh-heading);
  margin-bottom: 0.35rem;
}

.jemstripe-checkout .jemstripe-amount {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bsh-heading);
}

.jemstripe-checkout .jemstripe-donation-hint {
  font-size: 0.85rem;
  color: var(--bsh-text);
  margin-top: 0.4rem;
}

.jemstripe-checkout form > p:last-child {
  margin-bottom: 0;
}

/* ---------- System messages ----------
   Joomla renders success/error/warning messages (after any form submit or
   redirect) into #system-message-container wherever it happens to sit in
   the page flow - on a long page that's often below the fold, so visitors
   never notice it without scrolling. Pinning it to the top of the viewport
   means it's seen immediately regardless of where it lands in the markup. */
#system-message-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1rem 1rem 0;
  pointer-events: none;
}

#system-message-container:empty {
  padding: 0;
}

#system-message-container joomla-alert,
#system-message-container .alert {
  width: 100%;
  max-width: 600px;
  pointer-events: auto;
  box-shadow: 0 10px 30px rgba(50, 55, 72, 0.25);
}

/* ---------- Site-wide content defaults ----------
   Generic patterns Joomla core views ship throughout the site (user
   profile, contact forms, etc.) - styled once here so every page,
   present and future, looks consistent without needing a per-page rule. */

fieldset {
  border: 1px solid var(--bsh-border);
  border-radius: var(--bsh-radius);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem;
}

fieldset legend {
  padding: 0 0.5rem;
  font-family: var(--bsh-font-heading);
  font-weight: 600;
  color: var(--bsh-heading);
}

/* Don't box nested fieldsets (eg. a custom-field checkbox group inside a
   form's own outer fieldset) - avoids a card rendered inside a card. */
fieldset fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}

dl.dl-horizontal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

dl.dl-horizontal dt {
  font-weight: 600;
  color: var(--bsh-heading);
  white-space: nowrap;
}

dl.dl-horizontal dd {
  margin: 0;
  color: var(--bsh-text);
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: none;
  border-radius: 999px;
  font-family: var(--bsh-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: var(--bsh-secondary);
  color: var(--bsh-heading);
}

.btn-primary:hover {
  background: var(--bsh-secondary-dark);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--bsh-border);
  color: var(--bsh-text);
}

.btn-secondary:hover {
  border-color: var(--bsh-primary);
  color: var(--bsh-primary);
}

/* ---------- User profile page ---------- */

.com-users-profile {
  max-width: 760px;
  margin: 0 auto;
}

.com-users-profile__edit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.com-users-profile__custom-toggle {
  margin: 0 0 1.5rem;
}

/* ---------- "My Event Registrations" list (profile page) ---------- */

.jemstripe-my-events__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jemstripe-my-events__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--bsh-border);
}

.jemstripe-my-events__item:last-child {
  border-bottom: none;
}

.jemstripe-my-events__title {
  font-family: var(--bsh-font-heading);
  font-weight: 600;
}

.jemstripe-my-events__meta {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--bsh-text);
}

.jemstripe-my-events__meta span:not(:last-child)::after {
  content: "\00b7";
  margin: 0 0.45rem;
  color: var(--bsh-border);
}

.jemstripe-my-events__item form {
  flex-shrink: 0;
}

.jemstripe-my-events__pagination {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
}

.jemstripe-my-events__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bsh-text);
  text-decoration: none;
}

.jemstripe-my-events__page:hover {
  background: var(--bsh-bg-alt);
}

.jemstripe-my-events__page.is-active {
  background: var(--bsh-primary);
  color: #fff;
}

/* ---------- Provider dashboard & attendees (site) ---------- */

.jemstripe-dashboard,
.jemstripe-attendees {
  max-width: 760px;
  margin: 0 auto;
}

.jemstripe-attendees table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.jemstripe-attendees th,
.jemstripe-attendees td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--bsh-border);
  text-align: left;
}

.jemstripe-attendees thead th {
  font-family: var(--bsh-font-heading);
  font-weight: 600;
  color: var(--bsh-heading);
}

.jemstripe-attendees .badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: #fff;
}

.jemstripe-attendees .badge.bg-warning {
  background: #b8860b;
}