/* Raleway is self-hosted rather than loaded from Google Fonts, so the CSP stays within 'self'. */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/raleway/raleway-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/raleway/raleway-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Raleway";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/raleway/raleway-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Raleway";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/raleway/raleway-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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%;
}

/* Bootstrap declares its font on :root, so the member site overrides it there too. */
html.front-office {
  --bs-font-sans-serif: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.9375rem;
}

/* A full-bleed CMS row is 100vw wide, which includes the scrollbar on a desktop browser. */
html.front-office {
  overflow-x: clip;
}

/* Pushes the footer to the bottom of a short page. */
html.front-office .site-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

html.front-office .site-content {
  flex: 1 0 auto;
}

.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;
}

/* A status label: a coloured dot with its name next to it, and no box around either. Used for
   every status the back office shows - a trip's visibility, a trip date's state, a person's, a
   membership's - in the grids and in the detail cards. It is spelled `badge badge-dot` in the
   markup, but only for the reset Bootstrap's `.badge` brings; everything that made it look like a
   badge is undone here. A pill would outweigh the values it sits between in a detail list, and a
   grid full of them reads as a wall of boxes.

   The bs-* custom properties are Bootstrap 5.3's own theme tokens, so this follows the app's
   light/dark toggle for free. */
.badge-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0;
  background-color: transparent;
  color: var(--bs-body-color);
  border: 0;
  border-radius: 0;
  /* A shade larger than the 0.75em Bootstrap gives a badge: this is a value to be read, not a
     marker to be glanced at. Relative, so it still follows the text around it. */
  font-size: 0.875em;
  font-weight: 500;
}

.badge-dot::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--dot-color, currentColor);
}

.badge-dot-secondary { --dot-color: var(--bs-secondary); }
.badge-dot-primary { --dot-color: var(--bs-primary); }
.badge-dot-success { --dot-color: var(--bs-success); }
.badge-dot-warning { --dot-color: var(--bs-warning); }
.badge-dot-info { --dot-color: var(--bs-info); }

/* Red is the one status that has to carry across a page rather than be read off it - a removed
   person, a cancelled date, a trip no member can see. It is the only one that keeps a box, in the
   subtle danger tint of the theme, so it stands out among its plain neighbours. No negative margin
   to pull that box back off the left edge: a red badge often follows a name or another badge
   inline (personNameCell, a removed person on their own page), where it would close the gap
   between the two - the small inset it costs in a grid cell is the lesser of the two. */
.badge-dot-danger {
  --dot-color: var(--bs-danger);
  padding: 0.15em 0.4em;
  background-color: var(--bs-danger-bg-subtle);
  border-radius: var(--bs-border-radius-sm);
}

/* Kendo opens every popup by parking it off-screen at top: -10000px, measuring it, then moving
   it under its anchor. AdminLTE injects `*, *::before, *::after { animation-duration: 0.01ms
   !important; transition-duration: 0.01ms !important }` into <head> as soon as the operating
   system asks for reduced motion (adminlte.js, Accessibility.respectReducedMotion). A 0.01ms
   transition is still a real transition: it completes on its own turn of the event loop, after
   Kendo has already read the container's offset, so Kendo computes the move from a zero offset
   and lands the popup at roughly -9600px instead of under the field. The popup is open and
   focusable but a few screens above the viewport - it reads as "the date picker does not appear".
   Every Kendo popup is affected the same way: date and time pickers, dropdowns, grid filter
   menus, and the grid's popup editor window.

   A duration of exactly 0s is not a very short transition but no transition at all, which puts
   Kendo back on its synchronous path. `.k-animation-container` beats AdminLTE's `*` on
   specificity, so this wins even though both are !important and AdminLTE appends its rule later.
   Scoped to the same media query AdminLTE tests, so Kendo keeps its animations for everyone else,
   and reduced motion is still honoured here - 0s animates less than 0.01ms, not more. */
@media (prefers-reduced-motion: reduce) {
  .k-animation-container,
  .k-animation-container *,
  .k-window,
  .k-window * {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

/* Kendo lays a command cell's buttons out inline, so a cell holding "Bewerken" plus a delete
   button wraps onto two lines as soon as the column is a little narrow, which pushes the row
   taller than its neighbours. Laying them out as a row that does not wrap, with the buttons
   kept from growing, keeps every command cell one line high. */
.k-grid .k-command-cell {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
}

.k-grid .k-command-cell > .k-button {
  flex: 0 0 auto;
}

/* AdminLTE's clearfix on a card's header and body becomes an empty flex item in a flex card,
   and the gap before it pushed the last button half a rem off the card's right edge. */
.card-header.d-flex::after,
.card-body.d-flex::after {
  content: none;
}

/* An icon-only Bootstrap button, for every action in the back office that carries a glyph and no
   label: page and tab toolbars, Details headers, the membership card, and a grid's own row
   actions (see the actions column in Trip/Registrations.cshtml). One footprint for all of them,
   so an edit button is the same size and shape wherever it turns up. The icon itself carries no
   text; title/aria-label on the element is the only label.

   Both dimensions set, not aspect-ratio: in a flex row the button's width and height are both
   content-driven, so there is no definite side for a ratio to work from. 2.375rem matches
   Kendo's medium button height - the grids sit among Kendo's own controls - and using rem for
   both keeps them square as the root font size changes at the 768px breakpoint. */
.btn-icon {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* A detail page's actions menu hides when the user may use none of its items. */
.actions-menu:not(:has(.dropdown-item)) {
  display: none;
}

.actions-menu li:first-child > .dropdown-divider {
  display: none;
}

.actions-menu .dropdown-item .bi {
  margin-right: 0.5rem;
}

/* A field that is shown but cannot be changed - the participant a registration was made for, which
   never moves to somebody else. Bootstrap 5 greys :disabled but leaves [readonly] looking like an
   ordinary input, and the point of rendering these as a field at all is that they read as a value
   that is fixed rather than as one nobody has filled in yet. readonly and not disabled, because a
   disabled field posts nothing and a refused save re-renders the form from what it was posted.
   The cursor says the same thing the colour does. */
.form-control[readonly] {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
  cursor: not-allowed;
}

/* Every popup puts its Annuleer/Opslaan pair bottom-right, per the feedback pass this belongs
   to. One rule for all of them, because there is only one kind of popup left: .popup-footer is
   the footer popups.js's addFooter builds into each form it loads. */
.k-window .popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Room for the icon in front of each of those buttons' captions. */
.k-window .popup-footer .btn .bi {
  margin-right: 0.375rem;
}

/* A cell that leads with an icon - a date, a seat count, the aids a participant brings. The icon
   keeps its width whatever the text beside it does, and that text stacks in the body: a date over
   its weekday, one wheelchair type per line. Built by gridIconCell in site.js, and used by the
   trips overview (Trip/Index.cshtml) and by a trip date's participants list
   (Trip/Registrations.cshtml), which is why it sits above the block that belongs to the overview
   alone. */
.grid-icon-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The same min-width a flex item needs anywhere to be allowed to shrink below its content:
   without it a long line widens the flex row instead of wrapping inside the column's own width. */
.grid-icon-cell-body {
  min-width: 0;
}

/* Sized and coloured once for every one of those columns, whether the icon is a Bootstrap Icons
   glyph or the hand-drawn rollator in _MobilityAidCellsScript.cshtml - the <svg> answers to the
   same width and height. Muted, because the icon says which kind of value this is and the value
   itself is what is read. */
.grid-icon {
  width: 1.15rem;
  height: 1.15rem;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--bs-secondary-color);
  flex: 0 0 auto;
}

/* One aid per line in the trips overview's wheelchair column, without a list's bullets and
   indents. */
.mobility-aid-line {
  display: block;
  line-height: 1.35;
}

/* Everything below belongs to the trips overview (Trip/Index.cshtml), whose rows are laid out as
   a photo, a name and a handful of counts behind their own icons rather than as plain columns of
   text.

   The grid itself carries .schedule-grid, which centres its cells rather than aligning them to
   the top: nearly every one of them is an icon or an image beside one or two lines of text. The
   selector leads with .k-grid on purpose: the Kendo theme is linked *after* this file (see
   _BackOfficeLayout.cshtml), so a rule of the same weight as its own .k-grid td would lose. */
.k-grid.schedule-grid .k-table-td,
.k-grid.schedule-grid tbody td {
  vertical-align: middle;
}

/* The column headers stay put while the page scrolls down a long list of dates. The page is the
   scroller, not the grid (GridDefaults.BackOfficeDefaults), so the header sticks to the viewport.
   That needs every ancestor to clip rather than scroll: AdminLTE gives .app-main overflow auto and
   Kendo gives .k-grid overflow hidden, and either one would capture the header instead. */
.layout-fixed .app-main:has(.schedule-grid),
.k-grid.schedule-grid {
  overflow: clip;
}

.k-grid.schedule-grid .k-grid-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* The trip's photo, sat left of its title with the title beside it - see the flex wrapper the
   cell template builds around both. A fixed 360x200 box rather than a fixed height: that is the
   shape trip photos are supplied in, so pinning the ratio here makes every row's image the same
   shape whatever was uploaded, filled rather than squashed. Rounded with Bootstrap's own radius
   token, so it softens along with the buttons and cards around it rather than against them. */
.schedule-thumbnail {
  width: 7rem;
  aspect-ratio: 360 / 200;
  height: auto;
  object-fit: cover;
  border-radius: var(--bs-border-radius);
  flex: 0 0 auto;
}

/* The same box for a trip with no photo and for one whose photo will not load (see
   tripThumbnailFailed in Trip/Index.cshtml), with "Geen afbeelding" centred in it: a flat tint on
   its own reads as a picture still loading rather than as one that is not there. Muted and a good
   deal smaller than the body text, so it says what the box is without competing with the trip
   name beside it. It is a <span> rather than an <img>, so display has to be spelled out -
   object-fit above simply does not apply, and flex is what centres the line in both directions. */
.schedule-thumbnail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.6875rem;
  line-height: 1.2;
  text-align: center;
}

/* The half of the title cell that is not the photo: the two stacked lines beside it. Both are
   blocks (see the grouped rule further down), so they stack on their own; what this adds is the
   same min-width a flex item needs anywhere to be allowed to shrink below its content - exactly
   what .grid-icon-cell-body does for the icon-led cells. Without it a long trip name widens the
   flex row instead of wrapping inside the column's own width. */
.schedule-trip-name {
  min-width: 0;
}

/* The trip's name, and under it the town it goes to. The name is what staff scan this overview
   for, so it is the one piece of text in a row that is not at the body weight; the destination is
   what tells two outings of the same name apart, and is muted for the same reason the weekday
   under a date is. */
.schedule-trip-title {
  font-weight: 600;
}

.schedule-trip-city {
  color: var(--bs-secondary-color);
  font-size: 0.875em;
}

/* Text that stacks: the trip name over its destination, the date over its weekday - without a
   list's bullets and indents. The wheelchair column's own lines do the same through
   .mobility-aid-line above, which it shares with nothing here. */
.schedule-trip-title,
.schedule-trip-city,
.schedule-date-day,
.schedule-date-weekday {
  display: block;
  line-height: 1.35;
}

/* The date itself is what a row is found by; the weekday is the context staff plan around, so the
   two are not given the same weight. */
.schedule-date-weekday {
  color: var(--bs-secondary-color);
  font-size: 0.875em;
}

/* The preparation badge under a date gets the same box as the red cancellation badge, in its own
   tint, and exactly its width: a hidden copy of the cancellation text sizes it (_ChecklistProgressBadgeScript.cshtml). */
.schedule-progress-badge {
  padding: 0.15em 0.4em;
  border-radius: var(--bs-border-radius-sm);
}

.schedule-progress-badge.badge-dot-primary { background-color: var(--bs-primary-bg-subtle); }
.schedule-progress-badge.badge-dot-success { background-color: var(--bs-success-bg-subtle); }

.schedule-badge-text {
  display: grid;
  text-align: start;
}

.schedule-badge-text > * {
  grid-area: 1 / 1;
}

.schedule-badge-text > [aria-hidden] {
  visibility: hidden;
}

/* The two meters above a trip date's tabs share one fixed width. A width rather than a flex-basis,
   which an auto-sized card leaves out of its own width and so lets the bar overflow it. */
.occurrence-meter-bar {
  flex-shrink: 0;
  width: 12rem;
}

/* The two initials shown left of a person's name on the persons overview
   (Person/Index.cshtml's personFullNameCell) in place of a real photo - one neutral color for
   everyone, not picked per name, per the feedback pass this belongs to. */
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  flex: 0 0 auto;
}

