/* background image sits on a fixed layer the size of the viewport, so it always
   covers the screen however long the page is, and it works on iOS/Android,
   which ignore background-attachment: fixed. */
.bg-adult {
  background-color: rgba(0, 0, 32, 0.8);
}

.bg-adult::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('../img/trike-background.jpg') center / cover no-repeat;
}

.bg-junior {
  --bg-junior-img: url('../img/children-silhouette.svg');
  --bg-junior-img-opacity: 0.3;
  position: relative;
  isolation: isolate;
}

.bg-junior::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: var(--bg-junior-img-opacity);

  background-image: var(--bg-junior-img);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
  background-color: #f5f5f5;
}

@font-face {
  font-family: "OpenSans-ExtraBoldItalic";
  src: url("../webfonts/OpenSans-ExtraBoldItalic.woff") format("woff"),
    url("../webfonts/OpenSans-ExtraBoldItalic.ttf") format("truetype"),
    url("../webfonts/OpenSans-ExtraBoldItalic.svg") format("svg");
}

.logo-font {
  font-family: "OpenSans-ExtraBoldItalic";
}

a {
  text-decoration: none;
}

.bg-adminA {
  background-color: hsla(218, 33%, 30%, 0.3);
}

.bg-adminJ {
  background-color: hsla(146, 50%, 36%, 0.3);
}

/* begin LS-BAT specific */
.bg-adminLS-BAT {
  background-color: hsla(217, 63%, 57%, 0.4);
}

.text-ls-bat {
  color: #4d82d6;
}

.bg-ls-bat {
  background-color: #4d82d6;
}

.btn-ls-bat,
.btn-ls-bat:hover {
  background-color: #4d82d6;
  color: #ffffff;
}

/* end LS-BAT specific */

/* noti(e)fication z-index (2) needs to be > fixed-top navbar (1030) */
.notie-container {
  z-index: 2000;
}

/* === begin notie background colours === */

.notie-background-success {
  background-color: #198754;
  /* #57bf57 */
}

.notie-background-warning {
  background-color: #ff8c00;
  /* #d6a14d */
}

.notie-background-error {
  background-color: #dc3545;
  /* #e1715b */
}

.notie-background-info {
  background-color: #4682b4;
  /* #4d82d6 */
}

.notie-background-neutral {
  background-color: #708090;
  /* #a0a0a0 */
}

/* ==== end notie background colours ==== */

/* set timerProgressBar colour e.g. toast notifications */
.swal-timer-progress-bar {
  background-color: #dc143c;
}

.cycle-image {
  max-width: 50%;
}

.datepicker {
  z-index: 10000;
}

/* virtual terminal payment receipt table */
#receipt-table tr td:nth-child(1) {
  width: 25%;
  text-align: end;
}

/* big button text: buttons on e.g. index & contact pages */
.big-button {
  font-size: 1.375rem;
  font-weight: bold;
  color: #f5f5f5;
}

/* donors credit displayed text */
.donors-credit {
  width: min(20rem, 100%);
  font-size: 0.875rem;
  font-weight: bold;
  color: #f5f5f5;
  text-align: left;
  margin: 0.75rem 0;
}

.donors-background {
  background: rgba(0, 0, 32, 0.65);
  border-radius: 22px;
}

.reservation-info ul {
  color: #11cdef;
  font-size: 1.25rem;
  font-weight: 600;
}

/* administration - crew, cycles, reservations, bookings,
subsidiary dates & gallery data table header <tags> */
#crew-table thead tr th,
#cycles-inventory thead tr th,
#new-reservations thead tr th,
#approved-reservations thead tr th,
#all-bookings thead tr th,
#subsidiary-dates thead tr th,
#gallery-items thead tr th {
  font-size: 0.875rem;
  font-weight: bolder;
  color: #000;
}

/* ============================================ */

/* improve top navigation bar readability */
#top-navigation ul li>a {
  font-weight: bold;
}

/* override visited, hover & active text colour (all same) for top-navigation, subdomain navbar link */
.subdomain-link,
.subdomain-link:visited,
.subdomain-link:hover,
.subdomain-link:active {
  color: #ffffff;
}

.input-background {
  background: rgba(0, 0, 32, 0.5);
  border-radius: 1rem;
}

