@import url(pico.css);
@import url(/static/leaflet/leaflet.css);

.landing {
  text-align: center;
}

.mirrored-text {
  display: inline-block;
  transform: scaleX(-1);
}

/* Page header for breadcrumbs and actions */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pico-spacing);
  margin-bottom: var(--pico-spacing);
}

.page-actions > nav + :is(a[role="button"], button, [role="group"]) {
  width: auto;
}

/* User avatar in the navigation */
.nav-avatar {
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: var(--pico-nav-element-spacing-horizontal); 
  border: var(--pico-border-width) solid var(--pico-secondary);
  box-shadow: var(--pico-box-shadow);
}

/* Trip card layout */
.trip-card-grid {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: var(--pico-spacing);
}

.trip-card-grid > hgroup {
  margin-bottom: 0;
}

.trip-card-actions {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

.trip-card-actions > form {
  display: inline;
}

.trip-card-actions > button,
.trip-card-actions > form > button {
  margin-bottom: 0;
}

.trip-card-actions > button:first-child,
.trip-card-actions > a[role="button"]:first-child {
  margin-right: var(--pico-nav-element-spacing-horizontal);
}

[role=group] > button {
  white-space: nowrap;
}

.leaflet-container :is([role=button], button, input[type=button], input[type=reset], input[type=submit]) {
  --pico-background-color: none;
  --pico-border-color: none;
  padding: 0px 0px;
}

.leaflet-container :is([role=button]:is([aria-current], :hover, :active, :focus), button:is([aria-current], :hover, :active, :focus), input[type=button]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=submit]:is([aria-current], :hover, :active, :focus)) {
  --pico-background-color: none;
  --pico-border-color: none;
}