/* A list whose rows navigate - the four back-office overviews (households, persons, trips, and a
   trip's own dates). The hand cursor says the row can be clicked, and the row under the pointer
   underlines so it reads as the link it behaves like. gridRowLink in site.js puts this class on
   the grid, so a view no longer carries its own copy of the rule next to its own click handler.
   The underline sits on the cells rather than on the row: a text-decoration set on a <tr> does
   not reach the text inside its <td>s. */
.grid-row-link tbody tr {
  cursor: pointer;
}

.grid-row-link tbody tr:hover td {
  text-decoration: underline;
}

/* The theme only gives a sortable header the hand through a k-sortable class the jQuery column
   sorter never adds; aria-sort is what it does put on every sortable header, and only on those. */
.k-grid .k-grid-header .k-table-th[aria-sort],
.k-grid .k-grid-header .k-table-th[aria-sort] .k-cell-inner > .k-link {
  cursor: pointer;
}

.k-grid .k-grid-header .k-table-th,
.layout-fixed .table > thead th {
  font-weight: 700;
}

/* A row whose record is no longer active - an inactive, deceased or removed person, a cancelled
   registration. Greyed so the active rows are what the eye lands on; where a list has no order of
   its own the repository feeding it also sorts these to the bottom. markInactiveRows in site.js
   adds the class on dataBound. The colour sits on the cells, not the <tr>: a colour set on a row
   does not reach the text in its <td>s (same reason the row-link underline sits on the cells). The
   status badge keeps its own colour - it is what says why the row is inactive. */
.k-grid tbody tr.row-inactive td {
  color: var(--bs-tertiary-color);
}

/* Separates the outings still to come from those already past. */
.k-grid tbody tr.row-today-line td {
  border-bottom: 3px solid var(--bs-primary);
}

/* Everything in a row that is not running text: a status pill, the initials standing in for a
   photo, a thumbnail, a row's own command buttons. An underline under a badge reads as a defect
   rather than as a link, and these say what they are by their own shape already. Also applies
   inside a related cell, which underlines on its own hover (below). */
.grid-row-link tbody tr:hover td .badge,
.grid-row-link tbody tr:hover td .avatar-initials,
.grid-row-link tbody tr:hover td .k-button,
.k-grid td.related-cell:hover .related-link .badge {
  text-decoration: none;
}

/* One of several doors in the same cell - the pages and trips a media file is shown on. The
   marker sits on the link rather than on the cell, because td.related-cell below draws one arrow
   against the cell's right edge and that would promise a single destination. */
.related-link-inline {
  color: var(--bs-link-color);
  text-decoration: underline;
}

.related-link-inline:hover {
  color: var(--bs-link-hover-color);
}

.related-link-inline::after {
  content: "\2197";
  margin-left: 0.25rem;
  color: var(--bs-secondary-color);
}

.related-link-inline:hover::after {
  color: inherit;
}

/* A cell that leads somewhere else than its own row does - the household behind a person's
   address, the trip behind a date in the trips overview. The column carries this class
   through its HtmlAttributes, which Kendo puts on every data cell of that column; the cell's
   contents are the <a class="related-link"> that relatedCell (site.js) builds.

   At rest a small grey arrow against the right edge says the cell is a door of its own. Hovering
   *the cell* - not the row, which is a different destination - folds a filled corner in the
   theme's accent colour over that edge, moves the arrow into it in white, and underlines the
   text. bs-* custom properties throughout, so this follows the light/dark toggle for free, same
   as .badge-dot above.

   The marker hangs off :has(.related-link) rather than off the column's class, because not every
   row of such a column has something to link to - a person without a membership has no membership
   to open, and an arrow over an empty cell would promise one. That cell then behaves like any
   other: the row's own destination, see gridRowLink in site.js. */
.k-grid td.related-cell {
  position: relative;
  /* Room for the arrow, so a long address does not run underneath it. */
  padding-right: 1.75rem;
}

.k-grid td.related-cell .related-link {
  color: inherit;
  text-decoration: inherit;
}

/* The hand over the whole cell, not only over the text: the cell is what is clickable (see the
   td.related-cell handler in site.js). On a grid whose rows navigate as well this is the same
   cursor .grid-row-link already gives the row; on one whose rows do not - a trip date's
   participants list - it is the only thing that says the cell can be clicked at all. */
.k-grid td.related-cell:has(.related-link) {
  cursor: pointer;
}

.k-grid td.related-cell:has(.related-link)::after {
  content: "\2197";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  line-height: 1;
}

/* The corner is drawn whether or not it is shown, and revealed on hover: building it only on
   :hover would animate its size from nothing under a transition. Right angle at the top right,
   matching the marker used elsewhere for "this opens something else". */
.k-grid td.related-cell:has(.related-link)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1.1rem;
  height: 1.1rem;
  background-color: var(--bs-primary);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: 0;
}

.k-grid td.related-cell:has(.related-link):hover::before {
  opacity: 1;
}

/* The arrow is not swapped out for the corner but moved into it, small and in white: the corner
   on its own is a colour, and the arrow is what says which way it leads. ::after paints over
   ::before, so it lands on top of the triangle without a stacking context of its own. White
   rather than a theme token, because the triangle under it is var(--bs-primary) in both themes. */
.k-grid td.related-cell:has(.related-link):hover::after,
.k-grid td.related-cell:has(.related-link):focus-within::after {
  top: 0.05rem;
  right: 0.08rem;
  transform: none;
  font-size: 0.6rem;
  color: var(--bs-white);
}

.k-grid td.related-cell:hover .related-link,
.k-grid td.related-cell:focus-within .related-link {
  text-decoration: underline;
}

/* Keyboard users reach the link itself rather than the cell, so the corner has to answer to that
   too - :focus-within on the cell is the one selector that covers both, here and on the arrow
   above. */
.k-grid td.related-cell:has(.related-link):focus-within::before {
  opacity: 1;
}

/* A history grid, whose rows lead to the version of the object as that event recorded it - but
   only the rows that have one. An event from before versions were kept, or one about an object
   whose versions are not captured, has nothing behind it: such a row keeps the ordinary cursor and
   does not underline, so it never offers a door it does not have. gridRowLink (site.js) declines
   to navigate for the same rows.

   Scoped to .history-grid, which _HistoryGrid.cshtml puts on the grid: every other list that
   navigates leads somewhere from every row, and this exception must not reach them. The test is
   the version cell's own link rather than any link in the row - the object column of the logging
   screen holds one on nearly every row, and that is a different destination. */
.history-grid tbody tr:not(:has(td.version-cell .related-link)) {
  cursor: default;
}

.history-grid tbody tr:not(:has(td.version-cell .related-link)):hover td {
  text-decoration: none;
}

/* The version page's table of field values: the rows this event changed, tinted in the theme's
   accent colour so what changed is visible at a glance and the rest of the object still reads as
   context. An --bs-* token with an alpha, so the tint follows the light/dark toggle and stays
   readable under the text in both - the same approach as the related-cell corner above.

   Through Bootstrap's own state variable rather than a background-color of our own: a table cell
   already gets its background from .table, and paints an inset shadow from this variable over it,
   so a colour set any other way is the one that ends up underneath. */