/* disable pointer events within templates, for appropriate access levels */
.disable-events {
  pointer-events: none;
}

/* class used within <p> tags for bike descriptions stored in database */
.bike-description {
  color: #87cefa;
  font-weight: bold;
  text-indent: 1.25rem;
}

.cal-booked {
  font-size: 0.875rem;
  font-weight: bold;
  color: #ffffff;
  border-radius: 12%;
}

/* --------- Bootstrap modals --------- */
.modal-dialog.modal-fit {
  max-width: min(31rem, calc(100% - 1rem));
}

.modal-body {
  text-wrap: pretty;
  text-wrap: balance;
}

.btn-thankyou,
.btn-thankyou:hover {
  color: #f5f5f5;
  font-weight: 600;
  background-color: #198754;
}

/* --------- navbar clearance (all pages) ---------
   the navbar is position-absolute inside the sticky header, so it takes no
   space in the page flow. Give the first content element data-nav-clear="N"
   (N = gap in rem below the navbar) and the script in base.layout measures the
   navbar and sets --nav-offset on it, at every width and when the navbar wraps. */
[data-nav-clear] {
  margin-top: var(--nav-offset, 9rem);
}

/* --------- donors slider (all pages) ---------
   wrap {{template "donors" .}} in <div class="donors-panel">. Styles the donors
   partial without changing it:
   .row > .col > .donors-credit (intro text) + .donors > .swiper-wrapper > .swiper-slide > a > img
   the Swiper itself is started by the script in base.layout. */
.donors-panel {
  --donor-tile-height: clamp(5rem, 9vw, 6.5rem);
  min-width: 0;
  padding: 0.75rem 1rem 1rem;
  background: rgba(0, 0, 32, 0.35);
  border-radius: 1rem;
}

/* cancel the Bootstrap row gutter so the slider is exactly the panel width */
.donors-panel .row {
  --bs-gutter-x: 0;
  margin: 0;
}

.donors-panel .donors-credit {
  width: auto;
  max-width: none;
  margin: 0 0 0.75rem;
  text-align: center;
}

/* the partial's slider has no .swiper class, so add Swiper's container rules here;
   --donor-strip-bg can be set to a light colour if logos need a light backdrop */
.donors-panel .donors {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0.75rem;
  background: var(--donor-strip-bg, transparent);
  border-radius: 0.75rem;
}

/* each slide is as wide as its own logo (slidesPerView: 'auto'), so logos keep
   their natural proportions; a slide is never wider than the strip itself */
.donors-panel .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  height: var(--donor-tile-height);
}

.donors-panel .swiper-slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  /* same colour as the strip: Swiper's transforms isolate each slide, so the
     multiply blend below needs a backdrop inside the slide */
  background: var(--donor-strip-bg, transparent);
}

.donors-panel .swiper-slide a:focus-visible {
  outline: 2px solid #198754;
  outline-offset: -2px;
}

/* natural size, only scaled down (never stretched) if taller than the strip */
.donors-panel .swiper-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* --------- single-column form pages (login, change password) ---------
   <div class="container" data-nav-clear="2.5"><div class="form-page"> ... </div></div>
   The form is a comfortable reading width on large screens and the full width
   of the container on phones, so inputs never shrink below a usable size. */
.form-page {
  container: form-page / inline-size;
  width: min(100%, 40rem);
  margin: 0 auto 3rem;
}

.form-page-title {
  margin: 0 0 1rem;
  color: #dc143c;
  font-size: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.form-page-subtitle {
  margin: 0 0 1.5rem;
  color: #ffffff;
  font-weight: 700;
}

.form-page .form-floating {
  margin-block: 1.5rem;
}

.form-page .alert {
  margin-block: 1.5rem;
  overflow-wrap: anywhere;
}

/* actions: secondary link on the left, main button on the right... */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.form-actions .btn {
  margin: 0;
  white-space: normal;
}

/* ...a lone button sits on the right */
.form-actions>.btn:only-child {
  margin-inline-start: auto;
}

.form-actions-link {
  color: #ffffff;
  font-weight: 700;
}

/* ...and on a narrow form the button goes full width with the link below it */
@container form-page (max-width: 26rem) {
  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    text-align: center;
  }

  .form-actions .btn {
    width: 100%;
  }
}