.version-changed {
  --bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.12);
}

/* The same table's columns: the old value and the new value are exactly as wide as each other,
   because a change is read by comparing the two and a column half again as wide as its neighbour
   reads as the more important of them.

   Fixed rather than the browser's own layout, which sizes a column from its widest value and so
   makes the pair unequal as soon as one of them holds a long address: with a fixed layout only the
   field column declares a width (w-25 in the view), and the two that declare none divide the rest
   between them. */
.version-fields {
  table-layout: fixed;
}

/* A refused save's general (non-field) message, styled as an alert instead of a bare bullet list. */
.validation-summary-errors {
  display: block;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  color: var(--bs-danger-text-emphasis);
  background-color: var(--bs-danger-bg-subtle);
  border: 1px solid var(--bs-danger-border-subtle);
  border-radius: var(--bs-border-radius);
}

.validation-summary-errors ul {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

/* The empty entry at the top of the participant picker (_RegistrationForm.cshtml). Kendo calls it
   the option label and it is what keeps the field on "nobody chosen" until somebody is picked -
   without it the widget selects the first person in the list the moment the popup opens, which is
   a registration made for whoever happens to sort first. So it stays, and only its row in the
   list is taken away: the label above the field already says "Deelnemer", the closed box says it
   again, and a third copy sitting above the names is one the eye has to step over on every
   search. Scoped to this one picker by the id Kendo gives its list, so a later dropdown that
   really does want a clearable entry keeps one. */
#PersonId-list .k-list-optionlabel {
  display: none;
}

/* The grip a standard checklist step is dragged by (Views/Checklist/_ChecklistDefinitions.cshtml).
   Sits on the icon itself, like the CMS canvas handles above, because that is the element Kendo
   tests against its `handler` selector. */
.checklist-drag-handle {
  cursor: grab;
}

/* A trip date's checklist (_OccurrenceChecklist.cshtml). Fixed rather than the browser's own
   layout, the same reasoning as .version-fields above: with an automatic layout every column is
   sized from its widest value, so the moment a step is ticked and "Door wie" and "Datum voltooid"
   go from empty to filled, all three columns resize and the headers jump sideways. Pinning the two
   right-hand ones leaves the task column to take whatever is left, and nothing moves when a box is
   checked. */
.checklist-table {
  table-layout: fixed;
}

.checklist-table .checklist-column-by {
  width: 10rem;
}

/* Wide enough for "21-09-2026 09:14" on one line: the cell is text-nowrap, so a column that fell
   short would spill rather than wrap, and the spill is what would start the headers moving again. */
.checklist-table .checklist-column-on {
  width: 10rem;
}

/* --- Busindeling ------------------------------------------------------------------------------
   The Bussen tab of a trip date (Trip/_OccurrenceBuses.cshtml): a card per bus with the
   participants in it, dragged between cards. Bootstrap's own card, list and badge rules do the
   rest; what is here is the handful of things it has no class for. */

/* The dashed "next bus goes here" card. A <button> so the whole surface is one target and the
   keyboard reaches it, which is also why its button chrome has to be taken back off. */
.bus-card-empty {
  border-style: dashed;
  background: none;
  text-align: center;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.bus-card-empty:hover {
  background: var(--bs-tertiary-bg);
}

/* Room to drop into even when a bus is still empty: a list with no height is one nothing can be
   dragged into, which is also why the "nog geen deelnemers" line stays inside the <ul> rather
   than replacing it. */
.bus-participants {
  min-height: 3rem;
  margin-bottom: 0;
}

.bus-participant,
.bus-candidate {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  background: var(--bs-body-bg);
}

.bus-candidate {
  align-items: center;
  justify-content: space-between;
}

/* The grip. The class sits on the icon itself and not on the row, because that is the element
   Kendo's Sortable tests against its `handler` selector and it does not look upwards - the same
   trap the checklist grip and the CMS canvas both document. */
.bus-drag-handle {
  cursor: grab;
  color: var(--bs-secondary-color);
  padding-top: 0.125rem;
}

.bus-participant-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.bus-participant-name {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bus-participant-address {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quiet until the row is pointed at: taking somebody out of a bus is not what the row is for. */
.bus-participant-remove {
  color: var(--bs-secondary-color);
  text-decoration: none;
  line-height: 1;
}

.bus-participant-remove:hover {
  color: var(--bs-danger);
}

/* The two "same address" hints in the picker (Trip/_BusCandidatePicker.cshtml). Somebody whose
   housemate is already in a bus is the stronger of the two - that choice has been made and this
   row should follow it - so it is drawn in the accent colour and the other in amber. */
.bus-address-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  margin-right: 0.25rem;
}

.bus-address-dot-waiting {
  background: var(--bs-warning);
}

.bus-address-dot-seated {
  background: var(--bs-primary);
}

.bus-candidate-waiting {
  background: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle);
}

.bus-candidate-seated {
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
}

/* The two travel letters (Trip/PrintParticipants.cshtml and Trip/PrintVolunteers.cshtml on
   Views/Shared/_PrintLayout.cshtml), after the old application's PDFs and its skin.css: Raleway in
   black, light blue headings and labels (its .text-promo), the title and signature in the
   handwritten lillybelle, and a window-envelope address block. Every participant's letter starts a
   page. */
@font-face {
  font-family: "lillybelle";
  src: url("../fonts/lillybelle/lillybelle_2-webfont.woff2") format("woff2"),
    url("../fonts/lillybelle/lillybelle_2-webfont.woff") format("woff");
}

.print-letter {
  --print-letter-accent: var(--carint-blue);
  color: #000;
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.print-letter h1,
.print-letter h2,
.print-letter h3,
.print-letter .print-letter-route,
.print-letter .print-letter-label {
  color: var(--print-letter-accent);
}

.print-letter h1,
.print-letter h2,
.print-letter h3 {
  font-weight: 600;
}

.print-letter .print-letter-label {
  font-weight: 700;
}

.print-letter .table {
  --bs-table-color: #000;
  color: #000;
}

.print-letter h1 {
  font-family: "lillybelle", "Raleway", sans-serif;
  font-weight: normal;
  font-size: 2rem;
}

.print-letter h2 {
  font-size: 1.25rem;
}

.print-letter h3 {
  font-size: 1.125rem;
  margin-top: 1rem;
}

.print-letter dt {
  font-weight: normal;
}

.print-letter-logos {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.print-letter-logo-ledenservice {
  width: 16rem;
}

.print-letter-logo-carintreggeland {
  width: 10rem;
}

.print-letter-address {
  margin: 3rem 0 1.5rem 4rem;
}

.print-letter-signature {
  padding-top: 0.5rem;
}

/* A setting typed over several lines - the sender block, the closing - printed line for line. */
.print-letter-lines {
  white-space: pre-line;
}

@media print {
  .print-page .print-letter + .print-letter,
  .print-page .print-letter-break {
    break-before: page;
  }

  .print-page .print-letter tr {
    break-inside: avoid;
  }
}

/* The name, the departure line and the driver line share the left half of a bus card's header,
   with the edit and delete buttons in the right corner. Bootstrap has no min-width utility, and
   without min-width:0 a flex child refuses to shrink - so .text-truncate on the name would never
   fire and a long name would push the buttons off the card instead. */
.bus-card-heading {
  min-width: 0;
  flex: 1 1 auto;
}

/* When the bus reaches a participant, at the right-hand end of their row on the card. Tabular
   figures so the times line up down the list however many of them there are. */
.bus-participant-pickup {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
  padding-top: 0.125rem;
}

/* The old site's page banner: a gradient over the whole photo instead of a box behind the text. The
   Strip crop's 16:3, so what the editor cut out is what shows; it only grows for its text. */
.cms-page-content .cms-hero {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 16 / 3;
  min-height: 12rem;
  padding: 1.5rem;
  border-radius: 0;
}

.cms-page-content .cms-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1) 70%);
}

.cms-page-content .cms-hero-body {
  position: relative;
  width: 100%;
  max-width: none;
  padding: 0;
  background: none;
}

.cms-hero h1 {
  margin-bottom: 0;
  line-height: 1;
}

.cms-hero .lead {
  margin-bottom: 0;
  line-height: 1.1;
}

/* "Leden vertellen" (MemberStoryContentTypes): the story hero, its closing quote and the tiles. */
.story-label {
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.5rem;
  border-radius: 0.2rem;
  background-color: var(--story-accent, #00a295);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
}

.story-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 1;
  min-height: 24rem;
  padding: 3rem 1.5rem;
  background: #6a6b6e center / cover no-repeat;
  color: #fff;
}

.story-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 60%);
}

.story-hero-body {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.story-hero .story-label {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.story-hero-link {
  margin-top: 1.5rem;
}

.story-hero-quote {
  max-width: 46rem;
  margin: 0;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.15;
}

.story-quote {
  max-width: 34rem;
  margin: 2rem auto;
  padding: 1.5rem 0;
  border-top: 1px solid var(--story-accent, #00a295);
  border-bottom: 1px solid var(--story-accent, #00a295);
  text-align: center;
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.25;
}

.story-quote > :last-child {
  margin-bottom: 0;
}

.story-tiles-tinted {
  padding: 1.5rem;
}

.story-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1;
  padding: 1rem;
  overflow: hidden;
  background-color: #e9e9ea;
  color: #fff;
  text-decoration: none;
}

.story-tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-tile::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%);
  transition: background-color 0.2s;
}

.story-tile:hover,
.story-tile:focus-visible {
  color: #fff;
}

.story-tile:hover::before,
.story-tile:focus-visible::before {
  background-color: rgba(0, 0, 0, 0.15);
}

.story-tile-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.story-tile-quote {
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.25;
}

/* The homepage welcome banner (Blocks/_HomeHero.cshtml). */
.cms-home-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
}

/* A layer of its own, since the inline background-image leaves no room for a gradient beside it. */
.cms-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1) 70%);
}

/* Content and badge sit in the page container, so they line up with the rows below. */
.cms-home-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 34rem;
  padding-block: 3rem 4.5rem;
}

.cms-home-hero h1 {
  margin-bottom: 0.25rem;
  color: var(--carint-yellow);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
}

.cms-home-hero .lead {
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.cms-home-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12.5rem;
  padding: 0.9rem 1.5rem;
  background-color: #fff;
  color: var(--carint-grey-heading);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cms-home-hero-button:hover,
.cms-home-hero-button:focus-visible {
  background-color: var(--carint-grey-surface);
  color: var(--carint-grey-heading);
}

.cms-home-hero-button-primary {
  background-color: var(--carint-orange);
  color: #fff;
}

.cms-home-hero-button-primary:hover,
.cms-home-hero-button-primary:focus-visible {
  background-color: var(--carint-orange-hover);
  color: #fff;
}

.cms-home-hero-badge {
  position: absolute;
  bottom: 4rem;
  right: 0.75rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 11rem;
  height: 11rem;
  background: url("/images/hero-badge-shape.svg") center / contain no-repeat;
  color: #fff;
  text-align: center;
  padding: 1.75rem;
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.2;
}

.cms-home-hero-badge-price {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.cms-home-hero-badge-currency {
  margin-right: 0.15em;
  font-size: 0.6em;
  vertical-align: 0.35em;
}

.cms-home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

@media (max-width: 767.98px) {
  .cms-home-hero-inner {
    min-height: 24rem;
    padding-top: 12.5rem;
  }

  .cms-home-hero-badge {
    top: 1rem;
    bottom: auto;
  }
}

/* A banner row's content padding moves inside the banner, so the photo stays edge to edge while
   its content lines up with padded rows. The row carries the padding inline, hence !important. */
.cms-page-content .cms-row:has(.cms-home-hero) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cms-home-hero {
  padding-inline: var(--cms-content-padding, 0);
}

/* The "Licht" variant (HomeContentTypes.LightDisplayStyle), for a light photo. */
.cms-home-hero-light {
  --cms-home-hero-accent-default: var(--carint-blue);
  color: var(--carint-grey-heading);
}

.cms-home-hero-light::before {
  content: none;
}

.cms-home-hero-light .cms-home-hero-inner {
  justify-content: center;
  min-height: 40rem;
  padding-block: 9rem 3rem;
}

.cms-home-hero-logo {
  position: absolute;
  top: 3rem;
  left: calc(var(--bs-gutter-x) * 0.5);
  width: 7.875rem;
  height: auto;
}

.cms-home-hero-light .cms-home-hero-body {
  max-width: 36rem;
}

.cms-home-hero-light h1 {
  color: var(--cms-home-hero-accent, var(--cms-home-hero-accent-default));
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1.05;
}

@media (max-width: 767.98px) {
  .cms-home-hero-light .cms-home-hero-inner {
    min-height: 26rem;
    padding-block: 7rem 2rem;
  }

  .cms-home-hero-logo {
    top: 1.5rem;
    width: 6rem;
  }
}

.cms-home-hero-light .cms-home-hero-button {
  border: 1px solid var(--cms-home-hero-accent, var(--cms-home-hero-accent-default));
  background-color: transparent;
  color: var(--cms-home-hero-accent, var(--cms-home-hero-accent-default));
}

.cms-home-hero-light .cms-home-hero-button:hover,
.cms-home-hero-light .cms-home-hero-button:focus-visible {
  background-color: var(--cms-home-hero-accent, var(--cms-home-hero-accent-default));
  color: #fff;
}

/* The "Contactkaart" variant (HomeContentTypes.ContactDisplayStyle): photo strip, then a band with
   the title beside a white contact card. */
.cms-home-hero.cms-home-hero-contact {
  padding-inline: 0;
}

.cms-home-hero-contact::before {
  content: none;
}

.cms-home-hero-photo {
  height: clamp(12rem, 31vw, 27rem);
  background-size: cover;
  background-position: center;
}

.cms-home-hero-band {
  padding-inline: var(--cms-content-padding, 0);
  background-color: var(--cms-home-hero-band, var(--carint-blue));
}

.cms-home-hero-contact .cms-home-hero-inner {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  min-height: 0;
  padding-block: 3rem;
}

.cms-home-hero-contact h1 {
  flex: 1 1 auto;
  max-width: 36rem;
  color: var(--cms-home-hero-accent, #fff);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.cms-home-hero-card {
  position: relative;
  flex: 0 0 22.5rem;
  margin-top: 1rem;
  padding: 3rem 1.25rem 1.25rem;
  background-color: #fff;
  color: var(--carint-grey-text);
}

.cms-home-hero-card-logo {
  position: absolute;
  top: -2.25rem;
  right: 1rem;
  width: 7.875rem;
  height: auto;
}

.cms-home-hero-card-title {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

.cms-home-hero-card .cms-icon-links p {
  margin-bottom: 0;
}

.cms-home-hero-card .cms-icon-links a {
  color: inherit;
  text-decoration: none;
}

.cms-home-hero-card .cms-icon-links a::before {
  color: var(--carint-blue);
}

@media (max-width: 767.98px) {
  .cms-home-hero-contact .cms-home-hero-inner {
    flex-direction: column;
    padding-top: 2rem;
  }

  .cms-home-hero-card {
    flex-basis: auto;
    align-self: stretch;
    margin-top: 2rem;
  }
}

/* The "Informatiekaart" variant (HomeContentTypes.InfoDisplayStyle): the contact variant's strip and
   band, with intro text under the title and a checklist card whose badge overlaps the photo. */
.cms-home-hero-intro {
  flex: 1 1 auto;
  max-width: 40rem;
}

.cms-home-hero-info h1 {
  max-width: none;
}

.cms-home-hero-info .cms-home-hero-card {
  margin-top: -1rem;
  padding-top: 2.5rem;
}

.cms-home-hero-info-card :is(h2, h3) {
  margin-bottom: 0.75rem;
  color: var(--carint-blue);
  font-family: "lillybelle", "Raleway", sans-serif;
  font-size: 2rem;
  line-height: 1.1;
}

.cms-home-hero-info-card ul {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.cms-home-hero-info-badge {
  position: absolute;
  top: -5.5rem;
  right: -1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 9.5rem;
  height: 9.5rem;
  padding: 1.5rem;
  background: url("/images/hero-badge-shape.svg") center / contain no-repeat;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.2;
  text-align: center;
}

.cms-home-hero-info-badge .cms-home-hero-badge-price {
  font-size: 1.75rem;
}

@media (max-width: 767.98px) {
  .cms-home-hero-info .cms-home-hero-card {
    margin-top: 4rem;
  }

  .cms-home-hero-info-badge {
    right: 0;
  }
}

/* The homepage intro row's cards (Blocks/_InformationCard.cshtml). Unlike a block's own TintColor
   elsewhere, this one colours only the body panel - the image and title stay plain. */
.cms-page-content {
  color: var(--carint-grey-text);
}

/* Columns holding cards stretch them to the row's height, so panels and links line up across it. */
.cms-row .row > :has(> .cms-information-card, > .cms-offer-list) {
  display: flex;
  flex-direction: column;
}

/* One gutter for the card rows and the offer grid inside them, so their cards line up; 20px like the old site. */
.cms-row .row:has(> * > .cms-information-card, > * > .cms-offer-list),
.cms-offer-list > .row {
  --bs-gutter-x: 1.25rem;
}

.cms-information-card {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.cms-information-card :is(img, .cms-image-placeholder) {
  display: block;
  width: 100%;
  aspect-ratio: 19 / 9;
  object-fit: cover;
}

.cms-information-card-body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding: 1.25rem;
}

.cms-information-card-body > .cms-link-arrow {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1rem;
}

.cms-information-card-body ul {
  padding-left: 0;
  list-style: none;
}

/* The old site's checkbox bullet: its tick overshoots the box, so it hangs outside the line box. */
.cms-information-card-body li,
.cms-home-hero-info-card li,
.cms-offer-card-benefits li,
.cms-trip-card-subtitle,
.cms-checkmark-line {
  position: relative;
  padding-left: 1.9em;
}

.cms-information-card-body li::before,
.cms-home-hero-info-card li::before,
.cms-check {
  content: "";
  position: absolute;
  top: -0.3em;
  left: 0;
  width: 1.43em;
  height: 1.5em;
  background: url("/images/checkmark.svg") center / contain no-repeat;
}

/* The offers band's cards (Blocks/_OfferList.cshtml, Shared/_OfferCard.cshtml). Same splash
   graphic as .cms-home-hero-badge, sized down to fit a card. */
.cms-offer-card-badge {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  background: url("/images/hero-badge-shape.svg") center / contain no-repeat;
  color: #fff;
  text-align: center;
  padding: 0.75rem;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.cms-offer-card,
.cms-trip-card {
  color: var(--carint-grey-text);
  transition: transform 0.2s ease;
}

.cms-offer-card:hover,
.cms-offer-card:focus-within,
.cms-trip-card:hover,
.cms-trip-card:focus-within {
  transform: scale(1.03);
}

.cms-offer-card .card-img-top,
.cms-trip-card .card-img-top {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

.cms-offer-card .card-img-top,
.cms-trip-card .card-img-top {
  border-radius: 0;
}

.cms-offer-card {
  border: 1px solid var(--cms-offer-accent, var(--carint-pink));
  border-radius: 0;
}

.cms-trip-card {
  border: 1px solid var(--carint-blue);
  border-radius: 0;
}

.cms-offer-list {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  container-type: inline-size;
}

/* Two cards side by side only when the list itself has room, whatever column it sits in. */
@container (min-width: 26rem) {
  .cms-offer-list > .row > * {
    width: 50%;
  }
}

.cms-offer-list > .row {
  flex: 1 0 auto;
}

/* A filterable band shows the whole catalogue, so it fits up to four cards on a row. */
@container (min-width: 44rem) {
  .cms-offer-list-filterable > .row > * {
    width: 33.333%;
  }
}

@container (min-width: 60rem) {
  .cms-offer-list-filterable > .row > * {
    width: 25%;
  }
}

/* The other offers or trips under a detail page, four on a row; gone when there are none. */
.cms-detail-below {
  padding: 1rem 0 2rem;
}

.cms-detail-below:not(:has(.cms-offer-list, .cms-trip-cards)) {
  display: none;
}

@container (min-width: 44rem) {
  .cms-detail-below .cms-offer-list > .row > * {
    width: 33.333%;
  }
}

@container (min-width: 60rem) {
  .cms-detail-below .cms-offer-list > .row > * {
    width: 25%;
  }
}

/* The filter bar spans the viewport on white, whatever the band's own background. */
.cms-offer-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-bottom: 2rem;
  padding: 1.25rem 0;
  background-color: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}

.cms-offer-filter-categories,
.cms-offer-filter-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.cms-offer-filter-label {
  margin-right: 0.5rem;
  color: var(--carint-grey-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.cms-offer-filter-option {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--cms-offer-accent, var(--carint-grey-text));
  color: var(--cms-offer-accent, var(--carint-grey-text));
  font-size: 0.875rem;
  text-decoration: none;
}

.cms-offer-filter-option:hover,
.cms-offer-filter-option:focus-visible,
.cms-offer-filter-option.active {
  background-color: var(--cms-offer-accent, var(--carint-grey-text));
  color: #fff;
}

.cms-offer-filter-sort .form-select {
  width: auto;
  min-width: 7.5rem;
  border-radius: 0;
}

.cms-offer-card .card-body,
.cms-trip-card .card-body {
    min-height: 11rem;
}

@media (prefers-reduced-motion: reduce) {
  .cms-offer-card,
  .cms-trip-card {
    transition: none;
  }
}

/* A band's intro text wraps at a reading width rather than running the full band. */
.cms-trip-list .lead,
.cms-offer-list .lead {
  max-width: 47rem;
}

.cms-trip-list.cms-align-center .lead,
.cms-offer-list:not(.cms-align-start, .cms-align-end) > .lead {
  margin-inline: auto;
}

/* An offers band centres its heading unless the block itself asks for another alignment. */
.cms-offer-list:not(.cms-align-start, .cms-align-end) > h2,
.cms-offer-list:not(.cms-align-start, .cms-align-end) > .lead {
  text-align: center;
}

.cms-trip-list.cms-align-end .lead,
.cms-offer-list.cms-align-end .lead {
  margin-left: auto;
}

/* The trips band's cards: the offer card's shape, with the next date above a centred title. They
   take the offer grid's columns and gutter, so both bands' cards line up at every width. */
.cms-trip-cards {
  --cms-trip-columns: 1;
  display: grid;
  grid-template-columns: repeat(var(--cms-trip-columns), calc((100% - (var(--cms-trip-columns) - 1) * 2.25rem) / var(--cms-trip-columns)));
  gap: 1.5rem 2.25rem;
  padding: 1rem 0;
}

@media (min-width: 576px) {
  .cms-trip-cards {
    --cms-trip-columns: 2;
  }
}

@media (min-width: 992px) {
  .cms-trip-cards {
    --cms-trip-columns: 4;
  }
}

/* Room for two lines, so a card listing several dates keeps its title level with its neighbours. */
.cms-trip-card-date {
  min-height: 3em;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.cms-trip-card-title {
  color: var(--carint-blue);
  font-weight: 400;
  text-align: center;
}

.cms-trip-card-subtitle {
  text-align: start;
}

.cms-trip-card-cta {
  display: block;
  padding: 0.75rem;
  background-color: var(--carint-orange);
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.cms-offer-list > h2 {
  margin-bottom: 1.5rem;
  font-size: 1.375rem;
  font-weight: 700;
}

.cms-offer-card-title {
  color: var(--cms-offer-accent, var(--carint-pink));
  font-size: 1.125rem;
  font-weight: 600;
}

.cms-offer-card-cta {
  display: block;
  padding: 0.75rem;
  background-color: var(--cms-offer-accent, var(--carint-pink));
  color: #fff;
  text-align: center;
  text-decoration: none;
}

/* An offer's or trip's own page (FrontOffice/Shared/_DetailLayout.cshtml): the text on a grey band,
   the image and action in a white panel beside it, both in the page's accent colour. */
.cms-detail {
  --cms-detail-accent: var(--carint-pink);
  --cms-detail-cta: var(--carint-orange);
  padding: 3rem 0;
  color: var(--carint-grey-text);
  background-color: var(--carint-grey-surface);
  box-shadow: 0 0 0 100vmax var(--carint-grey-surface);
  clip-path: inset(0 -100vmax);
}

.cms-detail-trip {
  --cms-detail-accent: var(--carint-blue);
  --cms-detail-cta: var(--carint-blue);
}

.cms-ribbon.cms-detail-ribbon {
  display: inline-block;
  background-color: var(--cms-detail-accent);
}

.cms-detail-title {
  margin: 0.5rem 0 1.5rem;
  color: var(--cms-detail-accent);
  font-family: "LillyBelle", cursive;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 400;
  line-height: 1;
}

.cms-detail-subtitle {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.cms-detail-section {
  margin-top: 2rem;
}

.cms-detail-facts {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.5rem 1rem;
  margin: 1.5rem 0;
}

.cms-detail-facts dt {
  color: var(--cms-detail-accent);
}

.cms-detail-facts dd {
  margin: 0;
}

.cms-detail-panel {
  background-color: #fff;
}

.cms-detail-panel-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* A product photo on white: kept whole and clear of the panel's edges. */
.cms-detail-panel-image-product {
  padding: 1.25rem 1.25rem 0;
  object-fit: contain;
}

/* A missing or broken image's placeholder takes the accent of the card or page it stands in. */
.cms-trip-card {
  --cms-image-placeholder-accent: var(--carint-blue);
}

.cms-offer-card {
  --cms-image-placeholder-accent: var(--cms-offer-accent, var(--carint-pink));
}

.cms-detail {
  --cms-image-placeholder-accent: var(--cms-detail-accent, var(--carint-blue));
}

.cms-detail-panel-body {
  padding: 1.25rem;
}

.cms-faq-search {
  margin-bottom: 1.5rem;
}

.cms-contact-form {
  --cms-detail-cta: var(--carint-orange);
  max-width: 46rem;
}

/* Alignment moves the form as a whole; its heading stays lined up with the fields. */
.cms-contact-form.cms-align-center {
  margin-inline: auto;
  text-align: start;
}

.cms-contact-form.cms-align-end {
  margin-left: auto;
  text-align: start;
}

.cms-contact-form-tinted {
  padding: 2rem;
}

.cms-contact-form h3 {
  margin: 1.5rem 0 1rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.cms-contact-form textarea.form-control {
  height: 8rem;
}

/* The honeypot: off-screen rather than display:none, which some bots skip. */
.cms-contact-form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* A question as a white box with its chevron on the right, outlined in the site's blue once open. */
.front-office .cms-faq {
  margin-bottom: 0.75rem;
  padding: 0;
  border: 1px solid var(--bs-border-color);
  background-color: #fff;
}

.front-office .cms-faq[open] {
  border-color: var(--carint-blue);
}

.front-office .cms-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  list-style: none;
  transition: background-color 0.15s ease;
}

.front-office .cms-faq > summary:hover {
  background-color: var(--carint-grey-surface);
}

.front-office .cms-faq > summary::-webkit-details-marker {
  display: none;
}

.front-office .cms-faq > summary::after {
  flex-shrink: 0;
  font-family: "bootstrap-icons";
  content: "\F282";
  transition: transform 0.2s ease;
}

.front-office .cms-faq[open]:not(.is-closing) > summary::after {
  transform: rotate(180deg);
}

.front-office .cms-faq > :not(summary) {
  padding-inline: 1.25rem;
}

.front-office .cms-faq > :last-child:not(summary) {
  padding-bottom: 1rem;
}

.cms-detail-panel-heading {
  font-family: "LillyBelle", cursive;
  font-size: 2rem;
}

.cms-detail-cta {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 1rem;
  border: 0;
  background-color: var(--cms-detail-cta);
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.cms-detail-cta:hover,
.cms-detail-cta:focus-visible {
  color: #fff;
  filter: brightness(0.92);
}

.cms-detail-code {
  margin-top: 1rem;
  font-weight: 700;
}

/* Alignment reaches the heading/subtitle through inherited text-align already; a card grid needs
   its own rule, since a Bootstrap row's columns fill left-to-right regardless of text-align. */
.cms-trip-list.cms-align-center .cms-trip-cards,
.cms-offer-list.cms-align-center .row {
  justify-content: center;
}

.cms-trip-list.cms-align-end .cms-trip-cards,
.cms-offer-list.cms-align-end .row {
  justify-content: end;
}

/* The old site's "read more" link: grey text, the arrow alone in the brand blue. */
.cms-link-arrow,
.site-menu .cms-link-list > p > a {
  display: inline-block;
  margin-top: 1rem;
  color: var(--carint-grey-text);
  font-weight: 600;
  text-decoration: none;
}

.cms-link-arrow:hover,
.cms-link-arrow:focus-visible,
.site-menu .cms-link-list > p > a:hover,
.site-menu .cms-link-list > p > a:focus-visible {
  text-decoration: underline;
}

/* A drawn arrow instead of cms.css's text glyph, whose head stays tiny at any size; the `a` outranks
   that rule, which loads later. Inline-block, so it can slide and stays out of the underline. */
a.cms-link-arrow::after,
.site-menu .cms-link-list > p > a::after {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.05em;
  margin-left: 0.5em;
  background-color: var(--carint-blue);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8h18M12 1l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  vertical-align: -0.2em;
}

.cms-link-arrow:hover::after,
.cms-link-arrow:focus-visible::after,
.site-menu .cms-link-list > p > a:hover::after,
.site-menu .cms-link-list > p > a:focus-visible::after {
  animation: cms-link-arrow-nudge 1s ease-in-out;
}

@keyframes cms-link-arrow-nudge {
  0% { transform: translateX(0); }
  33% { transform: translateX(1em); }
  48% { transform: translateX(0); }
  62%, 70% { transform: translateX(0.5em); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cms-link-arrow:hover::after,
  .cms-link-arrow:focus-visible::after,
  .site-menu .cms-link-list > p > a:hover::after,
  .site-menu .cms-link-list > p > a:focus-visible::after {
    animation: none;
  }
}

.cms-trip-list-tinted .cms-link-arrow {
  color: #fff;
}

.cms-trip-list-tinted a.cms-link-arrow::after {
  background-color: #fff;
}

/* The centred button under a band, as the old site's outlined "Naar het voordeeloverzicht". */
.cms-page-content .cms-cta .btn-primary,
.cms-see-all .btn-primary {
  min-width: 200px;
  padding: 1rem 2rem;
  border: 2px solid var(--carint-blue-soft);
  border-radius: 0;
  background-color: transparent;
  color: var(--carint-blue-soft);
  font-size: 0.9375rem;
  font-weight: 600;
}

.cms-page-content .cms-cta .btn-primary:hover,
.cms-page-content .cms-cta .btn-primary:focus-visible,
.cms-see-all .btn-primary:hover,
.cms-see-all .btn-primary:focus-visible {
  background-color: var(--carint-blue-soft);
  color: #fff;
}

.cms-split-text .cms-block-links > .btn-primary {
  --bs-btn-bg: var(--carint-blue);
  --bs-btn-border-color: var(--carint-blue);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--carint-blue-hover);
  --bs-btn-hover-border-color: var(--carint-blue-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--carint-blue-hover);
  --bs-btn-active-border-color: var(--carint-blue-hover);
}

.cms-split-text .cms-block-links > .btn-outline-primary {
  --bs-btn-color: var(--carint-blue);
  --bs-btn-border-color: var(--carint-blue);
  --bs-btn-hover-bg: var(--carint-blue);
  --bs-btn-hover-border-color: var(--carint-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--carint-blue);
  --bs-btn-active-border-color: var(--carint-blue);
}

.cms-see-all {
  margin-top: 1.5rem;
}

.cms-see-all .btn-primary::after {
  content: " \2192";
}

.cms-trip-list-tinted .cms-see-all .btn-primary {
  border-color: #fff;
  color: #fff;
}

.cms-trip-list-tinted .cms-see-all .btn-primary:hover,
.cms-trip-list-tinted .cms-see-all .btn-primary:focus-visible {
  background-color: #fff;
  color: var(--carint-blue);
}

/* The section-divider ribbon (Blocks/_RibbonLabel.cshtml). */
.cms-ribbon-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
}

.cms-ribbon-line {
  flex: 1 1 auto;
  border-top: 1px solid var(--carint-grey-text);
}

/* A paint stroke: the tint fills the element and the mask cuts it to the brush shape. */
.cms-ribbon {
  flex: 0 1 auto;
  min-width: min(14rem, 100%);
  padding: 0.75rem 2.5rem;
  background-color: var(--carint-pink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  mask: url("/images/paint-smudge.svg") center / 100% 100% no-repeat;
}

@font-face {
  font-family: "LillyBelle";
  src: url("/fonts/lillybelle_2-webfont.woff2") format("woff2"),
    url("/fonts/lillybelle_2-webfont.woff") format("woff"),
    url("/fonts/lillybelle_2-webfont.ttf") format("truetype");
}

/* The [bracketed] part of a block title (TitleHighlightExtensions), as in the old site's "SamenUit!". */
.cms-title-highlight {
  color: var(--carint-grey-text);
}

.cms-title-font-lillybelle {
  font-family: "LillyBelle", cursive;
}

/* A multi-line remark on a detail page keeps the line breaks it was typed with. */
.text-pre-line {
  white-space: pre-line;
}

/* A request or response body on the "Afas koppeling" tab: indented JSON, scrolled when long. */
.afas-action-group {
  min-width: 4rem;
}

.afas-payload {
  max-height: 24rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.8rem;
}

/* --- Bellijst ---------------------------------------------------------------------------------
   The call-list tab of a trip date (CallList/_CallList.cshtml, _CallPanel.cshtml) and the
   registration's Gesprekken tab. Bootstrap's cards and tables do the rest. */

/* What a card says while it has nothing to show yet: an icon and one line, centred, in the muted
   colour the dashed "add a bus" card uses - so an empty tab still reads as laid out. */
.call-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 0;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  text-align: center;
}

.call-empty .bi {
  font-size: 1.75rem;
}

/* A thin line between the notices of a trip date, across the whole card. */
.call-divided > li + li {
  border-top: 1px solid var(--bs-border-color-translucent);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

/* A short line between the entries of one registration - its notices, its call history - so it
   does not read as one of the lines that divide the page itself. */
.call-separated > li + li::before {
  content: "";
  display: block;
  width: 1rem;
  margin: 0.6rem 0;
  border-top: 1px solid var(--bs-border-color-translucent);
}

.call-progress {
  height: 0.5rem;
}

.call-list-table tbody tr {
  cursor: pointer;
}

/* The outer cells take the card header's 1rem instead of AdminLTE's 1.5rem for a table in a
   .card-body.p-0, so the claim buttons end where the header's do. */
.card-body.p-0 .table.call-list-table > * > tr > :first-child {
  padding-inline-start: 1rem;
}

.card-body.p-0 .table.call-list-table > * > tr > :last-child {
  padding-inline-end: 1rem;
}

/* The start page's Kendo charts draw into whatever height their element has. */
.dashboard-chart {
    height: 320px;
}

/* Taller than AdminLTE's fixed 3.5rem, so the logo gets room above and below. */
.sidebar-brand {
  height: auto;
  padding-block: 1.25rem;
}

.sidebar-brand .brand-logo {
  height: 2.5rem;
  width: auto;
}

/* Every value is at least one line high, empty or a badge, so the next field does not move up against it. */
dl.row > dd {
  min-height: calc(1em * var(--bs-body-line-height));
}

/* The member site header, global for the same reason as its footer. */
.site-header,
.site-menu {
  --site-header-text: var(--carint-grey-heading);
  --site-header-accent: var(--carint-blue);
  --site-header-current: var(--carint-yellow);
  background-color: #fff;
}

.site-header {
  margin-bottom: 1rem;
}

header.site-header a,
.site-menu .site-topbar a,
.site-menu .site-header-main a,
.site-menu .cms-link-list a,
.site-menu .cms-icon-links a {
  color: inherit;
  text-decoration: none;
}

.site-topbar {
  background-color: var(--carint-grey-strip);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.site-topbar .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 1.25rem;
  min-height: 2.4rem;
}

.site-topbar .bi {
  color: var(--site-header-accent);
  font-size: 1.1rem;
  margin-right: 0.5rem;
}

.site-topbar a:hover,
.site-topbar a:focus {
  text-decoration: underline;
}

.site-topbar-link::before {
  content: "\203A";
  color: var(--site-header-accent);
  margin-right: 0.5rem;
}

.site-header-main {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  color: var(--site-header-text);
}

.site-header-brand {
  min-width: 0;
}

.site-header-brand .brand-logo {
  height: 3rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 575.98px) {
  .site-header-main {
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.site-header-nav {
  gap: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* The template's header blocks: their link lists read as the menu bar. */
.site-header-nav ul {
  display: flex;
  gap: 1rem;
  margin: 0;
}

.site-header-nav h2 {
  display: none;
}

header.site-header .site-header-nav a {
  position: relative;
  display: inline-block;
  padding-bottom: 0.4em;
}

/* The bar grows out of the centre on hover and stays for the page you are on. */
header.site-header .site-header-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background-color: var(--site-header-current);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

header.site-header .site-header-nav a:hover,
header.site-header .site-header-nav a:focus,
header.site-header .site-header-nav a[aria-current="page"] {
  color: var(--site-header-current);
}

header.site-header .site-header-nav a:hover::after,
header.site-header .site-header-nav a:focus::after,
header.site-header .site-header-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-search {
  align-items: center;
  flex: 1 1 18rem;
  max-width: 19rem;
  margin-left: auto;
  padding: 0 1rem;
  background-color: var(--carint-grey-surface);
  border: 1px solid var(--carint-grey-border);
  border-radius: 2rem;
}

.site-search .bi {
  color: var(--site-header-accent);
}

.site-search input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--site-header-text);
}

.site-search:focus-within {
  border-color: var(--site-header-accent);
}

.site-header-actions {
  display: flex;
  gap: 0.75rem;
  margin-left: auto;
}

.site-search + .site-header-actions {
  margin-left: 0;
}

.site-header-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 5rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--site-header-text);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

.site-header-action .bi {
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.site-header-action:hover .bi,
.site-header-action:focus .bi {
  color: var(--site-header-accent);
}

/* Full screen, sliding in from the right while the page slides out to the left. */
.site-page {
  transition: transform 0.5s ease;
}

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 1045;
  overflow-y: auto;
  color: var(--site-header-text);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s ease, visibility 0s 0.5s;
}

html.site-menu-open {
  overflow: hidden;
}

html.site-menu-open .site-page {
  transform: translateX(-100%);
}

html.site-menu-open .site-menu {
  transform: none;
  visibility: visible;
  transition: transform 0.5s ease;
}

.site-menu.site-menu-preview {
  position: static;
  transform: none;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .site-page,
  .site-menu,
  html.site-menu-open .site-menu {
    transition: none;
  }
}

.site-menu-body {
  padding-bottom: 3rem;
}

.site-menu .site-search {
  max-width: none;
  margin: 0 0 1.5rem;
}

.site-search.site-search-page {
  max-width: none;
  margin: 0 0 1.5rem;
  padding: 0;
  background-color: #fff;
}

.site-search-page .bi {
  padding: 0.55rem 0.9rem;
  color: var(--carint-blue);
  -webkit-text-stroke: 0.75px currentcolor;
  border-right: 1px solid var(--carint-grey-border);
}

.site-search-results-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 16.5rem));
  gap: 1.5rem 1.25rem;
}

.site-menu nav h2 {
  margin-bottom: 0.5rem;
  color: var(--site-header-text);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}

.site-menu nav .row > * > * + * {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--carint-grey-border);
}

/* Menu items built as one link list each still read as a single menu. */
.site-menu nav .row > * > .cms-link-list + .cms-link-list {
  padding-top: 0;
  border-top: 0;
}

.site-menu .cms-link-list > ul + p > a {
  margin-top: 0;
}

.site-menu .cms-icon-links a::before {
  color: var(--site-header-accent);
  font-size: 1.25rem;
  vertical-align: -0.2em;
}

.site-menu .cms-icon-links a:hover,
.site-menu .cms-icon-links a:focus {
  color: var(--site-header-accent);
}

.site-menu .cms-social-links a {
  width: 3rem;
  height: 3rem;
  background-color: var(--site-header-accent);
  color: #fff;
}

.site-menu .cms-social-links a::before {
  font-size: 1.6rem;
}

.site-menu .cms-social-links a:hover,
.site-menu .cms-social-links a:focus {
  background-color: var(--site-header-text);
}

/* The call to action's own py-4 would drop its title below the other columns' headings. */
.site-menu .cms-cta {
  padding-top: 0 !important;
}

.site-menu .cms-cta .btn {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  padding: 1rem;
  border: 0;
  border-radius: 0;
  background-color: var(--site-header-accent);
  color: #fff;
  font-size: inherit;
}

.site-menu .cms-cta .btn:hover,
.site-menu .cms-cta .btn:focus-visible {
  background-color: var(--site-header-text);
}

.site-menu .cms-link-list > ul > li > a {
  font-weight: 700;
  text-transform: uppercase;
}

.site-menu .cms-link-list > ul > li + li {
  margin-top: 1rem;
}

.site-menu .cms-link-list ul ul {
  margin: 0.25rem 0 0;
  padding-left: 0.4rem;
}

/* Under a heading a list reads as a sublist, like the links nested under a menu item. */
.site-menu .cms-link-list > h2 ~ ul > li > a {
  font-weight: 400;
  text-transform: none;
}

.site-menu .cms-link-list > h2 ~ ul > li + li {
  margin-top: 0.25rem;
}

.site-menu .cms-link-list li li > a::before,
.site-menu .cms-link-list > h2 ~ ul > li > a::before {
  content: "\203A";
  margin-right: 0.5rem;
}

.site-menu .cms-link-list ul a:hover,
.site-menu .cms-link-list ul a:focus,
.site-menu .cms-link-list ul a[aria-current="page"] {
  color: var(--site-header-accent);
}

/* The member site footer, global because its links come from tag helpers. */
.site-footer {
  --site-footer-text: var(--carint-grey-on-dark);
  --site-footer-accent: var(--carint-blue);
  color: var(--site-footer-text);
  font-size: 0.9rem;
}

footer.site-footer a {
  color: inherit;
  text-decoration: none;
}

footer.site-footer a:hover,
footer.site-footer a:focus {
  color: #fff;
  text-decoration: underline;
}

.site-footer ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.site-footer-main {
  background-color: var(--carint-grey-footer);
  padding: 2.25rem 0;
}

/* The template's footer rows. */
.site-footer-main h2 {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}

.site-footer-main .cms-link-list li {
  padding-left: 1.1rem;
  position: relative;
}

.site-footer-main .cms-link-list li::before {
  content: "\203A";
  position: absolute;
  left: 0.3rem;
}

.site-footer-main .cms-icon-links a::before {
  color: var(--site-footer-accent);
}

footer.site-footer .site-footer-main p a {
  color: #fff;
  font-weight: 700;
}

.site-footer .cms-social-links a {
  background-color: var(--carint-grey-footer-light);
  color: #fff;
}

.site-footer .cms-social-links a:hover,
.site-footer .cms-social-links a:focus {
  background-color: var(--site-footer-accent);
}

.site-footer-bottom {
  background-color: var(--carint-grey-strip);
  padding: 1.5rem 0 1rem;
  text-align: center;
}

/* A bottom bar as the footer's last row runs into the credits strip, so the two read as one bar. */
.site-footer-main:has(.cms-row.cms-bottom-bar:last-child) {
  padding-bottom: 0;
}

.site-footer .cms-row.cms-bottom-bar {
  width: 100vw;
  position: relative;
  left: 50%;
  margin: 2.25rem 0 0 -50vw;
  padding-top: 1.5rem;
  background-color: var(--carint-grey-strip);
  font-weight: 700;
}

.site-footer .cms-row.cms-bottom-bar .cms-link-list li {
  padding-left: 0;
}

.site-footer .cms-row.cms-bottom-bar .cms-link-list li::before {
  content: none;
}

.site-footer-main:has(.cms-row.cms-bottom-bar:last-child) + .site-footer-bottom {
  padding-top: 0.6rem;
}

.site-footer-credits {
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.75;
}

/* --- Member pages outside the CMS --- */

/* A page carrying this title takes the CMS pages' text colour; it and a detail page get the
   site's square buttons, light blue there and in the offer's or trip's own accent here. */
.site-page-title {
  margin-bottom: 1.5rem;
  color: var(--carint-blue);
  font-family: "LillyBelle", cursive;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 400;
  line-height: 1;
}

main:has(.site-page-title) {
  --site-button-accent: var(--carint-blue);
  --cms-detail-cta: var(--carint-orange);
  --bs-body-color: var(--carint-grey-text);
  color: var(--carint-grey-text);
}

.cms-detail {
  --site-button-accent: var(--cms-detail-accent);
}

:is(main:has(.site-page-title), .cms-detail) .btn {
  --site-button-accent-dark: color-mix(in srgb, var(--site-button-accent) 85%, #000);
  --bs-btn-border-radius: 0;
  --bs-btn-font-weight: 600;
}

:is(main:has(.site-page-title), .cms-detail) .btn-primary {
  --bs-btn-bg: var(--site-button-accent);
  --bs-btn-border-color: var(--site-button-accent);
  --bs-btn-hover-bg: var(--site-button-accent-dark);
  --bs-btn-hover-border-color: var(--site-button-accent-dark);
  --bs-btn-active-bg: var(--site-button-accent-dark);
  --bs-btn-active-border-color: var(--site-button-accent-dark);
  --bs-btn-disabled-bg: var(--site-button-accent);
  --bs-btn-disabled-border-color: var(--site-button-accent);
}

:is(main:has(.site-page-title), .cms-detail) .btn-outline-primary {
  --bs-btn-color: var(--site-button-accent);
  --bs-btn-border-color: var(--site-button-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--site-button-accent);
  --bs-btn-hover-border-color: var(--site-button-accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--site-button-accent);
  --bs-btn-active-border-color: var(--site-button-accent);
  --bs-btn-disabled-color: var(--site-button-accent);
  --bs-btn-disabled-border-color: var(--site-button-accent);
}

:is(main:has(.site-page-title), .cms-detail) .btn-link {
  --bs-btn-color: var(--site-button-accent);
  --bs-btn-hover-color: var(--site-button-accent-dark);
}

:is(main:has(.site-page-title), .cms-detail) .form-check-input:checked {
  border-color: var(--site-button-accent);
  background-color: var(--site-button-accent);
}

.site-page-link,
.front-office .cms-faq > :not(summary) a {
  color: var(--carint-yellow);
  font-weight: 600;
  text-decoration: none;
}

.site-page-link:hover,
.site-page-link:focus-visible,
.front-office .cms-faq > :not(summary) a:hover,
.front-office .cms-faq > :not(summary) a:focus-visible {
  color: var(--carint-yellow);
  text-decoration: underline;
}

/* A next-step link on the account pages: bold text behind a blue chevron. */
.site-chevron-link {
  display: inline-block;
  color: var(--carint-grey-heading);
  font-weight: 600;
  text-decoration: none;
}

.site-chevron-link::before {
  content: "\203A";
  margin-right: 0.6rem;
  color: var(--carint-blue);
}

.site-chevron-link:hover,
.site-chevron-link:focus-visible {
  color: var(--carint-grey-heading);
  text-decoration: underline;
}

/* --- Cart --- */

:root {
  --cart-accent: var(--carint-blue);
}

.site-header-cart {
  position: relative;
  text-decoration: none;
}

.site-header-cart-count {
  position: absolute;
  top: -0.25rem;
  right: 0.25rem;
  min-width: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 1rem;
  background-color: var(--site-header-current);
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25rem;
}

.cart-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.cart-steps li {
  flex: 1 1 10rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 3px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.cart-steps li.is-done {
  border-bottom-color: color-mix(in srgb, var(--cart-accent) 45%, transparent);
  color: var(--bs-body-color);
}

.cart-steps a {
  display: block;
  margin: -0.6rem -0.75rem;
  padding: 0.6rem 0.75rem;
  color: inherit;
  text-decoration: none;
}

.cart-steps a:hover,
.cart-steps a:focus-visible {
  color: var(--cart-accent);
  background-color: color-mix(in srgb, var(--cart-accent) 8%, transparent);
}

.cart-steps li.is-current {
  border-bottom-color: var(--cart-accent);
  color: var(--bs-body-color);
  font-weight: 700;
}

.cart-cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 0;
  background-color: var(--cart-accent);
  color: #fff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.cart-cta:hover,
.cart-cta:focus-visible {
  color: #fff;
  filter: brightness(0.92);
}

.cart-cta:disabled,
.cart-cta.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.cart-hold {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--cart-accent);
  background-color: color-mix(in srgb, var(--cart-accent) 10%, var(--bs-body-bg));
}

.cart-hold.is-lapsed {
  border-left-color: var(--bs-warning);
  background-color: var(--bs-warning-bg-subtle);
}

.cart-hold-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.cart-hold-time {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-hold .progress {
  height: 0.4rem;
}

.cart-hold .progress-bar {
  background-color: var(--cart-accent);
}

.cart-person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.cart-person-name {
  flex: 1 1 12rem;
}

.cart-chip {
  display: inline-block;
  min-width: 10rem;
  padding: 0.2rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  text-align: center;
}

.cart-chip-held {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.cart-chip-waitlisted,
.cart-chip-holdlapsed {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.cart-chip-alreadyregistered,
.cart-chip-notgoing {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
}

.site-page-muted {
  background-color: var(--carint-grey-surface);
}

.site-page-muted .site-content {
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
}

.cart-summary-row > :last-child {
  flex-shrink: 0;
  white-space: nowrap;
}

.cart-summary-total {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bs-border-color);
  font-weight: 700;
}

.cart-payment-option {
  margin-bottom: 0.5rem;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 1px solid var(--bs-border-color);
}

.cart-payment-option:has(.form-check-input:checked) {
  border-color: var(--cart-accent);
  background-color: color-mix(in srgb, var(--cart-accent) 8%, var(--bs-body-bg));
}

.cart-payment-option .form-check-label {
  cursor: pointer;
}

.cart-outcome-registered {
  color: var(--bs-success-text-emphasis);
}

.cart-outcome-waitlisted {
  color: var(--bs-warning-text-emphasis);
}

.cart-outcome-alreadyregistered,
.cart-outcome-notgoing {
  color: var(--bs-secondary-color);
}

/* --- Back-office login --- */

.login-page.login-animated {
  --login-bg-from: #eaf8fd;
  --login-bg-to: #fdf4e3;
  --login-blob-opacity: 0.55;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--login-bg-from), var(--login-bg-to));
}

[data-bs-theme="dark"] .login-page.login-animated {
  --login-bg-from: #14262e;
  --login-bg-to: #2b2418;
  --login-blob-opacity: 0.35;
}

.login-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.login-blob {
  position: absolute;
  width: 45vmax;
  height: 45vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: var(--login-blob-opacity);
  animation: login-drift 28s ease-in-out infinite alternate;
}

.login-blob-blue {
  top: -15vmax;
  left: -10vmax;
  background: var(--carint-blue);
}

.login-blob-orange {
  right: -12vmax;
  bottom: -18vmax;
  background: #f3b236;
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}

.login-blob-light {
  top: 30%;
  left: 45%;
  width: 30vmax;
  height: 30vmax;
  background: #9fdcf2;
  animation-duration: 22s;
}

@keyframes login-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vmax, 6vmax) scale(1.15); }
  100% { transform: translate(-6vmax, 10vmax) scale(0.9); }
}

.login-bubble {
  position: absolute;
  bottom: -40px;
  left: var(--left);
  width: var(--size);
  height: var(--size);
  border: 2px solid rgba(var(--carint-blue-rgb), 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: login-rise var(--duration) linear var(--delay) infinite;
}

@keyframes login-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(18px, -55vh); }
  90% { opacity: 1; }
  100% { transform: translate(-12px, -110vh); opacity: 0; }
}

.login-page.login-animated .login-box {
  position: relative;
  z-index: 1;
}

.login-card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3rem rgba(34, 60, 80, 0.18);
  animation: login-card-in 0.6s ease-out both;
}

.login-card .login-card-body {
  padding: 2rem;
  border-radius: 1rem;
}

.login-card .login-logo {
  margin: 0 0 1.5rem;
  text-align: center;
}

.login-card .login-logo img {
  max-width: 100%;
  height: auto;
}

.login-card .btn-primary {
  --bs-btn-bg: var(--carint-blue);
  --bs-btn-border-color: var(--carint-blue);
  --bs-btn-hover-bg: var(--carint-blue-hover);
  --bs-btn-hover-border-color: var(--carint-blue-hover);
  --bs-btn-active-bg: var(--carint-blue-hover);
  --bs-btn-active-border-color: var(--carint-blue-hover);
}

.login-logo-dark,
[data-bs-theme="dark"] .login-logo-light {
  display: none;
}

[data-bs-theme="dark"] .login-logo-dark {
  display: inline;
}

@keyframes login-card-in {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .login-blob,
  .login-bubble,
  .login-card {
    animation: none;
  }

  .login-bubble {
    display: none;
  }
}

/* Membership card: the floating button and the card in its pop-up. */
.membership-card-button {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  background-color: var(--carint-yellow);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .2);
  transition: background-color .2s ease, scale .2s ease;
  animation: membership-card-pulse 1.2s ease-in-out 1s 1;
}

.membership-card-button:hover,
.membership-card-button:focus-visible {
  background-color: #e5a800;
  color: #fff;
  scale: 1.05;
}

@keyframes membership-card-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .membership-card-button,
  .membership-card-button:hover,
  .membership-card-button:focus-visible {
    animation: none;
    scale: none;
  }
}

.membership-card-button .bi {
  font-size: 1.25rem;
}

html.site-menu-open .membership-card-button {
  display: none;
}

.membership-card-sides {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1rem;
  max-width: 26rem;
  margin: 0 auto;
}

.membership-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  border-radius: .75rem;
  overflow: hidden;
  background-color: #fff;
}

.membership-card-logo {
  padding: 1rem;
}

.membership-card-logo img {
  width: 60%;
  height: auto;
}

.membership-card-band {
  display: flex;
}

.membership-card-stripe {
  flex: 1;
  background-color: var(--carint-blue);
}

.membership-card-year {
  padding: .25rem 1rem;
  background-color: #474c56;
  color: #fff;
  font-weight: 700;
}

.membership-card-body {
  display: grid;
  flex: 1;
  align-content: start;
  grid-template-columns: 6.5rem 1fr;
  gap: .25rem 1rem;
  margin: 0;
  padding: 1.25rem 1rem 1rem;
  background-color: var(--carint-yellow);
}

.membership-card-body dt {
  color: #fff;
  font-style: italic;
  font-weight: normal;
}

.membership-card-body dd {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.membership-card-housemate {
  display: block;
  font-size: .875rem;
  font-weight: normal;
}

.membership-card-wallets-intro {
  margin: 1.5rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--carint-grey-border);
  color: var(--carint-grey-text);
}

.membership-card-wallets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.5rem;
}

.wallet-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-width: 11rem;
  padding: .45rem 1.1rem .45rem .9rem;
  border: 1px solid #a6a6a6;
  background-color: #000;
  color: #fff;
  line-height: 1.15;
  text-decoration: none;
}

.wallet-badge:hover,
.wallet-badge:focus-visible {
  background-color: #1f1f1f;
  color: #fff;
}

.wallet-badge-google {
  border-color: #747775;
  border-radius: 999px;
}

.wallet-badge-apple {
  border-radius: .6rem;
}

.wallet-badge-text {
  display: flex;
  flex-direction: column;
}

.wallet-badge-text small {
  font-size: .75rem;
}

.wallet-badge-text strong {
  font-size: 1.2rem;
  font-weight: 500;
}

.membership-card-back {
  justify-content: space-between;
  padding: 1rem;
  background-color: var(--carint-yellow);
}

.membership-card-back-logo {
  display: block;
  width: 30%;
  height: auto;
  margin: 0 0 .75rem auto;
}

.membership-card-back p {
  margin-bottom: .5rem;
  font-size: .8125rem;
}

.membership-card-back .membership-card-contact {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}

.application-log-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* The confirm dialog of a data-confirm form, in the square blue buttons of the member pages. */
#confirm-modal .modal-content {
  border: 0;
  border-top: 4px solid var(--carint-blue);
  border-radius: 0;
}

#confirm-modal .modal-header,
#confirm-modal .modal-footer {
  border: 0;
}

#confirm-modal .modal-title {
  color: var(--carint-grey-heading);
  font-weight: 700;
}

#confirm-modal .modal-body {
  padding-top: 0;
  color: var(--carint-grey-text);
}

#confirm-modal .btn {
  --bs-btn-border-radius: 0;
  --bs-btn-font-weight: 600;
  min-width: 8rem;
}

#confirm-modal .btn-primary {
  --bs-btn-bg: var(--carint-blue);
  --bs-btn-border-color: var(--carint-blue);
  --bs-btn-hover-bg: var(--carint-blue-hover);
  --bs-btn-hover-border-color: var(--carint-blue-hover);
  --bs-btn-active-bg: var(--carint-blue-hover);
  --bs-btn-active-border-color: var(--carint-blue-hover);
}

#confirm-modal .btn-outline-secondary {
  --bs-btn-color: var(--carint-grey-text);
  --bs-btn-border-color: var(--carint-grey-border);
  --bs-btn-hover-color: var(--carint-grey-heading);
  --bs-btn-hover-bg: var(--carint-grey-surface);
  --bs-btn-hover-border-color: var(--carint-grey-border);
  --bs-btn-active-color: var(--carint-grey-heading);
  --bs-btn-active-bg: var(--carint-grey-surface);
  --bs-btn-active-border-color: var(--carint-grey-border);
}